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.
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.
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.
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.
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).
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).
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.
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.
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.
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.
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..
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.
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.
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.
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.
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.
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.
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.
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.
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".
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.
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.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 setlock_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.
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.
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”.
Comments
Post a Comment