In this tutorial, you will learn how to make a Flash parallax scrolling gallery from scratch. Parallax scrolling is frequently used in most 2D animation and games, where the background images and foreground images scroll at different rate of speed. This will create an illusion of depth as the background images are moving slower than the foreground images.

View Demo Gallery

Download Demo ZIP

1. Floor Pattern

First we need to make a tiled wood floor image. Here I use a 280 x 182px hardwood floor image. Go to menu Filter > Other > Offset and enter the following settings: Horizontal = 140, Vertical = 91 (half size of width and height), Wrap Around. Then use the Clone Stamp Tool to touch up the cutting edges. Select all and go to menu Edit > Define Pattern.

offset filter

2. Build the Wall

Now make a new document, 2520 x 450px. Use the Rectangular Marquee Tool to make a selection. Fill it with a 2 color linear gradient: color1 = #eeebd4, color2 = #cabb99. Then apply Filter > Noise > Add Noise = 2% to add some texture to the wall.

Wall

3. Fill the Floor

Make a rectangle shape just below the wall. Double click on the layer to activate the Layer Style palette, apply Pattern Overlay with the wood pattern you created in Step 1.

Floor pattern overlay

4. Floor Trim

Select foreground color #f0ecd6 and make a rectangle shape above the floor layer. Double click on the layer to activate the Layer Style palette, apply Inner Bevel effect as shown (Size = 3, Angle =70, Altitude = 64, Shadow Color = # 856738, Shadow Opacity = 39%). Then, apply Drop Shadow (Opacity = 27%, Angle = 90, Distance = 1, Size = 3).

floor trim

5. Add Logo Signage

Paste in your vector logo on the wall. To make the metallic effect on the logo, apply Gradient Overlay (Angle = 90, Gradient color1 = #a9a3a3, color2 = #a9a3a3, color3 = #d7cfcf). Then, apply Inner Bevel (Angle = -48, Altitude = 21, Shadow Opacity = 0). Finally, apply Drop Shadow (Shadow color = #73552d, Opacity = 25%, Angle = 90, Distance = 4, Size = 4).

logo signage

6. Couch

Now it is time to add in some furnitures in the scene. Be sure to find stock images that are in the front-view perspective that blend with the scene. Cut out the background from the stock photo and paste the couch above the floor layer.

floor trim

Couch's Shadow

Make a new layer. Hold down the Cmd key and click on the couch layer thumbnail to load the selection of the couch. Choose a muddy brown color and fill the selection with Foreground to Transparent gradient. Then apply Filter > Blur > Gaussian Blur = 3px.

couch shadow

Go to Edit > Free Transform (Cmd + T). Hold down Cmd key and drag the top middle handle downward and toward the right to create a cast shadow. Now shift this shadow layer below the couch layer. Repeat this step to make the side couch.

couch shadow transform

7. Build a Column

Make a new selection as shown with the Pen Tool. Then create a new layer and fill the selection with color #eef0ec. Next, fill the column with a gradient color that is a darker shade.

column

8. Add Other Decorative Items

Since these steps are very repetitive, I'm not going to further explain the details. Remember, the goal is to find items (stock photos) that are in the front-view perspective. So, be creative!

The items I have included: Coffee Table, Plants, TV, Bookshelf, Toys, Books, Light Switch, Glass Table, Desk, Computer, Printer, Chairs, Clock..

full scene

9. Export the Tiled Background

Assuming that you have finished with the PSD, now it is time to export the graphics to re-assemble in Flash.

First, export the tiled background image. Hide all other layers except the wall and the floor layers. Make a selection 280 x 450px, go to Edit > Copy Merged (Ctrl+Shift+C). Then paste the clipboard in a new file and export the image to PNG.

tiled wall background

10. Export the Other Items

Now export the other items (furnitures, tables, desk, bookshelf, etc.) to individual PNG files. We will re-assemble these items into the scene in Flash.

other items

11. New Flash Document

Create a new Flash document, 700 x 450px at 25fps. Import all the PNG files and organize them in a folder in the Library palette. Then import a JPG copy of the Photoshop mockup and set it to Guide layer. We will use this guide layer to assist on positioning the items on the stage.

layer guide

12. Back_mc

Drag the wall bg.png from the Library to the stage. With the wall bg.png instance selected, press F8 to convert it to movie clip symbol. Make sure you select Type = Movie clip, otherwise the ActionScript will not work. Name the instance "back_mc" so you can assign ActionScript to it.

back mc

13. Edit back_mc

Double click on the back_mc instance to edit the movie clip. Hold down the Option (Alt) key and drag the wall bg.png to the right to duplicate it. Duplicate it 9 times until you reach 2520px in width. By tiling the background graphic rather than using a full image, you will minimize the file size.

duplicate wall

14. Adding Other Items to back_mc

Now drag the other items from the Library and position them as shown on the guide mockup layer. Then use the Text Tool to display a welcome message.

back_mc full

15. Create front_mc

Go back to the main stage, make a new layer. Use the Rectangle Tool to make a 2520 x 80px box. With the box selected, adjust the Alpha to 0% to make it invisible. Press F8 to convert it to a movie clip and name the instance front_mc.

front_mc

16. Edit front_mc

Double click on the front_mc instance to edit it. Use the back_mc as the guide and position the column, table, and stool.png as shown on the mockup guide. Try to avoid placing any objects at 750px from the left and right side of the movie clip because the front_mc will scroll faster than the back_mc.

front_mc full

17. ActionScript Layer

Go back to the main stage, make a new layer and name it "actions". Select frame 1 and enter the following ActionScript code:

stageWidth = Stage.width;

speed1 = 15;
speed2 = 14;

mc1Width = front_mc._width;
mc2Width = back_mc._width;

mc1X = front_mc._x;
mc2X = back_mc._x;

lock_scroll = false;
_root.onEnterFrame = function () {
	if (!lock_scroll)
		scroll_mc();
}

function scroll_mc() {
	var xdist = _xmouse-(stageWidth/2);
	mc1X += -xdist/speed1;
	mc2X += -xdist/speed2;
	if (mc1X>=0) {
		mc1X = 0;
	}
	if (mc1X<=stageWidth-mc1Width) {
		mc1X = stageWidth-mc1Width;
	}
	if (mc2X>=0) {
		mc2X = 0;
	}
	if (mc2X<=stageWidth-mc2Width) {
		mc2X = stageWidth-mc2Width;
	}
	setProperty("front_mc", _x, mc1X);
	setProperty("back_mc", _x, mc2X);
}

//create an empty mc container for content to display
createEmptyMovieClip("content_box", 200);
content_box._x = 195;
content_box._y = 92;

18. Tinted Overlay Gradient

Make a new layer above the front_mc layer. Use the Rectangle Tool and draw a 700 x 450px box on the stage. Fill it with black gradient: color1 = black (alpha=30%) and color2 = black (alpha=90%). Notice this will create a tinted effect on top of the movie clip. Press F8 to convert this to symbol and name it "tint symbol".

tinted gradient

19. Fade-in "Tint" Movie Clip

Convert the "tint symbol" instance again to a movie clip and name it "tint". Double click on the "tint" MC to edit it. Create a fade-in motion tween in between frame5 and frame20. Then delete frame1.

fade in

20. Pause the Scroll Function

Reverse the previous step to create a fade-out effect of the tint symbol between frame25 and frame40. Then make a new layer for ActionScript. Insert stop() action in frame1 and frame20.

fade out

Label frame5 “on” and enter the following code:

tint_mc.onRelease = function (){};
tint_mc.enabled=false;

_root.lock_scroll = true;

The first 2 lines will create a fake button which will block all the buttons below the "tint" MC. The third line sets the lock_scroll variable to true.

21. Restore the Scroll Function

In the previous step, the variable was set to "lock_scroll = true" to stop the scroll function as soon it reaches frame5 (“on”). Now we need to set lock_scroll = false at frame40.

_root.lock_scroll = false;

gotoAndStop(1);

22. Assign Actions to the Buttons

Now we need to assign the actions to the buttons. Select the button and enter the following ActionScript:

on (release) {
	_root.tint.gotoAndPlay("on");
	_root.content_box.loadMovie("experimental.swf", 0);
}

Basically, the script tells the "tint" MC to play label “on” and load the external SWF in the movie container, "content_box". Repeat this step for the other buttons and load the SWF file accordingly.

button actions

23. Create External SWF files

Make a new document, 310 x 265px. Design the layout as you desire (here I have some text and images on a rounded white shape). Save the file name according to the button actions you’ve assigned in the previous step.

external swf

Close button and unload movie

In the external SWF, don't forget to make a button that allows the user to close the pop-up and go back to the main movie. Create a button symbol and name the instance close_btn. In the action layer, enter the following code.

close_btn.onRelease = function (){
	_parent.content_box.unloadMovie(0);
	_parent.tint.gotoAndPlay("off");
}

When the close_btn is clicked, it will unload the movie in the "content_mc" container and tell "tint" mc to play label “off”.

24. Publish the Final Files

Now publish the final SWF file along with the external SWF files. You can view my demo or download the zip.