How to build iTunes(tm)-like slideshows.
Updated: May 24, 2007
Views: 12523
Description: In this tutorial we are going to go over the required steps for building an iTunes(tm)-like flow cover. This is a very simple tutorial and will take about 2 minutes to set up.
The whole process is quite easy and straightforward. As you can see in the example below we just need to add the Flow List component, a scroll bar and a text field to the stage. Next, we will connect all of these elements.
Step 1 - New flash document
Create a new flash document (File > New > Flash Document). If you are using Flash CS3 make sure you create an ActionScript 2.0 document.
Step 2 - Add UIScrollBar component
In the components window (Window > Components) expand the UIComponents node and drag the UIScrollBar component on to the stage. Give it an instance name myScrollBar. Place the scroll bar under the Flow List component.
Step 3 - Add Flow List component
Open components window (Window > Components), expand the AF Components node and drag the Flow List component on to the stage. Give it an instance name myFlow. With the Flow List selected open the component inspector ( Window > Component Inspector ) and add specify scroll bar's instance name in UIScrollBar property - enter myScrollBar.
Step 4 - Add text field
Create a dynamic text field and place it between the Flow List component and the scroll bar. Give it an instance name myDescription. You can choose any font formatting you want. For our example we user Arial font and 14 font size.
Step 5 - Add ActionScript
Create a new timeline layer and name it name it actions. Select the first frame of the actions layer and open Actions window (Window > Actions). Past the following code inside:
In the code above, we first create a dspText function that displays the description of the currently selected item. The description is retrieved using getSelectedItem method which returns an item object. Next, we added ITEM_LOAD_COMPLETE event listener to the Flow List component so we can display description as items get loaded. Lastly we added event listeners to the Flow List component and the UIScrollBar to track whenever the user interacts with those components.
That is about it. For a complete list component's methods and events please see API Documentation. If you have any questions please post them on our forum.
| |
Step 1 - New flash document
Create a new flash document (File > New > Flash Document). If you are using Flash CS3 make sure you create an ActionScript 2.0 document.
Step 2 - Add UIScrollBar component
In the components window (Window > Components) expand the UIComponents node and drag the UIScrollBar component on to the stage. Give it an instance name myScrollBar. Place the scroll bar under the Flow List component.
Step 3 - Add Flow List component
Open components window (Window > Components), expand the AF Components node and drag the Flow List component on to the stage. Give it an instance name myFlow. With the Flow List selected open the component inspector ( Window > Component Inspector ) and add specify scroll bar's instance name in UIScrollBar property - enter myScrollBar.
Step 4 - Add text field
Create a dynamic text field and place it between the Flow List component and the scroll bar. Give it an instance name myDescription. You can choose any font formatting you want. For our example we user Arial font and 14 font size.
Step 5 - Add ActionScript
Create a new timeline layer and name it name it actions. Select the first frame of the actions layer and open Actions window (Window > Actions). Past the following code inside:
//Display image description text
function dspText(event:Object){
myFlow.selectItem(event.target);
myDescription.text = myFlow.getSelectedItem().description;
}
// Add Event Listeners
// display first image description
myFlow.addEventListener("ITEM_LOAD_COMPLETE",dspText);
// display description once image is clicked
myFlow.addEventListener("ITEM_ON_PRESS", dspText);
// display description once scroll bar is scrolled
myScrollBar.addEventListener("scroll", dspText);
function dspText(event:Object){
myFlow.selectItem(event.target);
myDescription.text = myFlow.getSelectedItem().description;
}
// Add Event Listeners
// display first image description
myFlow.addEventListener("ITEM_LOAD_COMPLETE",dspText);
// display description once image is clicked
myFlow.addEventListener("ITEM_ON_PRESS", dspText);
// display description once scroll bar is scrolled
myScrollBar.addEventListener("scroll", dspText);
In the code above, we first create a dspText function that displays the description of the currently selected item. The description is retrieved using getSelectedItem method which returns an item object. Next, we added ITEM_LOAD_COMPLETE event listener to the Flow List component so we can display description as items get loaded. Lastly we added event listeners to the Flow List component and the UIScrollBar to track whenever the user interacts with those components.
That is about it. For a complete list component's methods and events please see API Documentation. If you have any questions please post them on our forum.
