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

Get Adobe Flash player


Summary:

Parallax Background in Flash

    ●   Create a background the moves a little slower to give your game the illusion of depth.


Learn About:

Paint Bucket Gradients Actionscript 3

  •   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


Step #1: Open your Project in Flash ~

Open your project from the last tutorial => 83_game_visuals_Fl.htm -


Step #2: Make a New Layer ~

Make a New Layer below your back layer and call it sky:

 

 

 

Lock all your other layers by hitting the icon to keep from accidentally drawing on the wrong layer.

 

Step #3: Linear Gradient ~

Go to: Window > Color or hit: Shift (⇧) + Cmd (⌘) + F9 shift key f9

… click Fill Color

… and select Linear Gradient as the Color type.


Step #4: Linear Gradient ~

Double-Click on the " " at the end of the color spectrum and choose your color (you can change it later).

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

Get Adobe Flash player

Then do the other side:


Step #5: Rectangle Tool ~

Get the Rectangle Tool or hit the keyboard shortcut letter (r) …

… zoom way out and draw a huge box that covers your entire stage area:

 

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

Get Adobe Flash player


Step #6: Paint Bucket Tool ~

Now get the Paint Bucket Tool or hit the keyboard shortcut letter (k) …

… and drag it across the screen to change the direction of the fill:

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

Get Adobe Flash player


Step #7: Movie Clip ~

Select the sky by Double-Clicking it and hit F8f8 (or Right-Click and select: ) make a Movie Clip and call it sky

button symbol


Step #8: Instance Name ~

With the movie clip selected, name the instance sky:


Step #9: Double-Click the Movie Clip ~

Now that you have created the movie clip, double-click it …


You should be working INSIDE the Movie Clip.

movie within a movie

Step #10: New Layer ~

Make a New Layer above the gradient layer, call it clouds, and lock the bottom one:


Step #11: Brush Tool ~

Get the Brush Tool or hit the keyboard shortcut letter (B) …

brush

… draw some clouds!

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

Get Adobe Flash player


Step #12: Paint Bucket Again ~

Get the Paint Bucket Tool again and fill in the clouds:


Make a Bunch of Clouds!

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

Get Adobe Flash player


Step #13: Duplicate the Clouds ~

Select all the shapes and duplicate them by clicking and dragging while holding

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

Get Adobe Flash player

 

 

 

 

 

Spread the clouds all around!

 

Step #14: Parallax Code ~

Click on your Actions keyframe hit Alt (⌥) F9 to open the Actions panel or go to: Window > Actions

… scroll down and look for:  back.y = scrollY

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

Get Adobe Flash player

Copy this code:


sky.x = scrollX * 0.2;
sky.y = scrollY * 0.2;

Clear some space and paste the code as shown:


Step #16: Test Your Game ~

View your work by hitting the keyboard shortcut: Cmd(⌘)+Enter

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

Get Adobe Flash player


Last Step: Save ~

Save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.fla]

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