In this tutorial I?ll guide you through process of creating Flash header for omnetwork.net

In this tutorial I?ll guide you through process of creating Flash header for omnetwork.net from .PSD file created in previous tutorial

Starting point:


You may download starting PSD file in zip:


You may also download final files in zip:
Source file

1.Image Ready
In order to make stretchable header you have to figure out which part will be tiled, which static and which will be Flash menu. Open .PSD downloaded here in ImageReady.

Use Slicing tool to create tree slices for all mentioned segments: Static one, tiling and Flash menu



As background in Macromedia Flash document we will use image defined with third slice. Take out these texts and arrows, because we will put them back in Macromedia Flash in order to animate it. You can do it by clicking on eyes in left of text layers at Layer panel.



Use File > Save optimized as to export all slices as separated image file.

Set settings as shown:

2. Macromedia Flash

Look with Windows Explorer at Folder where you had exported images for dimensions of this third slice. In my case it is: 357 x 130 px



Open Macromedia Flash to make Flash menu. Create new document with 357 x 130 px dimensions and 15 fps. Use File > Import > Import to stage to import third slice.



Create new layer and use Text tool to add text: (Verdana, White, size 18) ?Photos?



Rotate text in 90 CW.



Use rectangle tool to create white rectangle at bottom of menu item (in same layer with text).



Convert it to graphic Symbol (Modify > Convert to Symbol menu) and reduce Alpha to 10%.



Click on keyframe at layer 2 (frame 1) to select both object on it (text and rectangle) and convert it to button (Modify > Convert to Symbol)



Double-click on newly created button to enter it?s content. Add keyframes at all button states (here shown as frames) to copy content from first.



Convert content from first keyframe to MovieClip (Convert to symbol option again). Double click on created MovieClip to enter it?s content. Click on keyframe (at timeline panel) in first frame to select both objects and do right-click over one of them to open dropdown menu. In this menu select option Distribute to layers to separate two object in two separated layers.

Right-click on layer with rectangle to add motion tween. (Create motion tween option from dropdown menu)


Do same for text. Now Click on 5th frame of Layer with rectangle to select it, and press F5 to stretch Motion Tween. At same frame use Right-Click and Add keyframe to add it. In this frame, move rectangle from bottom to top.

Repeat same for another layer and move text little bit to bottom.



Select Frame 5 again at some of layers and press F9 to open Actions Panel.
Insert this code: stop(); at first line to stop animation.

Select frames from 1 to 5 in both Layers and copy it.


Escape from this symbol to button. Select Frame 2 (Over state) and convert it?s content to MovieClip. Double click on this MovieClip to enter it?s content. Select first frame, right-click and paste frames from clipboard. You will have two layers now and same animation from previous symbol for normal state (up). Select all frames in both layers and select from drop-down menu Reverse frames.



Select first frame and press F9. Delete stop code there and put it at 5th frame.

Escape this symbol and click to Hit frame. Delete all object in this keyframe and use rectangle tool to fill button area. Hit frame tells Flash player on which area user may click to activate button, so we will fill it with solid rectangle.



Now, I tested this movie and decided to increase document?s FPS from 15 to 25. Animation looks better.

Now you finished one button, you have to copy all of them and to modify. Note that you can?t just copy and change, because when you change text in one button it will be changed in all buttons. To avoid this you have to do Duplicate symbol from drop-down (right-click) menu on every symbol. That includes Tweens too at all keyframes.

Let?s go through one menu item:
Copy original and paste it. Place on position and use right-click to open drop-down menu and select Duplicate symbol


This will separate only main symbol from previous button, but there is many sub-symbols (MovieClips and Tweens) that have to be duplicated.

Double click on new item to enter sub-level. Duplicate MovieClips at Up and Over states.
At Down state you can directly change text.

Double click on MovieClip at Up state and select from frame 1 to 5 at layer with text and duplicate it (this is Tween)



Double click at frame 1 to enter sub-level where you can safely change text. Do same at Frame 5 if needed.
On same way you can make corrections in Over state.

At the end you have to add GetURL code to buttons. Click on first button and press F9. Add following code:

on (release) {
getURL("photos.htm");
}


Place this code in all buttons, only change URL and you have finished Flash menu for your header.

Now, save your .FLA file and export .SWF

Open Publish settings (File > Publish settings) and set paths for exporting .SWF. You may turn off .HTML export. Export .SWF to same folder where are other slice images.

At next page we will make HTML table for our header.
3. Macromedia Dreamweaver

Open Macromedia Dreamweaver and create new, black HTML page.
Press CTRL + J to open Page properties and set margins to 0.


Save this HTML page in same folder where you have places slices and .SWF file.

Add table with 3 columns (Insert > Insert table menu)


Click on first cell and use Insert > Image to insert first slice. Select image and write down it?s width, in my case it was: 278 px. Click in right of this image and set cell?s width on same value.



Click on mid cell and set it?s background image second slice.



Click on right cell and use Insert > Media > Flash to insert .SWF file. Set it?s align to right an cell?s width to width of .SWF file which is in this case 357 px.

To check if everything fit?s fine you may click on .SWF object and click Play on properties panel.

Final look:

discuss this topic to forum