Website with Actionscript 3.0

If you have ever wondered, how Flash and Actionscript websites are structured, this tutorial is for you! We'll be building a website as seen above. The site uses only one frame. All the animation and interaction is done with Actionscipt 3.0. Of course this site looks quite boring, but it gives you a great core for your website. It's really easy to add your interesting pages to this "template".

Creating the main page

The website will have one main movie, which contains the menu. All the content pages are separate .swf files, which are loaded according to menu button clicks. First, let's make the main page.

1. Create a new document of size 500x400.

2. Create three static text fields to the top of the page. Type some text into them, eg. "PAGE 1", "PAGE 2" and "PAGE 3" as in my movie.

3. Convert each text field into a movie clip. You can name them however you want. Set the registration point to the center.

4. Give them instance names "page01Button", "page02Button" and "page03Button". In the picture, the orange text shows the instance names.

Instance Names

Creating the content pages

In this website, we want to have three different content pages. So repeat steps 5-8 three times.

5. Create a new document of size 500x300.

6. Type some static text to the stage, so you'll know which page this is.

7. Save the movie as "page1" if this is the first page, "page2" if this is the second or "page3" if this is the third page. Remember to save it in the same folder where the main movie is!

8. Hit Ctrl + Enter to test the movie. A .swf file is generated. We'll be using that in the main movie later on.

Moving into Actionsctipt

Now that we have our content pages ready, we can go back to the main movie and start coding some Actionscript 3.

9. In your main movie, create an actions layer and type the following. 

import fl.transitions.*;
import fl.transitions.easing.*;

//Assign CLICK listeners for each menu button
page01Button.addEventListener (MouseEvent.CLICK, buttonClicked);
page02Button.addEventListener (MouseEvent.CLICK, buttonClicked);
page03Button.addEventListener (MouseEvent.CLICK, buttonClicked);

//Make the buttons look like buttons (hand cursor appears on hover)
page01Button.buttonMode = true;
page02Button.buttonMode = true;
page03Button.buttonMode = true;

//This loader is used to load the external swf files
var loader:Loader;

//URLRequest stores the path to the file to be loaded
var urlRequest:URLRequest;

//This array holds all the tweens, so they
//don't get garbage collected
var tweens:Array = new Array();

//Stores the current page we are displaying
var currentPage:MovieClip = null;

//Stores the next page that we are going to display
var nextPage:MovieClip = null;

//This function is called when a menu button is clicked
function buttonClicked (e:Event):void {
	
	//Create a new loader instance
	loader = new Loader();

	//If we clicked the first button, we load the page1
	if (e.target == page01Button) {

		urlRequest = new URLRequest("page1.swf");
		loader.load (urlRequest);
	}
	
	//If we clicked the second button, we load the page2
	else if (e.target == page02Button) {

		urlRequest = new URLRequest("page2.swf");
		loader.load (urlRequest);
	}
	
	//We load page3 since we know that page01Button or page02Button
	//is not clicked
	else {

		urlRequest = new URLRequest("page3.swf");
		loader.load (urlRequest);
	}
	
	//We want to know when the next page is finished loading
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fileLoaded);
	
}

//This function is called, when we have finished loading a content page
function fileLoaded(e:Event):void {
	
	//The loader contains the page we are going to display.
	nextPage = e.target.content;

	//Let's animate the current page away from the stage.
	//First, we need to make sure there is a current page on the stage.
	if(currentPage != null) {
		
		//Tween the current page from left to the right
		var tweenX:Tween = new Tween(currentPage, "x", Regular.easeOut, 
						currentPage.x, 500, 1, true);
		
		//Decrease the alpha to zero
		var tweenAlpha:Tween = new Tween(currentPage, "alpha", Regular.easeOut, 
						1, 0, 1, true);
		
		//Push the tweens into an array
		tweens.push(tweenX);
		tweens.push(tweenAlpha);
		
		//currentPageGone will be called when the tween is finished
		tweenX.addEventListener(TweenEvent.MOTION_FINISH, currentPageGone);
	}
	
	//There is no current page, so we can animate the next
	//page to the stage. The animation is done in
	//the showNextPage function.
	else {
		showNextPage();
	}
}

//This function animates and displayes the next page
function showNextPage():void {
	
		//Tween the next page from left to the center
		var tweenX:Tween = new Tween(nextPage, "x", Regular.easeOut, 
						-200, 0, 1, true);
		
		//Tween the alpha to from 0 to 1
		var tweenAlpha:Tween = new Tween(nextPage, "alpha", Regular.easeOut, 
						0, 1, 1, true);
		
		//Push the tweens into an array
		tweens.push(tweenX);
		tweens.push(tweenAlpha);
		
		//Add the next page to the stage
		addChild(nextPage);
		
		//Next page is now our current page
		currentPage = nextPage;
}

//This function is called when the current page has been animated away
function currentPageGone(e:Event):void {
	
	//Remove the current page completely
	removeChild(currentPage);
	
	//Let's show the next page
	showNextPage();
}

Bookmark and Share