Archive for the 'As2 to As3 Baby Steps Series' Category

AS2 to AS3 Baby Steps - Part 6 - Attaching symbols on/to the stage

Reynaldo December 3rd, 2007

In AS2, symbols that were on the stage were already “added to the stage” and you really didn’t have to do anything about it. It was already there. Well, in AS3 you really can’t interact with the symbol already on stage unless it’s added to the Display List.

Linking symbols from the library in AS3 also differs from what we are used to seeing in AS2. Here’s what were used to:

1
2
3
var mcNewClip:MovieClip = this.createEmptyMovieClip("mcNewClip", 10);
var mcAttachedClip:MovieClip = this.mcNewClip.attachMovie("mcLibClip", 20);
trace(this.mcAlreadyOnStasge)

This is how it looks in AS3:

1
2
3
4
var mcNewClip:Sprite = new Sprite();
var mcAttachedClip:AttachedClip = new AttachedClip();
mcNewClip.addChild(mcAttachedClip);
addChild(mcAlreadyOnStage);

For the clip in the library (mcAttachedClip), in the linkage id properties, I would have linked it to a AttachedClip Class and left the base class as flash.display.MovieClip. Since we haven’t created an AttachClip Class, flash would create one for us (with no code). We can create a AttachClip Class and put functionality into it if we wated to, but in this cass all we want is for th eclip to be visible.

AS2 to AS3 Baby Steps - Part 5 - Parsing XML

Reynaldo November 13th, 2007

Now that Flash AS3 uses E4X as its core XML engine, things have REALLY changed from that old childNode stuff we were used to in AS2. For starters, parsing XML is now much more clear and straight forward.

It was a huge pain parsing xml in AS2. You would have to follow along the actual xml file to know what each node or childNode represented. But not any more! ( kinda ;) )

Sample xml file:

1
2
3
4
5
6
7
8
< profiles >
    < employee file="files/emp1.png" id="1" >
        < name >Reynaldo Columna< /name >
    < /employee >
    < employee file="files/emp2.png" id="2" >
        < name >Nicole Columna< /name >
    < /employee >
< /profiles >

This is how we used to parse the file in AS2:

1
2
3
4
5
6
7
8
9
10
11
var xmlData:XML = new XML();xmlData.ignoreWhite = true;
 
xmlData.onLoad = parseXMLData;
 
xmlData.load("employees.xml");function parseXMLData():Void
{
  var strEmployee1:String = xmlData.firstChild.childNodes[0].attributes.file;
  var strName1:String = xmlData.firstChild.childNodes[0].childNodes[0].firstChild;
  trace("Path to picture of first employee: " + strEmployee1);
  trace("Name of the first employee: " + strName1);
}

And now this is the new way of parsing in AS3

1
2
3
4
5
6
7
8
9
10
11
12
var strXML:String = "employees.xml";
var xmlLoader:URLLoader = new URLLoader();xmlLoader.addEventListener(Event.COMPLETE, parseXMLData);
xmlLoader.load(new URLRequest(strXML));
 
function parseXMLData ($event:Event):void
{
  var xmlData:XML = new XML(xmlLoader.profiles);
  var strEmployee1:String = xmlData.employee[0].@file;
  var strName1:String = xmlData.employee[0].name;
  trace("Path to picture of first employee: " + strEmployee1);
  trace("Name of the first employee: " + strName1);
}

Lets go through the code briefly. First off you can notice that we used the URLLoader class discussed earlier in this series to load the xml file. We then subscribe to the COMPLETE event fired once the xml file is loaded and run the parseXMLData function, so far so good. Now we load the file witht eh help of the URLRequest class also discussed earlier.

Now comes the parsing part. We need to take the loaded information and tell flash that this data is xml data, hence we plug it into a “new XML()” now we can run through the data as if it was on object holding and array of objects much like XPath.

There’s much more to it that I will discuss in a later more advanced post never the less, play around with it!

Happy coding!

As2 to As3 Baby Steps - Part 4 - Loading files

Reynaldo November 9th, 2007

The MovieClipLoader class in AS2 has now been replaced by the new and improved Loader class in AS3. Something key to keep in mind is that the Loader Class itself does not dispatch any events (something I learned the hard way, ;) ). Instead the events are fired from Loader.contentLoaderInfo.

This is how you would load a class using MovieClipLoader in AS2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var mcLoader:MovieClipLoader = new MovieClipLoader();
var objListener:Object = new Object();
var mcLoaderClip:MovieClip = this.createEmptyMovieClip("mcLoaderClip", this.getNextHighestDepth());
 
objListener.onLoadInit = function($target:MovieClip):Void
{
   trace($target + " loaded.");
};
 
objListener.onLoadProgress = function($target:MovieClip, $bytesLoaded:Number, $bytesTotal:Number):Void
{
  trace(Math.round(($bytesLoaded / $bytesTotal) * 100) + " percent loaded so far.");
};
 
mcLoader.addListener(objListener);
mcLoader.loadClip("someImgFile.jpg", mcLoaderClip);

Now here this is how we do it in AS3 using the new Loader class and the URLRequest Class mentioned in Baby Steps Part 1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var objLoader:Loader = new Loader();
var objFileToLoad:URLRequest = new URLRequest("someImgFile.jpg");
 
objLoader.load(objFileToLoad);
objLoader.contentLoaderInfo.addEventListener(Event.INIT, imageLoaded);
objLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
 
function imageLoaded($event:Event):void
{
   this.addChild($event.target.content);
   trace($event.target + " loaded.");
}
 
function showProgress($event:ProgressEvent):void
{
  trace(Math.round(($event.bytesLoaded / $event.bytesTotal) * 100) + " percent loaded so far...");
}

There’s a reason why I chose to listen to the INIT event and not the COMPLETE event once the file loaded. Basically, according to Adobe’s Live Docs referring to the Loader Class the COMPLETE event gets fired after the file has been loaded, but more specifically, the INIT event gets fires when the properties and/or methods of the loaded file are accessible.

Happy coding!

AS2 to AS3 Babysteps - Part 3 — Where’s attachMovie()?

Reynaldo November 4th, 2007

Well, as you may have noticed, attachMovie() has been removed from AS3. When I first saw this, the first thing that went through my mind was “how the heck am I gonna attach stuff from the library now?” lol. Never fear my fellow Actionscriptors, this is the way:

this.addChild(new myClip());

All this does is create an instance a movieclip in the library instance named myClip and adds it to the root’s (oops, meant timeline’s) displayList. This is definitely more object oriented than the old attachClip method.

Keep in mind that when clicking on “Export for Actionscript” on the linkage menu for the movieclip, flash is gonna warn you that a class for the symbol will be automatically created and it’ll use the symbols name as the class name.

Ok, that’s all cool and dandy, but now here comes the fun part! Actually making use of that class ;) , this is how:

 package{
    import flash.display.MovieClip;
    public class myClip extends MovieClip{
        public function myClip(){
            trace("Look Ma!!! Im coding in AS3");
        }
    }
 }

You have to save your class to the same folder where your fla file is, at least for this example.

Happy coding!! :)

AS2 to AS3 Baby Steps - Part 2 - Loading xml files

Reynaldo November 2nd, 2007

Loading xml files in AS3 requires the use of the new URLLoader class. The URLLoader Class downloads data from a URL as text or binary data. It basically downloads all the data before making it available to actionscript. The URLLoader would then subscribe to the Event.COMPLETE event and would call the parsing function once the event is fired.

This is what the code looks like:

var strXML:String = "myxmlfile.xml";
var objLoader:URLLoader = new URLLoader();
 
objLoader.addEventListener(Event.COMPLETE, parseXML);
objLoader.load(new URLrequest(strXML));
 
function parseXML($event:Event):void
{
     trace("Loading Complete, time to parse.");
}

Next »

  • Friends

  • Props

  • Donations

  • website counter
  • Archives

  • Feedburner

  • Saavn