|
|
| |
| Note that these tutorials assume you have a working knowlegde of Flash, Photoshop and Dreamweaver. |
 |
| Starting in Flash by setting the stage and selecting the square making block thingy (Rectangle tool) and setting it to have a 25 degree round to the corners. These dimensions will be important when putting it all together in the end. |
 |
| The simplest and quickest way to make this vetor the right size is to drag any random box anywhere on the stage and alter the width, height, x and y axis. For this tutorial they will need to be as seen above, w=450; h=200; x=27; y=23; remember these because you'll use them later. Once this is done change the color to true red (#FF0000). |
 |
| Add new key frames accross the timeline. You can make it run slower by spacing them out which, in real life is something you'd want to do. For this I've made change color every one second going by twelves. Using the primary colors RGB and YMC assign colors to each frame. Using the primary colors will give all the other colors you want, and different colors by switching them up. |
 |
All that's needed is to add the tweens to each frame which is where the color transitions come from. Adding the gotoAndPlay code on the last frame will solve the problem of a freeze that sometime accures at the end of the movie before it starts over. Export the swf file and it should look like this: |
 |
| Going now to Photoshop, create a new document and make sure that the dimensions are the same as the flash stage. Create a new layer and grab the Rounded Rectangle tool and make the radius 25px. |
 |
| Remember the dementions of the vector in Flash? The best why the make it the same in PS is to use gride guide line from the rulers, even though can just use the rulers themselves if you want. Drag your vector from 0x0 to the 450 x 200. Then move the vector into position. x=27 and y=23. |
 |
| Three quick moves here; Make the color dark gray #555555, unlock the background layer (double-click), and than rasterize the shape. |
 |
| The paramitors you give the Inner and Outer glow can be anything you like, just make the opacity anywhere from 50 to 80%. Once it's done, export it as a PNG or GIF that will support the transparency. File > Save for web... |
 |
| Going to Dreamweaver create a black html and post your png that you made if Photoshop first, the swf that you exported from flash. Delete the script to make it simple, you really don't need it. Make sure that image is on top. |
 |
Here are the CSS codes that makes it work. To the image and flash add a <div> box and make sure they are seperate. The x and y axis must be the same for them both, and the z-index must be in a 'style', however, add the style to the image div only, and to the flash, add the style within the object itself. The z-index goes from -9 to 9 to keep it simple anyway, with -9 being farthest from you and 9 the closest. You want to set the index of the image div to be a higher number then the object so that it is put behind. Save and preview in your browser and it should work. You can use this for anything you can imagine, like adding an mp3 player on top that which we'll learn how to make next. |
