Programming games

Flash drawing trick(s). Rock paper scissors.

Classwork: Complete rock paper scissors.

Flash drawing

• segmentation of drawing: – select parts, – add on by using shift key– also use lasso or rectangle select tools

• move

• modify (transform)

Flash

You can• change position and dimensions selecting an object and using

the Properties panel– W– H– X– Y

Try this!You can use this• to make sure an oval is a square.• to get the origin (cross-hairs) where you want them to be.• to line up and space out related objects.

Rock paper scissors

• Review rules.• Design goals:

– present player with buttons that look like rock, paper or scissors

– 'computer' makes random choice– short animations illustrating actions– text (also) showing computer move and

results

• Demonstrate

Animation

• Presenting to the player/user/viewer a sequence of [still] images.

• Two methods– produce sequence during creation time. This

is termed CEL animation.• Flash has facilities to help this: termed TWEENING

– write code that executes during runtime that modifies display. This is termed COMPUTED ANIMATION.

Class projects

• rock-paper-scissors uses CEL animation.

• [bouncing ball uses COMPUTED animation.]

• Bo the barking dog involves both.

• Cannonball involves both.

Buttons

• For coin flip, I used buttons from Windows/Common Libraries/Buttons and modified the text.

• For rock-paper-scissors, I made my own (DIY, programmer created) buttons.

• Other way: use Window/Component/Push button• NOTE: in all cases, button instance on Stage

must get a name!

Source code

• Examine source code

• Together build next animation

• Your task: finish!– You can change / improve graphics.– You can add animation for ties.– ????

Flash distinctionsIn [my] rock-paper-scissors,• instances of scissors button present on Stage in

each frame• scissors button in Library

– graphical material in each of the 4 frames of the scissors button in Library

For making the animated sequences, I copied-and-pasted from the graphics in the Up frame of the scissors button in the Library. I then modified the graphics on the Stage. There was no change in the scissors in the Library.

Show your work

• Reminder: slow and steady

• Get logic working and then add/enhance the graphics and add animation

• Don't be skimpy on frames

• Put in stop(); in the last frame of each animated sequence.

Common problems

• Forgetting to insert keyframe

• Using the whole button instead of graphics that were in a frame of the button

• Working on different layers

• Omitting stop();

Random

• This is the same as JavaScript!• Math is a class. Math.random is the name of one of the

class methods. Math.random() is a call to the class method. [This is the jargon—learn it!]

• Math.random() produces a random fraction from 0 up to (but not including) 1

• Math.floor(Math.random()*n) [assuming n is a variable holding a positive

integer]produces integers from 0 up to (n-1)

Symbols• Movie clips• Button• GraphicsSymbols are created and remain in the Library.

You bring instances to the Stage.Note: you can draw directly on the Stage (just like

you draw to make a movie clip). Create graphics symbols in the Library when you

want to repeat a symbol. You bring instances to the Stage.

Changing the symbol in the Library changes all instances on the Stage.

Flash publishing• Save As/Save: saves the source aka

development version .fla file• Publish: creates .html and .swf versions. You

can examine any of the .html files• Make sure your saved .fla and the published

files are the same version.• You can upload the .fla file to your website for

storage.– I sometimes do this to make the source

available to students.• You upload the .html and the .swf to

share/show to everyone on the Web.• The file to be linked to is the .html file.

General concept: Objects• Objects are objects of a specific class.• So far, we've only used built-in classes.• Objects have

– properties Also Known As attributes AKA data AKA information

– methods AKA code AKA behavior

• Examples– head.visible, ball.x– mytimer.addEventListener– In cannonball: target.goToAndPlay(2);

• In rps, we used gotoAndPlay("breaks") for the main movie so we didn't need the dot (.)

Classes

• Built-in classes include– movie clip– Timer– FLVPlayback– Sound

• Programming defined classes– See their use in other examples

• bouncing things• shooter• jigsaw puzzle

Classwork/Homework

• Complete rock paper scissors– Please read rps tutorial and, if you have time,

create the whole application yourself

• Next project: Bo the barking dog

• After that: cannonball