This is just a simple image gallery where we are using a XML file to load images.
Requirements
Create a dynamic photo gallery, call all thumbnail images dynamically and make dynamic vertical scroller for thumbnail to view more thumbnails.
Thumbnail display will be 3x2 and rest will viewable with scroller. Images will control from either XML or from array inside flash. Once u click on thumbnail images then bigger image of thumbnail will change with some transition effect.
We can notice here that we can use our ImageViewer class that has been created in previous post.
We will divide our work in modules
1. Create one XML to store the image info.
2. Load XML and push the values in arrays.
3. Generate Grid as required.
4. Add a scrollbar to grid.
5. View a large image with transition.
Let's have the XML in following way. You cab modify it as the way you want but that will require minor modification in the code.
XML file link:
The XML tag "" stores the path to thumbnails and largeimages.
and img tag stores the name of big and small image.
consider this main.as file describing the document class.
package{
import flash.display.Sprite;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import com.gen.ImageViewer;
import com.hamferus.utils.ContentScroller;
import flash.filters.GlowFilter;
import caurina.transitions.Tweener;
public class main extends Sprite{
private var urlRequest:URLRequest;
private var urlLoad:URLLoader;
private var externalXML:XML;
private var thumbArray:Array = new Array;
private var largeArray:Array = new Array;
private var thumbPath:String;
private var largePath:String;
private var objImg:Array = new Array;
private var gridX:Number = 125;
private var gridY:Number = 450;
private var gridScroll:MovieClip = new MovieClip();
private var gridScrollBar:ContentScroller;
private var largeImage:ImageViewer;
private var myFilter:GlowFilter
public function main()
{
init();
}
public function init()
{
urlRequest = new URLRequest("data/data.xml");
urlLoad = new URLLoader(urlRequest);
urlLoad.addEventListener(Event.COMPLETE, onComplete);
}
public function onComplete(e:Event):void
{
externalXML = new XML(urlLoad.data);
thumbPath = externalXML.path.thumb;
largePath = externalXML.path.large;
populateArray();
}
public function populateArray()
{
for(var k=0;k
{
thumbArray[k] = externalXML.images.img[k].small.toString();
largeArray[k] = externalXML.images.img[k].large.toString();
}
generateGrid(externalXML.images.img.length());
}
public function generateGrid(maxLen:Number)
{
var _tempx:Number = gridX;
var _tempy:Number = gridY;
for(var xx=0;xx
{
objImg[xx] = new ImageViewer(thumbPath+thumbArray[xx]);
objImg[xx].x = _tempx;
objImg[xx].y = _tempy;
objImg[xx].name = "thumb"+xx;
gridScroll.addChild(objImg[xx]);
objImg[xx].addEventListener(MouseEvent.MOUSE_DOWN, loadBigImage);
if((xx+1) % 3 == 0)
{
_tempy += objImg[xx].height;
_tempx = gridX;
}
else
{
_tempx += objImg[xx].width;
}
}
addChild(gridScroll);
if (gridScroll.height > 150) {
gridScrollBar = new ContentScroller(gridScroll,425,200,15,0xf7cf9d,0xbabff9,3,true);
addChild(gridScrollBar);
gridScrollBar.y = gridY;
}
}
public function loadBigImage(e:MouseEvent):void
{
if(largeImage != null)
{
if(contains(largeImage))
{
removeChild(largeImage);
}
}
largeImage = new ImageViewer(largePath+largeArray[String(e.currentTarget.name ).substr(5,3)]);
addChild(largeImage);
largeImage.x = 30;
largeImage.y = 30;
myFilter = new GlowFilter(0x000000,1,0,0,1,1,false,false);
largeImage.filters = [myFilter];
Tweener.addTween(myFilter, {blurY:100, blurX:20,time:1 ,transition:"linear", onUpdate:updateHandler});
}
function updateHandler():void {
largeImage.filters = [myFilter];
}
}
}
Lets go through the code.
/* These 3 variables are used for loading the XML*/
private var urlRequest:URLRequest;
private var urlLoad:URLLoader;
private var externalXML:XML;
/* These 4 variables are storing values in array from XML*/
private var thumbArray:Array = new Array;
private var largeArray:Array = new Array;
private var thumbPath:String;
private var largePath:String;
/* This array stores the values of the objects of ImageViewer*/
private var objImg:Array = new Array;
Let's discuss the generateGrid method in the main class.
It receives the maxlength as the parameter counting the all the img tags in XML.
public function generateGrid(maxLen:Number)
{
var _tempx:Number = gridX;
var _tempy:Number = gridY;
for(var xx=0;xx
{
objImg[xx] = new ImageViewer(thumbPath+thumbArray[xx]);
objImg[xx].x = _tempx;
objImg[xx].y = _tempy;
objImg[xx].name = "thumb"+xx;
gridScroll.addChild(objImg[xx]);
objImg[xx].addEventListener(MouseEvent.MOUSE_DOWN, loadBigImage);
if((xx+1) % 3 == 0)
{
_tempy += objImg[xx].height;
_tempx = gridX;
}
else
{
_tempx += objImg[xx].width;
}
}
addChild(gridScroll);
if (gridScroll.height > 150) {
gridScrollBar = new ContentScroller(gridScroll,425,200,15,0xf7cf9d,0xbabff9,3,true);
addChild(gridScrollBar);
gridScrollBar.y = gridY;
}
}
The first for loop creates the objects of ImageViewer class. It further generates the grid. The mod is used to divide generate the grid.
if((xx+1) % 3 == 0)
{
_tempy += objImg[xx].height;
_tempx = gridX;
}
else
{
_tempx += objImg[xx].width;
}
this code adds to all grid generation. You can get all the other classes used in this example from the links given belwow
You can download the files from below link.
Nitin-
No comments:
Post a Comment