My objective after this workshop is that the people attending it will be able to open Flash files I did using ActionScript 3 and find what they are looking for and also understand mostly the mechanics in the project. I did the presentation on May 13th and it went well for the most part, the biggest trouble was because we where on a projector with a resolution of 1024×768 and I am used to have 2 22 inch monitors (I hate the way Flash CS3 handles its panels).

Difference between ActionScript 2 and 3

First I want to mention difference between ActionScript 2 and 3. Mostly in the properties of a MovieClip, there used to be properties called _x, _y, _rotation, _visible, _alpha, _width, _height. Now these properties have been renamed to x, y, rotation, visible, alpha, width, height. The alpha property now goes from 0 to 1 instead of 0 to 100. If you want an alpha of 60% you do this: alpha = 0.6. Last thing, you cannot put ActionScript on MovieClip anymore, only on a frame in the timeline or in a class (external AS file). This will help prevent searching for ActionScript code for hours.

I am used to MovieClip, but what are Sprites?

Sprites are just a toned down version of a MovieClip. Sprites don’t have timelines, so you can’t use function like gotoAndPlay() and stop(). Why use them? Well since they don’t have a timeline and the timeline associated functions they also take less memory, so they should always be used whenever you don’t need the timeline. More on Sprites later.

Making things move, TweenLite for everything

One of the biggest building block in all of my projects is TweenLite. Nearly every swf or external class I use will have TweenLite in it. Here is a tutorial on how to use TweenLite. If you run one of my swf files if something moves it has 90% chance that TweenLite is making it move. I also use it for fade in, fade out transitions, button rollovers and music fade out.

1

TweenLite.to(rectangle, 1.5, {x:300, y:300, alpha:50, tint:0x0000ff});

A simple button using Sprites

Here is how I would do a simple button using Sprites and TweenLite. First draw a rectangle on the stage. Then convert it to a symbol, click export for ActionScript, in the base class field put flash.display.Sprite instead of flash.display.MovieClip. That is how you can create Sprites using Flash CS3. Now give the newly created Sprite a variable name of rectangle. Put the following code on the first frame on your movie (you will have to have downloaded TweenLite before you can do this):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import gs.TweenLite;
 
rectangle.buttonMode = true;
rectangle.mouseChildren = false;
 
rectangle.addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
rectangle.addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
rectangle.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
 
function handleMouseOver(event:MouseEvent):void{
  TweenLite.to(rectangle, 0.5, {tint:0xFF0000});
}
 
function handleMouseOut(event:MouseEvent):void{
  TweenLite.to(rectangle, 0.5, {tint:0x0000FF});
}
 
function handleMouseDown(event:MouseEvent):void{
  trace ("this is the mouse down event");
}

This method works fine in most cases but when you have multiple buttons, you have to copy and paste all 14 previous line of code and that makes a lot of overhead. That is exactly why we use classes.

Taking that simple button and make it a class

The following code is exactly like the code we put on the timeline before but written as a class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package net.zedia{
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  import gs.TweenLite;
 
  public class MySimpleButton extends Sprite{
    public function MySimpleButton(){
      buttonMode = true;
      mouseChildren = false;
      addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
      addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
    }
 
    private function handleMouseOver(event:MouseEvent):void{
      TweenLite.to(this, 0.5, {tint:0xFF0000});
    }
 
    private function handleMouseOut(event:MouseEvent):void{
      TweenLite.to(this, 0.5, {tint:0x0000FF});
    }
  }
}

Here is how you would then use this class :

1
2
3
4
5
6
7
8
9

import net.zedia.MySimpleButton;
 
var mySimpleButton1:MySimpleButton = new MySimpleButton();
var mySimpleButton2:MySimpleButton = new MySimpleButton();
 
mySimpleButton2.y = 100;
 
addChild(mySimpleButton1);
addChild(mySimpleButton2);

In this example both buttons will have rollOvers and rollOut implemented.

Document class where is it?

1
2
3
4
5
6
7

package {
  import flash.display.Sprite;
  public class Main extends Sprite {
    public function Main(){
    }
  }
}

Loading an image

Loading an image is quite simple, you have to use a class named Loader which is a DisplayObject. Just as for the button, you have to add a listener to the object to know when the file as totally loaded. Loader are special in the way that you don’t attach the listener directly to the Object. You do it like this: myLoader.contentLoaderInfo.addEventListener. The Loader is the only class that behaves this way.

1
2
3
4
5
6
7
8
9
10
11

import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
 
var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleInit);
myLoader.load(new URLRequest("slide1.png"));
 
function handleInit(e:Event):void{
  addChild(myLoader.content);
}

Loading a XML

Loading an XML is similar to loading an image except that you use the URLLoader class instead of the Loader class. The URLLoader class doesn’t have the weird event behavior so you attach the listener directly to the object.

1
2
3
4
5
6
7
8
9
10
11
12
13

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
 
var XMLLoader:URLLoader;
 
XMLLoader = new URLLoader(new URLRequest("myXML.xml"));
XMLLoader.addEventListener(Event.COMPLETE, handleLoadedXml);
 
function handleLoadedXml(event:Event):void{
  var xml:XML = new XML(event.target.data); // or var xml:XML = new XML(XMLLoader.data)
  trace (xml.rooms.room[0]);
}

Preloading

Preloading a swf file or an image is exactly the same thing. I always make my preloader external to the file I am loading. There is another way of doing this by doing the preloader in the first 2 frames of a swf file. The advantage of doing an external preloader is that it will start at zero if you exported symbols in the library for ActionScript. Basically we take the code we had for loading an image and we add the listener and the handler function for the PROGRESS event.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import flash.display.Loader;
import flash.display.Event;
 
var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleInit);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, handleProgress);
myLoader.load(new URLRequest("main.swf"));
 
function handleProgress(event:ProgressEvent):void{
  var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100)
  trace (percent);
}
 
function handleInit(e:Event):void{
  addChild(myLoader.content);
}

setIntervals and setTimeout VS Timer or TweenLite.delayedCall

In ActionScript 3 it is not good practice to use setIntervals and setTimeouts but they are still available if you really need them. It is better to use the Timer class, but I never really use it, instead I use TweenLite to make stuff move, ENTER_FRAME for setIntervals and TweenLite.delayedCall for setTimeouts. Here is an example of how to use TweenLite.delayedCall:

1
2
3
4
5
6
7
8
9

import gs.TweenLite;
 
TweenLite.delayedCall(3, startAnim);
 
function startAnim():void{
  trace ("animation started");
}
 
TweenLite.killDelayedCallsTo(startAnim);

 The first big problem I encountered is that even if you assign a class to a symbol in the library, if you put that symbol on the stage, it won’t use the class you assigned to it. You have to use the attachMovie method in order to make that work. Ok that’s fine I can find workaround in order to make that work.

Now I finally get that working the trouble is that the onRollOver and other onSomething won’t work in that class because of where it is situated (in an other class or other bug I just couldn’t find). Well I lost my whole day on that…

I feel it’s kinda wasteful to spend time on problems like this (in ActionScript 2) because I am not really learning something that will be useful in the long run. Anyway I don’t usually like to make post like this, because I don’t provide an answer to my problem but I really had to get this out of my system. Sorry about this, better post next time.