Advanced Flash Components

Adding Content to Stack: Through ActionScript

Updated: Jan 14, 2008 Views: 640

Description: This tutorial will show you how to use ActionScript inside of flash to load various types of content (images, movie clips, .swfs) into the Stack AS3.0 Component.

Components Used in this Tutorial: Stack AS3.0

The Completed Project:

Code

import fl.data.DataProvider;
import com.afcomponents.events.StackEvent;

function onStackInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"http://www.afcomponents.com/components/stack_as3/img_1.jpg", type:"image", description:"Image 1", data:"http://www.afcomponents.com"});
    myStack.content = dp;
}
myStack.addEventListener(StackEvent.INITIALIZE, onStackInit);

Getting the Stack Set-up

To begin make sure that you have the Stack Component installed using the extension manager. Create a new Flash ActionScript 3.0 File and have dragged an instance of the Stack onto the stage from the Component Panel (Window > Components).

Also make sure that you give your Stack an instance name of myStack in the properties panel (Window > Properties > Properties)

Event Listener for Stack Initialize

Items can only be loaded through ActionScript after the component has initialized. We do this by creating an event listener and calling a function in which we will use to add our content.

import fl.data.DataProvider;
import com.afcomponents.events.StackEvent;

function onStackInit(event:Event) {
//We will add our data provider and content in here
}
myStack.addEventListener(StackEvent.INITIALIZE, onStackInit);

Creating the Data Provider

Next inside of function, we need to create our data provider this is where we add all our items to.

import fl.data.DataProvider;
import com.afcomponents.events.StackEvent;

function onStackInit(event:Event) {
var dp:DataProvider = new DataProvider();
//where we will add items and set the stack content to this data provider
}
myStack.addEventListener(StackEvent.INITIALIZE, onStackInit);

Adding Images to Data Provider

import fl.data.DataProvider;
import com.afcomponents.events.StackEvent;

function onStackInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"example.jpg", type:"image", description:"My Item", data:"URL.html"});
    //where we will set the stack content to this data provider
}
myStack.addEventListener(StackEvent.INITIALIZE, onStackInit);

Adding a swf to Data Provider

import fl.data.DataProvider;
import com.afcomponents.events.StackEvent;

function onStackInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"example.swf", type:"image", description:"My Item", data:"URL.html"});
    //where we will set the stack content to this data provider
}
myStack.addEventListener(StackEvent.INITIALIZE, onStackInit);

Adding a Movie Clip to Data Provider

This is a two step process. First, you need to add the item to your data provider. The path will be the class name you give the movie clip in linkage. (We go through this in the next step). The type will now change from image to instance.

import fl.data.DataProvider;
import com.afcomponents.events.StackEvent;

function onStackInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"DisplayObjectExample", type:"instance", description:"My Item", data:"URL.html"});
    //where we will set the stack content to this data provider
}
myStack.addEventListener(StackEvent.INITIALIZE, onStackInit);

The other important step is exporting the Movie Clip for ActionScript. Now, inside of flash create you movie clip however you would like. Once you have create a movie clip, find it in the library (Window > Library). Right click on the movie clip and select Linkage. In the pop-up define the class as the same name you used in the XML document - DisplayObjectExample. Also make sure Export for ActionScript and Export in First Frame are both selected.

Setting Stack's Content to Data Provider

import fl.data.DataProvider;
import com.afcomponents.events.StackEvent;

function onStackInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"DisplayObjectExample", type:"instance", description:"My Item", data:"URL.html"});
    myStack.content = dp;
}
myStack.addEventListener(StackEvent.INITIALIZE, onStackInit);

Properties of the Stack That Will Affect How The Content Loads

After you have successfully loaded your content in the Stack, you may want to change how your content is appearing in the Stack. These can also be found in the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) under the property displayStyle:

maintainAspectRatio to false
scaleContent to true
autoSize to false

myStack.displayStyle = {maintainAspectRatio:true, scaleContent:true, padding:10, autoSize: false};

If you want to change how other things such as the containers in the Stack, there are other properties that you can customize: Stack API.

Component Info

Stack (AS 3.0)

Knowledge Base

Forum