My Flash Lab

Feb 21 2010

Getting started with AS3 as soon as possible

Category: tutorial — ali @ 9:20 am

Hi everybody,

I know how felt for the first time that you wanted to start learning AS3! specially when you were not familiar with any other languages before.

Alright, now it’s time for you to be relax that you have found a quick post finally to get you started with AS3 as soon as possible.

I myself when I was starting to learn about AS3, I found it so hard to get started… I had to spend so much time on finding different books, video tutorials, etc… and hehe, it was just the beginning, then I had to start studying the books and watching the videos… you know? it takes so much time for you to get started like that, but in the other hand it’s good for those who are not also familiar with using Adobe flash interface, etc… in the following I let you know whose this tutorial is for.

WHOSE THIS TUTORIAL IS FOR?

This tutorial is good for those who know a little about Adobe flash interface and don’t know anything about AS3 but know a little about computer languages and are a little familiar with variables, functions, etc… and love to get familiar with the AS3 world and don’t know where to start! so they don’t want to waste their times on seeing the tutorials that explain functions and variables from the beginning and explain every littile tiny thing from scratch… they need to have a resource for them to get them as soon as possible on their ways, so that’s why this post is written by me.

Alright, so for those who doesn’t know anything about Adobe flash interface or something and like to study some books and watch video tutorials, there are a dozens of books and videos out there to put you on your way but here I just want to mention the main facts.

LET’S GET STARTED

So we are going to explain main things about AS3, I explain subjects part by part, so the only thing you need to do is to:
1. open up your Adobe flash CS3 or CS4 and create a new Flash File (ActionScript 3.0).
2. go to toolbar and click Window -> Timeline (or simply click CTR+ALT+T if using Windows) to open up timeline window.
3. click on the first frame in the Timeline window.
4. now again go to Window -> Actions or click F9 to open up Actions panel.
5. in this stage you write down the actions that I explain in each part in your Actions panel to see how they look like there to start learning ActionScript 3.0, but please note that all of the Actions don’t work just like that, because some of them like loading external photos, just don’t work with codes and you need to give the right path to the external photo in your computer! and that’s obvious
6. for testing your movies on the toolbar click Control -> Test Movie.

So let’s get started:

1. comments:

Comments are just some texts that you write at the middle of your codes for your own explanation.

a. line comments

1	// this is a line comment

b. block comment

1
2
3

/* this is a block comment,
with block comments you can write more than one line comments
*/

2. variables:

Variables keep values in themselves.
variables have different types, popular ones are String, Number, Boolean, Array
types are classes that I explain how to create your own classes later

how to write a variable:
var yourVariableName : variableType = new variableType();

note: after each line one code it’s better to write “;” to say that you are finish with this line of code.

and this is how to create a new variable.

1
2
3
4
5
6

var _myString:String = "Hello world!";
var _myNum:Number = 20;
var _myBoolean:Boolean = true; // accepted values: true, false

// Arrays contain multiple values, their values can be Number, String, etc...
var _myNumArray:Array = new Array [0, 1, 3];

3. functions:

Functions are methods that do an specified work.

a. simple function

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

// to set the Stage alignment
stage.align = StageAlign.TOP_LEFT; // Top Left

// here is the simple function
function saySomething ():void
{
// trace is a function like this that flash has created it, it gives a message when you compile your movie
trace("my function is working!");
}

// you have to call functions to make them work, so let's call it
saySomething();

b. function that gets data

1
2
3
4
5
6
7
8
9
10
11

// as you see this function have 3 parameters, each time you call it you can give different values to the parameters
function moveMyObject (mc:MovieClip, X:Number, Y:Number, R:Number):void // this function doesn't return anything
{
mc.rotation = R;
mc.x = X;
mc.y = Y;
}

// let's call the function, this function gets information and then process
moveMyObject(photo1_mc, 0, (stage.stageHeight) - (photo1_mc.height), 0);
moveMyObject(photo2_mc, stage.stageWidth, 0, 90);

c. function that gets and gives data

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

// as you see this function have 3 parameters, each time you call it you can give different values to the parameters
// and it returns a Number too, that is the mc.y
function moveMyObject (mc:MovieClip, X:Number, Y:Number, R:Number):Number // this function returns a Number
{
mc.rotation = R;
mc.x = X;
mc.y = Y;

// now return something
return mc.y; // it gives me a Number that is mc.y
}

// let's call my function, this function runs it self and equals it self to a Number
moveMyObject(photo_mc, 0, (stage.stageHeight/2) - ((photo_mc.height + txt.height)/2), 0);
txt.y = moveMyObject(photo_mc, 0, stage.stageHeight - (photo_mc.height + txt.height), 0) + photo_mc.height;
txt.x = (photo_mc.width/2) - (txt.width/2);

4. if statment:

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

var _myNum:Number = 1;

if(_myNum < 10)
{
trace(_myNum + " is less than 10");
}
else if(_myNum > 10)
{
trace(_myNum + " is more than 10");
}
else // if the situation was anything else
{
trace(_myNum + " is equal to 10");
}

5. listeners:

listeners are available by calling addEventListener function to listen to a specified event, you can also remove the listener by calling removeEventListener

a. MouseEvent

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

// the most popular mouse events
click_mc.addEventListener(MouseEvent.CLICK, onClick);
click_mc.addEventListener(MouseEvent.ROLL_OVER, onOver);
click_mc.addEventListener(MouseEvent.ROLL_OUT, onOut);
/////////////////////////////////////////
function onClick(e:MouseEvent):void
{
trace("I'm clicked");
}
////////////////////////////////////////
function onOver(e:MouseEvent):void
{
e.target.gotoAndPlay("go");
}
////////////////////////////////////////
function onOut(e:MouseEvent):void
{
e.target.gotoAndPlay("out");
}
////////////////////////////////////////
click_mc.buttonMode = true;

b. KeyboardEvent

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

stage.addEventListener(KeyboardEvent.KEY_DOWN, jump); // we add to stage, because want the listener to work everywhere, not only when the mouse is on the specific target
stage.addEventListener(KeyboardEvent.KEY_UP, land);

function jump(e:KeyboardEvent):void
{
photo_mc.y -= 5;
stage.removeEventListener(Event.ENTER_FRAME, doIt);

};

function land(e:KeyboardEvent):void
{
stage.addEventListener(Event.ENTER_FRAME, doIt);
};

function doIt(e:Event):void
{
if(photo_mc.y != 123)
{
photo_mc.y += 5;
}
else
{
stage.removeEventListener(Event.ENTER_FRAME, doIt)
}
}

var link:URLRequest = new URLRequest("http://www.myflashlab.com");

myflashlab_mc.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent):void
{
navigateToURL(link);
}

myflashlab_mc.buttonMode = true;

d. a simple timer

1
2
3
4
5
6
7
8
9
10
11

var timer:Timer = new Timer(2000, 5);

timer.addEventListener(TimerEvent.TIMER, player);

function player(e:TimerEvent):void
{
// after 2 seconds play the movie_mc
movie_mc.play();
}

timer.start();

e. loading a photo externally

1
2
3
4
5

var photoRequest:URLRequest = new URLRequest("photo.jpg");
var photoLoader:Loader = new Loader();

photoLoader.load(photoRequest);
addChild(photoLoader);

6. bitmap:

to duplicate a DisplayObject

a. a simple bitmap

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

// just made a movie clip on stage and have exported it for ActionScript in library
var photo_mc:mcPhoto = new mcPhoto();
addChild(photo_mc);
///////////////////////////////////////////////////

// for understanding what values the BitmapData argues get you just need to double click the BitmapData to select it and press F1 in order to check this method out in flash help documentation
var bmd:BitmapData = new BitmapData(photo_mc.width, photo_mc.height, true, 0x000000);
bmd.draw(photo_mc);

// we made the BitmapData now we import it to the bitmap
var bm:Bitmap = new Bitmap(bmd, "auto", true);
addChild(bm);

// we have added the mc itself to the stage, now we added its Bitmap to the stage too next to it.
bm.x = bmd.width + 10;

b. loading a photo externally and generate its bitmap data

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

// here we load the photo and when it's loading is finished we make its Bitmap and addChild the Bitmap.
// you may say why we make a Bitmap? we make the photos Bitmap to make them smooth, specially when want to resize them
var _photoRequest:URLRequest = new URLRequest("myPhoto.jpg");
var _photoLoader:Loader = new Loader();

_photoLoader.load(_photoRequest);
_photoLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

function onComplete(e:Event):void
{
var _bmd:BitmapData = new BitmapData(e.currentTarget.content.width,e.currentTarget.content.height);
_bmd.draw(e.currentTarget.content);

var _bm:Bitmap = new Bitmap(_bmd, "auto", true);
this.addChild(_bm);

_bm.x = 300;
}

7. a simple loop:

1
2
3
4

for (var i:uint = 0; i < 10; i++)
{
trace(i);
}

8. draw shapes:

1
2
3
4
5
6
7
8
9

// you can draw different shapes, here we draw a rectangle using drawRect method

var myShape_mc:MovieClip = new MovieClip();

myShape_mc.graphics.lineStyle(5, 0x0000FF, .5, false);
myShape_mc.graphics.beginFill(0xFF0000, .3);
myShape_mc.graphics.drawRect(20, 20, 200, 100);
myShape_mc.graphics.endFill();
addChild(myShape_mc);

9. random color:

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

var colorT:ColorTransform = new ColorTransform();

random_btn.addEventListener(MouseEvent.CLICK, onClick);

function onClick(e:MouseEvent)
{
// we create random colors
colorT.blueOffset = Math.round(Math.random() * 510) - 255;
colorT.redOffset = Math.round(Math.random() * 510) - 255;
colorT.greenOffset = Math.round(Math.random() * 510) - 255;

// now we change the photo_mc color offset
photo_mc.transform.colorTransform = colorT;
}

10. using filters:

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

// using DropShadowFilter
var myShadow:DropShadowFilter = new DropShadowFilter();

myShadow.color = 0x000000;
myShadow.blurX = 20;
myShadow.blurY = 20;
myShadow.angle = 45;
myShadow.distance = 0;
myShadow.alpha = .5;
myShadow.strength = 2;

photo_mc.filters = [myShadow];

// using all of the other flash filters are just similar to this one, you can check them in Falsh help documentation

11. text:

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

// set text format
var _txtFormat:TextFormat;
_txtFormat = new TextFormat();
_txtFormat.size = 10;
_txtFormat.color = 0x000000;
_txtFormat.font = "Verdana";

// set text field
var _txtField:TextField;
_txtField = new TextField();
_txtField.autoSize=TextFieldAutoSize.LEFT;
_txtField.embedFonts = false;
_txtField.selectable = false;
_txtField.border = false;
_txtField.background = false;
_txtField.defaultTextFormat = _txtFormat;
_txtField.htmlText = "Hello world!";
_txtField.mouseEnabled = false;
this.addChild(_txtField);

12. working with sound:

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

var _URLRequest:URLRequest = new URLRequest("7_khoone.mp3");
var _sound:Sound = new Sound();

/////////////////////////////////////////////////////////////////////

_sound.load(_URLRequest);

_sound.addEventListener(Event.COMPLETE, onComplete);
/////////////////////////////////////////////////////////////////////

function onComplete(e:Event)
{
// you've loaded the sound, now play it
_sound.play();
}

13. working with video:

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

// to play a video on your stage
var _netConnection:NetConnection = new NetConnection();
_netConnection.connect(null);

var _netStream:NetStream = new NetStream(_netConnection);
_netStream.play("movie.flv");

var _obj:Object = new Object();
_netStream.client = _obj;

var _video:Video = new Video();
_video.attachNetStream(_netStream);
addChild(_video);

14. how to create a simple class:

the first thing you need to do for creating a class you need to open up your Adobe flash and creat a new ActionScript file and save your class with this name “MyCustomClass”.
and note that classes name start with capital letter most of the times, like MyCustomClass. the name should not have space or any special character.

now write in the AS file the following code to create very simple class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// classes are inside a package
package
{
// you import the classes that you use in your class
// to understand what's the classes path to import them you can select the class name like "Sprite" and click F1 in flash to see the class documentation and have a look at the class inheritance
import flash.display.Sprite;

// name of the class should be as same as the name of the as file
public class MyCustomClass extends Sprite
{
// in classes when you want to create new variables you mention that it's "private" or "public" or something else...
// private and public are the most popular ones, private variable is only accessible inside the class but public one is accessible out of the class too
private var _string:String = "Hello!";

// this the constructor function that its name is also as same as the class name
// constructor function runs as soon as you initialize your class... for example when you said: var _myCustomClass:MyCustomClass = new MyCustomClass(), you called the constructor function after "new" word
public function MyCustomClass():void
{
// now in constructor function you can do anything you like with your class to develop something up :)
doSomething();
}

private function doSomething():void
{
// do something now!
trace(_string);
}
}
}

And that’s it, here I tried to explain everything so simple and just introduce you with diiferent methods and works that you can do with flash… now you got how to write codes in flash and make different stuff… now let’s create your first simple application:
1. open up Adboe flash CS3 or CS4.
2. create a new Flash File (ActionScript 3.0) and save it some where on your hard drive.
3. on the toolbar click File -> new and select ActionScript File in the opened window then click ok.
4. save the new AS file with the name of “Main” in the same directory that you saved your FLA file.
5. get back to the FLA file and in the Properties panel you will see a field with the “class” title, write down the name of your as file that was “Main” and press Enter on your keyboard, now you just made a connection between your FLA file and AS file that is called Document class now.
6. now save your FLA file and get back to the AS file.
7. write down the following code in your AS file and test your movie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

package
{
import flash.display.Sprite;
import flash.text.TextFormat;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;

public class Main extends Sprite
{
private var _txtFormat:TextFormat;
private var _txtField:TextField;

private var _label:String = "Congratulation, you just made up your first application!";
private var _size:Number = 15;
private var _color:uint = 0x000000;

public function Main():void
{
createText();
}

private function createText():void
{
// set text format
_txtFormat = new TextFormat();
_txtFormat.size = _size;
_txtFormat.color = _color;
//_txtFormat.font = "Verdana";

// set text field
_txtField = new TextField();
_txtField.autoSize=TextFieldAutoSize.LEFT;
_txtField.embedFonts = false;
_txtField.selectable = false;
_txtField.border = false;
_txtField.background = false;
_txtField.defaultTextFormat = _txtFormat;
_txtField.htmlText = _label;
_txtField.mouseEnabled = false;
this.addChild(_txtField);
}
}
}

Congratulation, you just created your first AS3 application, you can create AS3 applications in the future just like that, of course there are some other ways to compile your flash movies but this is the simplest way to get started

you can also download the application here.

Regards,
Ali

Tags: AS3, basic tutorial, bitmap, draw shapes, function, generating bitmap, getting started with ActionScript 3.0, introducing ActionScript, KeyboardEvent, listener, loading external photo, loop, mouseEvent, sound, text, timer, variable, video

Comments (0)

Getting started with AS3 as soon as possible

WHOSE THIS TUTORIAL IS FOR?

LET’S GET STARTED

1. comments:

a. line comments

b. block comment

2. variables:

3. functions:

a. simple function

b. function that gets data

c. function that gets and gives data

4. if statment:

5. listeners:

a. MouseEvent

b. KeyboardEvent

c. external links

d. a simple timer

e. loading a photo externally

6. bitmap:

a. a simple bitmap

b. loading a photo externally and generate its bitmap data

7. a simple loop:

8. draw shapes:

9. random color:

10. using filters:

11. text:

12. working with sound:

13. working with video:

14. how to create a simple class:

Leave a Reply

February 2010
M	T	W	T	F	S	S
« Jan				Mar »
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28