Parallax Background in Flash
● Create a background the moves a little slower to give your game the illusion of depth.
✓ Paint Bucket✓ Gradients ✓ Actionscript 3
• This tutorial is part of the Run and Jump Platform Game Project.
• It is part of a series:
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 …
✗ … 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).
✗ 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:
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:
Step #7: Movie Clip ~
✗ Select the sky by Double-Clicking it and hit F8 (or Right-Click and select: ) make a Movie Clip and call it sky
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.
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) …
✗ … draw some clouds!
Step #12: Paint Bucket Again ~
✗ Get the Paint Bucket Tool again and fill in the clouds:
Make a Bunch of Clouds!
Step #13: Duplicate the Clouds ~
✗ Select all the shapes and duplicate them by clicking and dragging while holding
✗ 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
✗ 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
Last Step: Save ~
✗ 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/