Complex RollOver button using AS 3

In this tutorial, I will teach you how to create complex rollover button using actionscript 3.0.
Flash CS3, AS 3.0



Output:



Download Source Files

Step 1: Open a new flash document and select Flash File(ActionScript 3.0)

Step 2: Select the Oval tool (o) from tools panel.

Step 3: Draw a circle in the center of the stage.

Step 4: Convert the circle to a movieclip.

Step 5: Give myBT as instance name to the circle.

Step 6: Now, Create Motion Tween animation of circle growing. (upto frame 30)

Step 7: Insert a new layer, and name it as actions. Here we will write our
actionscript 3 code.

Step 8: on the first frame copy & paste this code:


stop();
var rewind:Boolean = false;
myBT.addEventListener(MouseEvent.ROLL_OVER,growUP);
myBT.addEventListener(MouseEvent.ROLL_OUT,growDown);
myBT.addEventListener(MouseEvent.CLICK,gotoSite);

myBT.buttonMode = true;
myBT.useHandCursor = true;

function growUP(e:MouseEvent):void{
play();
rewind = false;
}

function growDown(e:MouseEvent):void{
rewind = true;
}
function gotoSite(e:MouseEvent):void{
navigateToURL(new URLRequest("http://www.getw3help.com"),"_blank");
}

this.addEventListener(Event.ENTER_FRAME,revFrame);
function revFrame(e:Event):void{
if(rewind == true){
prevFrame();
}
}


Step 9: On the last frame create a blank keyframe and give stop(); command to it.

Step 10: Ctrl + Enter to test the flash movie.


Code Explanation:


var rewind:Boolean = false;


A variable used to store the rollover condition of the button. If the button is rolled over it will be assigned as true and if the button is rolled out, rewind will be false. If the button is rolled over it will be assigned as false and if the button is rolled out, rewind will be true.



myBT.addEventListener(MouseEvent.ROLL_OVER,growUP);
myBT.addEventListener(MouseEvent.ROLL_OUT,growDown);
myBT.addEventListener(MouseEvent.CLICK,gotoSite);


Adding event listeners to the button. On rollover state we call growUP function. On rolled out state we call growDown function. When the button is click we call gotoSite function.


myBT.buttonMode = true;
myBT.useHandCursor = true;


Since we are using a movieclip, to get the hand cursor on the button we have to enable the buttonMode and useHandCursor.


function growUP(e:MouseEvent):void{
play();
rewind = false;
}


This function is called when the movieclip is rolled over, this function calls the play(); and lets the flash movie to play.


function growDown(e:MouseEvent):void{
rewind = true;
}


When the movieclip is rolled out, we assign rewind as false.


function gotoSite(e:MouseEvent):void{
trace("hello");
navigateToURL(new URLRequest("http://www.getw3help.com"));
}

This function is called when the movieclip is clicked. We call the navigateToURL to go to the required URL.


this.addEventListener(Event.ENTER_FRAME,revFrame);
function revFrame(e:Event):void{
if(rewind == true){
prevFrame();
}
}

This code is similar to onEnterFrame in AS2, it keeps checking rewind, if rewind is true it just goes back to the previous frame from the current frame.

- End of Tutorial

Labels: ActionScript 3, Flash

Continue Reading!

Google Chrome available for Download

Guess what, Google has released its own web browser Google Chrome which is available for download (here). Google Chrome is still in BETA, so it might have some glitches.


Here are the key features of Chrome:

1. Each tabs in Chrome has its own memory process, so when one tab gets crashed the whole browser doesn't get crashed.

2. Tabs are place above the address bar.

3. There is a in-bult task manager for the browser, which tells which site consumes more memory.
(Right click on the title bar, you can find task manager)

4. Interfafce is clean and simle just like GTalk. There is more space for browsing area.

5. Bookmarks can be either be placed only on the home page tab or in all tabs.

6. Home page contains the thumbnail view of the most visted websites.

7. Text Area form can be expnaded.

8. Tab can be dragged out, to make it as a new window.

9. Finally, I find Chrome to be faster than Firefox.


Some glicthes I found:
1. When I load any flash(heavy ones) content it seems to hang for few seconds, but it recovers, it doesn't get crashed.


Related Links:
Comic Book: A comic book on Google Chrome, which explains about its features and working.
Download Chrome
Official Announcement

Labels: Blog, Google

Continue Reading!