Creating a Web Portfolio
February 6, 2009 by: smonteIn 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.
Related tutorials:
Comments
One Response to “Creating a Web Portfolio”Leave a Reply
You must be logged in to post a comment.
Good Tut, I have one question.
I’m studying digital medial in college and out professor had us do this tutorial and I cannot make it work using another transition such as Fade, Why?
Thanks