ActionScript 3 Web Portfolio

February 6, 2009 by: smonte

In this tutorial, I will show you how to create a Flash portfolio just by using one frame and ActionScript 3.0.


Setting up the environment

1. Create a new document of size 400×250 and background black.

2. In the top left corner, create four (4) dynamic text fields of size 90×20. Type some text for them, eg. “Home”, “About”, “Work” and “School”.

3. Convert each text field into a movie clip (name it however you want, registration point doesn’t matter). Give them instance names of “homeButton”, “aboutButton”, “workButton” and “schoolButton”.

4. Create a new layer below the first one. Draw a rectangle of size 700×500.

5. Convert the rectangle into a movie clip. Set the registration point to the top left corner. Name it however you want.

6. Set the movie clip to the top left corner of the stage. Give it an instance name of “mainPage”. This mainPage will contain all the text seen in the Flash movie.

7. Double click the mainPage movie clip. Inside of the movie clip, create four text fields according to the image below. Type some random text to the fields…

Moving into ActionScript 3.0

8. Creata a new layer for ActionScript in the main timeline. Type the following.

//We need these for the tween
import fl.transitions.easing.*;
import fl.transitions.*;
 
//This tween will be used to move the mainPage
var myTween:Tween;
 
//We don't want the text boxes inside of the movie clips to catch click events
homeButton.mouseChildren = false;
aboutButton.mouseChildren = false;
schoolButton.mouseChildren = false;
workButton.mouseChildren = false;
 
//Make the movie clips look like buttons (hand cursor appears)
homeButton.buttonMode = true;
aboutButton.buttonMode = true;
schoolButton.buttonMode = true;
workButton.buttonMode = true;
 
//Assign a click handler for each button
homeButton.addEventListener (MouseEvent.CLICK, clicked);
aboutButton.addEventListener (MouseEvent.CLICK, clicked);
schoolButton.addEventListener (MouseEvent.CLICK, clicked);
workButton.addEventListener (MouseEvent.CLICK, clicked);
 
 
//This function is called when one of the buttons is clicked
function clicked (e:Event):void {
 
        //Save the clicked button to a local variable
        var buttonClicked:MovieClip = (MovieClip)(e.target);
 
        /* The following tweens all last one second. We start each tween from the last position of the mainPage. */
 
        //Tween to the top left corner if the home button is clicked
        if (buttonClicked == homeButton) {
                myTween = new Tween(mainPage, "y", Back.easeIn, mainPage.y, 0, 1, true);
                myTween = new Tween(mainPage, "x", Back.easeIn, mainPage.x, 0, 1, true);
        }
 
        //Tween to the about text
        else if (buttonClicked == aboutButton) {
                myTween = new Tween(mainPage, "y", Back.easeIn, mainPage.y, 0, 1, true);
                myTween = new Tween(mainPage, "x", Back.easeIn, mainPage.x, -300, 1, true);
        }
 
        //Tween to the work text
        else if (buttonClicked == workButton) {
                myTween = new Tween(mainPage, "y", Back.easeIn, mainPage.y, -250, 1, true);
                myTween = new Tween(mainPage, "x", Back.easeIn, mainPage.x, 0, 1, true);
        }
 
        //Tween to the school text
        else {
                myTween = new Tween(mainPage, "y", Back.easeIn, mainPage.y, -250, 1, true);
                myTween = new Tween(mainPage, "x", Back.easeIn, mainPage.x, -300, 1, true);
 
        }
}

You are done, test your movie! If you have any questions concerning the tutorials, please visit the forum.

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx