AFComponents.com

Components Used in this Tutorial: Grid AS3.0.

The Completed Project:


Adding an Image Using Component Inspector

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

Next, select your instance of the Grid and in the Component Inspector (Window > Component Inspector) or Parameters Panel (Window > Properties > Parameters) look for the property called Content. Double Click the "[]" in the value for content and new window will pop-up. Use the + to add an item. When you add an item you can define the Path, Description, Data, and Type of the new item.

•  In the Path enter either the local or full URL path to the image. 
• Description is optional but useful if you want a text description or if you are linking to another component. 
• Data is also an optional field but is useful if you want to add a hyperlink or a large image link if you are using the Grid in a gallery.
• In Type we will enter image since we are loading an image.
  

Adding an External .SWF

Loading a .swf file from an URL path is similar to loading an image. 

•  In the Path enter either the local or full URL path to the swf. 
• Description is optional but useful if you want a text description or if you are linking to another component. 
• Data is also an optional field but is useful if you want to add a hyperlink or a large image link if you are using the Grid in a gallery.
• In Type we will still enter image.
  

Adding a Movie Clip

Another type of content that you can load into the Gridis a movie clip that is internal to your flash file.

• In the Path enter either class name that will give the movie clip in Linkage (directions follow). We use DisplayObjectName in this example
• Description is optional but useful if you want a text description or if you are linking to another component. 
• Data is also an optional field but is useful if you want to add a hyperlink or a large image link if you are using the Grid in a gallery.
• In Type we enter instance.
  

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 - DisplayObjectName. Also make sure Export for ActionScript and Export in First Frame are both selected.

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:

•     width to desired image width
•     height to desired image height
•     maintainAspectRatio to false
•     scaleContent to true
•     autoSize to false

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.