Archive for the 'Beginner' Category

AS2 → AS3: Attaching Sounds From The Library

Download Example Files

AS3 no longer has an attachSound() method in the Sound object so attaching sounds from the library is a little different. It’s actually more intuitive (as usual with AS3) because it acts just like attaching bitmaps and other objects out of the library. Read more »

Tags: , , , ,

AS2 → AS3: Retrieving FlashVars

Download Example Files

I was recently working on the Image Slider that I posted here a couple of days ago and I realized I didn’t know how to access FlashVars in AS3. I quickly did a Google search and came up with the solution rather easily. Read more »

Tags: , , , ,

AS2 → AS3: Setting Masks Dynamically

Download Example Files

The more migrating I do to AS3 the more little nuances (at least nuances when I am migrating) I find. A lot of small little methods have been switched or moved into new classes and it’s always a bit of a drag to find them. Such is the case with the setMask() command. Read more »

Tags: , , , ,

AS2 → AS3: Depth Management

Download Example Files

Managing depths in AS2 was pretty cumbersome and annoying. You had to use methods like getNextHighestDepth() or keeping track of depths manually to make sure everything appeared on the stage properly and didn’t overwrite each other. Enter AS3 FTW! Read more »

Tags: , , , , ,

AS2 → AS3: Setting A MovieClip’s Color Dynamically

Download Example Files

The Color class has been deprecated since Flash 8 but was still usable in AS2 to set/get a MovieClip’s RGB values. That has since changed in AS3 and here is the new way of doing things. Read more »

Tags: , , , ,

AS2 → AS3: Scripted Tweening

Download Example Files
Download TweenLite

The Tween class hasn't changed at all since moving from AS2 to AS3, but there are some subtle differences in handling the events in it because of the new event architecture. Let's take a look at the code to tween a box diagonally down the stage in AS2:

Actionscript:
  1. import mx.transitions.Tween;
  2. import mx.transitions.easing.*;
  3.  
  4. var xTween:Tween = new Tween(box_mc, "_x", Regular.easeOut, 0, 500, .5, true);
  5. var yTween:Tween = new Tween(box_mc, "_y", Regular.easeOut, 0, 350, .5, true);
  6.  
  7. xTween.onMotionFinished = function():Void
  8. {
  9.     trace("Finished tweening the box.");
  10. };

Now here is that code in AS3:

Actionscript:
  1. import fl.transitions.Tween;
  2. import fl.transitions.easing.*;
  3. import fl.transitions.TweenEvent;
  4.  
  5. var xTween:Tween = new Tween(box_mc, "x", Regular.easeOut, 0, 500, .5, true);
  6. var yTween:Tween = new Tween(box_mc, "y", Regular.easeOut, 0, 350, .5, true);
  7.  
  8. xTween.addEventListener(TweenEvent.MOTION_FINISH, onMotionFinished);
  9.  
  10. function onMotionFinished($evt:TweenEvent):void
  11. {
  12.     trace("Finished tweening the box.");
  13. }

As you can see, not much has changed, and you still have to make a new tween for each property you want to tween. Enter TweenLite, Jack Doyle's AS3 lightweight tweening engine. I now use this for AS3 tweens and it gets the job done the way I like it. It's also nice that it's just one static call. Here is the code:

Actionscript:
  1. import fl.transitions.easing.*;
  2. import gs.TweenLite;
  3.  
  4. TweenLite.to(box_mc, .5, {x: 500, y: 350, ease: Regular.easeOut, onComplete: onMotionFinished});
  5.  
  6. function onMotionFinished():void
  7. {
  8.     trace("Finished tweening the box.");
  9. }

Much shorter code and the ability to tween multiple properties in one line!

Tags: , , , ,

AS2 → AS3: Using onReleaseOutside

Download Example Files

One of the things that is weird to figure out about AS3 is why a MOUSE_UP_OUTSIDE event (or something similar) was not included. This leaves for work-arounds that mimic that behavior and this is one way I've seen it done (probably not the only way, but one of the ways to skin a cat). This is the AS2 version:

Actionscript:
  1. box_mc.onPress = function():Void
  2. {
  3.     trace("PRESSED");
  4. };
  5.  
  6. box_mc.onRelease = function():Void
  7. {
  8.     trace("RELEASED");
  9. };
  10.  
  11. box_mc.onReleaseOutside = function():Void
  12. {
  13.     trace("RELEASED OUTSIDE");
  14. };

And here is the AS3 version, not as pretty, but effective:

Actionscript:
  1. box_mc.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
  2. box_mc.buttonMode = true;
  3.  
  4. function handleMouseDown($evt:MouseEvent):void
  5. {
  6.     box_mc.alpha = .5;
  7.    
  8.     stage.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
  9. }
  10.  
  11. function handleMouseUp($evt:MouseEvent):void
  12. {
  13.     box_mc.alpha = 1;
  14.    
  15.     stage.removeEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
  16. }

As you can see, its a bit of a hack, but it works quite well. So far I haven't had any problems using it in this manner.

Tags: , , , ,

AS2 → AS3: Running Actions On Intervals

Download Example Files

The new Timer class in AS3 gives you the ability to create and run actions at set intervals, much like the setInterval in AS2. The difference, however, is that now you can define how many times the timer runs right within the constructor. Let's take a look at the old, haggish way to do it in AS2:

Actionscript:
  1. var t:Number = setInterval(traceMessage, 1000);
  2. var count:Number = 0;
  3.  
  4. function traceMessage():Void
  5. {
  6.     if (count <10)
  7.     {
  8.         count++;
  9.        
  10.         trace("This is running once every second.");
  11.     }
  12.     else
  13.     {
  14.         clearInterval(t);
  15.        
  16.         trace("The timer has traced out ten times.");
  17.     }
  18. }

And now the new, improved, sexy way to do it in AS3:

Actionscript:
  1. var t:Timer = new Timer(1000, 10);
  2. t.addEventListener("timer", traceMessage);
  3. t.addEventListener("timerComplete", traceFinishedMessage);
  4. t.start();
  5.  
  6. function traceMessage($evt:TimerEvent):void
  7. {
  8.     trace("This is running once every second.");
  9. }
  10.  
  11. function traceFinishedMessage($evt:TimerEvent):void
  12. {
  13.     trace("The timer has traced out ten times.");
  14. }

As you can see, the Timer constructor takes in two parameters. The first is the time, in milliseconds, that each interval should run on (in this case, 1000 ms = 1 sec), and the second is the number of times that the action should repeat.

Tags: , , , ,

AS2 → AS3: Button Event Handling

Download Example Files

In AS3, no longer are you able to do a simple onPress or onRelease handler to make a button (or a movie clip that acts as a button). As with pretty much everything else, all that is now event based. It may be a bit confusing at first but it's actually quite nice and tidy. Let's take a look at the AS2 version:

Actionscript:
  1. box_mc.onRollOver = function():Void
  2. {
  3.     box_mc.gotoAndStop(2);
  4. };
  5.  
  6. box_mc.onRollOut = function():Void
  7. {
  8.     box_mc.gotoAndStop(1);
  9. };
  10.  
  11. box_mc.onPress = function():Void
  12. {
  13.     trace("Mouse was pressed down.");
  14. };
  15.  
  16. box_mc.onRelease = function():Void
  17. {
  18.     trace("Clicked the button.");
  19. };

And here is the AS3 equivalent:

Actionscript:
  1. box_mc.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); // or MouseEvent.ROLL_OVER
  2. box_mc.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); // or MouseEvent.ROLL_OUT
  3. box_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
  4. box_mc.addEventListener(MouseEvent.CLICK, mouseClickHandler); // or MouseEvent.MOUSE_UP
  5.  
  6. box_mc.buttonMode = true; // enables use of hand cursor
  7.  
  8. function mouseOverHandler($e:MouseEvent):void
  9. {
  10.     box_mc.gotoAndStop(2);
  11. }
  12.  
  13. function mouseOutHandler($e:MouseEvent):void
  14. {
  15.     box_mc.gotoAndStop(1);
  16. }
  17.  
  18. function mouseDownHandler($e:MouseEvent):void
  19. {
  20.     trace("Mouse was pressed down.");
  21. }
  22.  
  23. function mouseClickHandler($e:MouseEvent):void
  24. {
  25.     trace("Clicked the button.");
  26. }

A couple of things to note here that can save you some time/headaches. As you see in the example files, you can use MOUSE_OVER or ROLL_OVER interchangeably. However, this is not always the case. They will perform differently if you have buttons inside of buttons. For instance, if you use MOUSE_OVER, you will receive events that are sent from children of the containing clip while using ROLL_OVER won't do that and you will only receive the event from the parent clip.

What does this mean, you ask? Let's say that you have a square button (big_mc) and inside of that button you have another square button (small_mc). Using MOUSE_OVER, you will roll over the big_mc and get a call for that handler. Then, you will roll over small_mc and see that the MOUSE_OUT handler runs for big_mc and the MOUSE_OVER handler runs for small_mc. If you were to use ROLL_OVER, you would not see any other handler run while inside of big_mc (or small_mc for that matter) until you rolled out of big_mc at which point you'd see the ROLL_OUT handler for big_mc run. Make sense?

Also, make sure to set buttonMode = true if you want to see the hand cursor when you roll over your movie clips. Likewise, you should set mouseChildren = false if you have anything else inside of your button and don't want those things to disrupt the hand cursor. If you don't and you roll over something else in your button, your hand cursor will go away. This is another way to make MOUSE_OVER not call events for the children as well, in essence making it act like ROLL_OVER (which probably tells you that MOUSE_OVER is the way to go since you can control it either way).

It's also good to note that when I say buttons, I mean movie clips that act as buttons. I almost NEVER use button symbols as normally my buttons have some sort of roll over animation and roll out animation which gets ugly trying to do using an actual button instance.

Tags: , , ,

AS2 → AS3: Adding Linked Symbols To The Stage

Download Example Files

This is just a quick little tip on how to add symbols you've marked for linking in the library to the stage. There is a new way to handle adding things to the display list and this is the old way:

Actionscript:
  1. var holder_mc:MovieClip = this.createEmptyMovieClip("holder_mc", this.getNextHighestDepth());
  2. var box_mc:MovieClip = holder_mc.attachMovie("box", "box1_mc", holder_mc.getNextHighestDepth(), {_x: 100, _y: 50});

Here is the AS3 equivalent of the above:

Actionscript:
  1. var holder:Sprite = new Sprite();
  2. var box:Box = new Box();
  3.  
  4. box.x = 100;
  5. box.y = 50;
  6.  
  7. holder.addChild(box);
  8. this.addChild(holder);

Notice in the exampe files that I've linked the box to a class to a class called Box and a base class of flash.display.MovieClip (the default when you check export for AS). Even though I never created a Box class, Flash thinks that there isn't one and creates one automatically for me (with no code in it of course). This is the new way to apply "linkage IDs" to exported clips in AS3. You can go ahead and create a Box class if you'd like but there is no need for it because we aren't adding any functionality to this particular case, just need to get it out onto the stage through code.

It is kind of nice being able to set up a sprite or movie clip and initialize everything before adding it to the stage.

Tags: , , , ,

Next Page »