Creating a basic Flash Banner..
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 how-to. And what better place to do so than Squidoo, aye?
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.
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 how-to. And what better place to do so than Squidoo, aye?
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
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.
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 mybanner.psp.
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.
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.
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.
Figure 4.
By now, your image should look like this.
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.
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.
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.
Figure 8.
Now save your image.
Go to File and select 'Save Copy As'.
Save it as mybanner1.jpg 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 mybanner2.jpg
And it's done, all your images are complete. The next step is making the flash file in Adobe Flash CS3.
Your image should resemble the figure below.
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 mybanner.psp.
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.
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.
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.
Figure 4.
By now, your image should look like this.
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.
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.
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.
Figure 8.
Now save your image.
Go to File and select 'Save Copy As'.
Save it as mybanner1.jpg 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 mybanner2.jpg
And it's done, all your images are complete. The next step is making the flash file in Adobe Flash CS3.
Creating your Flash Banner
Creating your Flash Banner in Adobe Flash CS3
Now for making the final product in Adobe Flash CS3.
Open Flash and under the Create New heading, select Flash File (Action Script 3.0)
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 File > Import > Import to Libary
Select your two JPEG files (mybanner1.jpg & mybanner1.jpg) and click Open.
The files will then appear in the Libary list to the right of the window.
Click mybanner1.jpg 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.
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.
Figure 10.
Highlight both frames on Layer 2 then drag and drop mybanner1.jpg 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 mybanner.fla.
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 (mybanner.swf) in the same directory that you saved your .fla project file.
And that is your Flash Banner finished!
Open Flash and under the Create New heading, select Flash File (Action Script 3.0)
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 File > Import > Import to Libary
Select your two JPEG files (mybanner1.jpg & mybanner1.jpg) and click Open.
The files will then appear in the Libary list to the right of the window.
Click mybanner1.jpg 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.
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.
Figure 10.
Highlight both frames on Layer 2 then drag and drop mybanner1.jpg 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 mybanner.fla.
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 (mybanner.swf) in the same directory that you saved your .fla project file.
And that is your Flash Banner finished!
The _nateous Flash Banner
The completed product.
Unfortunately I can't embed the flash banner into this, but below are some links to the banner, and all other files associated with the creation of the banner.
Download at your will.
mybanner.swf
mybanner.fla
mybanner.psp
mybanner1.jpg
mybanner1.jpg
You will need to go to the seperate links as you can't right click and save the file.
Sorry for any inconvenience that might cause you.
Download at your will.
mybanner.swf
mybanner.fla
mybanner.psp
mybanner1.jpg
mybanner1.jpg
You will need to go to the seperate links as you can't right click and save the file.
Sorry for any inconvenience that might cause you.
Nate signs off
Nate's first ever Lens
Well guys, this was my first ever lens, I hope you approve.
Hopefully I get better with time! Haha..
Hopefully I get better with time! Haha..
by uGeeka
My name is Nate Byron, and I just so happen to be in my early twenties. Twenty to be exact.
I call the South-east of Australia my home.
Melbourne, Vi... (more)
I call the South-east of Australia my home.
Melbourne, Vi... (more)
