Funny Mouse

How to do a simple mouse action picture using Dreamweaver. (And photoshop, or whatever)

Make/aquire your images!

Okay, first get the three images you want to use together, I'm using the Brain here in a waking and grin sequence, but you lot could use any images really, as long as they're the same size. To animate in Photoshop, use the layers just like a flick book or cels. I drew the first frame as a basis that would include all the elements needed in the rest of the sequence, and just changed a couple of details in each layer, eg, eyes closed, eyes open, mouth grinning. I then exported each layer as a gif in this case as they load quickly in browsers.

Animating it!

The first 2 frames are pulled into Dreamweaver as a rollover image, select this so it's greyed out, pull up the behaviors menu and click the + to reveal more actions, note, this only works with version 4+ browsers option turned on, do this if you need to. Select the swap image option on the large pop-up menu, and enter the third frame, it will appear in the events box in the behaviors menu. There should be an arrow next to it pointing downwards, click and hold down this and you'll find many options for what action will take the viewer to frame 3, in this case it is (onclick).

So as you wave the cursor over the picture, the sleeping Brain should awaken, when you click on the picture he should grin in a rather manaical way.

Enjoy!

I hope this should provide some inspiration to others out there. Using the technique as descibed above in Make/Aquire, I've made 2 films so far, "The Christmas Present" and "Sacks & Violence". These took time and patience to do, but significantly less time than it would have taken using a lightbox, proper paper and filming the whole thing. Plus I can colour in the originals without much fuss.

The Brain is copyright Warner Brothers, Photoshop is copyright Adobe, Dreamweaver is copyright Macromedia, Wacom is lovely and copyrighted.

Back to Pinky and The Brain Fan Art