Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Summary: This tutorial is still under construction! Please forgive spelling errors, broken links and other formatting problems.

Illustrate your Game in Flash

    ●  Open your "back".


Learn About:

Movie Clips ActionScript Lines and Stroke

  •   This tutorial is part of the Run and Jump Platform Game Project.

  •   It is part of a series:

  •   81_player_Fl.htm   •   82_game_background_Fl.htm  •   83_game_visuals_Fl.htm   •   131_parallax_background_Fl.htm
  •   43_stop_scene_game_Fl.htm   •   24_Star_Rotating_Fl.htm  •   65_locked_door_fl.htm

Other People's Work:

Here are some examples of work inspired by this tutorial.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

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:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Now you are working INSIDE the Movie Clip.

movie within a movie

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

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… 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 (⌥)alt option key 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:

movie within a movie

Step #10: 4 More Changes ~

Also, find all 4 of the instances of this code:

And change them into this:


back.collisions.hitTestPoint 

Change All 4 Like This:

movie within a movie

Step #11: Open Back again ~

Open the back movie clip again so you are working INSIDE it …

movie within a movie


… 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 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:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Keep Going!


Make a New Layer for each object.

 

Grass


Trees


Mountains


Everything!

 

 

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]

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

•   ALWAYS save your projects using the following naming convention:
FIRST_NAME_LAST_NAME_PROJECT_NAME


  •   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/