OBO Gallery
The OBO Gallery is an image gallery component designed for Flash CS3 and to be used with Actionscript 3.0. Once installed using Adobe Extension Manager, the component can be dragged from the components panel, given an instance name in the properties panel, and placed on stage where desired. The center of the component graphic is where the center of the loaded images will be.
Usage
The component requires a simple .xml file to specify the location of the image files to load. The file should be structured like this:
<?xml version="1.0" encoding="utf-8"?>
<images>
<image>images/1.jpg</image>
<image>images/2.jpg</image>
<image>images/3.jpg</image>
<image>images/4.jpg</image>
</images>
The name of the root node is irrelevant. The child nodes, however, must be named "image".
The path to this .xml file may be set using the parameters or component inspector panel or may be set with actionscript using the xmlPath property. It may also be included in the load() method of the component. For example, the simplest way to use the component is to drag an instance onto the stage, give it an instance name of "myGallery" (e.g.) then call the load method with:
myGallery.load("path/to/xmlfile.xml");
Actionscript
The following properties may be read or set using actionscript:
- xmlPath - a String representing the path to the .xml file to load.
- radius - an int representing a circular area around the center of the images. Images let go within the circle slide away from the stack of images before sliding underneath. Images let go outside the circle immediately slide beneath the stack.
- maxRotation - a Number designating how many degrees the images may be rotated.
- color - a uint specifying the color of the border surrounding the images.
- showHand - a Boolean indicating whether or not the top image of the stack should display a hand cursor when mousing over.
- dropShadow - an optional DropShadowFilter object if a drop shadow is desired.
- borderSize - an int specifying the size of the surrounding border in pixels. If no border is required, set this property to 0.
- direction - a String specifying which direction the images should slide. The only acceptable values are "left", "right", "up", or "down".
- currentImage - a READ ONLY int which returns the number of the currently loading image. Useful for preloading scripts.
- totalImages - a READ ONLY int which returns the total number of images which will be loaded. Again, useful for preloading purposes.
The gallery also supports the folling method:
- load() - this will begin loading the images targeted in the .xml file into the component. This method must be called for the component to do anything. If the path to the .xml file is set using the parameters panel or component inspector panel or with actionscript, simply call myGallery.load(). Otherwise, call myGallery.load("xmlfile.xml");
The gallery will listen for the following events:
- ProgressEvent.PROGRESS - dispatched while images load.
- Event.COMPLETE - dispatched once all images have finished loading.
Example
The example .swf at the top of the page uses the following document class (included in the download):
package {
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.filters.DropShadowFilter;
public class Example extends MovieClip{
private var ds:DropShadowFilter = new DropShadowFilter(4, 90, 0, .85, 4,4, 1, 3);
// "Preloader" is a movieclip in the .fla's library containing another movieclip
// with an instance name "bar" and a textfield with and instance name "load_txt".
private var pl:Preloader;
public function Example() {
init();
}
private function init():void {
pl = new Preloader();
pl.bar.scaleX = 0;
pl.x = 400;
pl.y = 365;
addChild(pl);
// "myGallery" is an instance of the OBOGallery component placed on the stage.
myGallery.xmlPath = "images.xml";
myGallery.dropShadow = ds;
myGallery.maxRotation = 15;
myGallery.addEventListener(ProgressEvent.PROGRESS, onProgress);
myGallery.addEventListener(Event.COMPLETE, onComplete);
myGallery.load();
}
private function onProgress(pe:ProgressEvent):void {
pl.load_txt.text = "Loading image " + myGallery.currentImage + " of " + myGallery.totalImages;
pl.bar.scaleX = pe.bytesLoaded / pe.bytesTotal;
}
private function onComplete(e:Event):void {
myGallery.removeEventListener(ProgressEvent.PROGRESS, onProgress);
myGallery.removeEventListener(Event.COMPLETE, onComplete);
removeChild(pl);
}
}
}
For more Flashy goodness check out the OBO Schwag site.