Advanced Flash Components

Adding Images to Loop AS3.0 Component using ActionScript

Updated: Nov 6, 2007 Views: 1100

Description: This tutorial will show you how to load images into the Loop AS3.0 Component using the addItem property in ActionScript.

Part I - The Completed Project

Code used in this tutorial:

import com.afcomponents.common.ContentType;
import com.afcomponents.loop.LoopEvent;

// Wait for Loop to initialize
function onLoopInit(event:LoopEvent) {

    //Configures Loops Image Style Properties
    myLoop.contentStyle = {width:200, height:150, maintainAspectRatio:false, scaleContent:true, padding:0, autoSize: false};

    // Add Loop items
    myLoop.addItem({path:"http://www.afcomponents.com/components/loop_as3/img_0.jpg", description:"ADVANCED FLASH COMPONENTS ... WE MAKE AS 3.0 EASY!", data:"http://www.afcomponents.com/components/loop_as3", type:ContentType.IMAGE});
    myLoop.addItem({path:"http://www.afcomponents.com/components/loop_as3/img_1.jpg", description:"ADVANCED FLASH COMPONENTS | LOOP (AS 3.0) | IMAGE 1", data:"http://www.afcomponents.com/components/loop_as3", type:ContentType.IMAGE});
    myLoop.addItem({path:"http://www.afcomponents.com/components/loop_as3/img_2.jpg", description:"ADVANCED FLASH COMPONENTS | LOOP (AS 3.0) | IMAGE 2", data:"http://www.afcomponents.com/components/loop_as3", type:ContentType.IMAGE});
    myLoop.addItem({path:"http://www.afcomponents.com/components/loop_as3/img_3.jpg", description:"ADVANCED FLASH COMPONENTS | LOOP (AS 3.0) | IMAGE 3", data:"http://www.afcomponents.com/components/loop_as3", type:ContentType.IMAGE});
    myLoop.addItem({path:"http://www.afcomponents.com/components/loop_as3/img_4.jpg", description:"ADVANCED FLASH COMPONENTS | LOOP (AS 3.0) | IMAGE 4", data:"http://www.afcomponents.com/components/loop_as3", type:ContentType.IMAGE});
    myLoop.addItem({path:"http://www.afcomponents.com/components/loop_as3/img_5.jpg", description:"ADVANCED FLASH COMPONENTS | LOOP (AS 3.0) | IMAGE 5", data:"http://www.afcomponents.com/components/loop_as3", type:ContentType.IMAGE});
    myLoop.addItem({path:"http://www.afcomponents.com/components/loop_as3/img_6.jpg", description:"ADVANCED FLASH COMPONENTS | LOOP (AS 3.0) | IMAGE 6", data:"http://www.afcomponents.com/components/loop_as3", type:ContentType.IMAGE});
    myLoop.addItem({path:"http://www.afcomponents.com/components/loop_as3/img_7.jpg", description:"ADVANCED FLASH COMPONENTS | LOOP (AS 3.0) | IMAGE 7", data:"http://www.afcomponents.com/components/loop_as3", type:ContentType.IMAGE});
}
myLoop.addEventListener(LoopEvent.INITIALIZE, onLoopInit);

Part II - Prepping the Images and Placing in Same Folder

The first step is create or edit images with a desired width and height and place them in same folder as where you save your flash file and swf. If you need sample images: 1, 2, 3, 4, 5, 6 and image size is 200 by 150 px.

Part III - Setting Up the File and Adding an Instance of Loop Component to the Stage

You must use Flash CS3 and have the Loop AS3.0 component for this tutorial. The first step is to create a new Flash file using ActionScript 3.0.

Assuming that you have Loop AS3.0 component installed, the first step is dragging an instance of the Loop component on to the stage using the component panel (Window > Components). Give the Loop an instance name of myLoop in the properties panel.

Part IV - Using the Component Inspector to Add Images

Now add your images and format your image style properties by adding the following ActionScript to your flash movie in an actions layer:

Component Info

Loop (AS 3.0)

Knowledge Base

Forum