Games tutorial for the holidays

http://www.emanueleferonato.com/2006/10/29/flash-game-creation-tutorial-part-1/

Week 16 - Bird Flying

Code to control your bird is below.  The bird must be saved as a movieClip symbol and the code is placed in the actions of the bird object:

onClipEvent (enterFrame) {
 if (Key.isDown(Key.LEFT)) {
  _x--;
 }
 if (Key.isDown(Key.RIGHT)) {
  _x++;
 }
 if (Key.isDown(Key.UP)) {
  _y--;
 }
 if (Key.isDown(Key.DOWN)) {
  _y++;
 }
}

Study Session Extension

For those interested, George has kindly extended my Tuesday afternoon study session for 2 more weeks.

TUES 2.30 - 5.30 (MAC LAB) for anyone that wants help with anything related to Graphic Design or Digital Media.

Week 14 - Rotoscoping Tips

Here is a video tutorial on how to import Video and setup your Flash file for Rotoscoping - http://www.youtube.com/watch?v=up9UbSndNO4

The technique is very similar to what I showed you in class.  The only difference was that I demonstrated a method in which you save your video as a series of JPEGs and import it as a sequence (to avoid potential video compatibility issues in Flash).  If the method in the video fails, try saving the video as a JPEG sequence and importing it to the stage in Flash as a sequence of images.


The steps I demonstrated in class, were as follows:

Step 1 - Download .mp4 Video

1. Find a video on YouTube
2. Copy the URL of the video (eg http://www.youtube.com/watch?v=up9UbSndNO4)
3. Go to http://saveyoutube.com/ and Paste the YouTube URL into the form and Select 'Download'
4. Choose the '.mp4' video format
5. Your video will then begin to download

Step 2 - Convert Video to JPEG image sequence

1. Open Adobe Media Encoder
2. "Add..." the video you recently downloaded to the Queue
3. Change the Output Format to 'JPEG'
4. Click on the 'Custom' hyperlink (orange underlined link)
5. In the 'Video' tab, check the box to output the video as an 'Export As Sequence'
6. Change the Frame Rate to 12 fps
7. Select the time range that you want to start and end the video by moving the time markers
8. Click on the 'Output Name:' hyperlink (orange underlined link)
9. Select the desired output location and create a new folder to store all of the new images
10. Click 'OK'
11. Click 'Start Queue'

Step 3 - Import image sequence to Flash

1. You will now have a folder full of JPEG images.  These can now be imported into Flash
2. Open Flash.  Create a new document and choose 'Import-->Import to Stage' from the 'File' menu
3. Select the first JPEG image from the folder you recently created
4. Flash will ask if you want to import the rest of the sequence.  Choose 'Yes'

Your Flash file is now ready for Rotoscoping!

Week 13 - Rotoscoping

Survey

Complete the following survey by the end of todays session -http://survey.rit.tafensw.edu.au/show_survey.aspx?PID=66


Discussion: Example of Rotoscoping:



Rotoscoped Animals:


Exercise: Create an animation of an ostrich walking (walk cycle)

1. Download the following images or locate them on the local public drive (if you are in class)
• Ostrich Walk - 1
• Ostrich Walk - 2
• Ostrich Walk - 3
• Ostrich Walk - 4
• Ostrich Walk - 5
• Ostrich Walk - 6
• Ostrich Walk - 7
• Ostrich Walk - 8
• Ostrich Walk - 9
• Ostrich Walk - 10
• Ostrich Walk - 11
• Ostrich Walk - 12
2. Import the images to the stage as a sequence (import the first image and flash will locate the rest)
3. Lock the layer of photos
4. Create a new layer for the each of the following 'left leg', 'right leg', 'body', 'neckAndHead'
5. Convert the frames of each layer to 'blank keyframes'
6. Begin tracing over each body part for each frame of the animation (its a good idea to use different colours for the legs so the action is clearer to understand.  Make the leg furthest from camera slightly darker)
7. Once you are finished, delete the photo layer and play it!

Further Reading: Importing Video to flash for Rotoscoping

Week 12 - Create a Website in Flash

Demonstration: Button Revision and Timeline Control


Exercise: Use your existing knowledge and skills to create a basic website in Flash.

•  You will need to create to create at least two buttons for navigation that allow you to swap between the pages. 
•  If you get time, apply some interesting rollover effects. 
•  Change the content on each page to make it obvious that you navigation is working.

If you are finished creating your website, you can commence creating a 'rotoscoped' animation (see next weeks post)

Week 11 - Interactivity & Buttons (continued)

Welcome back after the break!
Today we will be continue looking at Buttons in Flash.  We will start with some revision and then move onto the following exercises:


Exercise #1: Control a ball moving up, down, right, and left using button controls.  Each button will simply go to a frame that plays an animation of the ball moving in the relevant direction and returning to its original position.

Exercise #2: Apply a rollover effect by changing the hover state of the button


Once you have completed the above exercises, we will experiment with using Actionscript (AS2) to create animated rollOver (hover) effects on buttons.

Week 10 - Interactivity & Buttons

Interactivity in Flash

• Stop an animation using Actionscript 2.0 code. 
• Create a motion tween of a ball on a layer called "ball"
• Create a new layer called "actions" with a blank keyframe
• Right-click on the blank keyframe and select Actions
• Place stop(); code in the actions panel of the blank keyframe
• Test your scene
• Move the blank keyframe to another frame
• Test your scene
• Create a Button to Play the animation
• Create a rectangle and type "PLAY" inside it
• Select the rectangle and text and Convert to a Symbol (symbol type is a button)
• Right click on the button and select Actions
• Place play(); code in the actions panel
• Test your scene and click your button

• Create a Button to Stop the animation
• Create another button the same way you created the "PLAY" button
• Right click on the button and select Actions
• Place stop(); code in the actions panel
• Test your scene and click on your buttons

Resources:

• Buttons - Flash Tutorial: Basic Button Properties
• Interactive Example - Jordan: History of Flight

Week 9 - Panning and Basic Interactivity

Camera Panning in Flash and Animation Revision
Exercise: Create an animation of a car driving along a country road

• The car must remain in the vertical centre of the screen (don't move left to right)
• The car wheels must spin
• Foreground graphics must include a fence
• Midground graphics must include a windmill with spinning blades

Monty Python Intros - Simple but effective animation
Below is an example of a great animated film credit sequence, using only simple animation techniques.  The graphics and music are the heroes of the clip.

Week 8 - Layer Masks

Introduction to Layer Masks - Disney Pixar Short - Day and Night

Demonstration: How to create a layer mask in Flash

Resource: http://www.entheosweb.com/Flash/masking.asp

Exercise: Create your own animation using layer masks.

Week 7 - Traffic Lights & Finishing Touches

This week: Complete the finishing touches of your animation. 
Demonstration: Creating traffic lights (basic instructions can be found on last weeks blog)



MovieClip Revision
Create an animation of a bouncing ball using movieClips. 



Finished? If you have finished and uploaded your work, practice your animation skills on a project of your choice. Ask for assistance if you need help.

Week 6 - Cancelled

Class cancelled

Week 5 - MovieClips

Step 1: Create your movieClips

1. Create a New Movie Clip Symbol and call it "carStill"
• Whilst in "carStill" state, draw a car (side on view) without wheels
2. Create a new MovieClip symbol and call it "wheelStill"
• Whilst in "wheelStill" state, draw a wheel with spokes (or any detail to show rotation)
3. Open "carStill" state and place "wheelStill" wheels from your Library on to your car (you may need to resize using the free transform tool)
4. Duplicate "carStill" in your library and call it "carMove"
5. Duplicate "wheelStill" in your library and call it "wheelMove"
6. Open "wheelMove" state and create a motion tween for the wheel.  Rotate the wheel once clockwise over 24 frames.
7. Open "carMove" state and view the properties panel
• Select the wheels on the stage and choose "Swap ..." in the properties panel.  Replace the wheels with "wheelMove"

You now have two cars in your library.  One with wheels that turn and one with wheels that don't turn.  Place an instance of each car on the stage and Test Preview your animation to make sure you have one with spinning wheels and one with stationary wheels.

Step 2: Animate car and Swap Symbols

• Motion Tween "carMove" - driving into the center of the stage and stopping, then driving off the stage. 

•  Use 3 separate motion tweens
• drive in
• stopped (this can be static - ie. not tweened if you wish)
• drive off
•  To create a new motion tween on the same layer
• create a blank keyframe after the 'drive in' motion tween
• copy the last frame of the 'drive in' motion tween
• paste the frame on to the blank keyframe
• repeat for 'drive out' motion tween
•  Your timeline should look like this (click to enlarge):

• Select the untweened Keyframe (grey colour)
• Select the car on the stage.  The properties panel should display that it is an instance of "carMove".  Swap "carMove" with "carStill"
• Test your animation scene

Step 3: Finishing Touches

• Apply motion easing to tweens to give the appearance of braking and acceleration
• Draw a traffic light
• Draw each light in an off position
• Keyframe 3 different light states (red, orange, green) and change one light to on for each frame
• Move keyframes to appropriate position on your timeline (eg car is stopped during red light)
• Draw background imagery
• Finished early? Why not try some exhaust fumes

Advanced Class - TIME CHANGE

Advanced Class - Wed Night Animation class has been extended by 30min for the rest of the term.  Class is now 5:15 - 7:45pm (Advanced class only).

Beginner Class is still 5:45 - 7:45pm.

Week 4 - Motion Easing

1. Draw a car (side on view)
• Use reference to draw your car (eg Google Images)
2. Animate car driving into the center of the stage and stopping, then driving off the stage
•  Use 3 separate motion tweens
• drive in
• stopped (this can be static - ie. not tweened if you wish)
• drive off
•  To create a new motion tween on the same layer
• create a blank keyframe after the 'drive in' motion tween
• copy the last frame of the 'drive in' motion tween
• paste the frame on to the blank keyframe
• repeat for 'drive out' motion tween
3. Apply motion easing to give the appearance of braking and acceleration
4. Draw a traffic light
• Draw each light in an on and off position (so you can animate it on and off)
• Place each light on a separate layer
• Draw background imagery

Moodle Update

Your first assessment event has just been uploaded to Moodle:

• Animate a Vehicle  (CUFANM301A: Create 2D digital animations) - Due 31st Aug

Week 3 - Drawing in Flash, Motion Paths

Exercise #1

1. Create a motion tween
2. Create a shape tween

Exercise #2

• Draw an aerial view of a motor vehicle
• Use reference material - copy this image
  
• Paste it on a separate layer in Flash and lock the layer to prevent editing

• Motion Tween the vehicle

• Draw a road for the vehicle to drive on (on a seperate layer)

• Draw a path for the road
• Increase the width of the stroke to be as thick as a road.
• Change path colour to black

• Copy and paste the road (use Paste in Place)

• Change the colour to white
• Change the width to suit a line-marking width
• Change the stroke pattern to be 'Dashed'

•  Copy and paste your dashed line (use Paste in Place)
• Change the colour to pink (so it's easy to see)
• Change the stroke pattern to be solid
• Select the path and Cut it
• Select the motion tween of the vehicle in the timeline
• Paste the copied path

• If necessary, reposition the motion guide so that the car now follows the road

•  Press Control and Enter to preview your animation!

• Practice drawing in flash by adding more objects to your aerial scene

Resources:

Week 2 - Animation Revision & Sunset Scene

Exercise #1 - Revision Test

• Create a motion tween
• Create a shape tween

Demonstration: Creating and Editing motion tweens

Discussion: Differences between a motion and shape tween.

---

Demonstration:

• Layers
• Color Effects (changing Tint and Alpha transparency)

Exercise #2 - Use a combination of shape and motion tweens to create a sunset scene. Your scene should include at least the following elements:

• sky
• grass
• sun
• a tree

Note: all objects should be on a separate layer


Exercise #3 - Add stars to your sunset scene using the polystar tool, grouping and adjusting the Alpha level


Save your work.

Week 1 - Introduction to Flash and Animation

Introduction to the Flash interface and animation.

1. Create a basic motion tween (move circle across the screen)
2. Create a basic shape tween (morph shapes and change colours)
3. Experiment with motion presets (apply Flash's inbuilt animation presets to a tween)

Basic Flash Animation - Further Reading

• Flash Guide: Using the Stage and Tools panel
• Flash Tutorial: Shape Tweens (audio required)

• Flash Tutorial: Motion Tweens (audio required)