Zoom Website via Actionscript 3
In this tutorial, I'll show you how to create a one frame website using Actionscript 3. You can see the end result in the movie above.
Setting up the environment
1. Create a new document of size 300x300.
2. Draw three different colored rectangles. Make them 100x100.
3. Type some text on them, eg. "page 1", "page 2" and "page 3".
4. Convert each rectangle into a movie clip. You can name them however you want, just set the registration points to the center!
5. Position the rectangles as in the image below.
6. Give the rectangles instance names, "page01", "page02" and "page03".
Moving into Actionscript
First, don't get scared of the amount of code! It's really straight forward, if you bother to read the comments as well.
7. Create a new layer for actionscript. Type the following in the first frame.
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
//Store the current page that is displayed
var currentPage:MovieClip = null;
//This array holds all the tweens so they won't get
//carbage collected
var tweens:Array = new Array();
//Make the buttons 50% transparent
page01.alpha = 0.5;
page02.alpha = 0.5;
page03.alpha = 0.5;
//Make the pages look like button (hand cursor)
page01.buttonMode = true;
page02.buttonMode = true;
page03.buttonMode = true;
//Add all the necessary event listeners
addEventListeners();
//This function adds the necessary event listeners for the buttons
function addEventListeners():void {
//Add mouse over handlers for each button
page01.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
page02.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
page03.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
//Add mouse out handlers for each button
page01.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
page02.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
page03.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
//Add mouse click handlers for each button
page01.addEventListener(MouseEvent.CLICK, mouseClickHandler);
page02.addEventListener(MouseEvent.CLICK, mouseClickHandler);
page03.addEventListener(MouseEvent.CLICK, mouseClickHandler);
}
//This function removes all the event listeners created
//in the addEventListeners() function
function removeEventListeners():void {
//Add mouse over handlers for each button
page01.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
page02.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
page03.removeEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
//Add mouse out handlers for each button
page01.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
page02.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
page03.removeEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
//Add mouse click handlers for each button
page01.removeEventListener(MouseEvent.CLICK, mouseClickHandler);
page02.removeEventListener(MouseEvent.CLICK, mouseClickHandler);
page03.removeEventListener(MouseEvent.CLICK, mouseClickHandler);
}
//This is called when the mouse is over the button
function mouseOverHandler(e:MouseEvent):void {
//Get the button from the event
var button:MovieClip = e.target as MovieClip;
//Fully opaque
button.alpha = 1;
}
//This is called when the mouse moves away from the button
function mouseOutHandler(e:MouseEvent):void {
//Get the button from the event
var button:MovieClip = e.target as MovieClip;
//50% transparent
button.alpha = 0.5;
}
//This is called when the mouse is clicked on a button
function mouseClickHandler(e:MouseEvent):void {
//Remove the event listeners while we animate
removeEventListeners();
//Get the button from the event
var button:MovieClip = e.target as MovieClip;
//Clicked button is now our current page
currentPage = button;
//Make the current page fully opaque
currentPage.alpha = 1;
//Add the current page to the top of the stage
setChildIndex(currentPage, 2);
//Animate the button to the center of the stage
var tweenX:Tween = new Tween(currentPage, "x", Regular.easeOut,
currentPage.x, 150, 0.5, true);
//Push the tween to an array
tweens.push(tweenX);
//Listen when the tween is finished
tweenX.addEventListener(TweenEvent.MOTION_FINISH, centerTweenFinished);
}
//This is called when the page is moved to the center of the stage
function centerTweenFinished(e:TweenEvent):void {
//Grow the page to almost full screen size
var tweenX:Tween = new Tween(currentPage, "scaleX", Regular.easeOut,
1, 2.5, 1, true);
var tweenY :Tween = new Tween(currentPage, "scaleY", Regular.easeOut,
1, 2.5, 1, true);
//Add the tweens to the array
tweens.push(tweenX);
tweens.push(tweenY);
//Add a click listener for closing the current page
currentPage.addEventListener(MouseEvent.CLICK, currentPageClicked);
}
//This function is called when the current page is clicked
function currentPageClicked(e:Event):void {
//Scale the current page down
var tweenX:Tween = new Tween(currentPage, "scaleX", Regular.easeOut,
2.5, 1, 1, true);
var tweenY:Tween = new Tween(currentPage, "scaleY", Regular.easeOut,
2.5, 1, 1, true);
//Push the tweens to an array
tweens.push(tweenX);
tweens.push(tweenY);
//Listen when the scaling down is finished
tweenX.addEventListener(TweenEvent.MOTION_FINISH, scaleDownFinished);
//Remove the click listener for the current page
currentPage.removeEventListener(MouseEvent.CLICK, currentPageClicked);
}
//This function is called when scaling the current page down
//is finished
function scaleDownFinished(e:Event):void {
var tweenX:Tween;
//Move the current page to the original position
if (currentPage == page01) {
tweenX = new Tween(currentPage, "x", Regular.easeOut,
currentPage.x, 50, 0.5, true);
} else if (currentPage == page02) {
tweenX = new Tween(currentPage, "x", Regular.easeOut,
currentPage.x, 150, 0.5, true);
} else {
tweenX = new Tween(currentPage, "x", Regular.easeOut,
currentPage.x, 250, 0.5, true);
}
//Push the tween to an array
tweens.push(tweenX);
//Add all the event listeners back
addEventListeners();
}
You are done, test your new Flash movie! If you have any questions, please visit the forum.
