Custom loading placeholders explained
Updated: May 25, 2007
Views: 12705
Description: In this tutorial we are going to go over the steps required to create custom loading placeholders. Placeholders are displayed before an image loads.
Placeholders are needed in cases when images take a while to load and you need to display something in the mean time. In the example below, we use Flow List flash component to display a simple XML Feed and use a simple movie clip as a placeholder.
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 an name myScrollBar. Place the scroll bar under the Flow List component.
Step 3 - Add Flow List component
Open the 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 specify scroll bar's instance name in UIScrollBar property - enter myScrollBar.
Step 4 - Create the placeholder movie clip
Draw a rectangle on Stage and convert it to a movie clip (Modify > Convert to Symbol). Inside "Convert to Symbol" dialog box select "Advanced" button and check "Export for ActionScript" check box. In "Identifier" filed enter holder_mc. For more information on how to export a symbol to ActionScript please see Adobe LiveDocs.
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:
The code above tells the Flow List component to load an XML feed, as well as which movie clip to use as a placeholder.
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 an name myScrollBar. Place the scroll bar under the Flow List component.
Step 3 - Add Flow List component
Open the 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 specify scroll bar's instance name in UIScrollBar property - enter myScrollBar.
Step 4 - Create the placeholder movie clip
Draw a rectangle on Stage and convert it to a movie clip (Modify > Convert to Symbol). Inside "Convert to Symbol" dialog box select "Advanced" button and check "Export for ActionScript" check box. In "Identifier" filed enter holder_mc. For more information on how to export a symbol to ActionScript please see Adobe LiveDocs.
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:
// Load flickr photo feed
myFlow.contentXML = "www.afcomponents.com/components/flow_list/content.xml";
// Display placeholder
myFlow.previewClip = "holder_mc";
myFlow.contentXML = "www.afcomponents.com/components/flow_list/content.xml";
// Display placeholder
myFlow.previewClip = "holder_mc";
The code above tells the Flow List component to load an XML feed, as well as which movie clip to use as a placeholder.
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.
