Programming games Show your version of Bo the dog. Start cannonball Preview: video, audio work session (cannonball) Homework: Cannonball with ball in a parabolic arc. Phase 2: checks for ball hitting ground or target. Phase 2a: target collapsing/exploding. Next project: sound or video.

Animation Is created by displaying sequences of pictures so that our eyes ‘see’ movement. Cel animation (aka frame by frame) is a sequence of distinct frames. The programmer creates the distinct frames. Computed animation is generated by code changing what is on the screen. This could be moving things around, changing shape, color, visibility, alpha, etc.

Tweening Flash provides a quick (quicker) way of producing the sequence of frames for cel (frame by frame) animation. –Motion tweening: specifying a movie clip instance or a shape moving along a path –Shape tweening: specifying a first and last shape This is still called frame by frame animation. Flash authoring environment helps out during creation time.

Reprise on animation Cel animation: use distinct frames –all drawn by programmer/creater or –some created by Flash itself –Examples: rock-paper-scissors, collapsing target in cannonball, Bo's legs Computed animation –code (written by programmer/creater) changes objects on Stage –Examples: ball in bouncing ball, ball in cannonball, movement of all of Bo.

Reprise: Text fields Text fields are created by the programmer and given [initial] values. –Read-only (Static) text fields do not change during runtime. Label parts of the Stage. –Selectable (Dynamic) text fields can be changed by code (written by the programmer during creation time) during run time. Show results. –Editable (Input) text fields can be changed by the player AND by code. Presumably, code (written by the programmer) reads/examines the input text fields changed by the player.

Programmer versus player Programmer (creator/developer) uses Flash to create (build) an application. Player is the name I give to the end-user of our applications. Programmer uses the Flash environment to build an application, including coding, drawing, etc…. Flash, 'the computer', does nothing by itself. Take ownership of what you do!

Hitting walls: Bouncing ball Angle of incidence equals angle of reflection Because the walls are horizontal and vertical, this means the change is pretty simple: –Hitting horizontal wall causes the vertical component to change sign –Hitting vertical wall causes the horizontal component to change sign

Cannonball Player changes/sets angle of cannon and speed of cannonball out of the mouth of the cannon Using a time event, ball moves according to [simple] model of ballistic motion: ball under effect of gravity— parabolic arc. –You will NOT see any quadratic equation. You will see mathematical expressions. –This is computed animation Code checks for hitting ground and hitting target. If ball hits target, target crumbles (or explodes—it is up to you). –This will be cel animation. You will draw the crumbling/exploding target. Demonstrate.

Overview cannonball 1 frame –target symbol has several frames 3 layers: for organization –May use additional layers for graphical effects: putting ground on top of ball. 5 symbols in Library –ball movie clip –ground movie clip –cannon movie clip –target movie clip –fire button Instances of those 5 symbols on the Stage (each named) Two editable/input text fields and two read-only text fields

ActionScript Main movie, actions layer –Global variables, including Timer object, –register listeners for Timer event and fire button event, Function for starting the cannon ball flight Function for Timer event that advances the cannonball –Later add code to check for collisions target symbol: initial design 1 frame –Later design: add frames and stop(); in first frame and last frame

Angles Flash (and most other programming languages) use radians for measuring angles. –Actually, Flash uses degrees for rotation attribute of objects and radians for trig functions. Radians is an intrinsic unit of measure. There are 2 * pi radians in a circle. Math.PI is a built-in constant. –Math.PI is equivalent to 180 degrees –Math.PI/2 is equivalent to 90 degrees –Math.PI/4 is equivalent to 45 degrees –angle_in_radians = angle_in_degrees * Math.PI / 180 We don't ask our player to think in radians! Our code does the conversion work.

Cannonball Phase 1: get arc working Phase 2: add checks, add frames to target –target crumbles –target movie clip symbol has cel animation You add frames to the target symbol in the Library The instance of the target symbol you have placed on the Stage will now have/be the new target –After hit, ActionScript code in the Main movie will be target.goToAndPlay(2) to advance the target to its frame 2 and subsequent frames.

Layers, hints Put all the material in the board layer of the first frame. –Give everything an instance name. Add layer for the interface elements: text field and buttons –Input text fields need the INSTANCE name. Add layer for actions If you want the target to sink into (behind) ground, you may make a new layer and move (cut and paste in place) ground instance to it. The layer with the ground is above the layer with everything else.

Advice The firecannon code positions the ball. If your cannon is different than mine, you may need to modify this part of the code. The hitTestPoint examines the material (occupied pixels) in the target clip versus the ball’s x and y position. –Make sure the origin of the ball is in its center! The check for reaching the ground is done in terms of the ground's origin –Make sure this is on the ground!

CB issues You need 4 text boxes!! –The read-only/static text field containing the word speed –The editable/input text field with instance name speed. It holds text representing a number. –The read-only/static text field containing the word angle (could be degrees) –The editable/input text field with instance name anglein. It holds text representing a number. NOTE: the application starts with values in speed and anglein

CB issues The default for Flash is to go frame to frame so…. For the crumbling target you need to put stop(); in the first frame and the last frame

Classwork/homework Read tutorial! Read the whole thing and then go back and create the application, starting with just getting the ball to go in an arc. –You need to create cannon, ball, ground, and simple, 1 frame target symbols. Move to Stage and name. –You need to get a button from Common Library. Name. –You need to write code. Create 1 Timer object. Code for event handling (addEventListener) for button and timer. [Can add code for checking for hitting ground and target later.]

Homework Cannonball phases. GET first phase working BEFORE GOING ON. –Note: testing the program means to test when the ball hits the target AND when it does not hit the target. You also should include going all the way over the target. –Can wait to create frames of collapsing/exploding target until rest of program works. Advance notice: Video or Audio –read tutorials. Look at source files –Think about how you will acquire video or sound files.