Attackr.com

Many factors could make you refrain from designing sites completely in flash.

Maybe you like to grab and customize free HTML templates, maybe it’s the fact that you need your content easily to be probably indexed by search engines or maybe you just don’t like flash because it has become tantamount to an inferno of noise and crappy animations.

As a fact there could be various reasons which could make you abstain from designing sites completely in flash. It’s not my intention to convert you to a group of flash lovers.

I’m here to tell you how to combine the best of both worlds. Stick to your HTML layout and then apply the finishing touch by replacing the header with a flash animation.

Well, it could be anything but I think the header as a natural choice so that’s what we are going to focus on for now.

What do we need to get started?

PREPARING OUR HTML TEMPLATE:

1. Grab a free template. For this tutorial lets use this one designed by Rambling Soul. Unpack the files.
2. Open index.html and style.css in your favorite text editor. Notepad is suitable for the basic operations we are going to perform.
3. You need a piece of JavaScript now. Get it from here and unpack it to the same folder the html files and the .css file are stored.
4. In index.html add this line in the header right before:[CODE1]
5. Delete everything inside [CODE2], that would be this: [CODE3]
6. Now let’s add the code that calls our flash animation. Copy the following code and paste it to the very same location from which we just deleted a couple of lines:
   [CODE4]
7. In style.css find this line: #wrap #header { background:url(images/header.jpg) no-repeat; height:229px; margin-top:10px;}
   Delete background:url(images/header.jpg) no-repeat;
8. Now we have removed the original image from the header. The script that we linked to in step 4 and made use of in step 6 will embed the flash movie as seamless as possible in all major browsers. You can just as well get used this way of embedding your flash files as it’s better than any other way.

THE FLASH HEADER, REUSING THE CONCEPT €“ PART 1

1. We have prepared our template for our flash header now. Let’s create the flash header. Open header.jpg located in the images folder. You can perform the following steps in almost any image editor, for this tutorial I’ll use Photoshop.
2. Because Ramblingsoul has created such a beautiful frame, let’s reuse it. Select “Rectangular Marquee Tool” (Hotkey is “M”) and select the whole blue area (the actual image inside the frame. Select it all including the cute strawberry-guy. Don’t select the bright frame).
3. When this area is selected go to “Select” >> “Inverse” (Hotkey is CTRL + SHIFT + i). Press CTRL + C to copy the selected area.
4. Go to “File” >> “New”. Say “OK” and press CTRL + V to paste our frame.
5. Go to “File” >> “Save as” (hotkey is CTRL + SHIFT + S). Name it “frame” Choose GIF as format and save it to the images folder. (The template you downloaded contained this folder)

THE FLASH HEADER, NOW IT’S GETTING FLASHY €“ PART 2

1. Now open Flash CS3 (or any previous version you might have).
2. Create a new document. (“File” >> “New”) Select ActionScript 3.0 or 2.0, it doesn’t really matter.
3. Press CTRL + J to open “Document Properties”. Dimensions should be 882px * 229px. Framerate 35 FPS. Press “OK”.
4. On the very left of the timeline double click “Layer 1″ and rename it to “pic1″. Create a new layer (see image) a double click it to rename it “pic2″. Create a third layer a rename it “pic3″. Create a fourth and last layer and rename it “frame”.
5. Download these three slightly modified royality free pictures from here. Put them in the images folder. Import them by clicking “File” >> “Import” >> “Import to library”. Select them all or import them one at a time. Also import our self-created frame namely “frame.gif”.
6. You screen should look something like this.
7. Select layer “frame”. Drag our “frame” image from Library to the scene. If not align-box is visible press CTRL + K. Press the icon below the text “To stage:” so that it’s active. Now select the image “frame” we just dragged to the stage and press “Align horizontal center” and “Align vertical center”. Now our “frame” is in place. Lock the layer by pressing the dot below the lock once. Also lock the layers “pic2″ and “pic3″.
8. Select the layer “pic1″ and drag it to the stage. Align it like we just did with our “frame” image. Because our frame image hasn’t got quite even sides you have to move the image to pixels to the left by pressing the left key twice.
9. Convert our “pic1″ to a movie-clip symbol by selecting it once and pressing F8. Name it mc_pic1
10. Insert new key frames (still on the “pic1″ layer) by clicking on the 15 frame (don’t confuse this frame with our image “frame”) and pressing F6. Click the 85 frame and press F6. Click the 100 frame and press F6.
11. While still on the 100th frame click the image once and properties select color >> tint >> 100%.
12. Right-click somewhere between the 85th and the 100th frame and select “Create Motion Tween”. Now go to the first frame and click the image once again. From properties select color >> color >> advanced >> settings >> Replace the first three “0″ values with “255″. Don’t increase the value next to Alpha. Press “ok”.
13. Right-click somewhere between the first and the 15th frame and select “Create Motion Tween”. Now lock this layer, hide it by clicking the dot below the eye and unlock layer “pic2″.
14. Select the unlocked layer “pic2″ and repeat step 8 to 13.
15. When you have repeated those steps lock the layer “pic2″ and hide it.
16. For the third image and the layer “pic3″ redo the steps. When you’re done lock layer “pic3″ and hide it.
17. Unlock layer “pic2″ and unhide it. Select all of its 100 frames. Drag all the frames so that it starts in frame 100 instead of frame 1.
18. Lock the layer “pic2″ and hide it.
19. Unlock layer “pic3″ and unhide it. Select all of its 100 frames. Drag all the frames so that it starts in frame 199 instead of frame 1.
20. Unlock our layer “frame” and go to the 283th frame and press F5 to insert frame.
21. Unlock and unhide all layers. We are done! Now press CTRL + SHIFT + ALT + S and navigate to our images folder we have been using so far. Name the file header and save it.
22. It’s nice to have the source file so also save that by pressing CTRL + SHIFT + S.

UPLOADING

1. 1. What do we need to upload? Everything in the original template folder besides the old header imager, namely header.jpg. Be sure that it’s the edited index.html and style.css you are uploading.
2. Also be sure to upload our JavaScript namely swfobject.js.
3. Be sure to upload our header.swf, it should be in the images folder.
4. You don’t have to upload pic1.jpg, pic2.jpg, pic3.jpg or frame.gif. They are all contained in our .swf file.

You can download and review the final result here. I have included the images used as well as the .fla

I’ll create a Video tutorial of this later, so if your lost don’t worry too much. Until then feel free to mail me your questions here. I can’t guarantee a reply but I’ll try hard

Related Posts:

• #1 CSS Online Handbook
• Web Design For The Beginner
• Tableless Web Designs: Why I Switched
• CSS Editors & Design Tools
• How To Fix Your Sucky Website With Minimal Effort