[Developer]

Flash Full Flash Website Tutorial

This tutorial is divided into the following parts. 1) Adding the Header Graphic 2) Adding the Content 3) Creating the Menu 4) Actionscript Step 1. Start off by creating a flash document with the document properties shown below

Step 2. Import (file > import > import to stage) the header graphic and place it at the top of the stage, leaving an even gap either side and above.

Step 3. Convert the graphic (F8) into an MC (Movieclip) called "main"

Step 4. Go into the "main" MC and name the layer "header"

Create a Flash Website 2) Creating the Content Sections
Step 5. This is part 2 of the tutorial to create a flash website. Next, create a new layer called "sections" and import (file > import > import to stage) the circle graphic onto the stage. Place it as shown in the image below

Step 6. Convert (F8) the circle graphic into an MC called "cirlce"

Step 7. And then to an MC called "home"

Step 8. And lastly to an MC called "sections_mc"

Step 9. Use the text tool to create some heading text, using the settings hown below

Step 10. Click on frame 2 and create a key frame (F6). Change the text of frame 2 to "portfolio", for the 2nd content section

a) b)

Step 11. Create another key frame at 3 and change the text to "blog", or whatever heading you want the 3rd section to have. Lastly create a 4th key frame for the last section. I've renamed it to "Contact".

a) b)

Step 12. For each frame, add the rest of the content.

a) Click Image to Enlarge b) Click Image to Enlarge

Step 13. Go back to the "main MC" and click on the "section_mc". Open up the properties panel and give the MC the instance name "sections".

Create a Flash Website 3) Making the Website Menu
Step 14. This is part 3 of the tutorial to create a flash website. Next create and new layer called "menu" and add a rounded rectangle on the far right.

Step 15. Convert (F8) the rectangle into an MC called "menu"

Step 16. Go into the "menu" mc and name the layer "menu bg".

Step 17. Open the color mixer tab and change the type to "linear". Double click on the left and right sliders to change the colors to ones shown below.

Step 18. Create a layer called "buttons", and then create a gradient as shown below (a). Rotate the gradient counter clockwise (modify > transform > rotate 90 CCW). Convert the button to an MC called button.

a) b)

Step 19. Give the button MC the instance name "button1". Copy and paste the button, and give the duplicates their own instance names button1 - button4

a) b)

Step 20. On a new layer called "text" create the text for the buttons, using the settings shown below.

Step 21. On a new layer called "current color" create a yellow rectangle a few pixels talled than the buttons. Convert the yellow rectangle into an MC called "current", and then give it the instance name of the same name.

a) b)

Step 22. Click on the "text" layer, and copy (edit > copy) the contents of the layer (a). Create a new layer called "current text" and paste (edit > paste in place) the text, so you now have two copies of the text. Click on the "text" layer again and break it apart twice (Modify > Break Apart).

a) b)

Step 23. Break apart (Modify > break apart) the current text twice (a). Then right click on the current text layer and choose "mask".

a) b)

Step 24. I've then imported a logo into a new layer. Lastly, break apart the "text" twice also.

4) Actionscript for the Buttons
Step 25. This is the final part of the tutorial to create a flash website. Next , in the "main mc", create a new layer called "script". Click on frame 1 of the layer and open up the actions panel.

Step 26.

Line 1 - This will stop the "sections" MC from looping repetedly
Line 2 - The speed at which the yellow rectangle scroll
Line 3 - The target Y position for the yellow rectangle is set to button1's Y position
Step 27.

Line 4 - Rather that write each button function individually, a for loop is created to loop through each button and assign an onPress function to it. The "i" in the loop will start off at 1 and increment by 1 (i++), while i is below 5(i<5). If we had 10 buttons we would set this to i<11.
Line 5 - Each button is refered to using this["button"+i]. The For loop increments "i", so each button will be referenced. On this line a page number (pageNum) property is assigned to each button, using "i". Button1 will be assigned the pageNum "1", button2 "2" and so on.
Line 6 - An onPress function is assigned to each button.
Line 7 - When the any of the buttons is pressed the target variable is to the position of the button (this._y).
Line 8 - Content mc is told to go to the page number that was stored, on line 5, in the pageNum property.

Step 28.

Line 11 - An onEnterFrame function is created which will execute any code inbetween the braces {} repetedly, at the frame rate of the movie.
Line 12 - This is the code used to move the "current" MC to the "target" value, whenever a button is pressed.

Step 29. Entire Code And that's all the Actionscript that needs to be written to create the flash website! Download FLA