Create a Flash Website on the Basis of a Pre-made Design: Part 2

The second part of this tutorial will teach you how to create the animated menu, how to create the animation of elements appearance and animation of content changing. You will get acquainted with different ways of creating the animation what will give you an opportunity to make your Flash website unique and irresistible. So, follow the steps and you will see the wishful result. Best of luck!

 

In case if you’ve missed the first part of the tutorial, these links are for you: Creating a Website Design from Scratch: Part I and Part II and Create a Flash Website on the Basis of a Pre-made Design: Part 1.
You may also get the source files of this design absolutely free of charge here.

 

* * *

 

Stage 3. Creation of the animated menu. Animation of content changing and animation of elements appearance.

 

Step 3.1. Import only one menu button from Photoshop into Flash and place it according to the underlayer. (As you have already know, underlayer is a bitmap design created in Photoshop and saved as one image. Later on we will use it in Flash as a reference design.)

 

Step 3.2. Then we create the animation for the menu buttons as we did for the link “View All” described in the first part of the tutorial. Please, see steps 2.3 - 2.16.

 

 

Step 3.3. With the help of a Selection Tool double click on the menu button to get inside of the movie clip. Then select the button.
It is shown on the screen shot, in the Properties panel that the button is selected.

 

 

Step 3.4. Go to Actions > Actions Button and type this script there:
on (rollOver) {
this.gotoAndPlay(”s1″);
}
on (releaseOutside, rollOut) {
this.gotoAndPlay(”s2″);
}
on (release) {
if (_root.anim == true) {
b1.useHandCursor = 0;
_root["but_s"+_root.link].gotoAndPlay(”s2″);
_root.link = 2;
_root["but_s"+_root.link].gotoAndPlay(”s1″);
_root["but_s"+_root.link].b1.useHandCursor = 1;
_root.play();
_root.scroller.gotoAndStop(2);
}
}

 

But keep in mind that in the line “_root.link = 2;” 2 is variable. It means that the ‘Company’ button links to the second page of the site.

 

Step 3.5. Go to Edit > Duplicate or press Ctrl + D and duplicate the button five times according to our design. But you may create as many buttons as you wish. Now we have five buttons with the same name and the same properties.
Then select the frame with the button, right click and choose ‘Distribute to Layers’.
The next thing we should do is to arrange menu buttons according to the underlayer.

 

 

Step 3.6. Select the second button, right click on it and choose ‘Duplicate Symbol’.

 

 

Step 3.7. The Duplicate Symbol dialog box will appear.

 

 

Step 3.8. The same actions should be done for the rest of the buttons.

 

Step 3.9. Then we should create labels for each button. Please, pay attention to the fact that the first button (Company) links to the second subpage, the second button (Services) links to the third subpage and so forth. Reasoning from this, we create labels.
So, select the first button and go to the Properties panel. Note, symbol should be set to Movie Clip. Type below it: “but2″. On the Timeline the red label will appear.

 

 

Perform the same actions for the rest of the buttons. Type for the second button “but3″, for the third - “but4″, for the forth - “but5″, for the fifth - “but6″.

 

Step 3.10. Now it’s time to rename the menu buttons according to the design.
For this purpose with the help of the Selection Tool select the second button. Double click on it to get inside of the Movie Clip.
Then select frame 1 (with the text), right click on it and choose ‘Duplicate Symbol’.
Double click again to get inside of the duplicated symbol.

 

With the help of the Text Tool write a new button name. You won’t have any problems with fonts and fonts size because this button is a copy of the first one.

 

Step 3.11. Go back on the level above. Select the next keyframe of the Movie Clip. In the Properties panel press ‘Swap’. The dialog box will appear. Change the current symbol on the duplicated one.

 

 

The same should be done for the other keyframes of the Movie Clip.

 

Step 3.12. Go back to the main scene. And repeat the steps 3.10 and 3.11 for the other buttons.
now each menu button has its own name.

 

 

Step 3.13. Now we should change the variables in the script for each button. For this purpose you need to get inside of the Movie Clip for the second button (Services): Actions > Actions Script: _root.link = 3;
For the third button (Solutions): _root.link = 4;
For the forth button (Partners): _root.link = 5;
For the fifth button (Contacts): _root.link = 6;

 

The button variable is a number of page it links to.

 

Step 3.14. Run a Test Movie to view how the menu works.

 

Step 3.15. Animation of elements appearance
Let’s start from the background.
3.15.1. So, go to the the main scene and select the background layer. On the Timeline drag the first frame to the frame 10. All frames before frame 10 will be for “loading section”.
3.15.2. Then choose frame 40 and insert keyframe.
3.15.3. Select frame 10, go to the Properties panel and set Color to ‘Alpha’.
3.15.4. then by right clicking create Motion Tween.

 

Step 3.16. The second way of creating the animation: using the workspace borders.
3.16.1. Select layer with the logo image. Again drag the first frame to the frame 15.
3.16.2. Frame 30 > Insert Keyframe.
3.16.3. Frame 15. Select the logo. With the help of ‘Shift’ and ‘up and down’ keys drag the logo over the workspace borders.
3.16.4. Frame 15 > Create Motion Tween.

 

 

Step 3.17. Company name, yellow ellipse and house image appear in the same way as the logo.

 

Step 3.18. The third way of creating the animation: with the help of a mask.
The rope between two holes appears with the help of a mask.
3.18.1. Define the layer with the rope. And create a new layer above it.
3.18.2. Frame 30 > Insert Blank Keyframe.
3.18.3. With the help of the Rectangle Tool create a rectangle as on the screen shot.

 

 

3.18.4. Then using the Selection Tool select this rectangle and convert it to symbol.

 

Step 3.19. While the layer with the rectangle is still selected, right click on it and choose ‘Mask’. Now on the Timeline you see that two layers (the rope layer and the mask) are locked. Unlock them.

 

 

Step 3.20. Select the mask layer. Frame 15 > Insert Keyframe. Frame 30 > with the help of ‘Shift’ and up and down keys move the mask as it’s shown on the screen shot.

 

 

Step 3.21. Frame 30 > Create Motion Tween.

 

Step 3.22. Run a Test Movie to view the result.

 

Step 3.23. Animation of content changing.
When all design elements has appeared, the animation plays and stops on the frame 96 (on frame 96 we typed ‘Stop’ in the Actions script window).
The next thing we are doing is creating a new layer. On frame 96 we insert a blank keyframe. Then we go to Actions and in the script window we type:
_root.anim = true;

 

root.anim is a variable standing for menu buttons. In our design it is unnecessary, but if you want to place menu buttons on each page of the site, this script is obligatory.

 

Step 3.24. Insert the same script for the frame 97.

 

Step 3.25. On a new layer select the frame 74 > Insert Blank Keyframe. Then go to the Properties panel and create a label. Just type Frame: s1.

 

 

Step 3.26. Frame 121 > Insert Blank Keyframe. Then go to the Properties panel and create a label. Type Frame: s2.
The same should be done for the frames:
216 - Frame: s3;
315 - Frame: s4;
415 - Frame: s5;
518 - Frame: s6.

 

Step 3.27. Insert the actions script below for the frames: 120, 215, 314, 414, 517, 615.

 

label=”s” + _root.link;
gotoAndPlay(label);

 

So, you see that the variable label takes on a value of “s” + _root.link,
where “s” - is a frame label, and “_root.link” - is a variable denoting the number of page.
This script denotes the following: when you click on ‘Services’ button for example, the animation begins to play from the place where root.link is equal to 3.

 

Step 3.28. Insert this script “_root.anim = true;” for the frames: 96, 171, 266, 366, 465, 567.

 

Step 3.29. Insert this script “_root.anim = false;” for the frames: 97, 172, 267, 367, 466, 568.

 

Step 3.30. frame 97 > Insert Keyframe on the all layers of the elements that will be animated. (except the logo, company name, slogan and footer).
Then choose frame 112 for example > Insert Keyframe. While this frame is still selected, move the design elements over the workspace borders (Shift + up/down keys).

 

Step 3.31. Starting with the s2 label the new subpage will appear.
For all other pages the animation should be created in the same way as for the page described above.

 

Step 3.32. At the end run a Test Movie to view what you’ve got.

 

* * *
And finally… You may download the source files of this website template here.

 

I hope this tutorial come in handy to you and will help you create a unique and attractive Flash website. As the Shaolin saying goes: “One must face much hardship before he succeeds”. So we wish you persistence and strength to reach your aim!

 

 

Liked the post and want more? Subscribe today to Blog.Templates.com not to miss the interesting stuff.

This entry was posted on Tuesday, August 12th, 2008 at 6:05 amand is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “Create a Flash Website on the Basis of a Pre-made Design: Part 2”

Leave a Reply

Name (required):  

Mail (will not be published) (required):  

Website: