Image in Scrollpane

1. Open flash mx and create a new document(File>New or press "ctrl+n"), mine is 400x300.

2. Open your Components panel(Windows>Components or "ctrl+f7") then press and drag the thumbnail named "scrollpane" onto the document window.

3. Reposition and resize the scrollpane as shown below(to resize press "q" or click the Free Transform tool then click the scrollpane once).

4. Open the property inspector if it is not(Windows>Property or press "ctrl+f3").Set the scrollpane instance name to "scroller".

5. Before we proceed open you're My Documents folder and create a new folder name it "scroller_folder"(name it whatever you want). Save the image bellow in this folder(you may use your own image if you like) name the image as "my_image".

6. Going back to our subject, save your work(File>Save or ctrl+s) name it scroller_movie. Remember the folder that we created? Browse to that folder and click save.

7. Here we go! Create a new layer(Insert>Layer or click Insert layer button) and put it just above Layer1(the layer where the scrollpane resides), double click it and name it "action".

8. left Click the frame 2 of "Action Layer" once and and right click it. The context menu will appear. Select "Insert blank keyframe".

9. left click the frame 2 of "Layer1" repeat step 8 but this time select "Insert frame".

10. Everything should look similar to this.

11. In real life a movie must have Actors, Stage, and Script and so far we have the scrollpane as our actor, we have the Document window or the Flash mx itself as the stage and now we are going to write the script. Click the frame1 of the action layer once and open the Actions panel(Windows>Action or press f9 and make sure that you are in "Expert mode").

12. Enter the following:

function scroller_content(){
scroller.loadScrollContent("my_image.jp
scroller.refreshPane();
}

***scroller.loadScrollContent("my_image.jpg"); - the procedure to load and set the the image named "my_image.jpg" as the content of the scrollpane.

13 Click the frame2 of action layer. In the Action panel enter the following:

***scroller_content(); - executes the procedure.

14 Save your work and test your movie(Control>Test movie or press "ctrl+enter").

15. I named this tutorial as "Episode 1" simply because what we just had is a very basic approach on using the scrollpane component and most likely "Scrollpane Component of Flash MX: Episode II" will come and it will be an act of "digging deeper".