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 )  

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

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”)

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

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

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.

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.

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.

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.

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.