In part 1 I have covered some basics of AS3, I talked about where to find help when you have any kind of ActionScript 3.0 problem, I posted some usefull links but we havent done anythink practical (if you havent read the part one here it is) :) In part 2 we will make simple AS3 menu (see it) that uses the Tweener for animaction.
So first we have to create ActionScript 3.0 flash project, then link to it an AS3 class (using document class), and draw some simple button. My button is a MovieClip called MyButton and exported for the actionscript with the same name (if you dont know how to export fo actionscript, right-click the MovieClip in your library go to properties and check the “Export for ActionScript” and then click “ok”). Inside of MyButton I have two layers the bottom layer containing the MovieClip with background, simple grey rectangle with instance name of ‘bg’, the second layer contains a MovieClip with instance name of ‘txt’ that contains the dynamic text field with an instance name of ‘tf’ (for text field), the TextField selectable mode is set 
to false, alwso its embeded (it’s important!) and antyaliased. If you dont embed the font this font could be changed to default if someone doesnt have it. You can see how MyButton looks like on the picture. (I have alwso attached the source files, you will find them at the bottom ready for download :) )
We have setuped the fla file (you just need to have the button in the library exported for actionscript), now we can get our hands dirty with some ActionScript. Open up your AS3 class I have called mine ‘Actions’, at the begening you should have somethink like this:
package { import flash.display.Sprite; public class Actions extends Sprite { public function Actions () { // constructor } } }
Now we will write our addButtons function, these function will add our buttons to the stage, set the events and basic parameters:
private function addButtons():void { /*/NAMES OF OUR DIRECTORIES/*/ var names:Array = new Array("NEWS", "MY BLOG", "FLASH DEN", "ABOUT ME", "CONTACT"); for (var i:int = 0; i < 5; i++) { // First we create button var myButton:MyButton = new MyButton(); // Then we asign to it the name from the array myButton.txt.tf.text = names[i]; // Then we give it the name myButton.name = "b" + i; /* Then we set the buttonMode to true, we want the hand cursor to be shown after roll over;*/ myButton.buttonMode = true; /* we set mouseChildren to false to avoid any mouse respons from the children of out button;*/ myButton.mouseChildren = false; // now we add events ROLL_OVER, ROLL_OUT, CLICK myButton.addEventListener(MouseEvent.ROLL_OUT, bOut); myButton.addEventListener(MouseEvent.ROLL_OVER, bOver); myButton.addEventListener(MouseEvent.CLICK, bClick); // we set the x and y of our button myButton.x = 50; myButton.y = 50 + (myButton.height * i); // and finally we add our button to the stage(dispaly list); addChild(myButton); } }
In this function we have placed the names of our buttons into the array we could read them from xml file or data base but for this tutorial it wont be nesecary. So we have buttons on the stage but if you try to compile right now you will get an error because we havent definied the MousEvent functions: bOver, bOut, bClick. First we will take care of the Roll over and Roll out effect, we will use Tweener to make cool looking and simple animation. If you dont have tweener download it here(unzip it and add it to you class path or just place the caurina folder in the same folder as the fla file), here you can find the tweener documentation. I know there are other tweening engines but I use tweener not because I think it’s the best, I use it because it fulfill my criteria. If you want to know more about tweener and its options you can look at the documentation, you can find there examples of use and full specification.
/*/EVENTS/*/ private function bOver(e:MouseEvent):void { // Button background animaction Tweener.addTween(e.target.bg, { _color:0x222222, time:0.5, transition:"easeOutExpo" } ); // Text animaction Tweener.addTween(e.target.txt, { x:20, _color:0xFF6600, time:0.5, transition:"easeOutExpo" } ); } private function bOut(e:MouseEvent):void { // Button background animaction Tweener.addTween(e.target.bg, { _color:null, time:0.5, transition:"easeOutExpo" } ); // Text animaction Tweener.addTween(e.target.txt, { x:4, time:0.5, _color:null, transition:"easeOutExpo" } ); } private function bClick(e:MouseEvent):void { trace("button clicked"); }
If you test the movie now it should work and animate just fine unless you forgot to import nesecary calsses:
/*/IMPORTS/*/ import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.net.URLRequest; import flash.net.navigateToURL; import caurina.transitions.*; import caurina.transitions.properties.ColorShortcuts; ColorShortcuts.init();
Now we want to add the typical menu functionalyty, button clicked have to stay selected until we click another button to do this we create the object called ‘off’ that will represent out clicked button so what we will do: when someone clicks the button we will remove the events from this button so it wont respont to roll over, roll out or click event and asign him to the off object. After another button clicked we will add the events back to him and dispatch the ROLL_OUT events becuase without the dispatch it will still stay “roll overed” :) So here is the code:
private function bClick(e:MouseEvent):void { // here we check if any button is aalready clicked if (off != null) { // if soem button is already clicked we need to add his events back to him. off.buttonMode = true; off.addEventListener(MouseEvent.ROLL_OUT, bOut); off.addEventListener(MouseEvent.ROLL_OVER, bOver); off.addEventListener(MouseEvent.CLICK, bClick); off.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT)); } /* we are disabling the button that was clicked, * we will enable it when someone clicks another button*/ e.target.buttonMode = false; e.target.removeEventListener(MouseEvent.ROLL_OUT, bOut); e.target.removeEventListener(MouseEvent.ROLL_OVER, bOver); e.target.removeEventListener(MouseEvent.CLICK, bClick); off = e.target; }
If you paste this code into your class it will work as we expected but our Menu doesnt do anythink so at the end we will add some simple click action :) :
switch(e.target.name) { case "b1": navigateToURL(new URLRequest("http://www.blog.massiveProCreation.com"), "_blank"); break; case "b2": navigateToURL(new URLRequest("http://flashden.net?ref=mpc"), "_blank"); break; default: trace("I'm your button and I do nothink!"); break; }
When you put this switch into your bClick function it will navigate you to url after clicking on button 2 and 3 and after clicking on any other button it will just trace message.
So its really simple menu but it has potential, here you can see the final menu. If you want to download the source here it is: Simple Menu Source (385). I hope you enjoyed my tutorial :)
Here I paste the whole code:
package { /*/IMPORTS/*/ import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.net.URLRequest; import flash.net.navigateToURL; import caurina.transitions.*; import caurina.transitions.properties.ColorShortcuts; ColorShortcuts.init(); /** * ... * @massiveProCreation * www.blog.massiveProCreation.com */ public class Actions extends Sprite { /*/VARS/*/ private var off:Object; public function Actions () { addButtons(); } private function addButtons():void { /*/NAMES OF OUR DIRECTORIES/*/ var names:Array = new Array("NEWS", "MY BLOG", "FLASH DEN", "ABOUT ME", "CONTACT"); for (var i:int = 0; i < 5; i++) { // First we create button var myButton:MyButton = new MyButton(); // Then we asign to it the name from the array myButton.txt.tf.text = names[i]; // Then we give it the name myButton.name = "b" + i; // Then we set the buttonMode to true, we want the hand cursor to be shown after roll over; myButton.buttonMode = true; // we set mouseChildren to false to avoid any mouse respons from the children of out button; myButton.mouseChildren = false; // now we add events ROLL_OVER, ROLL_OUT, CLICK myButton.addEventListener(MouseEvent.ROLL_OUT, bOut); myButton.addEventListener(MouseEvent.ROLL_OVER, bOver); myButton.addEventListener(MouseEvent.CLICK, bClick); // we set the x and y of our button myButton.x = 50; myButton.y = 50 + (myButton.height * i); // and finally we add our button to the stage(dispaly list); addChild(myButton); } } /*/EVENTS/*/ private function bOver(e:MouseEvent):void { // Button background animaction Tweener.addTween(e.target.bg, { _color:0x222222, time:0.5, transition:"easeOutExpo" } ); // Text animaction Tweener.addTween(e.target.txt, { x:20, _color:0xFF6600, time:0.5, transition:"easeOutExpo" } ); } private function bOut(e:MouseEvent):void { // Button background animaction Tweener.addTween(e.target.bg, { _color:null, time:0.5, transition:"easeOutExpo" } ); // Text animaction Tweener.addTween(e.target.txt, { x:4, time:0.5, _color:null, transition:"easeOutExpo" } ); } private function bClick(e:MouseEvent):void { // here we check if any button is aalready clicked if (off != null) { // if soem button is already clicked we need to add his events back to him. off.buttonMode = true; off.addEventListener(MouseEvent.ROLL_OUT, bOut); off.addEventListener(MouseEvent.ROLL_OVER, bOver); off.addEventListener(MouseEvent.CLICK, bClick); off.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT)); } /* we are disabling the button that was clicked, * we will enable it when someone clicks another button*/ e.target.buttonMode = false; e.target.removeEventListener(MouseEvent.ROLL_OUT, bOut); e.target.removeEventListener(MouseEvent.ROLL_OVER, bOver); e.target.removeEventListener(MouseEvent.CLICK, bClick); off = e.target; // simple click action switch(e.target.name) { case "b1": navigateToURL(new URLRequest("http://www.blog.massiveProCreation.com"), "_blank"); break; case "b2": navigateToURL(new URLRequest("http://flashden.net?ref=mpc"), "_blank"); break; default: trace("I'm your button and I do nothink!"); break; } } } }
hey,
what is this:
764e777304341187771295b8d602afbc000
images not displayed right?
cheers
NN
somethink whent wrong with my blog, and code doesnt display I will fix that
Why not post video tutorials ? That will be more easy to follow and learn.
hmm english is not my native language so my accent is bad :P I dont know if you could understand me :)
[...] some text data. If you haven’t read the previous parts of AS3 Basics here they are: part1, part2, also if you don’t know what is XML check out [...]
Thanks you! Good tutorial, you could use names.length in the loop rather than 5 just a little improvement.. Keep the tutorials going.
yeap I could but I wanted to keep this simple :))
[...] and tweener ( if you are not fallowing along I recomend to read the previous tutorials: part 1, part 2 , part 3). Now it’s time to combine this knowlage in one project. We will make simple [...]
Hi! Thanks for this great tutorial. I am having a problem getting this to integrate with a current project I have where my actionscript is on the timeline. Do you know how I could get this to work in there or get my timeline actionscript to work in the external class? I’ve tried a lot of things myself, but I just can’t seem to get it to work!
Thanks again,
Brett
Hi please read the ActionScript Basics part 1, if you still have a trouble please let me know and I will try to help ;)
good stuff, thanks for the post; Although this is a bit of a review for me, I still walk away with some insights.
[...] 3.0 Basics part 1. Simple Menu, using tweener Tutorial. loading xml data. news reader [...]
[...] 3.0 Basics part 1. ActionScript 3.0 Basics part 2. ? Simple Menu, using tweener Tutorial. ActionScript 3.0 Basics part 3 -loading xml data. ActionScript 3.0 Basics part 4 ? news reader [...]
[...] 3.0 Basics part 1. ActionScript 3.0 Basics part 2. – Simple Menu, using tweener Tutorial. ActionScript 3.0 Basics part 3 -loading xml data. ActionScript 3.0 Basics part 4 – news reader [...]