Creative Flash Scroller

Download a free trial of   Creative Flash Scroller
Buy Creative Flash Scroller
 

Creative Flash Scroller documentation

box 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).

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

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").

Create a new AS2 file

 

The basics

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

Slideshow Background

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

Open the Components and Component Inspector panels

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

Creative Scroll Area

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

Dimensions'

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:

Symbol Properties

 

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.

Component inspector

 

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:

Behavior Tab

 

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:

Buttons

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.

Right button

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

Instance name for buttons

Instance button

 

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.

 

Creative Flash Scroller

box 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.

windows xp
windows vista
windows seven
apple mac os
• OS : Creative Flash Scroller is supported by multiple OS from Windows XP to Windows 7 and any Mac OS X 10 or greater.
 
Creative Flash Scroller
for AS2 works on:
flash 8
flash cs3 flash cs4 flash cs5
 
Creative Flash Scroller
for AS3 works on
flash cs3 flash cs4 flash cs5
 
In order to view the
results you need at least:
flash player 8
Adobe Flash
Player 8,9 for AS2
flash player 10
Adobe Flash
Player 10 for AS3