Flash Tutorial – Advanced Scrolling Photo Panel

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create advanced scrolling photo effect using the action script code and some special flash tips and tricks. This lesson is great for photo or vide thumbnails scrolling. Using this lesson, you will also learn how to import any thumbnails into a flash library, how to convert any thumbnail into a button symbol, how to create over button effect, how to convert any layer into a mask and much much more. Let’s start!

Step 1

First, download thumbnails photos that we will use for this lesson.

Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 450 pixels and the height to 250 pixels. Select white color as background color. Set your Flash movie’s frame rate to 32 and click ok.

Step 3

Call the current layer actions. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 4

Choose File > Import > Import to Library. In the file explorer window that appears, find a nine thumbnail photos and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see nine thumbnail photos that you just imported.

Step 5

Using the Selection Tool (V) and drag and drop technique, move the first thumbnail photo from the flash library on flash stage. After that, while the thumbnail is still selected, hit F8 key (Convert to Symbol) to convert it into a button symbol.

Step 6

Double-click on the new made button on stage with the Selection tool(V).You should now be inside the Button.

Step 7

Select Over frame and hit F6 key.

Step 8

Create a new layer above the layer 1. After that, select again frame Over and hit F6 key.

Step 9

While you’re still on frame Over, select the Rectangle Too (R) and draw a dark frame around the thumbnail. See the picture below!

Step 10

Convert now every thumbnail photos from flash library into a button symbol.

Step 11

Create a new layer above the layer actions and name it panel.

Step 12

Select layer panel and choose Insert > New Symbol (Ctrl+F8).

Step 13

Select the Selection Tool (V) and move all thumbnails button from flash library on flash stage and place it on the position like it is shown on the picture below!

Step 14

Hit Ctrl+A key (Select All) to select all thumbnails button. After that, go to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustments as follows:

Step 15

While the thumbnail buttons is still selected, go to the the Align Panel (Ctrl+K) and do the following.

1. Align top edge
2. Space evenly horizontally

Step 16

Go back on the main stage (Scene 1).

Step 17

Select layer panel and move panel movie from the flash library on the flash stage.

Step 18

While the panel movie is still selected, go again to the Align Panel (Ctrl+K) and do the following.

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Step 19

Create  a new layer above the layer panel and name it stroke.

Step 20

Select stroke layer, take the Rectangle Tool (R) and draw a rectangle shape about 450×150 px. See the picture below!

Step 21

Select now just white body, choose right click and select Distribute to Layers.

Step 22

Rename layer 3 in mask layer.

Step 23

Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask. See the picture below.

Step 24

Select the panel movie and  go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip panel. See the picture below!

Step 25

Select the first frame of layer actions and go to the AS panel (F9) below the stage. Then, enter this code inside the actions panel:

panel.onRollOver = panelOver;

function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
}

var b = stroke.getBounds(_root);

function scrollPanel() {
if(_xmouseb.xMax || _ymouseb.yMax) {
this.onRollOver = panelOver;
delete this.onEnterFrame;
}

if(panel._x >= 15) {
panel._x = 15;
}

if(panel._x <= -924) {
panel._x = -924;
}

var xdist = _xmouse – 250;

panel._x += Math.round(-xdist / 7);
}

We’re done!

Test your movie and enjoy!

Source: flashfridge.com

you may also like:

• Flash Tutorial – Learn How to Create Horizontal Image Transition Effect
  In this tutorial, you will learn how to create a horizontal blind image transition effect effect which will slowly reveal your picture from top to bottom in horizontal stripes. Each strip will also ha...
• Flash Tutorial – Create an Apple Inspired Flash Preloader
  Step 1: Brief Overview We’re going to create a preloader MovieClip using Flash tools such as the Rectangle Primitive Tool and something very important to get the correct alignment: the Snap To Object...
• Flash Tutorial – Tips and Best Practices for Designers: Symbols & Text
  For most newbies, the concept of symbols in Flash can be pretty confusing. I’ve known enough designers who – even after working with Flash for years – are pretty clueless about the best way to use sym...
• Flash Tutorials – Creating Contact Module
  Do you want to create a Contact Module using popular scripts? In this tutorial, we’ll create a Advanced Contact Module with ActionScript 3.0 – XML and PHP. Don’t worry! You don’t need to know PHP Scri...
• Flash Tutorial – Advanced Preloader with Reflection
  In this tutorial we will create an advanced blue preloader with beautiful reflection effect and a big easing text. This requires a little knowledge about animations and action scripting. About the ...

8 Responses to “Flash Tutorial – Advanced Scrolling Photo Panel”

1. Joshua D. says:

   May 23, 2010 at 00:22

   I have done everything correct with this tutorial as far as pasting in the code…but I seem to have a small syntax error problem

   Syntax Error: var xdist = _xmouse – ;250

   I’m fairly new to actionscript 3.0 so I have to ask…what is the 250 referencing?
2. admin says:

   May 23, 2010 at 09:25

   you made a type error… you wrote: var xdist = _xmouse - ;250
   the correct syntax is: var xdist = _xmouse - 250;

   here is a link to the source file: Download FLA
3. Joshua D. says:

   May 23, 2010 at 18:49

   I don’t want to come off as argumentative…but when I copied the original code I got a syntax error for having the semicolon after the 250…the compiler error said “Expecting semicolon before 250″….seeing as I have tried both inputs of “;250″ “250;” I’m thinking that it is something else in that particular line of code…
4. Joshua D. says:

   May 23, 2010 at 18:52

   I am using my own photos and have tweaked the dimensions of the actual flash stage…I’m not sure if that is a problem but it is an added task…my stage dimensions are 600×150 and my pictures are all 140×140
5. Joshua D. says:

   May 23, 2010 at 19:02

   Ok….I’ve downloaded the source file and applied the exact code from it in my own file…and I got 7 errors…all of them are Access of undefined property errors….and 8 Migration issues…
6. Joshua D. says:

   May 23, 2010 at 19:13

   ok….this was such a simple problem….I can’t even believe I didn’t check it first….I was in an AS3 file…apparently this is AS2 code…so now the scroll bar works, but it does not stop scrolling to the right and does not scroll all the way to the left..
7. admin says:

   May 23, 2010 at 19:24

   Yes it’s AS2 code… I know, it should have been as3 but it’s an old tutorial gathered from another website… I dunno what your AS3 code skills are but as an exercise I suggest you to make this tutorial using AS3 code… will be a good way to practice coding for you… forget as2, it’s old school and rarely used anymore… learn AS3 and you wont regret it!
8. Joshua D. says:

   May 23, 2010 at 19:41

   Oh I would thoroughly enjoy using AS3 code on this tutorial…problem is I’m seriously new to Actionscript coding….like things of this sort are far above myself…but the fact that there is only a single compiler error when switched to AS3 makes me think that there is a new variable definition for some thing within the xdist = _xmouse – 250; code…