Learn Flash ActionScript

Trace (message)

2010-11-15T23:57:00.005+07:00

The command trace () is used to display something on the output panel. Usage of trace action is very useful in further programming later, as fault testing in a program line. An example of using trace action script as following:

Click frame 1, then open the action panel and typing the script: trace (1000); then run the movie by pressing CTRL+Enter. It will appear the text "1000" on the output panel.

Press Ctrl + W to return to the Stage. Next change the action in frame 1 become: trace ("hello how are you?"); Then run movie again. So it will appear in output panel as follows:

Press Ctrl + W to return to the Stage. Next change the action in frame 1 become: trace (number); Then run movie again. So it will appear in output panel as follows:

Press Ctrl + W to return to the Stage. Next add the action in frame 1 becomes:

number = 1000;

trace (number);

Then run movie again. So the view that emerges is as follows:

The conclusion that can be taken are as follows:

Value inside () in the action trace () can be filled with numbers.
Word "hello how are you?" can be displayed because it is a string object (located inside "").
Word number can not be displayed, because not enclosed in "", so the word number is considered as a variable that must be defined first.
Additional action number = 1000; is defining the number variable, so this variable is valued at 1000 and can be displayed by the action trace ().

OnClipEvent (event)

2010-11-14T15:40:00.000+07:00

OnClipEvent is a script that is used by a movie clip to execute some other commands in a block event. Event parameters can contains:

load command will be executed when first movie clip loaded by the time line.
unload command will be executed when a movie clip is removed (omitted) from the time line.
enterFrame command will run continuously throughout the active frame.
mouseMove command will be executed when the mouse is moved.
mouseDown command will be executed when the mouse is pressed.
mouseUp command will be executed when the mouse is released.
keydown command will be executed when it detects a button pressed by using the action Key.getCode.
keyUp command will be executed when it detects a button released by using the action Key.getCode.

Advance understanding about this script will be formed in line with our practice in processing the action script.

gotoAndStop() and gotoAndPlay()

2010-11-13T09:54:00.008+07:00

gotoAndStop(frame)

Action gotoAndStop () is used to stop the movie at the desired frame. Frame can be filled by using desired frame number or frame label. Consider the following examples:

Create a ball movieclip and place to the left of the stage.
Click on frame 20 and then insert keyframe. Move ball position to the right stage.
Right-click on frame 10 and select create motion tween, it will form ball animation that moves from left to right in a loop.
Add new layer above the layer 1 and change its name to action.
Click on frame 10 action layer, insert keyframe, then open the action panel and typing action gotoAndStop (1);

Run the movie, then when ball reached the middle stage, ball will back and stop to the starting position in left of stage.

gotoAndPlay (frame)

Action gotoAndPlay () used to play the movie on the desired frame, as opposed to the action gotoAndStop ();

note: once when we find action gotoAndStop ("start"); the word "start" is frame label. To add frame label, input keyframe on the desired frame, open Properties panel and typing in <frame label> textbox.

Download Source Code Here

Playing Movie using play();

2010-11-12T09:09:00.031+07:00

Action play(); used to running frame that stoped because action stop();. For more detail see example as follow:

Continue step in last post (Stop Movie using stop();).
Click layer 1, then add new layer above layer 1 and change name to button.

Click frame 10 in button layer, then add new keyframe and create a button in center of stage using rectangle tool.

Select button that we make with rectangle tool and convert to symbol by pressing F8, type “play_btn” in name option then choose button in type option.
Select play button then open action panel and type this script:

on (release) {

//if button play is pressed then play next frame

play();

}

Run movie by pressed CTRL+Enter. When ball is stop, press play button that we make and ball will move again. Action play(); in play button cause movie run again when button is pressed.

Download Source Code here

Stop Movie using stop();

2010-11-11T11:45:00.004+07:00

Action stop(); is used to stop running movie clip. For more details, see the following example:

Make a ball with oval tool, then convert to symbol with the name ball_mc.
Select ball_mc, then place it in the left of the stage.
Click on frame 20, then add a keyframe by pressing F6. Then move ball_mc to the right stage.

Right click on the timeline frame 10, then choose create motion tween.

Run the movie by pressing Ctrl+Enter. It will get a ball movement from left to right in loops.
Back to the stage by pressing the Ctrl + W, then add a new layer (action layer).

Click the action layer frame 10, then input keyframe by pressing F6. Still frame 10 in selection, open the action panel and typing action stop ();

Run movie by pressing the Ctrl+Enter, then the ball will stop when located in the center stage. This is caused due to the action stop (); so the movie stop.
Save the file.

Source Code Download = Click Here

Object Properties

2010-11-10T17:44:00.000+07:00

An object properties could be movieclip, button, graphic, sound, video, bitmap anc component. But, only movieclip, button and sound can entered with actionscript. Componet have build in action script, so that we can directly use, while bitmap and graphic can’t entered with actionscript. Every object that can entered with actionscript have several properties like x axis, y axis, width, height, active frame, color and others. Because movieclip is frequently used in flash, The following are some properties of a movieclip :

_x is the coordinate of x axis symbol in stage. In last post I explain thar calculation of x calculated from registration point of symbol, not from upper left corner of object that seen in symbol properties.

_y is the coordinate of y axis symbol in stage. Calculation of y axis is same wit x axis which is calculate from registration point symbol. See action script below:

onClipEvent(load){

_x = 100; // x axis

_y = 100; // y axis

}

Action script above will set the position of object(symbol) to coordinate (100,100) in stage when symbol shown at first time.

_xscale

_xscale is percentage of horizontal scale symbol against registration point.Default value of _xscale is 100. Object which have value under 100 have small size than original size, otherwise have large size than original.

_yscale

_yscale is percentage of verical scale symbol against registration point. example :

onClipEvent(load){

_xscale = 200; // twice enlargement in x axis

_yscale = 200; // twice enlargement in y axis

}

This action will enlarge object twice when object shown first time.

_visible

_visible is object properties that set visibility of object in stage. _visible = 1 for shown object and 0 for hide object.

example :

onClipEvent(load){

_visible = 0; // not visible

}

This action cause object not show in stage.

_alpha

_alpha is property of object that set alpha value (transparency). _alpha have value 0 to 100 where 0 mean that object is not shown (transparent) and 100 mean that object is shown (solid).

example :

onClipEvent(load){

_alpha = 50; // semi transparent

}

This action cause object have transparency 50%.

_rotation

_rotation is properties that indicate rotation position of object clockwise against registration point.

example :

onClipEvent(enterFrame){

_rotation += 10; // 10 degree clockwise rotation

}

This action cause object rotate 10 degree clockwise against registration point.

_currentframe

Value of _currentframe indicate active frame in movie or movie clip. More detail explanation I will post in nextpost.

Introducing to Variable

2010-11-09T20:00:00.000+07:00

Variable is a location in computer memory that used to save a value and it can be changed. There are 2 way to make variable in flash, first is write variable name and it value directly, example :

score = 1000; with this action automatically will create new variable with namely score and the value is 1000.

Second is typing action var before variable name that we type, example :

var score = 1000; with this action automatically will create new variable with namely score and the value is 1000.

Name rule in variable :

a variable must not same with instance name of symbol.
space, dot, and other punctuation can’t be used.
Cant use name that same with flash command like : obyek, level, break and others.
Variable name must not use only number, but variable name can following with number. Wrong example :12, 13, and others, Right example : score1, score_2 and others.
Variable name is not case sensitive, there are no different between lower or uppercase.

Variable Type

There are several variable type in flash, the most that used are :

Variable Type	Writing Sample
Number	score = 1000; i++;
String	name = “”; text = “example”
Boolean	death = true; lose = false;
array	playerdata = []; date = [“monday”, “tuesday”]; highscore = [100,90,60];

Introducing to Stage Coordinates System

2010-11-09T01:15:00.003+07:00

In Math, we know Cartesian coordinate system. Good knowledge in math will supporting us to understanding Stage coordinates system.

In Cartesian main axis is divided into x axis (horizontal) and y axis (vertical). X and Y axis meet in (0,0). In X axis, The value of x is rise if increasingly to right. In Y axis, the value of y axis rise if fall more down.

In Flash stage, coordinates system is same with above, but the different is in y axis and coordinate (0,0). In Flash if y axis fall more down the value of y axis is rise. And Coordinate (0,0) is place in the upper left corner. Look at this picture:

For more explicit I’ll give example in application of flash coordinate system as following below:

Problem :

Make a ball that move upper left to right bottom diagonally.

To solve this problem, I’ll illustrate visually:

Thus, to move a ball diagonally, it meant that we moving x axis to right and y axis to bottom. The process of making the application are as follows:

Create an object with oval tool.

Select the object then convert into symbol by press F8 (menu insert>convert to symbol). Select movieclip option type then type ball_mc in name. Notice in regristration, this part is determine the position of movie clip. For example, when we select registration in center, then movie clip coordinate calculation is calculate from center of movie clip, it not like in properties. In properties, coordinate calculation is calculate from upper left corner.

Select movieclip ball_mc then change postion. Place it in upper left corner of stage. Still in movie clip selcection, open action panel (press f9) then type this script:

onClipEvent (enterFrame) {

// Move ball diagonally

_x += 10;

_y += 10;

}

Run movie clip by press CTRL+Enter, then a ball will move diagonally from upper left to rigt bottom until disappear from stage. Press CTRL+W to back into stage.

Program Explanation

onClipEvent (enterFrame) { mean that command inside { } will run over active frame (frame default setting is 12 fps), command inside { } will run every 1/12 sec in along running movieclip.
Line //Move ball diagonally is comment line, this line not executed by flash.
Line _x += 10; mean that every 1/12 sec the x coordinate of ball will added 10 pixel, so the ball will move to right. += is simplification of action _x = _x+10;
Line _y += 10; mean that every 1/12 sec the y coordinate of ball will added 10 pixel, so the ball will move to bottom.
Because the computer calculate very fast, the calculation inside { } seem done at once, thus ball look move diagonally.

Source Code Download = Click Here

Error in actionscript

2010-11-01T01:00:00.002+07:00

Someone who is just learning action script or someone who advance in action script never apart from an error. In a programming there are 2 types of errors, that is typing errors and logical errors

Typing error in Action Script

The most frequently error made by someone who was just learning script is a typing error in the script. To find a typing error, flash provides check syntax facility on the action panel.

By pressing check syntax, we can know that script that we type is have an error or not.

Typing error will show in output panel. Scene, layer, and frame where we make error and which line we make error is showing in this panel, so it will help us to fix error.

Errors that often occur are :

Typing error of simple action, example : duplicateMovieClip typed to dupilcateMoviClip.
Use of space in write instance name or variable. Example: origin size = 5; should be written origin_size = 5;.
Tips : Don’t often write script with space, because flash can arrange automatically if we press Auto Format.

Error when we use lowercase and uppercase. In common flash action script is not case sensitive (sensitive to lowercase and uppercase).But flash distinguish a text with different colors. When we write an action without regard to lowercase and uppercase letters, then the text turns black, while if it is true then the text will be colored dark blue. Text color distinction in the action script is as follows :
* Dark Blue is used in action color.
* Light blue use as string color.
* Gray use as comment color.
* Black used in writing text beside 3 above

Error when use “{}”. Someone who beginner in flash often confuse in using this. This symbol is action block, all action that inside “{}” is categorized in certain block like movie event, mouse event, function, if, for and many more. Amount of “{“ must same with amount of “}”.
Tips : after we type “{“ immediately type “}”, then put cursor between this character then press enter or type the action inside.
Error when use “()”. In contrast with “{}”, character “()” is not state a block but usually represent part of typing action that used. Example if(…){ }, trace(..);. Note that amount of “(“ must same with “)”.
Error when use “=” and “==”. Character “==” only used in conditional, but “=” used to set value of variable.
Error when use dot. In all programming language, dot character “.” is vital, so be aware using this character.

Logical Error in Action Script

Logical errors cannot be detected by check syntax button, because errors comes from the programmers. Logical errors is actually a mistake in develop and use action script,so can causing the program make slow, there are parts that should move but its not, consuming computer memory or often called as a bug, and others. To fix bug run first, then test the program as often as possible and look for opportunities that may occur as much as possible. When find the wrong section, go back into action and find which parts causing the error, then correct as possible.

ActionScript Writing Pattern on Frame

2010-10-30T12:42:00.012+07:00

Both ways of writing the script in last post, that is writing the script in the button and in the movieclip, can be written in any other form of writing, script placed inside a frame. The main thing to remember in writing action on the frame is an instance name. Instance name is one of the most important identity in a flash that distinguish between one object with another object.

Naming rules of instance name are:

Instance Name can be equal with symbol name.
Instance Name may not use spaces, dots, and other punctuation.
Using same name with a command in flash not allowed, for example: object, level, break and others.
Not allowed to use numbers only for instance name, but an instance name can be followed by number. Wrong example: 12, 13, and other, Right examples: ball1, ball_2 and other.
There should be no same instance name.
To simplify writing the script, you can add "_mc" to movieclip symbol and "_btn" to button symbol. Example: "Ball1_mc", "button1_btn".
Two or more same symbol may be used, but must have different instance name.

How to write action on the frame is as follows:

Create circle object with oval tool. Select object that we make then convet to symbol by pressing F8 (menu insert>convert to symbol). Choose Movie Clip in Type option then type ball_mc in name option.

Click ball in the stage, then open instance panel and type “ball” in instance name.

Create a new layer then change name to action, then rename layer 1 to ball. Adding new layer we’ll ease us in action writing on frame, thus will not bother other object.

Click frame 1 in action layer, open action panel (press F9 or menu windows>action if action panel is not opened), then type :

ball.onEnterFrame = function() {

//move object to right

this._x += 10;

};

Run Movie by press CTRL+Enter, so we can see the same result that we create in movie clip action writing.

The explanation of writing script in frame :

Writing script in frame have 3 type, that is writing in a movie event block or mouse event, example onEnterFrame=function(){ and writing without movie event or mouse event, then the third writing type is combination of both type, example will show in next post.
Basically writing action in frame same with writing script in movie clip, but in frame there is function() script in use of instance name.
Note the difference between the writing on the frame and the writing on moviclip here:

Line	In Frame	In Movie Clip	Different
1	*ball.onEnterFrame =function{*	*onClipEvent(enterFrame){*	Changes in writing from movie clip to the frame is the use of instance name before movie events and the use of *function () script*
2	//Moving object to right	//Moving object to right	Comment line is same in all writing patern
3	this._x+=10;	_x+=10;	use of this command must write in frame
4	};	}	for writing in frame, in the end of movie event function closed by ";"

If we want write action button in frame, then that we must change is : movie event change to mouse event.
Example : button_btn.onRelease=function(){};.

Advantage of writing script in frame:

Compare with writing script in movie clip that is complicated, writing script in frame is more easier for programmer who familiar with other programming language like C++, Java, Delphi or Basic.
Easy to write certain function or looping command which frequently used.
Because all of script written in frame, so if we want check action of all object will be easier without select each object (movie clip).

Source Code Download = Click Here

ActionScript Writing Pattern on Movieclip

2010-10-28T22:37:00.004+07:00

Action writing steps on movieclip are:

Make an object with oval tool. Note that an object in flash have two part that is stroke and fill.

Select the object (circle) then convert to symbol by press F8 (menu insert>convert to symbol). Select Movie clip in Type option and type ball_mc in Name.

Click movie clip ball_mc, then open action panel (press F9 or click menu windows>action). Then type script like this:

onClipEvent(enterFrame){
//moving object to right
_x += 10;
}

Run movie by pressing CTRL+Enter, so ball will move to right until disappear from the screen. Press CTRL+W to back in stage.

The explanation in ActionScript writing pattern at movieclip are :

Action in movieclip must started by on() or onClipEvent().
Inside “()” at script on or onClipEvent contain movie event like load, enterframe, mouse down, release and others. Movie event expressing an event that will executed by it action. For example : movie event enterFrame meant command inside “{}” will run a whole frame.where movieclip is active, but movie event load is run once only when movie clip loading in flash player.
Symbol { is starting script block. Script block is a group of command that will run in a whole movie event
Symbol // is expressing coment. Line with this symbol wont executed by actionScript, but it very helpful for give information in action script that our write.
_x+=10; is command lin. Command in movieclip must written in movie event block. In the end of writing a command is closed by “;”.
Symbol } is the end of script block.

Advantage of writing script in movieclip :

Action script writing in movie clip is easy than writing in frame.
For detect mistake on an object, writing script in movie clip is more faster than writing in frame (this effective when we processing script in hundred to thousand line).

Source Code download = click here

ActionScript Writing Pattern in Button

2010-10-28T22:09:00.003+07:00

ActionScript Writing Pattern

ActionScript in flash can be write in 3 method, that is in button, movieclip, and at frame with different rule.

ActionScript Writing Pattern in Button

ActionScript writing steps in button are:

Make a box with rectangle tool. We also can make rounded rectangle by choosing rounded rectangle radius option.

Make static text “button” above box that we make before, by click text tool then open properties and arrange font, size and color. Open Properties panel (if not yet opened, choose menu window>properties). Always check that static text option is active in Text Type.

Select the box and text, then convert to symbol by press F8 button (menu insert>convert to symbol). Select button in behavior option then type button_btn in Convert to symbol name.

Double click this button to enter button edit mode. Note in symbol with button type is consist of 4 frame that is up, over, down and hit. Up showing normal condition in button. Over showing button condition when mouse at above button. Down showing button condition when pressed and hit is press area (sensor) of button.

Click over frame then input keyframe by pressing F6 button (menu insert>keyframe). Change color and size of button in over frame. For down and hit we can ignore it.

Press Ctrl+E to back in Main Stage. Click the button which is in selection condition, open action panel (press F9 or click menu windows>action if action panel not yet opened and check that writing mode is expert mode if using flash MX or Flash 8). Then type this script :

on(release){ //showing message in output panel when button is pressed trace(“button is pressed”); }

Run movie by pressing Ctrl+Enter. Then the button that we make is appear. Press the button, then in output panel we see “button is pressed” in output panel. Press Ctrl+w for back to stage.

Explanation ActionScript pattern in button is:

Action in button must started with script on().
Symbol “()” at on contain mouse event such release, press, dragover, rollout and others. Mouse event expressing event that will executed by the action when mouse is doing some event. For example : mouse event release is command in { } will run when mouse is press the button.
Symbol { is starting script block. Script block is a group of command that will run in a whole movie event.
Symbol // is expressing coment. Line with this symbol wont executed by actionScript, but it very helpful for give information in action script that our write.
Line with command trace(“button is pressed”) is line command. Command in button must written at a mouse event block. In the end of writing command is always closed by symbol “;”.
Symbol } is the end of script block.

Source Code download = click here

Preface

2010-10-26T16:23:00.001+07:00

Flash Introduction

Adobe Flash or formerly named as Macromedia Flash is a multifunctional software. Apart from the starting function, which is simplify to create web animations, it turns out rapidly growing up utilized as extraordinary multi-media software. Even Flash with action script can be used as game maker software that is easy and effective. Before go to next step about the flash game development, we must understand that makes flash games is fun and profitable. For some people play the game is very enjoyable, this concept must we use that we are trying to please others through a game. If many people enjoy playing games made by us, then we get success as a game maker.

Computer programming in general will be difficult to be understood by someone who beginner in programming language. On the other hand make the game is application of computer programming knowledge. But we do not need discouraged, because flash and action script is very easy to learn and through this blog I try to share my little knowledge about making games with flash.

Next at this blog I will explains as much as possible about the process of making games sequence. Follow the tutorial one by one in every chapter and do not skip a tutorial unless you already understand. If you have difficulty in writing the script later, I will provide the source code. Because actionscript that I use is basic action, so actionscript in this blog can work in Action Script 1.0, 2.0, and 3.0.

Area Working in Flash

Before beginning the process of making games, it would be better if we knew who and how is flash. Flash work area (mx, mx 2004, flash 8) basically consists of several components, namely Menu, Toolbox, Timeline, Stage and Panel.

Menu contains controls for various functions such as create, open, save files, and so on according to the menu that appears.
Stage is the rectangular area which is a place where we make animated objects or applications that will be run.
Toolbox contains a menu to create or draw shapes. Toolbox divided into four parts: drawing tool, view, color, and option
Timeline is a place where we can create and control objects and animation.
Panel contains a control-function that is used in Flash, the function is to replace and modify various properties of the object animations quickly.

Basic of Action Script writing

Macromedia Flash have facility namely Action Script, which is can we use as media to create Application program, multimedia, interactive cd even game. Macromedia Flash have many script with different function, but the most often used only a few script, so it will easy for us if we still newbie in Flash and the Action Script.

In Flash there are two writing panel modes script, they are normal mode and expert mode. Basically expert mode is easier to learn than normal mode, so that the entire action that I use is wrotten in expert mode.

Option Expert Mode in Flash