ImagingInfo.com |

Online Article Page

  

Techniques
Learn How to Design Creative Rollover Buttons
Colin Smith Explains How to Wow Website Visitors with Flash


Picture 2B
Picture 2B
Colin Smith


Picture 3
Picture 3
Colin Smith


Pciture 4
Pciture 4
Colin Smith


Picture 4B
Picture 4B
Colin Smith


Picture 5
Picture 5
Colin Smith


Picture2
Picture2
Colin Smith


Picutre 1
Picutre 1
Colin Smith


'How to Wow with Flash' by Colin Smith
'How to Wow with Flash' by Colin Smith

As a web designer, I find an interesting and elegant way to navigate is to use unusual images as rollover buttons. Having those graphical images come into focus as the mouse rolls over each button it adds even more flair to a design.

In this session, I will teach you how to get creative and design interesting rollover buttons using unusual images.

As an example, I chose a photo of a mailbox as his interesting image.  Previous to this lesson, I altered the mailbox in Photoshop to have four distinct looks.  Each of the four mailbox images will be used as a button with a rollover state that sharpens and zooms a bit as it is rolled over by the mouse.

Picture 1
As the lesson begins, each of the four mailbox images is already on its own layer.

In the upper left portion of Picture 1, the original mailbox images are placed on the stage called 'mailboxes-start.'

Picture 2
Select the first image (the red mailbox) and convert it to a 'Movie Clip' symbol by pulling up a dialogue box. To do this, hit F8, select 'Movie Clip' option and save it as 'lbr' (Letterbox Red).  Repeat this process with each of the remaining three mailboxes and name them (lbg, lbgr, lbgre).

In the next step, you will be nesting a movie clip symbol inside of a button symbol.  To do this, you will convert each 'Movie Clip' symbol to a 'Button' symbol by repeating the above process.  Hit F8 and select the 'Button' option in the dialogue box that appears, then save each as bt1, bt2, bt3, bt4.

Because it is a 'Movie Clip' symbol, you can open it the 'Properties Inspector,' where you can apply a filer to each image.  In this case, you will be applying a 'Blur' filter. 

To do this, double click on the first mailbox to bring up the Actions pallet in the lower left window, select 'Blur' and set to 5. 

Picture 3
Notice in the 'Timeline' menu in the top portion of the frame, the four different images are called, Up, Over, Down, Hit.  You can easily duplicate the above 'Blur' effect by clicking on the first mailbox, holding down the Option or Alt Key and dragging the 'Blur' effect into the Over, Down and Hit states.

This is a very simple way to get a very bold effect.

Picture 4
To make each mailbox come into focus and appear slightly larger when rolled over on, go back to the 'Over' state, click on the first mailbox and hit the 'Minus' sign to take out the effect. To enlarge the mailbox slightly, grab the 'Transform' tool, grab the shift key and click and drag a tiny bit.  Repeat this process with each of the remaining three mailboxes.

Picture 4B
Now you are ready to test your effect by rendering the flash movie.

Picture 5
In the final image, you can see the preview of what has been accomplished with the mouse rolled over mailbox two (with the graffiti on it).

In Flash, you will be able to rollover each mailbox and see them come into focus and enlarge slightly as they are rolled over on.
           
What you just did was quite simple, but allowed you to add creativity to your design by creating a 3D space. This technique can be applied in many ways. So go ahead and play around with this effect and have a little fun with your design.

This lesson, as well as many others, can be found on my How to Wow – Mastering Flash – Disc II in Session 13.

1 2 next

   







PTN Dailes HERE