Advanced Scrolling Photo Panel

Date: 25.3.2010, 17:12    Total views: 32096

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 450x150 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!

Download source file (.fla)

  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar