as3 practice exercises

7/17/2019 AS3 Practice Exercises

http://slidepdf.com/reader/full/as3-practice-exercises 1/12

AS3 Animation Tutorial - Using the AS3

EnterFrame Event to Create Animation in Flash

You can use AS3 to add some animation to your Flash project using code. Instead of adding tweens on the timeline,

you'll be using AS3 to animate objects.

AS3 EnterFrame Event Animation Sample Code #1ere is the code for the first e!ample where the circle will continue to scale up as long as the mo"ie is running.

var growthRate:Number = 2;

circle_mc.addEventListener(Event.ENTER_R!"E# grow$;

%unction grow(e:Event$:void

&

e.target.width '= growthRate;

e.target.height '= growthRate;

AS3 EnterFrame Event Animation Sample Code #2In the second e!ample, the animation will stop when the circle's si#e reaches $%& pi!els.


var ma)*i+e:Number = ,-;

circle_mc.addEventListener(Event.ENTER_R!"E# grow$;

%unction grow(e:Event$:void

&



i%(e.target.width /= ma)*i+e$

&

circle_mc.removeEventListener(Event.ENTER_R!"E# grow$;

AS3 EnterFrame Event Animation Sample Code #3In the third e!ample, the code has been modified to mae the circle grow and then shrin repeatedly.




var ma)*i+e:Number = ,-;

var min*i+e:Number = ,;

var scale"ode:*tring = 0grow0;

circle_mc.addEventListener(Event.ENTER_R!"E# grow*hrin1$;

%unction grow*hrin1(e:Event$:void

&

i%(scale"ode == 0grow0$

&



i%(e.target.width /= ma)*i+e$

&

scale"ode = 0shrin10;

else i%(scale"ode == 0shrin10$

&

e.target.width = growthRate;

e.target.height = growthRate;

i%(e.target.width 3= min*i+e$

&

scale"ode = 0grow0;



Preloading in ActionScript 3.0 Part 1

What is a preloader and what is it for?Flash mo"ies tend to ha"e larger than a"erage file si#es compared to ()* websites. So when you create a Flash

website, chances are, it will tae a while to load e"ery time a user "isits it. (hat's why it's important to gi"e the useran indication regarding how much longer he or she has to wait. (his can be done by adding a preloader to your Flash

website. A preloader is simply a ind of "isual feedbac that shows the user how much of the Flash website hasalready been loaded. A simple preloader can show nothing more that just a basic progress bar and some te!t that

displays the loading percentage, while other Flash websites will ha"e fancier preloaders that contain more comple!animation and design. +egardless of the comple!ity of the preloader that you choose to mae, it's always a good ideato ha"e one for your Flash website. ithout a preloader, the "isitor might just get a blan browser window at firstand thin that the website is broen. And instead of waiting for the site to load, the user will more liely end uplea"ing your website.

How can I create a preloader in Flash?(here are a couple of methods that you can use to create a preloader in Flash. (he method that we will tae a loo atin this tutorial in"ol"es the use of - Flash mo"ies. ne would be your actual Flash mo"ie or website, while the otherFlash mo"ie is the one that will preload the Flash website. So here, we ha"e a dedicated Flash mo"ie that will do theactual preloading.

hat's going to happen is that the Flash website gets loaded into the preloader Flash mo"ie.



As the Flash website gets loaded into the preloader Flash mo"ie, the preloader Flash mo"ie will calculate and display the loading progress. (o do this, the preloader Flash mo"ie needs to contain the ff/

• the ActionScript code that does the preloading

• the "isual elements of the preloader 0such as the progress bar and the percentage te!t field1

(his tutorial comes with - e!ercise files/

$. reloader!1"Startfla

(his will generate our preloader Flash mo"ie. (his is where we will put the ActionScript 3 code for preloading a

Flash website or file.

-. allinswf

(his is the Flash mo"ie that we will be preloading. It just contains a picture of some poer chips and some animated

te!t that says 2all in2.

)ae sure that you sa"e both files in the same folder. therwise, the preloader Flash mo"ie might not find the Flashmo"ie that we want to preload.

*et's first tae a loo at the contents of our preloader Flash mo"ie. So go ahead and openthereloader!1"Startfla file. n the stage you will see a mo"ie clip instance named 4rogress5ar_mc and adynamic te!t field named 4ercent_t)t.



(hey will both be used to indicate the loading progress. (he progress bar gets fuller as the loading progresses, andthe te!t field shows the percentage "alue of how much has already been loaded.

If you loo at the main timeline, you'll see that it has only one frame. ut if you go inside the progress bar mo"ie clip, you'll see that it contains some animation inside it. You can double4clic on the progress bar mo"ie clip to go insideits timeline.

$%&E' If you ha"e trouble selecting the progress bar, mae sure that you clic on the border.

nce you're inside the progress bar mo"ie clip's timeline, you'll see that it contains a layer named (ar that has ashape tween.

(his shape tween shows the progress bar going from empty to full. You can test the mo"ie to see how it loos lie.ut when you test it, you'll just see the progress bar animate and loop endlessly. You won't see the te!t field update

itself, and you won't see anything load yet. (hat's because we ha"en't added any code.

(his progress bar animation will be used to represent the loading progress. You'll notice that the animation insidethe progress bar mo"ie clip's timeline is made up of $&& frames.



(his is not an arbitrary number. (he animation really has to ha"e $&& frames because we want it to represent $&&5.6ach frame of the animation, represents one percent of the file that we are going to preload. (he great thing aboutthis is that you can just replace the animation with something else if you want a different progress bar. 7ust maesure that it has $&& frames. It doesn't e"en ha"e to be a progress bar. You can be more creati"e with your preloaderanimation if you want. ut don't go too o"erboard with your preloader animation. If you do, then your preloader

Flash mo"ie might end up ha"ing such a large file si#e that it will end up needing its own preloader.

)E*E*+E)' (he animation is I8SI96 the progress bar mo"ie clip's timeline, 8( on the main timeline.

So let's begin adding our ActionScript 3 preloader code. If you're still inside the timeline of the progress bar mo"ieclip, mae sure that you go bac to the main timeline by clicing on the *cene , lin.

nce you're bac on the main timeline, select frame $ of the Actions layer and then open up the Actions panel.

S&E 1

First, let's stop the progress bar animation. e don't want the progress bar to start mo"ing right away. e only wantit to start mo"ing once the loading process has started. So mae it stop using the sto4($ method.

4rogress5ar_mc.sto4($;

S&E 2

(hen create a Loader and a 6RLRe7uest object/


var myLoader:Loader = new Loader();

var myURL:URLRequest = new URLRequest("allin.swf");

What are these o(,ects for?

Loader objects are used to load e!ternal SF files into a Flash mo"ie. So this Loader object is going to beresponsible for loading the Flash mo"ie that we want to preload. ithout this object, then we would not be able toload our main Flash mo"ie into our preloader Flash mo"ie. In our e!ample, the e!ternal file that we want to load

would be allin.sw%.

$%&E' Aside from being able to load SF files, Loader objects also ha"e the ability to load 7:;, :8;, and ;IFfiles.

(he 6RLRe7uest object is used to specify the path to the e!ternal file that you would lie to load. (his is what willtell the Loader what it's supposed to load. In this e!ample, we want to load the allin.sw% file, so that's why wetyped the file name inside the parentheses of the 6RLRe7uest($ constructor.

$%&E' You must pass the file name or path to the 6RLRe7uest($ constructor as a string. So it should be in<uotation mars.

So to recap, the Loader object loads the file, while the 6RLRe7uest is used to specify the path to the file that needs

to be loaded.



S&E 3

At this point, let's now load the e!ternal SF file into our preloader flash mo"ie. ut before we continue, I must warn you/ after we load the e!ternal SF file, we won't see it yet. ut that's o. e'll fi! that later on.

(o load the e!ternal file, we use the load($ method of the Loader class. (he load($ method needs an argument.

It needs to now which file you want to load. e'"e already specified that when we created the6RLRe7uest object.So we simply pass the 6RLRe7uest object as an argument to the load($ method.

So let's go ahead and use m8Loader 0our Loader object1 to load allin.sw% 0the e!ternal SF file that we want topreload as specified in the m86RL 6RLRe7uest object1 using the load($ method. ;o bac to the code and add

the load($ statement highlighted in bold/


var m8Loader:Loader = new Loader($;

var m86RL:6RLRe7uest = new 6RLRe7uest(0allin.sw%0$;

myLoader.load(myURL);

So this new line that we'"e added tells the m8Loader object to begin loading the file re<uested by the m86RLobject0which is allin.sw%1. ithout this line, then the loading will not start.

ut remember, as I'"e mentioned earlier, when we test the mo"ie, we won't see the file come out on the stage just yet. (hat's because we'"e told Flash to load it, but we ha"en't told Flash to display it yet. *oading and displaying aretwo different things. ut don't worry, we'll fi! that later on.

S&E -

8e!t, we'll need some e"ent handlers. (hese e"ent handlers that we're about to add are e"ents that relate to theloading progress and loading completion of our e!ternal file. (hese e"ents are/1 ro.ressEvent)%/)ESS(his e"ent refers to the progress of the loading process. It is acti"e all throughout the time that the e!ternal file is

being loaded. (he e"ent is dispatched e"ery time new data from the e!ternal file is being loaded into the Flashdocument by the Loader.

2 EventC%*0E&E(his e"ent is dispatched when the e!ternal file has successfully completed the loading process.

I'll e!plain what these e"ent handlers will do later on, but for now, add the following code highlighted in bold/




m8Loader.load(m86RL$;

myLoader.contentLoaderInfo.addEventListener(ro!ressEvent.R#RE$$%loadin!);

myLoader.contentLoaderInfo.addEventListener(Event.&'LEE% loaded);



function loadin!(e:ro!ressEvent):void

99This will contain the %ormula that will calculate the loading 4rogress

99as well as the code that will control the 4rogress bar animation

99and the te)t %ield out4ut

*

function loaded(e:Event):void

99ere# we will s4eci%8 what will ha44en once the %ile has loaded success%ull8

*

$%&E' (hese two e"ent listeners that I just mentioned are $%& added directly to the Loader object. You add themto the contentLoadern%o property of the Loader object instead. So instead oftypingm8Loader.addEventListener(...$ , you'll type

inm8Loader.contentLoadern%o.addEventListener(...$ .

S&E

+ight now, we just created - empty e"ent listener functions. ne for <rogressEvent.<R>RE** , and another one

for E?ENT.@om4lete.

*et's go ahead and complete the loading function first. (his function is the one that we assigned tothe<rogressEvent.<R>RE** e"ent, so this means that this function will get called numerous times 4 it will be

called each time new data from the e!ternal file gets loaded into our preloader Flash mo"ie. So basically, this e"enteeps happening as the loading progress occurs 0hence the name <rogressEvent.<R>RE**1. ecause of that, wecan use it to write some code that will calculate and update the user regarding the loading progress.

;o to the loading function, and add the following lines highlighted in bold/

%unction loading(e:<rogressEvent$:void

&

var nercent:+um,er = 'at-.round(e.,ytesLoaded e.,ytesotal / 011);

2ercent3t4t.te4t = nercent.to$trin!() 5 "6";

2ro!ress7ar3mc.!oto8nd$to2(nercent);

So now we just added 3 new lines inside the loading function. *et's try to understand what these lines are for.

1st line' var n<ercent:Number = "ath.round(e.b8tesLoaded 9 e.b8tesTotal A ,$;(he first line calculates for the loading percentage. In order to calculate for the loading percentage, you will need toget the amount of bytes that ha"e already been loaded, and di"ide it by the e!ternal file's total number of bytes. Andthen we multiply that "alue by $&& to con"ert the "alue into percent.

So how do I .et the nm(er of (tes that have (een loaded and the total nm(er of (tes?(his information automatically gets passed to the <rogressEvent.<R>RE** listener function 0which in this caseis our loading function1. (he number of bytes that ha"e already been loaded can be retrie"ed usingthe (tes0oaded property, while the file's total number of bytes can be retrie"ed using the (tes&otal property. (oaccess these properties, we use our e"ent object 4 e/

e.b8tesLoaded 4 the number of bytes that ha"e been loadede.b8tesTotal 4 the e!ternal file's total number of bytes 0or its total file si#e1



(hen di"ide those two "alues and multiply by $&& to get the percentage "alue.

e.b8tesLoaded 9 e.b8tesTotal A ,;

(hen use *athrond45 in order to round the "alue to a whole number.

'at-.round(e.b8tesLoaded 9 e.b8tesTotal A ,);

(hen we assign the e<uation to a "ariable 0which I named n<ercent1/

var nercent:+um,er = "ath.round(e.b8tesLoaded 9 e.b8tesTotal A ,$;

And that is what the first line in the loading function means.

e will then use this n<ercent "ariable for - things/ 415 to display the percentage "alue in the te!t field and 425tocontrol the animation of the progress bar.

2nd line' 4ercent_t)t.te)t = n<ercent.to*tring($ ' 0B0;

(he second line in the loading function displays the "alue of n<ercent in the dynamic te!t field on the stage. I'"enamed the dynamic te!t field 4ercent_t)t. (he te)t property of the Te)tield class lets you assign the te!tthat you want to appear in the te!t field. So we assign the n<ercent "ariable to it in order to display its "alue in the

te!t field. owe"er, n<ercent is of the Number data type. (e!t fields can only display strings so we simplycon"ert n<ercent to the *tring data type using the to*tring($ method. If you want the number to appear witha percent sign, then simply concatenate the "alue with the percent061 character.

$%&E' (he to*tring($ method will not con"ert the numbers into letters. For e!ample, - will not be con"erted

to for. It will still be displayed as - but will be treated as a Strin. instead of a $m(er. e need to do that sothat the te!t field will accept it.

3rd line' 4rogress5ar_mc.goto!nd*to4(n<ercent$;(he last line in the loading function controls the timeline of the 4rogress5ar_mc )o"ie=lip. +ecall that there isa $&& frame animation inside this )o"ie=lip. n frame $, the progress bar is empty. As the animation progresses,then the progress bar fills up until it is completely filled at frame $&&. (here's a reason why we want the animation to

ha"e $&& frames. e want to associate each frame number with the percentage of data that has been loaded. If -&5of the e!ternal file has been loaded, then we want the playhead to mo"e to frame -& of the progress bar animation. If %&5 of the data has been loaded, then we want the playhead to mo"e to frame %&, and so on... In order to do that, wecan use the goto!nd*to4($ method of the "ovie@li4 class and pass n<ercentto it. So as n<ercent increases,then the animation mo"es forward in sync with the percentage "alue.

$%&E' It is important that n<ercent is rounded to a whole number because of this line. (hat's why we

used"ath.round($ to round it. e cannot tell Flash to go to a frame no. 2-3, for e!ample, since there is noframe no. -%.>3. Frame numbers are always whole numbers.

And that completes our loading function. In the ne!t step, we'll test the mo"ie, but we'll simulate the downloadprocess when we do the testing. (his means we'll mae the mo"ie beha"e as if we're actually "iewing it online, soinstead of finishing the loading process right away, we'll wait a while as if we were actually "iewing it online. e

want to simulate the download so that we can actually see the progress bar update. If we didn't simulate thedownload, then e"erything will just load right away.

S&E 7

How do we simlate the download?First, you must test the mo"ie. (he eyboard shortcut for testing the mo"ie is ctrl 8 enter 0indows1 or cmd 8retrn 0)ac1.

nce you test the mo"ie, you should see the progress indicators go to $&&5 right away. (his means that the e!ternalSF file has already been loaded 0but remember, you won't see it yet?1. (hat was pretty fast? e just tested themo"ie, and all of sudden it loads right away. (hat's because our files are just in our hard dri"e. So let's change a few

settings that will mae Flash pretend as if we were testing this online instead.

So while the test mo"ie window is still there, go to the 9iew menu. If you're on a )ac, the 9iew menu can be foundin the menu bar at the top of your Flash worspace. If you're on indows, the 9iew menu can be found at the top of the actual test mo"ie window.



So go to 9iew , and then go to :ownload Settin.s, and then choose the desired download speed. *et's choosethe 7; speed. (his means that when we test the mo"ie, Flash is going to beha"e as if we were "iewing it onlineusing a %@ connection. (his is a pretty slow connection, so our small e!ternal SF file should tae about B to Cseconds to load.

8ow that we'"e chosen a speed, go to 9iew again, and then choose Simlate :ownload. (his will test the mo"ieagain, but will beha"e as if we we're "iewing it with a %@ connection. (his time, you should now see the progress

bar update.

At this point, you still won't see the e!ternal SF file appear on the stage. ut it is being loaded. e'll be fi!ing thecode soon so that we actually get to see the allin.sw% file once the loading completes.

S&E <

*et's now go to the loaded function and put some code inside it. (he loaded function is the listener function that we assigned to E?ENT.@om4lete. (his means that this function will get called, once m8Loader finishes loading

the e!ternal SF file. So whate"er it is that we want to happen once the loading is complete, we should place in thisfunction.

ne of the first things we want to do is to remo"e the progress bar and te!t field from the stage. Some people might want to lea"e these "isible, but I prefer to remo"e them so the stage won't be so cluttered.

So go to the loaded function, and add the following lines/

%unction loaded(e:Event$:void

&

remove&-ild(2ro!ress7ar3mc);

remove&-ild(2ercent3t4t);

nce the loading is complete, these - lines will remo"e the 4rogress5ar_mc and 4ercent_t)t display objects

from the stage.

$%&E' Another option would be to use the visible property/

4rogress5ar_mc.visible = %alse;

4ercent_t)t.visible = %alse;

S&E =

So now, test the mo"ie again. e sure to simulate the download. You should see the progress bar and te!t fielddisapper once it gets to $&&5.

S&E >

So now, let's go ahead and mae sure that we actually see the e!ternally loaded SF file once the loading iscomplete. (o do that, we need to add it to the display list. If we can remo"e things from the display listusingremove@hild($# then we can add things to the display list using add@hild($. hen you add something tothe display list, it means that the display object can now be seen.

So go bac to the loaded function and add the following line highlighted in bold/


&

remove@hild(4rogress5ar_mc$;

remove@hild(4ercent_t)t$;

add&-ild(myLoader);



So here, we are adding m8Loader to the display list. e should now see the e!ternally loaded SF file show up on

the stage once the loading is complete.

+t wh are we addin. m8Loader? Sholdnt we add allin.sw%?allin.sw% is actually inside m8Loader. hen a Loader object loads an e!ternal file, the e!ternal file is actually

loaded inside the Loader object itself. So the e!ternal file becomes a child of the Loader object that loaded it. So if you add the Loader to the display list, then its child gets added as well.

S&E 1!

So now, go ahead and test the mo"ie. e sure to simulate the download as well. And you should now see thee!ternally loaded SF file appear on stage once the loading is complete.

S&E 11

*astly, I want to remo"e a few more things once the loading is complete. I want to remo"e the e"ent listeners that wecreated. So go bac inside the loaded function and add removeEventListener($ statements for

the<rogressEvent.<R>RE** and Event.@"<LETE listeners.


&



add@hild(m8Loader$;

myLoader.contentLoaderInfo.removeEventListener(ro!ressEvent.R#RE$$%loadin!);

myLoader.contentLoaderInfo.removeEventListener(Event.&'LEE% loaded);

Wh are we removin. them?In this case, it's because we no longer need them once the loading is complete. It's a good habit to remo"e listenersthat you no longer need. It might help you sa"e more computing resources in the long run, especially if you ha"e a

pretty hea"y Flash mo"ie. ut if your Flash mo"ie needs to preload something again, you might need to eep thee"ent listeners a"ailable instead of remo"ing them. r you can also just add them again at some point in your code.*iewise, you should add the 4rogress5ar_mc and 4ercent_t)t display objects bac to the stage if your Flashmo"ie needs to preload another e!ternal SF file. If you try to remo"e something that's already been remo"edusing remove@hild($, then you'll get an error message. So be sure to add those bac if you need them again. ut in

this e!ample, we're only loading one e!ternal SF file, so there won't be a need for that.

$%&E' 6ach Loader object can only load an e!ternal file one at a time. If you want to load multiple e!ternal files allat once, then you should create multiple Loader objects.

And that completes our preloader. ere's the full code/




m8Loader.load(m86RL$;



m8Loader.contentLoadern%o.addEventListener(<rogressEvent.<R>RE**# loading$;

m8Loader.contentLoadern%o.addEventListener(Event.@"<LETE# loaded$;

%unction loading(e:<rogressEvent$:void

&

var n<ercent:Number = "ath.round(e.b8tesLoaded 9 e.b8tesTotal A ,$;

4ercent_t)t.te)t = n<ercent.to*tring($ ' 0B0;

4rogress5ar_mc.goto!nd*to4(n<ercent$;


&



add@hild(m8Loader$;

m8Loader.contentLoadern%o.removeEventListener(<rogressEvent.<R>RE**# loading$;

m8Loader.contentLoadern%o.removeEventListener(Event.@"<LETE# loaded$;

as3 practice exercises

Documents