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.

In this tutorial we'll create a scroller in which we'll load external content; two movie clips which will be interchangeable by the press of one button (one of them will be loaded). The complexity of the design (the number of loaded movie clips or the layout of the controlling menu – buttons) rests fully with you. I want to start by reminding you that, in order for the tutorial to work, you need to do something first. Install the Creative Flash Scroller component using Adobe Extension Manager (if you encounter any problems doing that, please refer to the „How to install an extension” tutorial).

 

Click here to download the source file and the required files for solving this tutorial.

  This tutorial was created for AS3 ( Flash Action Script 3 )  as3

1. Let's start by opening Flash and creating a new file. (For CS3 users: in order to set-up the frame rate and name your file, right-click the stage and select "Document properties")

Create file

Create file

2. Download the attached „.fla” file and copy the button and the movie clips from the library of this file into your library. („Button”, „image”, „imageLoad”)

Copy the required library items

Copy the required library items

3. Drag an instance of the button on the stage and place it at the coordinates specified in the next image; as well, name the instance „changeImages”.

Button properties

Button properties

4. Drag an instance of „image” on the stage and place it at the following coordinates; name it „imageLoader”.

Movieclip properties

Movieclip properties

5. Open the Components panel (Ctrl+F7) and drag an instance of Classic Scroller on the stage; dimension and place it as shown in the screen-shot below and name it „scroller”. One thing I would like to mention is that I aligned all the objects on the stage centered horizontally with respect to the stage, making sure that their coordinates are integers.

Component properties

Component properties

6. Open the Component Inspector panel (Shift+F7) while the Classic Scroller is selected. Make sure the target is set as „imageLoader” and leave everything else as default – including the skin. We will concentrate on the coding and loading external contents parts in this tutorial, not on scrolling behavior or appearance.

Component configuration panel

Component configuration panel

7. Now let's work on the layer structure. Rename the layer where you have been working until now, „content”, and insert a new layer; name it „actions” and select its first frame. Here we will write the code we need to achieve our goals.

Layer structure

Layer structure

8.Open the Actions panel (F9) and insert the next code:

var temp : Boolean = false; 			 			
  var urls : Array = new Array(new URLRequest("pics/pic2.jpg"), new URLRequest("pics/pic1.jpg")); 			 			
  var loader : Loader = new Loader(); 			
  loader.load(urls[0]); 			
  imageLoader.addChild(loader); 			
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler); 			 			
  changeImages.addEventListener(MouseEvent.CLICK, eventHandler); 			 			
  
  function eventHandler(e:MouseEvent) {  				
  		imageLoader.removeChildAt(0); 				
  		loader = new Loader(); 				
  		var pic = (temp) ? 0 : 1; 				
  		loader.load(urls[pic]); 				
  		imageLoader.addChild(loader); 				
  		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler); 				
  		temp = !temp; 				 			
 			 } 			 			
  
  function completeHandler(e:Event) { 
   				scroller.cDimCheck(); 			
                }

As you saw, I used the "cDimCheck" function for the resizing of the scrollbars; this could be a very useful feature if you would like to load multiple images having different sizes in your scroller.

9. Preview your file.

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

Get Adobe Flash player

Preview your file

 

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.

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