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

This tutorial will teach you how to create a Flash web site on the basis of a pre-made design. Step by step you will learn how to create animated buttons and links, animation of content changing, Flash menu, how to convert any design element into a Movie Clip and how to convert any layer into mask.

 

* * *
This tutorial is the sequel to the first one that consists of two parts: “Creating a Website Design from Scratch” and “Creating a Website Design from Scratch: Part II“. You may also get the source files of this design absolutely free of charge here.

 

For you convenience we divided this tutorial into three main stages:

 

1. Working with .PSD files. Importation of design element from Photoshop into Flash. Preparing for creating an animation.
2. Creating sub pages (here we also will concentrate on the creation of the animated buttons or links; Motion Tween).
3. Creation of the animated menu. Animation of content changing and animation of elements appearance.

 

During all this time we will be using two programs simultaneously: Adobe Photoshop and Macromedia Flash 8. So, be ready to switch between them.

 

Stage 1. Working with .PSD files. Import of initial materials into Flash. Preparing for creating an animation.

 

Step 1.1. Open a pre-made design in Photoshop. If you have read the first two parts of this tutorial and replicated all steps described there, you should have a design ready to be animated. So, open the first .PSD file.

Step 1.2. Creating an underlayer. 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.

 

1.2.1. Now choose Select > All (or Ctrl + A)
1.2.2. Then choose Edit > Copy Merged.
1.2.3. Create new Photoshop file (Ctrl + N) with transparent background and paste the selected elements (Ctrl + V)
The underlayer has been created.

 

Step 1.3. Select all. Then choose File > Save for Web and Devices.

 

 

Step 1.4. Open Macromedia Flash 8. Choose now File > Import > Import to Stage and import just saved files into a flash stage.

 

Step 1.5. Click on the Properties > Size or press Ctrl+J key on the keyboard. Set the width and height of your document to 800 pixels. Select white color as background color. Set your Flash movie’s frame rate to 40 and click ok.

 

 

Step 1.6. While the image is still selected, go to the Align Panel (Ctrl+K) and do the following:
1.6.1. Make sure that the Align/Distribute to Stage button is turned on,
1.6.2. Click on the Align horizontal center button,
1.6.3. Click the Align vertical center button.

 

 

Step 1.7. Go back to Photoshop document. The design for your web site still should be opened there. Right now it’s time to save each separate design element for web. Let’s start form the house image.
1.7.1. First of all merge all layers of the image into one group,
1.7.2. Then select the group, choose Edit > Copy Merged.
1.7.3. Create new Photoshop file (Ctrl + N) with transparent background and paste the selected elements (Ctrl + V).
1.7.4. Add 2 pixels to the image weight and height (Image > Canvas Size or Alt + Ctrl + C). Adding 2 pixels makes the edges more accurate and smoother.
1.7.5. Save for web. Press File > Save for Web and Devices.

 

 

All these actions should be repeated for all other design elements (ellipse, the rope, background layer and logo disregarding only the text and menu buttons).

 

Then go back to Macromedia Flash, choose Import > Import to Stage. When it’s done, all necessary design elements will appear in the Library (on the right).
The Flash stage will be looking like this:

 

 

Step 1.8. Select all design elements and by mouse right clicking choose ‘Distribute to Layers’.

 

 

Step 1.9. In the Timeline section select the underlayer. Right click and choose ‘Guide’. Then set a frame to 500. Right click again > Insert Frame.

 

 

Step 1.10. Insert a new layer (Insert > Timeline > Layer). When the new layer is created, select it and right click on frame 96. Choose ‘Insert Blank Keyframe’.

 

Step 1.11. Then go to Actions - Frame. The script window will open. Type there: “stop();” - without quotation marks.

 

 

Step 1.12. Then it’s time to define the quality of our images. Go to the Library, right click on the image there, select ‘Properties’. Bitmap Properties window will appear. Uncheck ‘Allow Smoothing’. Choose compression Lossless (PNG/GIF) - for images and Photo (JPEG) - for photographs.

 

 

 

Step 1.13. Now we reached the most complicated part of working with Flash. We need to arrange all design elements according to the underlayer that actually represents our design. Flash developers says that this work resembles jeweller’s art, because the accuracy and neatness are above all here. (Note: for your convenience you may change frames of the elements in the Timeline).
The screen shot presents the design with already arranged elements.

 

 

Step 1.14. Next thing we are doing is copying text of the header and footer. For this purpose we insert a new layer for the text (Insert > Timeline > Layer). Then copy the text from Photoshop document and paste it into Macromedia Flash. You may switch between uppercase and lowercase manually.

 

In our case the text properties are the following: the Font Family: Myriad, Font Style: Roman, Font Size: 30.

 

In Macromedia Flash go to the Properties Panel (Ctrl+F3) below the stage and set letter spacing to -08, choose Text Type: Static Text, Font rendering method: Anti-alias animation, Color: #202020. Please, note the letter spacing index is individual. Adjust this index according to the underlayer (the actual design).

 

 

Step 1.15. Creating Movie Clip. Select the background layer, by right clicking choose ‘Convert to Symbol’ or press F8 key to convert this layer into a Movie Clip Symbol.

 

 

 

 

Step 1.16. Repeat the same actions to the other design elements that will be animated.

 

Step 1.17. Creating mask. Select the ellipse layer. Create a new layer above the ellipse layer. With the help of Rectangle Tool draw a rectangle along the design contours. The rounded edges are created with the help of a mouse and ‘up and down’ keys.
Then right click on this rectangular and choose ‘Mask’.

 

 

Stage 2. Creating sub pages. Creating animated buttons or links. Motion Tween.

 

Step 2.1. Now we should define frames for subpages on the Timeline. For this purpose create a new layer, right click on frame 96 and choose ‘Insert Blank Keyframe’. Then go to Actions and in the script window type: stop();
The same should be done for the frames 171 and 266. These stop frames were created for our subpages, the animation will play and stop on the stated frames (96, 171, 266).

 

Step 2.2. Frame 96 was created for our first subpage. Right click frame 96 and choose ‘Convert to Keyframe’.
Now we should import subpage design into Flash. This should be done in the same way as described above.

 

While the frame 96 is still selected, choose Import > Import to Stage and open the underlayer of the first subpage that was previously created in Photoshop.

 

Import all design elements of the subpage from Photoshop into Flash (as in steps 1.7 and 1.8).

 

Select all design elements and by mouse right clicking choose ‘Distribute to Layers’.
Then set the quality of the images, and arrange all design elements according to the underlayer that actually represents subpage design. (See steps 1.12 and 1.13)

 

Step 2.3. Creating roll-over effect for buttons or web links.

 

Make sure that frame 96 is still selected. On a new layer with the help of Rectangle Tool create a rectangle on the place where the button should be. This rectangle will be a clicking area for the button. Right click on it and choose ‘Convert to Symbol’ or press F8 key to convert this layer into a Movie Clip Symbol.

 

Step 2.4. Choose a Selection Tool (V). Then double click on this rectangle to get inside a movie clip.

 

Step 2.5. As soon as the action is completed, right click the rectangle again > Covert to Symbol > and convert it into a button symbol (Type: Button).

 

 

Step 2.6. Choose Selection Tool and double click on this rectangle once again. Now we are inside the button. In the Timeline the button stages will appear: Up | Over | Down | Hit. With the help of mouse set it from Up to Hit.
When everything is completed, go back inside the movie clip.

 

 

Step 2.7. Create new layer. Choose frame 27 for both layers > Insert Frame.
On this new layer choose frame 1, go to Actions and type: stop(); in the script window.
The same should be done for the frame 15.

 

Step 2.7. Choose frame 2. Go to Properties. Type Frame: s1.

 

 

On the frame 2 the red label will appear.

 

 

Step 2.8. Choose frame 16 > Insert Blank Keyframe (by right clicking). Then go to Properties and type Frame: s2.

 

Step 2.9. Create a new layer and copy button text “view all” from .PSD file. While this layer is still selected, create a movie clip. (right click on the text, choose ‘Convert to Symbol’).

 

Step 2.10. On a new layer with the help of Rectangle Tool create a rectangle with rounded edges under the text. (The layer should be placed UNDER the text layer). Set red color as a fill color. Then create a movie clip.

 

Step 2.11. The next thing we are doing is making animation for the text. So, choose the text layer and frame 27 > Insert Keyframe. Then select frame 15 > Insert Keyframe. Go to Properties panel below the stage. On the right, you will see the Color menu. Select Color: Tint, White.

 

 

Step 2.12. Creating Motion Tween. Select any quantity of frames between frames 1 and 27. Then by right clicking choose ‘Create Motion Tween’.

 

 

Step 2.13. Creating animation for red rectangle. Select the rectangle layer. Choose frame 15 > Insert Keyframe. Drag the first frame to the second one.

 

Step 2.14. Using a Free Transform Tool transform this red rectangle into a narrow strip. Then right click > Create Motion Tween.

 

Step 2.15. Choose frame 27 > Insert Keyframe. Go to the Properties Panel below the stage. Select color: Alpha; Alpha amount: 0%.

 

 

Then choose any frames between 15 and 27, right click > Create Motion Tween.

 

Step 2.16. Take the Selection Tool (V) and click once on the clicking area (the first rectangle) to select it.

 

 

Go to the Actions panel and in the script window type this script:
on (rollOver) {
gotoAndPlay(”s1″);
}
on (releaseOutside, rollOut) {
gotoAndPlay(”s2″);
}

 

The process of creating animation for the button is completed now.
Let’s see what we got. Go to Control > Test Movie or press Ctrl + Enter for exporting Flash movie.

 

* * *
As it was mentioned in the very beginning of this tutorial, you may download the source files of this website template here.

 

* * *
In the next part of this tutorial you will learn how to create the animated menu, how to create animation of content changing and animation of elements appearance.
Just follow the posts of our blog not to miss interesting and useful things.

 

TO BE CONTINUED…

 

 

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

This entry was posted on Friday, July 25th, 2008 at 6:48 am and is filed under Flash 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.

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

Leave a Reply

Name (required):  

Mail (will not be published) (required):  

Website: