In this tutorial we will create a short example together – an example in which I would like to highlight some important aspects of the program's functionality and usability; also, we will use all the three parts of our product and like this you will understand fully how it can be applied.
Click here to download the source file and the required files for solving this tutorial.
1. Let's start by opening Flash and creating a new file; the first thing we need is to have the Creative Flash Scroller component installed. If you have any problems installing the component, please refer to the "How to install an extension tutorial". (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
2. The next step is to import to stage two images we will use as our examples. You can download these, as well as the ".fla" file from the attached archive.
Import to stage
3. Convert them to movie clips, and name them: CMFX and CTFX, as it is written on the boxes in the images.
Convert to symbol
4. Place them at the following coordinates:
Place to coordinates
5. Let's add the scrolling components now; we'll start slowly, I'll add them one by one and explain you a little about them. Firstly open the Components and the Component Inspector panels from the Window tab of the top menu.
Open the Components and Component
Inspector panels
6. From the Components panel, drag an instance of the Classic Scroller on the stage. Place it at the coordinates from the next image and give it the same dimensions.
Classic Scroller coordinates
7. For now I would like to leave this scroller with its default parameters, for simplicity and rapidity. If you'd like to see how to perform different changes on the configuration, I invite you to try the rest of our tutorials. There is an important thing we should check, anyway; as we set the coordinates for our elements from the stage, this should have been done automatically, but let's check, just to be sure. You should have the same name for CMFX's instance and in the Component Inspector of the scroller, the General tab, Target.
Check target association
8. Let's place a Scroll Area on the next movie clip. Drag an instance from the Components panel onto the stage; place it at the coordinates X=350, Y=0 and resize it with the following dimensions: W=200, H=200. Let's change now a little the scrolling type; from the Behavior tab of its Component Inspector, select Mouse Absolute.
Scroll Area Behavior config
9. Let's now scroll some text and see the rest of Creative Flash Scroller's ways to use. Drag on the stage an instance of “Text” from the library; it exists in the library of the enclosed “.fla” file. It should have the following parameters:
Text position parameters
10. Let's now drag an instance of Scroll Area; it should have the parameters from the next image. Also, make sure that it is applied on the clip “Text” (the instance name of the clip is the same as the target parameter of the Scroll Area).
Second Scroll Area properties
11. Let's modify a little the Scroll Area. Open the Component Inspector – the General tab, and make the changes from next picture. We want the scrolling to be done classically, without any effect applied on it.
Second Scroll Area General tab
12. Because we would like the scrolling on the text to be as classic as possible, we will remove all scrolling behaviors except for the scroll wheel. From the Component Inspector, the Behavior tab, select “Scrollbar only” for the Scrolling type.
Second Scroll Area Behavior tab
13. Now, as a final step, we'll introduce the last part of Creative Flash Scroller – the Scrollbar. Add an instance from the Components panel and target it on the Scroll Area from the stage; in order to do that, insert the same name as the instance name of the Scroller and in the Target field of the Scrollbar (I called them “area”). Make it a vertical Scrollbar and enable the Auto Position. This is how the configuration panel should look:
Scrollbar General tab
13. Preview your movie by pressing CTRL+Enter and enjoy.
I recommend you to read the following tutorials on Creative Flash Scroller as this is just a tiny amount of its capabilities. Good-bye!