Website with ActionScript 3
February 6, 2009 by: smonteIf you have ever wondered, how Flash and ActionScript websites are structured, this tutorial is for you! We’ll be building a website with three different pages.
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 500×400.
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.
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 500×300.
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(); }
Related tutorials:
Comments
19 Responses to “Website with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
Hi
I did the tutorial and everything works fine but the problem it’s when I load a new swf
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at lafogata_fla::MainTimeline/frame1()
Hi,this is great tutorial..and i wonna thanks for this..but i must ask hoe to implement in your code something to disable button when its cliked..it is litle annoying to every time you click on the button the swf loaded again
)
tnx in advance
))
I’m attempting to use this code in a existing project and found a couple of things that fall short, or perhaps there’s something that I’ve not added to fix it (?) I’m new to flash design. And this is ALMOST exactly what I need and I really do appreciated it.
1) Apparently the BUTTON can’t have dynamic text and can not be an animated movie clip. (having a tween applied anyhow)
2) I can’t control which layer the loader loads the movie into. I’d like it to be under a mask.
Am I wrong about these assumptions? Is there a fix in the code that would allow this?
Any Help would really be appreciated.
Thank Smonte for this very awesome tutorial.
I have a problem, I did the same as the tutorial and everything work fine.
The movie (page1.swf) that i tried to load on to the mainpage.swf is an animation with 30 frames with action script.
(page1.swf) files, On the first frame with [ stop(); ], I made a button, so whenever you click on it, it will go to frame 2 and play the rest of the animation, and it works fine itself.
The problem is, when I loaded it (page1.swf) into the mainpage.swf, the button on the first frame is not go to frame 2 and play the rest of animation when you click on it. Seem like the mainpage only display the first frame of page1.swf.
Can anyone able to help me with this problem? I tried my best to explain everything.
Thanks!
Hey i was just trying to use this effect on a portfolio project for school. I modified it and made it so there would be more buttons, but I dont wanna use static info, like not text or images or anythign. I Actually wanted to have other SWF projects coming in, but i need to have the windows sliding be in, be totally seperated form the main page. its complicated, but can anybody help?
ups… sorry I got it
page01Button.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
I have a question, how can I make a preloader to these swf to load them in the main content? Where should I put the lines to preload them? Help, learning AS3 :/
//I have a question, how can I make a preloader to these swf to load them in the main content? Where should I put the lines to preload them? Help, learning AS3 :/ //
yogiii:
I would put the preloader in the swf being loaded. Meaning, if you are calling x, via a page01button, put the preloader on that swf (x) so that after it tweens in, the loader will start.
Since it is calling an external file (via URLRequest), I don’t think flash will preload that content as well as part of the site. From a programming point of view, it’s not loaded in to the main document till the button is pressed.
hope that helps.
How can I make a page (1,2,or3) to appear after after running swf?
Hello,
to align the mc buttons in the main i have :
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
function resizeHandler(e:Event):void
{
page01Button.x = 5;
page01Button.y = 5;
page02Button.x = 100;
page02Button.y = 5;
page03Button.x = 200;
page03Button.y = 5;
}
stage.addEventListener(Event.RESIZE, resizeHandler);
stage.dispatchEvent(new Event(Event.RESIZE));
but if i try to align the mc for the external swf, the flash give an error 1009.
This error basically means that you are trying to reference something that isn’t there yet. That something can be a variable, data from the server, or even a movieClip or other display instance.
Do you know a way to align an mc in the external swf ?
Thank you for your time,
Hi, I wonder if you can help.
I have followed the tutorial but I have one problem. Every time I click a button page 3 loads. I have definately named the button instances btn1,btn2 & btn3 individually and I have also got page1.swf , page2.swf & page3.swf in the same folder as the main.swf.
I tried putting a trace in the ‘if’ statements and it says I am clicking on button 3 evertytime even when I am clicking on buttons 1 or 2. Finally I tried copying and pasting the code above into my .fla instead of typing them and still got the same results.
Can anyone help? Thanks.
Please check you have created “static text fields” not “dynamic text fields”.
I had the same Problem
Don’t forget these
//Assign CLICK listeners for each menu button
page01Button.addEventListener (MouseEvent.CLICK, buttonClicked);
page02Button.addEventListener (MouseEvent.CLICK, buttonClicked);
page03Button.addEventListener (MouseEvent.CLICK, buttonClicked);
page04Button.addEventListener (MouseEvent.CLICK, buttonClicked);
page05Button.addEventListener (MouseEvent.CLICK, buttonClicked);
//Make the buttons look like buttons (hand cursor appears on hover)
page01Button.buttonMode = true;
page02Button.buttonMode = true;
page03Button.buttonMode = true;
page04Button.buttonMode = true;
page05Button.buttonMode = true;
//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 if (e.target == page03Button) {
urlRequest = new URLRequest(\page3.swf\);
loader.load (urlRequest);
}
//We load page4 since we know that page01Button or page02Button
//is not clicked
else if (e.target == page04Button) {
urlRequest = new URLRequest(\page4.swf\);
loader.load (urlRequest);
}
//We load page5 since we know that page01Button or page02Button
//is not clicked
else {
urlRequest = new URLRequest(\page5.swf\);
loader.load (urlRequest);
}
this code is for Willie. Sorry it didn’t go to the right place
This is a great tutorial and I will definitely use it.
I do have one question. If I want to load movie clips rather than external swfs, what would that code be?
Thanks!
I have a quick question
If I have extra swf. pages how would I write that in the AS panel… like page4.. page5… page6… is it the same AS syntax..as the others?
please reply thank you so much
thanks for this super useful bit of code to practice with!
what if i would like to call up an external SWF to already play before any of the buttons are clicked? what would be the code for that? as the buttons are clicked it would unload the initial SWF and load the URLRequest assigned to each button…
apologies if this is such a n00b question – still getting a hang of AS3!
thank you a lot! Everything is ok!
Hi,
You can dispatch an event as well. So you can actually fake that the user has clicked the first button.
page01Button.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
Add that line to the end of the code and it should work (hopefully!).
Hello, I have question.
Everything ok but for the start scene is empty, after click button swf is loaded.
I want to add page before click also.
How can I do it?