Creative Flash Scroller

With Creative Flash Scroller you can scroll any kind of Flash Content: static text, dynamic text, pictures, animations, movies. It comes with multiple scroll behaviors: touch scroll, mouse gesture scroll, scrollbar scroll and even supports mouse wheel behavior. You can add smooth scrolling or motion blur effects and customize it to suit your design, from an easy to use interface.

Tutorial: Create a simple Christmas Flash image scroller

Is there an easy way to create a basic image Scroller in Flash? You could go the usual way and manual create the scroller in Flash using ActionScript, but today I'm going to show how you could do the scroller without coding. We will have a sequence of images encapsulated in a movie clip and will scroll them with two buttons, using the Creative Flash Scroller Flash component.

You can download the files used for this project from here.

The result

For this tutorial we use 3 pictures that will be scrolled using left and right buttons. The result should look like this one (click on the left and right arrows to slide the images).

Requirements:

• Adobe Flash 8,  CS3 and CS4
• Creative Flash Scroller component *
• Flash Player 8/9/10

* does NOT work with ActionScript 3.0

Tutorial start

Firstly, let's open Flash and create a new AS2 file. Configure the document properties (For CS3 users: in order to set-up the frame rate and name your file, right-click the stage and select "Document properties").

The basics

Create a white rectangle with the dimensions 510x340 and center it. This will be the background of our slideshow:

Open the Components and Component Inspector panels., go to "window->components" from the top menu in Flash.

Drag an instance of the "Creative Scroll Area" component on the stage and center it.

Select the instance you've just dragged and set its dimensions and instance name from the properties box:

'

Open the library panel (window->library) and create a new movie clip. Inside the movie clip, import the pictures you want to have in the slideshow. Make sure you place the starting picture at coordinates 0x0. The rest of pictures will be placed right of the first one. They all must have Y coordinate equal to 0. Don't forget to export for ActionScript:

The General tab

After you finish to edit the 'pics' movie clip, leave it in the library for now. Go back to the component on the stage and select it. Open the 'Component inspector' panel from 'Window->Component Inspector'. Set the target to be the 'pics' movie clip from the library. I've also disabled the motion blur function as I don't want blur on the slide show.

The Behavior Tab

Go to the "Behavior" tab to change the way the component works. We don't need any mouse event listeners so we will use the "Scrollbar only" type. You can close the Component Inspector afterwards:

The next and previous buttons

Let's create the next and previous buttons. To do that, draw a circle with an arrow on the stage and turn them into a movie clip:

Drag another instance of the "button" movie clip on the stage and rotate it to create the right button. Place the two instances where you want them.

Select each button and give it an instance name from the "Properties" panel:

A bit of code

Connect the two buttons with the scroller area. You need to write some code for this. Right click on the frame on the timeline and select "Actions". It's the last button on that menu. In the actions panel you can just copy paste the code bellow. (Note: the code will not work if you have used other instance names for the elements)

var currentPicture : Number = 1; // we start on picture 1
var totalPictures : Number = 3;  // total number of pics used
goLeft.enabled = false;                                 // there are no more pics to the left

goLeft.onRelease = function() {
                scrollPanel.stepScroll('Left',500);              // move the scroller left
}

goRight.onRelease = function() {
                scrollPanel.stepScroll('Right',500); // move the scroller right
}

scrollPanel.onScrollLeft = function() {
                goLeft.enabled = false;                 // disable the button until the move finishes
                currentPicture -= 1;                         // change the current picture value
}

scrollPanel.onScrollRight = function() {
                goRight.enabled = false;               // disable the button until the move finishes
                currentPicture +=1;                                         // change the current picture value
}

/* once the move is finished we check to see which button can be enabled */
scrollPanel.onHMotionStopped = function() {    
                if(currentPicture != 0) goLeft.enabled = true;                                    
                if(currentPicture != totalPictures) goRight.enabled = true;
}

Done!

It should be working by now - all you need to do is to embed the flash in a web page and publish it online.