Illustrate your Game in Flash
● Open your "back".
✓ Movie Clips ✓ ActionScript ✓ Lines and Stroke
• This tutorial is part of the Run and Jump Platform Game Project.
• It is part of a series:
Other People's Work:
Here are some examples of work inspired by this tutorial.
Step #1: Open your Project in Flash ~
✗ Open your project from the last tutorial => 82_game_background_Fl.htm -
Step #2: Open your Background ~
✗ Double-Click the back layer to open up the Movie Clip:
Now you are working INSIDE the Movie Clip.
Step #3: Re-Name the Layer ~
✗ RE-name the layer inside the Movie Clip: "collisions"
Step #4: Select Everything ~
✗ Hit the keyboard shortcut: Cmd(⌘)+A + to "Select All" the platforms you created:
Step #5: Hit F8 ~
✗ Hit F8 to make ANOTHER Movie Clip out of your background, call it: "collisions" and make sure the Registration Point is set to: bottom-left this time:
Step #6: Instance Name ~
✗ After you create the collisions Movie Clip, give it the instance name “collisions“ in the Properties Panel:
Step #7: Positions and Size of Collisions ~
✗ Set the position of the "collisions" Movie Clip to X: 0 and Y: 0
Step #8: Go Back to the Beginning ~
✗ Then, go back to Scene 1 …
✗ … and, with the back Movie Clip selected, set the position of the entire back object to X: 0 and Y: 500
✗ This will return the background to its approximate location, although if you run the game you’ll notice that it isn’t in the right place.
✗ This is because the location of the background object in-game relies solely on code, not where we place the object on the stage.
Step #9: Actions ~
✗ Click on your Actions keyframe again …
✗ … hit Alt (⌥) F9 - and open the Actions panel and look for scrollY …
✗ … replace it with this code:
var scrollY:Number = 500;
Now it should look like this:
Step #10: 4 More Changes ~
✗ Also, find all 4 of the instances of this code:
✗ And change them into this:
Change All 4 Like This:
Step #11: Open Back again ~
✗ Open the back movie clip again so you are working INSIDE it …
✗ … and create a New Layer BELOW the Collisions Layer, and call it Visuals:
✗ The Visuals layer is where you'll star making some backgrounds and other images.
✗ Make sure you lock the collisions layer so you don't accidentally write on it.
Step #12: Rrectangle Tool ~
✗ Get the Rectangle Tool or hit the keyboard shortcut letter (R) …
✗ … under Rectangle Options, set the corner radius - 15 is average but set it to whatever dimension you want.
✗ … set the Stroke Color to none …
✗ … and choose a light Fill Color like green or some color that contrasts against the background.
Step #13: Start Drawing ~
✗ Draw rounded boxes behind all your platforms:
✗ Keep Going!
✗ Make a New Layer for each object.
Step #14: See if it Works! ~
✗ Hit the keyboard shortcut: Cmd(⌘)+Enter to view your work!
Last Step: Save your Work ~
✗ Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]
• ALWAYS save your projects using the following naming convention:
• DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.
• NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.
Other Resources: http://as3gametuts.com/2012/02/17/platformer-6/