Apr 25
Parallax Gallery
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 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.
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”.
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.
Free MCTE Component Giveaways SEO Guide for Designers
Comments
Pages: 23 22 21 20 19 18 17 16 15 14 13 … 1 » Show All
There are 223 comments (+Add)
Pages: 23 22 21 20 19 18 17 16 15 14 13 … 1 » Show All
Loading ...
223 Salvo
August 25th, 2010 at 8:21 pm
I’ve pretty much customized this for my needs, it’s excellent and thank you for sharing it. I do have one problem, where can I tell the action script to look for the external files for the content box (1.swf,2.swf, etc….) or if it’s not in the action scrip please advise. Thank you in advance for any and all help
222 Norton http://na
July 12th, 2010 at 11:53 pm
It’s great!!
Thank you your sharing
221 عمار السليماني
July 11th, 2010 at 3:27 am
nice idea but go right or left i can’t go around like go straight or go back,
but cool example.
220 Ahmed http://www.maksofttechnologies.com
June 23rd, 2010 at 4:47 pm
Simply Awesome!! thanks for sharing such a detailed and easy tutorial.
219 Dugattodesign http://www.dugattodesign.com
June 18th, 2010 at 3:55 pm
Muito legal este tutorial, excelente oportunidade de aprendizado! Parabéns estou um pouco enferrujado com estas coisas…
218 Enve Creative http://www.envecreative.com
June 15th, 2010 at 10:27 am
This is an amazingly useful way to engage users! I’m targeting a small business and non-profit organization market, a group that responds very favorably to a one-on-one engagement with me. I’ve been looking for a way to lend that feeling in some way to my site. This will be a great big help!
217 pattaya http://www.tour-pattaya.com
May 31st, 2010 at 2:03 pm
So nice, very detailed…
Thanks for sharing
216 Michi http://www.michionthemic.com
May 31st, 2010 at 1:31 pm
Hey very nice Tutorial!! Thank u a lot!!!
I was trying to change the size of the windows and i couldn´t make it.
must be 310 x 265px the size?? where i can make that change?
Thank u very much!!
215 nicole
May 30th, 2010 at 3:10 pm
I have a question for you and I cannot seem to find the answer anywhere on the internet. I’ve setup something similar to your example, except that I’d like to have 1 of my movieclips loop. I know how to make a MC loop on it’s own, but I’m not sure how to loop a MC that’s moving forward and backward depending on how the mouse moves. Can you give me some insight as to how to code that clip? I’m thinking I somehow need to duplicate the MC?
214 Adhie Mempawah http://adhiemempawah.co.cc/
May 28th, 2010 at 2:03 pm
i like this article