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.

Read the rest of this entry »

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.

Read the rest of this entry »