Some of you may wonder how to activate my as2 scrollbar class to navigate the dynamic list i posted yesterday.
It is quite simple. Download the package here, unpack it and put the scrollbar.as file in the project folder.
Now just paste the scrollbar movieclip in the dynamic xml list fla, take a few minutes to change it to fit the design, and the change the buildList function as below.
function buildList() {
[...]
downBtn.onRelease = function () {
offset += 1;
adjustList();
}
upBtn.onRelease = function () {
offset -= 1;
adjustList();
}
scrollbar.setDragged(this.container); // the dragged object
scrollbar.setRuler(scrollbar.ruler); // the ruler
scrollbar.setBackground(scrollbar.sfondo); // the scrollbar background
scrollbar.setMaschera(this.maschera); // the mask used in the fla
scrollbar.setTweenSpeed(25); // Tween velocity for dragging
scrollbar.setMouseWheelAdd(10); // Mouse wheel increment
scrollbar.init(); // start!
}
Now test the swf and be amazed!
Hope this will help some of you! Enjoy!
Hey, long time i do not update the site. As always i have been busy working on new projects and experimenting.
Btw, this tutorial is about creating a dynamic list driven by an xml source (ie. a file).
So many users have been asking about creating a dynamic list and how to implement the dynamic data loading in a system with the scrollbar class I created.
This is the code of the example. You can download the rar file to check the files. In the package you will find:
- a swf file
- an xml file filled up with fake datas
- a cs3 fla
- a flash 8 fla
You can check the source for any hint on how to do that.
Now we can comment the code in the fla.
First of all you need to create a loadXML function that handles the loading of the data, and then, after loading, passes the xml object to a parse function (in this example the function is parseXML).
The parseXML function simply translates the xml data in an array (theData). The array will be used in the function named buildList to build the actual list. The buildList function will cycle among the values of the array to build the list in a recursive way. At this point you can add every kind of implementation of the code. Considering a news feeder, for example, you can add the code to display title, text and whatever you want. That is possible for every case.
Once the building has finished, you have to activate the navigation. In this case the simple navigation is made with the use of two buttons, that will scroll the content container to the right positions, stored in a positions array. The pressing of the buttons calls the adjustList function that handles the scrolling. The only other thing you will have to do, will be to check that the offset does not get under zero or over the maximum number of elements of the list.
The game at this point is done.
You can view the example below, and you can download the package here.
Enjoy!
