Advanced Flash Website

Creating the Layout

For the first part, we're going to create the basic layout.

Step 1.

To start off, create a new Flash document with the following settings.

Step 2.

Double click on the rounded rectangle and set the corner radius to 15

Step 3.

Create a greay (#E4E4E4) rounded rectangle, using the settings shown below. I've zoomed out to 50% here.

Enlarge

Step 4.

Convert the rectangle into an MC (Movie Clip Symbol) called main. This is where we'll be creating the site.

Step 5.

Go into the 'main' MC and convert the rectangle into another MC, this time calling it 'bg'

Step 6

Open up the 'bg' mc, create a 2nd layer and a grey/green (#839597) rectangle, without rounded corners

Enlarge

Step 7

Create a 3rd, darker (#B4B4B4) rectangle on another new layer.

Enlarge

Step 8

Make a 4th lighter grey rectangle

Enlarge

Step 9.

Go back to the 'main' MC, and import the header image onto the stage.

Step 10

Convert the header image into an MC (Movieclip) called 'header'

Adding the Content. Step 11. Next we'll be adding the content for the website. Create a layer called 'content' in the main MC, and then create a light grey rounded rectangle. Step 12. This will be used for background of each section, so convert it to an MC called 'sectionBackground. We'll also be using it has a mask as the sections scroll, so give it an identifier of the same name, by ticking the 'export for actionscript' box. Step 13. So, now that we've created an MC for the background, we'll start creating each section. Convert the background to a new MC called 'section_flash'. Give it the identifier 'section_flash' also. This identifier will be used later to add the section dynamically using actionscript.

Step 14. Now we're going to add some content to the 'section_flash' MC. I've added a header to an new layer in the MC, using the settings below. Step 15. Some body text using the settings below. Step 16. Next I've added some some thumbnails, which i'll be creating some actionscript to make them open a new window. Step 17. Convert the thumbnail to a new mc 'flash_thumb_0' Step 18. Give it an instance name with the same name, so that we can use actionscipt to make it do something. Step 19. Create several more thumbnails, each with a different instance name. As you can see below, ive give tne 2nd thumbnail the instance name 'flash_thumb_1' Step 20. Now create a layer called 'script'. The code below tells flash to open a new window and go to the URL, when 'flash_thumb_0' is pressed. Step 21. Now add the code for each of the other thumbnails Step 22. Now that we've create the first content section, we can use it as a template to create the others. Right click on the section_flash MC from the library and choose 'duplicate'. You'll then be presented with the follow window. Step 23. Change it's name to a new section, and give it the same identifier. As you can see i've changed it to photoshop, as i'll be changing the flash thumbnails to photoshop thumbnails. Step 24. Open up the new section MC, and change the brightness of the background. Step 25. Add some different thumbnails, giving them new instance names. Then add some new text. Step 26. Change the code so that the new thumbnail instance names are refered to.

Creating the Buttons Step 27. In part 3 we're going to be creatig the buttons for the drop down menu, but first make a new layer called 'bar'. Import (File > Import > Import to Stage) the bar graphic onto the new layer, placing at the positions shown below, Enlarge Step 28. Now we're going to create a button, that will be used to activate the drop down menu. So, create a layer called 'main button'. Use the rectangle tool to create a dark grey (#898989) rectangle, and use the selection tool to cut off the bottom. Step 29. Convert the rectangle into an button symbol called 'mainButton'

Step 30. Go into the 'mainButton,' create a key frame at the over state, and then increate the darkness of the rectangle. Step 31. Create a new layer called text, and then add some text for the main button. Step 32. Next we're going to make the drop down menu sub buttons, which we'll later write the actionscript to attach them dynamically. For the moment we'll create the sub buttons temporarily on the stage, so create a new layer, and then create a rectangle. The outline is grey (#CCCCCC) and the fill is white. Step 33. Convert the rectangle to an MC called subButton, giving it an identifier of the same name, Step 34. Go into the subButton MC and create a key frame on frame 2. Change the color of the fill color to something you'd like as the sub button is rolled over. I've used a peach color (#F1E3DE) Step 35. Next add the text on a new layer, using the setting shown below. It's important to make it 'dynamic' so that it has the ability to change while the SWF file is being viewed. We also need to give it a var (txt) so that the name of the button can be assigned dynamically.

Creating the Menu & Sections With Actionscript

Step 36.

Now that we've created all the assets for the website, it's now time to start writing the actionscript, to make the website functional. So, in the 'main' MC, create a new layer called 'script' and open up the Actions Panel (F9)

Step 37.

Line 1 - On the first line, enter the code shown above. The 'menu' array is created to hold each menu button name. We'll be writing the actionscript so that menu buttons can be added by simply add and subtracting names from the menu array.

Step 38.

Line 2 - An empty MC is created, called 'content' which will later be used to attach each section onto. The content MC can then be scrolled along the X axis, rather than moving each individually section. Line 3 - The 'sectionBackground' MC is attched and given the instance name 'mask'. The mask MC will be used to mask the content MC. Line 4 - The mask and content MC's are placed at the Y position where we want the content to appear. Line 5 - The mask and a variable called target are placed at an X position of where we want the content to appear. When the website loads, to make it more interesting, the first section will be displayed off screen and then scroll to the 'target' position. The target value will later be used to hold a value that the content must scroll to, each time it's associated menu button is pressed. Line 6 - The content MC is set to be masked by the mask MC. Line 7 - The content MC is set to start at -1000 X position. We'll later write some Actionscript to scroll the content MC from this value to the target value.

Step 39.

Line 8 - A speed is set for how fast the section MC will scroll at.

Step 40.

Line 9 - xStart is the X position where the 1st drop down button will appear. Line 10 - yStart is the Y position where the 1st drop down button will appear. Line 11 - bWidth is the width of the button. Since the button has a hairline border (stroke), the thickness of it won't change as the width and heigh of the button are changed. Line 12 - bHeight is the height of the button. This value will be used to place each button vertically.

Step 41.

Line 13 - A 0.05 second insterval is stored in this variable, which will be used inbetween scrolling down each menu button. The higher this number, the longer it will take for each button to move down after the previous one. Line 14 - This variable holds number of items in the menu array. It'll be used when attaching the menu buttons - More will be explaing later. Line 15 - A variable to hold a boolean value for the menu being open or closed. Line 16 - A time stamp will be held in this variable.

Step 42.

Line 17 - The speed at which the buttons will scroll.

Step 43.

Line 18 - A for loop is created to loop through the items in the menu array. The "i" in the loop will start off at 0 and increment by 1 (i++), while i is below the menu's length. Line 19 - Using the loop, each menu item is attached the empty 'content' MC, by referencing the identifier ('section_photoshp' etc) that we gave each section MC earlier. Each section is assigned to a temporary variable called "section", that we can use to set its properties.

Step 44.

Line 20 - The section's X position is set using it's width and multiplying it by the incrementing "i" in the loop. So since the each section is 588 in width, the 1st section, from the menu array, will be placed at 0 (0x588) X position in the "content" empty MC. The 2nd section will be placed 588 (1X588), and so on until "i" has reached the menu array length. Line 21- Each sub button MC is attached, by referencing the identifier ('subButton') that we gave the button earlier. The subButton is then assigned to 'b', which we can then use to reference it. Line 22- When the buttons scroll down, each will appear from behind the previous one, so when they're created they need to be attached on a level below the preious button. So, the countDown variable is used on line 21 to give the subButtons a level, and then decreased by 1, for the next button appears to appear on a level below.

Step 45.

Line 23 - 'b' (The current subButton MC) is told to stop since it has 2 frames. Line 24- 25 - The subButtons are positioned at xStart and yStart, which were decalred at the top earlier.

Step 46.

Line 26 - A interval' property is then given to the 'b'. The interval, which was created earlier, is multiplied by 'i', so the buttons descend sequentially. Line 26 - When the 'mainButton' is pressed, each subButton needs a target Y position to scroll down to. So the subButton height is multiplied by 'i' and then added on to the star position of the sub buttons. This valued is assigned to the target property.

Step 47.

Line 28 - Remember when the subButton dynamic text was created, a var (txt) was given to it? Now this can be used to display the sub button text, using the text stored in the menu array. Line 29 - The content MC, containing each section, also needs a target each time a subButton is pressed, so this is stored in the 'pos' property of each subButton. The target of the 1st section was set at the start, so it's now added to i - the section width.

Step 48.

Line 30 - An onPress function is given to 'b' Line 31 - When the sub button is pressed the target variable will be set as the pos property Line 32 - The closeMenu function, which is about to be created, is called. Line 33 - A function is going to be created to tell the sub button to go to it's roll over state (frame 2) whenever it's rolled over. When the sub button is pressed, the buttons's state must change back to the default (frame 1).

Step 49.

Line 35 - 40 - The roll over and out functions are created. Line 41 - Each sub button is set to be insible when they are first created.

Step 50.

And this is the Actionscript so far:

Scrolling the Buttons and Content With Actionscript Step 51. In the previous part the sections and the menu were created with Actionscript. In the final part the drop menu and the content sections will be made to scroll, when the main button is pressed. Here is rest of the code explained: Line 43 - A closeMenu() function created which will be called when a subButton is pressed, or if the drop down menu is open and the main button is pressed again. Line 44 - 46 - The sub button MCs are then looped through and made invisible. Line 47 - 48 - They're then positioned back to the start, ready to be scrolled down again. Line 50 - menuOpen is then set to false Step 54. Line 52 - Next an onPress function is created for the main button. Line 53 - menuOpen is checked to see if it's false (!menuOpen) Line 54 - If is false, that means to menu is closed, so the current time (getTimer) is assigned to 'theTime'. This variable will then be used as an interval between each button scrolling. Line 55 - Now that the button has been pressed, while it's closed, menuOpen is set to true. Line 56 - 58 - A FOR loop is then used to make each button visible. Line 59 - 61 - If menuOpen is true (else) and the main button MC is pressed the menu is currently open, so the closeMenu() function is called. Step 57. Line 63 - 64 - Next a function is created to scroll the buttons if the menu is open Line 65 - 66 - The buttons are looped through again, and b is assigned to hole the current button in the loop. Line 67 - Back over at line 26, an interval was assigned to each subButton. This is now added on to the time recorded at line 54, when the mainButton was pressed, and checked to see if it's lower than the current time ( Line 68 - This is the code used to move the b (subButton) to b's "target" value minus b's current X position divided by the scroll speed Step 59. Line 73 - An onEnterFrame function is created which will execute any code inbetween the braces {} repedly, at the frame rate of the movie. Line 74 - This is the code used to move the "content" MC to the "target" value minus the content's current X position divided by the scroll speed. Line 75- The scrollButtons function can be called repetedly, since there's an IF statement checking to see if the menu is open. Step 60. Here' is 2nd part of the code all at once: Preloading the Website Step 61. For the final part we'll be creating the preloader for the website. So, go back to root of the time, where the 'Main' MC is, and move the frame that it's on to frame 2. Step 62. Now make a text field on the 1st frame, with the text "loading", using the settings shown below Step 63. Convert the text field (F8) to an MC called 'loader' Step 64. Double click on the 'loader' MC and create a 2nd text field on the right, with the text "99%". From the properties panel the text has been made "dynamic", and a Var (variable) has been given to it called "p". When the website is preloading, this variable will hold the percent value that's loaded so far, and it'll be displayed in the dynamic text field. Step 65. Go back to the root timeline. Now instead of placing the code on a frame on the timeline, place it on the loader MC, by clicking on it, open up the Actions Panel, and then entering the code below. This piece of Actionscript will check to see how much of the website has loaded and display the percentage in the text, using the 'p' variable. Once the whole of it is loaded, the timeline will go to frame 2, and the site will be displayed Step 66. Lastly, on the 1st frame of the root timeline, place a stop() action on a new layer. And that brings us to the end of this Flash tutorial to create an advanced website. Download FLA

Copyright by :flash-game-design.com