Home |
13: Teaching Support | Highland Cow Buttons

Back to the Teaching Support content page >>

Brief

In this project we will create animated buttons using three highland cows. This lesson is based on a Degree show web site found at the following link: Degree Show 2000



The illustration was originally drawn in pencil and scanned in.



Drag this image to your desktop. Now create a new folder for the project called Highland Cow and drag CowFace.jpg to this folder.

Please note when working on any project it is a good idea to keep all the files stored in the same folder so if you need to move between computers you can guarantee you always have all the files required.

Working in Freehand

Now launch freehand and import the cowFace.jpg to the page.



Using the cows head as a template draw over the top to illustrate the cows head. Also draw a cows body as shown in the picture above and the legs.

Most importantly for the eventually bring these illustrations in Flash you must group each object so you have a head, body and legs as separate grouped objects.

For this project we also need another two cows so once you have finished the first cows head make two copies and change the colour of the cows fringe to match the ones shown above.

The background for the project can be down loaded later if you have the time and is based on the watercolour drawing shown above. Drag this file to your desk top folder and import to Freehand file in the same way you added the cows head.

A completed Freehand file can be downloaded here

Working in Flash

Once the Freehand files have been drawn up we can now import the grouped objects into a Flash file.



You will need the Freehand and Flash file open at the same time and then copy the cows head in Freehand and then select the Flash file and paste. If you have correctly grouped the cows head it should arrive as shown above.

So this object can be used for animation and for buttons we now need to save it to the Flash Library which is done by choosing Modify/Convert to Symbol. The object should be saved as a Graphic as shown above. Do the same for the body and the legs so you have three items in the Flash library.

Create the Animations

To animate the cows head we now select Insert/New Symbol but choose Movie clip for the file type. On this new blank page drag the cows head image from the library to the centre of the page.



Create an animation of the cows head moving up and down. When this is ready repeat this process and create another cows head but this time rotate it left and right.

In the library you should now have two movie clips of the cows head. The first moves up and down and the second rotates left and right.

Create the Button

Now we need to create another file which will be the actual button. rather than add still images for the up/over state of the button we can add the two different animations.



In the Down state we don't need an animation so just add the Cow Head graphic and for the Hit State add a blue circle the same size as the Head of the cow ( shown above ).

If everything has gone to plan you can now add the button to the main window and place it over the cows body to get the following effect.



We now need to add sound to the over state of the cow button.

Down load the Cow AIFF file to your folder by clicking here. Cow Sound



Import the sound file to your library by selecting File/Import/Import To Library . The sound clip should now appear in the library. Double click the library object for the button and add a new layer in the time line. Now insert key frame in the Over and Down state and then select the over state.

Drag the sound clip from the library to the main window and in the over state you should see a blue line as shown above. This is the symbol for a sound clip. Do the same again with the Up state selected this time.

So that the sound file stops playing when we move the curser of the cows head in the over state we will now set the sound to Stop in the Property panel. In the Sync option select stop and when the curser now moves off the button this sound clip will stop playing.



You should now have a working cow head button with sound as below




To finish of the project create another two cows with slightly different animations and add the Freehand illustration for the background picture of the hills as shown at the top of the page.

If you still have time after this animate the clowds moving across the page in diffrent directions.


Back to the Teaching Support content page >>