Computer Science 12

Mr. JeanFebruary 19th, 2013

The plan:• Video clip of the day• Flash Programming #3• Quiz #1 – This Thursday

Overall Goal: • Using the techniques of last day & today’s

lesson we should be able to create a program which some character climbs stairs.

To Start: • Start by drawing the background.

– Set up the background so that it looks like a side profile of a set of stairs.

– ie:

Next: • Lock the stairs as the background.

• Now start drawing your character.

Convert to a Symbol:• Create a Movie Clip by selecting the

character you have just designed and press “F8” to convert it to a symbol.

• DO NOT FORGET TO DO THIS!

Next: • Using the BLACK selection arrow, double

click on the character you have created.

• By doing so, you have now go INTO the image. Once you are into the image you can begin to add animation which will repeat its self as your flash game goes on.

Next: • Start to add in the motion of climbing the

stairs inside the image of the character.

Adding Motion:• I can press F6 to copy the character. I can

move the arms and legs a little tiny bit.

• When I go Control>Test movie, the character will start to look like it is climbing stairs.

• Take the time to create realistic motion.

Hints: • Using the onion skin application will help

here, because it will give you the opportunity to see what the characters last moves were.

Next: • Your character is now ready to be given a

guide. To create a guide layer, select the character layer on your timeline and then click on the following symbol to add the guide layer.– Pay close attention to how someone would climb

stairs (Hint: Guide = IMPORTANT) ... remember good programming tricks the viewer into believing the realistic qualities of the motion.

• Your timeline should look like this.– Note: Your guide will only work if the guide

layer is directly above the layer containing the object using the guide. For example, if you dragged the character layer below the background layer, the guide would not work.

Next: • Click on the first keyframe of the Guide:

The “Character” layer and ensure it is highlighted as in the above picture.

• Using the pencil tool, draw the path you would like your character to follow up the stairs.

Next: • It is now time to snap the character to the guide. To do

this, we need to follow these steps:– a) Ensure that the magnet icon in the tools options is pressed on.

– b) Select the character on frame 1 of the character layer. Position your mouse on the centre of the character where you will see a crosshair. Move the character using the crosshair to the starting point of the guide.

– c) You will be able to tell your object has ‘snapped’ to the guide, because you will see an outline of a circle just behind the crosshair when you attach it to the guide.

– d) You have just positioned the character at the start of the guide. It is now time to position the character at the end of the guide. To do this you will need to Insert a Keyframe further down the timeline.

Next: • I will position mine at frame 50 by clicking

on this frame and selecting– Insert > Timeline > Keyframe. To be able to

see the background and guide at frame 50, I will need to add a keyframe at frame 50 to their layers too. At this point your timeline should look like this.

Next: • e) Click on frame 50 of the character layer and drag the

character to the end of the guide. Ensure the character snaps to the guide by watching for the blue circle.

• f) You have now positioned the character at the start and end of the guide. To make him move along the line, we will need to add a motion tween.

• To do this we need to click between the two keyframes on the character layer and select motion from the tween dropdown menu.

Quiz #1:• Thursday, February 21st, 2013

• Format: – 10 – 15 pts for True or False– 10 – 15 pts for Multiple choice– 20 – 30 pts for Calculations

Quiz Outline: • Changing numbers from denary to binary

(and vice versa)• Changing numbers from denary to

hexadecimal (and vice versa)• Changing numbers from hexadecimal to

binary (and vice versa)• Adding in Binary• Adding in Hexadecimal

To do: • Complete Flash Program #1• Complete Flash Program #2• Complete Intro “About me”.ppt• Complete Intro “Top Five Advances in

Computing”.ppt• Complete Flash Program #3