Adding Content to Grid Component: Through ActionScript
Updated: Dec 31, 2007
Views: 1411
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 Grid AS3.0 Component.
The Completed Project:
Complete Code:
import fl.data.DataProvider;
import com.afcomponents.events.GridEvent;
function gridInit(event:GridEvent) {
myGrid.addItem({path:"image.gif",description:"Test Item", data:"some_url.htm", type:"image"});
}
myGrid.addEventListener(GridEvent.INITIALIZE, gridInit);
var dp:DataProvider = new DataProvider();
dp.addItem({path:"example.jpg", type:"image", description:"My Item", data:"URL.html"});
myGrid.content = dp;
myGrid.contentStyle = {width:100, height:150, maintainAspectRatio:true, scaleContent:true, padding:10, autoSize: false};
myGrid.gridStyle = {rowCount: 2, colCount: 6, rowSpacing: 10, colSpacing: 10};
import com.afcomponents.events.GridEvent;
function gridInit(event:GridEvent) {
myGrid.addItem({path:"image.gif",description:"Test Item", data:"some_url.htm", type:"image"});
}
myGrid.addEventListener(GridEvent.INITIALIZE, gridInit);
var dp:DataProvider = new DataProvider();
dp.addItem({path:"example.jpg", type:"image", description:"My Item", data:"URL.html"});
myGrid.content = dp;
myGrid.contentStyle = {width:100, height:150, maintainAspectRatio:true, scaleContent:true, padding:10, autoSize: false};
myGrid.gridStyle = {rowCount: 2, colCount: 6, rowSpacing: 10, colSpacing: 10};
Getting the Grid Set-up
To begin make sure that you have the Grid Component installed using the extension manager. Create a new Flash ActionScript 3.0 File and have dragged an instance of the Grid onto the stage from the Component Panel (Window > Components).
Also make sure that you give your Grid an instance name of myGrid in the properties panel (Window > Properties > Properties)
Event Listener for Grid 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.
function onGridInit(event:GridEvent) {
//We will add our data provider and content in here
}
myGrid.addEventListener(GridEvent.INITIALIZE, onGridInit);
//We will add our data provider and content in here
}
myGrid.addEventListener(GridEvent.INITIALIZE, onGridInit);
Creating the Data Provider
Next inside of function, we need to create our data provider this is where we add all our items to.
var dp:DataProvider = new DataProvider();
Adding Images to Data Provider
dp.addItem({path:"example.jpg", type:"image", description:"My Item", data:"URL.html"});
Adding a swf to Data Provider
dp.addItem({path:"example.swf", type:"image", description:"My Item", data:"URL.html"});
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.
dp.addItem({path:"DisplayObjectExample", type:"instance", description:"My Item", data:"URL.html"});
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 Grid's Content to Data Provider
myGrid.content = dp;
Properties of the Grid That Will Affect How The Content Loads
After you have successfully loaded your content in the Grid, you may want to change how your content is appearing in the Grid. These can also be found in the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) under the property contentStyle:
myGrid.contentStyle = {width:100, height:150, maintainAspectRatio:true, scaleContent:true, padding:10, autoSize: false};
Changing Number of Rows and Columns of the Grid
With the grid you can also change the amount of rows and columns for your Grid. Also in the parameters panel or component inspector, you can find a property called gridStyle.
myGrid.gridStyle = {rowCount: 2, colCount: 6, rowSpacing: 10, colSpacing: 10};
If you want to change how other things such as the containers in the Grid, there are other properties that you can customize: Grid API.
Other Tutorials
