In Flash, ScrollPane component allows every kind of content to be easily added and shown in the scrollpane. Here’s how you can create MovieClips dynamically and add them to the scrollpane on the stage.
First of all, this is what will it look like:
[SWF]https://www.parorrey.com/wp-content/uploads/2010/12/scrollPane.swf, 500, 300[/SWF]
Following are the steps that will create a ScrollPane on the stage and then attach MovieClips to it:
- Create a new Flash (ActionScript 3.0) document.
- Drag the ScrollPane component from the Components panel to the Stage and give it an instance name of mySP.
- Create a new MovieClip symbol and name it “box”, also check the ‘Export for ActionScript’ box.
- Inside “box” MovieClip, draw a rectangle shape so that you can see it’s there on stage when created dynamically
- Still inside box MovieClip, draw a dynamic TextField in the new layer on top of this rectangle and name it txTitle in the properties panel so that you can see the MovieClip name populated in this text field from AS3 code.
- Close the box MovieClip and you are done here with the drawing part.
- Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:
// number of movie Clips to attach to the scrollpane var num_clips:int = 10; // y position for next object to be placed var nextYPos:int = 10; // counter for() var i:int = 0; //Create a container movieclip (mc) to hold the attached items var container:MovieClip = new MovieClip(); //Attach the container mc to the stage addChild(container); for (i=0; i < num_clips ; i++) { //get a new item instance from the library var boxMC:box = new box(); //set the y value boxMC.x = 100; boxMC.y = nextYPos; // Apply some text to the textfield boxMC.txTitle.text ="Instance: mc"+i; //attach the newly created instance to the container container.addChild(boxMC); //set y value for next item nextYPos+=boxMC.height+1; } //set the size of ScrollPane on stage mySP.setSize(220, 200); //Attach the container mc and items to the scrollpane mySP.source = container;
I have put togther all this code in this functional demo file. You can Download Dynamic MovieClips in ScrollPane Flash CS4 AS3 fla file from here.
Hope that helps.
Cheers!
OMG…thanks …i was hitting the wallas to find a solution for this scroll panes
You saved me hours. I was fiddling around with a scrollBar rather than a scrollPane, making my own custom one, trying to load in dynamic MC’s. Total pain in the ass, anyway you saved the day. Thanks!!
Amazing – best tutorial on using scrollbar!!
Excellent example – just what I have been trying to understand! Thanks.
and put all the data entered in the text boxes into an array?
How do I put input text boxes instead of moveclips inside the scroll box?
how do you add button actions to each box?
check this post for dynamically created buttons movieClips. I have also provided demo fla on that page.
Hope that helps.