FlashKid.org - Basic Flash ActionScript Tutorial

Home - Tutorials - Applications - Games - Books - Directory - Site Map - Contact Us

advertise here

Basic Flash ActionScript Tutorial

Author: Salman Awan
Difficulty Level: Basic
Flash Version: Flash MX 2004
Sources to Download: flash_hello_world_actionscript.zip
Prerequisites: Flash Interface, Panels, Time Line

Introduction:

Adobe Flash is wrongly considered as a designing tool only, due to its ease of publishing graphics and animations for both web & desktop applications, however it might surprise you but Flash has its own full fledge Object Oriented Programming language named as ActionScript (also commonly written as Action Script).

This tutorial will help flash designer or actionscript beginner to get started with coding in Flash. Besides brief introduction with ActionScript panel, you will write your first flash Hello World ActionScript example in this tutorial, and understand how ActionScript can take your animations to next level.

Why ActionScript:
There are times in flash, when you need your animation to do something, which cannot be done through Timeline alone. For example, you cannot stop your animation on any particular frame without using ActionScript, we will see this in our basic action script example shortly.

Another relatively complex usage of ActionScript is, when you need your animation to loop for unlimited time, but randomly, this cannot be achieved through Timeline alone. For example if you have a Bird symbol on stage and you want it to fly around in random directions.

Before jumping into writing actionscript code, which I am sure you are anxious of, we should get familiar with all Panels that are needed for writing ActionScript.

ActionScript Panel:
Open a new document in Flash. If by default ActionScript panel Is not visible in Flash authoring environment (i.e. Flash Interface), you can open it through Window > Development Panels > Action (F9)

The ActionScript panel will pop-open.

Fig. 1 - ActionScript panel and ActionScript Reference panes

Above figure displays flash’s area where ActionScript Code is written. The pane in left side, with list of different function types is a quick reference to action script. Pane under reference pane, depicts current selection in Timeline. This is something you’ll be using in future.

“Hello World!” Application:
Let’s write our first actionscript code, good old Hello World example. Navigate down to Global Functions > Miscellaneous Functions, double-click trace() function in the list. Trace function will be added to right hand side for you.

Click between round brackets and write this string “Hello World!”, action script panel should look something like this

Fig. 2 - ActionScript panel and for Hello World actionscript example

We are all set for our first application, select Control > Test Movie from top menu.

Fig. 3 - ActionScript panel and for Hello World actionscript example

Congratulations on your very first Flash ActionScript application.

The panel which displays output of trace() function is Output Panel, as shown in figure above. It will automatically pop-up when code having trace() is executed and it displays any single text string passed to it.

ActionScript in Timeline:

Action script can be added in any frame in Timeline, a tiny little ‘a’ in frame depicts that this frame has some actionscript associated with it.

Fig. 4 - ActionScript displayed in timeline

To view any frame’s actionscript, simply click on that frame in Timeline and open ActionScript panel, it will display that frame’s code.

Stopping Timeline:
Now we will see a practical and very common use of ActionScript in flash animations. For this, right-click in frame number 5 in Timeline, select ‘Insert Frame’ from pop-up menu.

Test your application now (Control > Test Movie), you will see “Hello World!” is printed in output panel continuously after an interval of five frames.

Fig. 5 - Continuous output of Hello World string

This looping is because after completing five frames, flash play head resets to frame one again, where we have that trace() code, thus it is executed before going to frame two, then play head loops till frame five.

In flash there is no way to stop play head from looping, without using ActionScript. stop() function serves exactly same purpose. Timeline’s play head stops on frame that has a call to stop() function.

Manually write this line of code under previous trace function call.

stop();

Fig. 6 - Using stop function to avoid looping in timeline

Control > Test Movie (Ctrl + Enter) and this time “Hello World” is displayed only once because flash has already stopped on frame one, thus couldn’t loop back from frame five.

You are all set to explore Flash ActionScript now. Use different functions from left Reference Panel. You can open Flash’s Help by placing your cursor between any function name, and selecting View Help. Flash’s own help is full of details on each function and include sample codes, thus it is very helpful for learning actionscript 2.0 in flash.

Fig. 7 - Getting help on Flash ActionScript functions

Happy coding in flash ActionScript.

Exercises:

Try tracing out “I am feeling geeky”.
Change code so that it alternatively print “Hello World!” & “I am feeling geeky” in loop.
Go through Reference panel and explore all functions under the heading of Timeline Control.
In source code file with this tutorial, create a KeyFrame in frame number 4, and add play() function from reference panel. Did movie started looping again? Why?
Add function getURL() from Code Reference Panel, right-click and get flash Help on this function. can you open a site using this function?