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.