Over the last couple of years I've made some basic Flash Banners to put on my websites, MySpace profiles, etc.
Occasionally I've been asked how I've made them, and haven't really been bothered explaining, or showing my friends how I've made them.
So I thought I'd start by making a simple tutorial.
Now, I'm a little old school, and still use my trusty PaintShop Pro 7. Although I do find that PhotoShop renders JPEG & GIF images better. So I usually do a dodgy and create my images in PaintShop Pro, save as PSD files, and save the JPEG or GIF from PhotoShop.
Recently I made a Flash Banner with the text "_nateous", my nickname on MySpace, scrambling around, so to speak. I guess I'll just use this as an example today.
As I'm not so proficient with PhotoShop, I'll do this in PaintShop Pro, would be easier if you were using it also.
Creating Images in PaintShop Pro
Creating the JPEG images we'll use in our banner in Adobe Flash CS3
[indent]Firstly, open PSP, and create a New Image with the dimensions of 400px by 74px (width by height).
Your image should resemble the figure below.
<img src="
http://i249.photobucket.com/albums/gg207/nateflorey/flash-fig1.jpg" />
Figure 1.
I tend to save my files after each step. Makes it easier to go back to in case of a crash (happens to me a lot due to me using a PC). Save your banner as <b>mybanner.psp</b>.
Now selecting your
Flood Fill Tool, and choosing your colour using the Colour Palette.
I've chosen a grey colour (#444444), though you can chose whatever colour you would like.
Then click on your image and flood fill it.
Your image should resemble the figure below.
<img src="
http://i249.photobucket.com/albums/gg207/nateflorey/flash-fig2.jpg" />
Figure 2.
Now making your "scrambling text".
Select your Text Tool.
Click on your image and the Text Entry box will appear.
If possible, copy the text options that I've done, but you may change the text to suit you.
<img src="
http://i249.photobucket.com/albums/gg207/nateflorey/flash-fig3.jpg" />
Figure 3.
Position your text wherever you would like it to be, I have chosen to centre it vertically, and horizontally.
Now that we have our desired text, make the background layer invisible, and Merge the text layer into a Raster Layer. All done by right clicking the selected layers.
<img src="
http://i249.photobucket.com/albums/gg207/nateflorey/flash-fig4.jpg" />
Figure 4.
By now, your image should look like this.
<img src="
http://i249.photobucket.com/albums/gg207/nateflorey/flash-fig5.jpg" />
Figure 5.
Making sure you're on the text layer, using your
Selection Tool, select the letters of your text individually, moving them randomly in your image area.
You should get something like this.
<img src="
http://i249.photobucket.com/albums/gg207/nateflorey/flash-fig6.jpg" />
Figure 6.
Now make your text layer invisible on the layer palette, then duplicate the layer by right clicking the layer and selecting duplicate. A visible duplicate of the text layer will appear on your image.
As below.
<img src="
http://i249.photobucket.com/albums/gg207/nateflorey/flash-fig7.jpg" />
Figure 7.
Now repeating the steps in Figure 6.
Using your Selection Tool, select the letters of your text individually, moving them around once again.
<img src="
http://i249.photobucket.com/albums/gg207/nateflorey/flash-fig8.jpg" />
Figure 8.
Now save your image.
Go to File and select 'Save Copy As'.
Save it as <b>mybanner1.jpg</b> making sure the selected save format is JPEG or JPG.
Once saved, go back to your Layer Palette, make the current Text Layer invisible, and make the other Text Layer visible.
Then repeat the 'Save Copy As' process, naming the file <b>mybanner2.jpg</b>
And it's done, all your images are complete. The next step is making the flash file in <b>Adobe Flash CS3</b>.[/indent]
Creating your Flash Banner
Creating your Flash Banner in Adobe Flash CS3
[indent]Now for making the final product in Adobe Flash CS3.
Open Flash and go to File > New, select <b>Flash File (Action Script 3.0)</b>
At the bottom of the screen in the Properties section, there's a button with the dimensions of the file.
Click on the button and change the dimensions of 400px by 74px (width by height).
Now go to <b>File > Import > Import to Libary</b>
Select your two JPEG files (mybanner1.jpg & mybanner2.jpg) and click Open.
The files will then appear in the Libary list to the right of the window.
Click <b>mybanner1.jpg</b> and drag it onto the design area of your project.
To ensure the image goes directly into the middle, change the X & Y parameters to 0.0 px, as shown below.
<img src="
http://i249.photobucket.com/albums/gg207/nateflorey/flash-fig9.jpg" />
Figure 9.
In the Layers and Timeline area of the window, create a second layer.
By default, the second layer will go above the first layer, that's ok.
On the second layer timeline, right click on the second timeline square and select Insert Keyframes.
On the first layer, right click on the fourth timeline square and select Insert Keyframes.
<img src="
http://i249.photobucket.com/albums/gg207/nateflorey/flash-fig10.jpg" />
Figure 10.
Highlight both frames on Layer 2 then drag and drop <b>mybanner1.jpg</b> into the design area.
Repeating the X & Y Parameter corrections to 0.0 px.
It would be now a great time to save your project.
Save it as <b>mybanner.fla</b>.
On the menu bar, go to Control > Test Movie.
It will bring up a window showing your working flash banner, it has also saved the flash movie file (<b>mybanner.swf</b>

in the same directory that you saved your .fla project file.
And that is your Flash Banner finished![/indent]
The _nateous Flash Banner
The completed product
[indent]Download at your will:
(right click and save as)
<a href="
http://ugeeka.crittercomfort.com.au/artician-virb/tutorials/flashbanner1/mybanner.swf" target="_blank"><b>mybanner.swf</b></a>
<a href="
http://ugeeka.crittercomfort.com.au/artician-virb/tutorials/flashbanner1/mybanner.fla" target="_blank"><b>mybanner.fla</b></a>
<a href="
http://ugeeka.crittercomfort.com.au/artician-virb/tutorials/flashbanner1/mybanner.psp" target="_blank"><b>mybanner.psp</b></a>
<a href="
http://ugeeka.crittercomfort.com.au/artician-virb/tutorials/flashbanner1/mybanner1.jpg" target="_blank"><b>mybanner1.jpg</b></a>
<a href="
http://ugeeka.crittercomfort.com.au/artician-virb/tutorials/flashbanner1/mybanner2.jpg" target="_blank"><b>mybanner2.jpg</b></a>[/indent]