{"id":606,"date":"2011-03-31T05:47:13","date_gmt":"2011-03-31T09:47:13","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=606"},"modified":"2011-04-19T04:52:21","modified_gmt":"2011-04-19T08:52:21","slug":"flash-as3-tween-vibrating-gallery","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/flash-as3-tween-vibrating-gallery\/","title":{"rendered":"Flash AS3 Tween Vibrating Gallery"},"content":{"rendered":"

<\/embed><\/object><\/p>\n

Step 1: Open a new a document in flash Actionscript 3.0 in the size of 525X450 PX.<\/p>\n

Step 2: Set up the BG color as black or needed color.<\/p>\n

Step 3: Paste the following code in Layer-1, first Keyframe by giving F9 to open the actionacript panel:<\/p>\n

import fl.transitions.*;
\nimport fl.transitions.easing.*;
\nimport flash.display.Bitmap;
\nimport flash.display.BitmapData;
\nimport flash.geom.Matrix;
\nimport flash.display.Sprite;
\nimport asfiles.ascript.objects.Tile;
\nimport asfiles.ascript.loaders.GalleryLoader;
\nimport asfiles.ascript.preloaders.LoadSpinner2;
\nimport flash.display.Loader;
\nimport flash.display.Shape;
\nimport flash.events.MouseEvent;
\nimport flash.text.TextFormat;
\nimport flash.events.Event;
\nvar dw:Number = 525;
\nvar dh:Number = 450;
\nvar galLoader:GalleryLoader;
\nvar numPics:int;
\nvar thumbsData:Vector.<BitmapData>
\nvar largePiURLs:Vector.<String>;
\nvar captions:Vector.<String>;
\nvar spinner:LoadSpinner2;
\nvar picWidth:Number;
\nvar picHeight:Number;
\nvar divisions:Number;
\nvar gap:Number;
\nvar tiles:Vector.<Tile>;
\nvar tileWidth:Number;
\nvar tileHeight:Number;
\nvar galleryHolder:Sprite;
\nvar parameterTween:Tween;
\nvar variationX:Vector.<Number>;
\nvar variationY:Vector.<Number>;
\nvar variationMax:Number;
\nvar collapsed:Boolean;
\nvar currentPicIndex:int;
\nvar captionBox:TextField;
\nvar collapseTweenDuration:Number;
\nvar separateTweenDuration:Number;
\nvar closedPositionOffsetY:Number;
\nvar thumbnails:Vector.<Bitmap>;
\nvar pics:Vector.<Bitmap>;
\nvar angles:Vector.<Number>;
\nvar loader:Loader;
\nvar isLoading:Boolean;
\nvar scrollTweenDuration:Number;
\nvar pageShift:int;
\nvar numTiles:int;
\nvar numPages:int;
\nvar backSkip:int;
\nvar navigationPanel:Sprite;
\n\/\/\/\/\/\/\/\/\/\/
\nstage.scaleMode = StageScaleMode.NO_SCALE;
\n\/\/this paramObject will be used for our tweened motion:
\nvar paramObject:Object = {t:0};
\n\/\/we create some instances of MovieClips from the library:
\nvar btnNextImage:BtnNextImage = new BtnNextImage();
\nvar btnPrevImage:BtnPrevImage = new BtnPrevImage();
\nvar btnNextPage:BtnNextPage = new BtnNextPage();
\nvar btnPrevPage:BtnPrevPage = new BtnPrevPage();
\nvar btnReturn:BtnReturn = new BtnReturn();
\nvar mcViewInstructions:McViewInstructions = new McViewInstructions();
\ninit();
\n\/\/\/\/\/\/\/\/\/
\nfunction init():void {
\nthumbsData = new Vector.<BitmapData>();
\nlargePicURLs = new Vector.<String>();
\ncaptions = new Vector.<String>();
\nloader = new Loader();
\nisLoading = false; \/\/boolean flag for image loading after thumbnail click
\ninfoBox.text = “Loading thumbnails, please wait…”;
\ngalleryHolder = new Sprite();
\ngalleryHolder.x = dw\/2 – 30;
\ngalleryHolder.y = dh\/2 + 10;
\nthis.addChild(galleryHolder);
\nbtnPrevImage.mouseEnabled = false;
\nbtnNextImage.mouseEnabled = false;
\nbtnReturn.mouseEnabled = false;
\nspinner = new LoadSpinner2(100,100);
\nspinner.setColors(0x000762C5, 0xFF0762C5);
\nspinner.bgAlpha = 20;
\nspinner.x = galleryHolder.x;
\nspinner.y = galleryHolder.y;
\nthis.addChild(spinner);
\nspinner.startSpinner();
\ngalLoader = new GalleryLoader(“gallery.xml”);
\ngalLoader.addEventListener(GalleryLoader.XMLLOAD_ERROR, xmlError);
\ngalLoader.addEventListener(GalleryLoader.IMGSLOAD_ERROR, imgsError);
\ngalLoader.addEventListener(GalleryLoader.ALL_LOADED, loadEnded);
\ngalLoader.loadXML();
\n}
\nfunction xmlError(e:Event):void {
\ngalLoader.removeEventListener(GalleryLoader.XMLLOAD_ERROR, xmlError);
\ngalLoader.removeEventListener(GalleryLoader.ALL_LOADED, loadEnded);
\ngalLoader.removeEventListener(GalleryLoader.IMGSLOAD_ERROR, imgsError);
\ninfoBox.text=”There has been an error loading the XML file. The server may be busy. Try refreshing the page.”;
\nspinner.stopSpinner();
\nspinner.visible=false;
\n}
\nfunction imgsError(e:Event):void {
\ngalLoader.removeEventListener(GalleryLoader.XMLLOAD_ERROR, xmlError);
\ngalLoader.removeEventListener(GalleryLoader.ALL_LOADED, loadEnded);
\ngalLoader.removeEventListener(GalleryLoader.IMGSLOAD_ERROR, imgsError);
\ninfoBox.text=”There has been an error loading thumbnails. The server may be busy. Try refreshing the page.”;
\nspinner.stopSpinner();
\nspinner.visible=false;
\n}
\nfunction loadEnded(e:Event):void {
\ngalLoader.removeEventListener(GalleryLoader.XMLLOAD_ERROR, xmlError);
\ngalLoader.removeEventListener(GalleryLoader.ALL_LOADED, loadEnded);
\ngalLoader.removeEventListener(GalleryLoader.IMGSLOAD_ERROR, imgsError);
\ninfoBox.text=””;
\nspinner.stopSpinner();
\nspinner.visible=false;
\ninitApp();
\n}
\nfunction populateVecs():void {
\nvar j:int;
\nfor(j=0;j<numPics;j++){
\nthumbsData[j]=galLoader.bmpDataVec[j];
\nlargePicURLs[j]=galLoader.picsVec[j];
\ncaptions[j]=galLoader.capsVec[j];
\n}
\n}
\nfunction initApp():void {
\nnumPics = galLoader.numPics;
\npopulateVecs();
\nthumbnails = new Vector.<Bitmap>();
\ncreateThumbnailBitmaps();
\npicWidth = 400;
\npicHeight = 300;
\ngap = 10;
\ndivisions = 4;
\nnumTiles = divisions*divisions;
\nvariationMax = 12;
\nnumPages = Math.ceil(Number(numPics)\/Number(numTiles));
\nbackSkip = numPages*numTiles – numPics;
\ncollapseTweenDuration = 75;
\nseparateTweenDuration = 30;
\nscrollTweenDuration = 40;
\nclosedPositionOffsetY = 0;
\npageShift = 0;
\nnavigationPanel = new Sprite();
\nthis.addChild(navigationPanel);
\nnavigationPanel.mouseEnabled = false;
\nnavigationPanel.y = galleryHolder.y + closedPositionOffsetY – picHeight\/2 – 40;
\nnavigationPanel.x = galleryHolder.x + 2;
\nnavigationPanel.addChild(btnNextImage);
\nbtnNextImage.y = 0;
\nbtnNextImage.x = btnReturn.width\/2 + 20;
\nnavigationPanel.addChild(btnPrevImage);
\nbtnPrevImage.y = 0;
\nbtnPrevImage.x = -btnReturn.width\/2 – 20;
\nnavigationPanel.addChild(btnReturn);
\nbtnReturn.y = 0;
\nbtnReturn.x = 0;
\nthis.addChild(mcViewInstructions);
\nmcViewInstructions.y = galleryHolder.y – (picHeight + gap*(divisions-1))\/2 – 30;
\nmcViewInstructions.x = galleryHolder.x + 3;
\nmcViewInstructions.mouseEnabled = false;
\nthis.addChild(btnPrevPage);
\nbtnPrevPage.x = galleryHolder.x + (picWidth + gap*(divisions-1))\/2 + 30;
\nbtnPrevPage.y = galleryHolder.y – 8;
\nthis.addChild(btnNextPage);
\nbtnNextPage.x = galleryHolder.x + (picWidth + gap*(divisions-1))\/2 + 30;
\nbtnNextPage.y = galleryHolder.y + 12;
\nbtnPrevImage.addEventListener(MouseEvent.CLICK, prevImage);
\nbtnNextImage.addEventListener(MouseEvent.CLICK, nextImage);
\nbtnReturn.addEventListener(MouseEvent.CLICK, returnToThumbs);
\nbtnNextPage.addEventListener(MouseEvent.CLICK, btnNextPageHandler);
\nbtnPrevPage.addEventListener(MouseEvent.CLICK, btnPrevPageHandler);
\nsetPagingVisibility();
\nnavigationPanel.alpha = 0;
\ntiles = new Vector.<Tile>();
\nvariationX = new Vector.<Number>();
\nvariationY = new Vector.<Number>();
\nangles = new Vector.<Number>();
\ntileWidth = picWidth\/divisions;
\ntileHeight = picHeight\/divisions;
\nvar dsf:DropShadowFilter = new DropShadowFilter(6,45,0×000000,2,6,6,1);
\ngalleryHolder.filters = [dsf];
\nvar format:TextFormat = new TextFormat(“arial”,12,0xffffff,false,true);
\nformat.align = TextFormatAlign.CENTER;
\ncaptionBox = new TextField();
\ncaptionBox.defaultTextFormat = format;
\ncaptionBox.autoSize = TextFieldAutoSize.CENTER;
\ncaptionBox.text = “”;
\ncaptionBox.x = galleryHolder.x – captionBox.width\/2;
\ncaptionBox.y = 20+galleryHolder.y + 0.5*picHeight + closedPositionOffsetY;
\nthis.addChildAt(captionBox,0);
\ncaptionBox.mouseEnabled = false;
\nsetUpThumbnails();
\nsetUpTiles();
\ncollapsed = false;
\n}
\nfunction createThumbnailBitmaps():void {
\nvar i:int;
\nfor (i = 0; i < galLoader.numPics; i++) {
\nthumbnails.push(new Bitmap(galLoader.bmpDataVec[i]));
\n}
\n}
\nfunction setUpThumbnails():void {
\nvar k:int;
\nvar scaleFactor:Number;
\nfor (k = 0; k < numPics; k++) {
\nscaleFactor = tileWidth\/thumbnails[k].width;
\nthumbnails[k].x = -scaleFactor*thumbnails[k].width\/2;
\nthumbnails[k].y = -scaleFactor*thumbnails[k].height\/2;
\nthumbnails[k].scaleX = thumbnails[k].scaleY = scaleFactor;
\n}
\n}
\nfunction setUpTiles():void {
\nfor (var i=0; i<= divisions-1; i++) {
\nfor (var j=0; j<= divisions-1; j++) {
\nvar thisTile:Tile = new Tile();
\nthisTile.thumbnailHolder.addChild(thumbnails[i*divisions + j]);
\ngalleryHolder.addChild(thisTile);
\nthisTile.openPosition.x = -(picWidth + gap*(divisions-1))\/2 + tileWidth\/2+(tileWidth+gap)*j;\/\/ + (2*Math.random()-1)*gap*0.5;
\nthisTile.openPosition.y = -(picHeight + gap*(divisions-1))\/2 + tileHeight\/2+(tileHeight+gap)*i;\/\/ + (2*Math.random()-1)*gap*0.5;
\nthisTile.closedPosition.x = -picWidth\/2 + tileWidth\/2 + tileWidth*j;
\nthisTile.closedPosition.y = closedPositionOffsetY – picHeight\/2 + tileHeight\/2 + tileHeight*i;
\nthisTile.x = thisTile.openPosition.x;
\nthisTile.y = thisTile.openPosition.y;
\nthisTile.which = i*divisions+j;
\nthisTile.buttonMode = true;
\ntiles.push(thisTile);
\nvariationX.push(4*variationMax*(2*Math.random()-1));
\nvariationY.push(4*variationMax*(2*Math.random()-1));
\nangles.push(0);
\nthisTile.addEventListener(MouseEvent.CLICK, onTileClick);
\n}}}
\nfunction onTileClick(evt:MouseEvent):void {
\nif(isLoading||collapsed){
\nreturn;
\n}
\nisLoading=true;
\ncurrentPicIndex = evt.target.which;
\nsetFlipVisibility();
\nspinner.visible = true;
\nspinner.startSpinner();
\n\/\/set up listeners for load complete or error, go to changeTilesBeforeCollapse on complete
\nloader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
\nloader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadingError);
\n\/\/load image
\nloader.load(new URLRequest(largePicURLs[currentPicIndex + pageShift]));
\n}
\nfunction setFlipVisibility():void {
\nbtnPrevImage.visible = btnPrevImage.mouseEnabled = (currentPicIndex + pageShift > 0);
\nbtnNextImage.visible = btnNextImage.mouseEnabled = (currentPicIndex + pageShift < (numPics – 1));
\n}
\nfunction loadingError(e:IOErrorEvent):void {
\ninfoBox.text=”There has been an error loading the image. The server may be busy. Refresh the page and try again.”;
\nloader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loadComplete);
\nloader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR,loadingError);
\nisLoading=false;
\nspinner.stopSpinner();
\nspinner.visible=false;
\n}
\nfunction onPicClick(evt:MouseEvent):void {
\nbtnReturn.removeEventListener(MouseEvent.CLICK, returnToThumbs);
\ngalleryHolder.removeEventListener(MouseEvent.CLICK, onPicClick);
\nseparate();
\n}
\nfunction returnToThumbs(evt:MouseEvent):void {
\ngalleryHolder.removeEventListener(MouseEvent.CLICK, onPicClick);
\nbtnReturn.removeEventListener(MouseEvent.CLICK, returnToThumbs);
\nbtnReturn.mouseEnabled = false;
\nseparate();
\n}
\nfunction loadComplete(evt:Event):void {
\nloader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loadComplete);
\nloader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR,loadingError);
\nspinner.stopSpinner();
\nspinner.visible=false;
\nisLoading=false;
\n\/\/paint tiles with pic:
\nvar matrix:Matrix = new Matrix(1,0,0,1);
\nvar index:int;
\nvar bd:BitmapData = Bitmap(loader.content).bitmapData;
\nfor (var i=0; i<= divisions-1; i++) {
\nfor (var j=0; j<= divisions-1; j++) {
\nindex = i*divisions + j;
\nmatrix.tx = (-j-0.5)*picWidth\/divisions;
\nmatrix.ty = (-i-0.5)*picHeight\/divisions;
\ntiles[index].graphics.clear();
\ntiles[index].graphics.beginBitmapFill(bd,matrix,false,false);
\ntiles[index].graphics.drawRect(-tileWidth\/2, -tileHeight\/2, tileWidth, tileHeight);
\ntiles[index].graphics.endFill();
\n}
\n}
\n\/\/change caption:
\ncaptionBox.text = ”\u00a0 “+captions[currentPicIndex + pageShift]+”\u00a0 “; \/\/adding a little extra space to avoid cutoff
\nif (!collapsed) {
\ncollapse();
\n}
\n}
\nfunction collapse():void {
\ncollapsed = true;
\n\/\/reset the randomization variables so it won’t look the same every time:
\nfor (var i:int = 0; i < divisions*divisions; i++) {
\nvariationX[i] = (4*variationMax*(2*Math.random()-1));
\nvariationY[i] = (4*variationMax*(2*Math.random()-1));
\nangles[i] = 60-Math.random()*120;
\n}
\nparameterTween = new Tween(paramObject,”t”,Elastic.easeInOut,0,1,collapseTweenDuration);
\nparameterTween.addEventListener(TweenEvent.MOTION_FINISH, collapseComplete);
\nthis.addEventListener(Event.ENTER_FRAME, onEnterCollapse);
\n}
\nfunction separate():void {
\ncollapsed = false;
\n\/\/reset the randomization variables so it won’t look the same every time:
\nfor (var i:int = 0; i < divisions*divisions; i++) {
\nvariationX[i] = (4*variationMax*(2*Math.random()-1));
\nvariationY[i] = (4*variationMax*(2*Math.random()-1));
\nangles[i] = 60-Math.random()*120;
\n}
\nparameterTween = new Tween(paramObject,”t”,Elastic.easeInOut,0,1,separateTweenDuration);
\nparameterTween.addEventListener(TweenEvent.MOTION_FINISH, separateComplete);
\nthis.adEventListener(Event.ENTER_FRAME, onEnterSeparate);
\nbtnPrevImage.mouseEnabled = false;
\nbtnNextImage.mouseEnabled = false;
\n}
\nfunction onEnterCollapse(evt:Event):void {
\ncaptionBox.alpha = paramObject.t;
\nnavigationPanel.alpha = paramObject.t;
\nmcViewInstructions.alpha = 1 – paramObject.t;
\nbtnPrevPage.alpha = 1 – paramObject.t;
\nbtnNextPage.alpha = 1 – paramObject.t;
\nvar quad:Number;
\nfor (var i:int = 0; i< divisions*divisions; i++) {
\nquad = paramObject.t*(1-paramObject.t);
\ntiles[i].x = tiles[i].openPosition.x + paramObject.t*(tiles[i].closedPosition.x-tiles[i].openPosition.x)+variationX[i]*quad;
\ntiles[i].y = tiles[i].openPosition.y + paramObject.t*(tiles[i].closedPosition.y-tiles[i].openPosition.y)+variationY[i]*quad;
\ntiles[i].thumbnailHolder.alpha = 1-paramObject.t;
\ntiles[i].rotation = quad*angles[i];
\n}
\n}
\nfunction onEnterSeparate(evt:Event):void {
\ncaptionBox.alpha = 1-paramObject.t;
\nnavigationPanel.alpha = 1-paramObject.t;
\nmcViewInstructions.alpha = paramObject.t;
\nbtnPrevPage.alpha = paramObject.t;
\nbtnNextPage.alpha = paramObject.t;
\nvar quad:Number;
\nfor (var i:int = 0; i< divisions*divisions; i++) {
\nquad = paramObject.t*(1-paramObject.t);
\ntiles[i].x = tiles[i].closedPosition.x + paramObject.t*(tiles[i].openPosition.x-tiles[i].closedPosition.x)+variationX[i]*quad;
\ntiles[i].y = tiles[i].closedPosition.y + paramObject.t*(tiles[i].openPosition.y-tiles[i].closedPosition.y)+variationY[i]*quad;
\ntiles[i].thumbnailHolder.alpha = paramObject.t;
\ntiles[i].rotation = quad*angles[i];
\n}
\n}
\nfunction collapseComplete(evt:Event):void {
\ncaptionBox.x = galleryHolder.x – captionBox.width\/2;
\nthis.removeEventListener(Event.ENTER_FRAME, onEnterCollapse);
\ngalleryHolder.addEventListener(MouseEvent.CLICK, onPicClick);
\nbtnReturn.addEventListener(MouseEvent.CLICK, returnToThumbs);
\nbtnReturn.mouseEnabled = true;
\n}
\nfunction separateComplete(evt:Event):void {
\nthis.removeEventListener(Event.ENTER_FRAME, onEnterSeparate);
\n}
\nfunction prevImage(evt:MouseEvent):void {
\nif(isLoading){
\nreturn;
\n}
\nisLoading=true;
\ncurrentPicIndex -= 1;
\nif (currentPicIndex < 0) {
\n\/\/pageShift -= numTiles;
\ncurrentPicIndex = numTiles – 1
\n\/\/have to do something special if we’re on the last page
\nif (Math.ceil(Number(pageShift)\/Number(numTiles)) == numPages – 1) {
\ncurrentPicIndex -= backSkip;
\n}
\nprevPage();
\n}<\/p>\n

setFlipVisibility();
\nspinner.visible = true;
\nspinner.startSpinner();
\n\/\/set up listeners for load complete or error, go to changeTilesBeforeCollapse on complete
\nloader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
\nloader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadingError);
\n\/\/load image
\nloader.load(new URLRequest(largePicURLs[currentPicIndex + pageShift]));
\n}
\nfunction nextImage(evt:MouseEvent):void {
\nif(isLoading){
\nreturn;
\n}
\nisLoading=true;
\ncurrentPicIndex += 1;
\nif (currentPicIndex > numTiles – 1) {
\n\/\/pageShift -= numTiles;
\ncurrentPicIndex = 0;
\n\/\/have to do something special if we’re on the last page
\nif (Math.ceil(Number(pageShift + numTiles)\/Number(numTiles)) == numPages – 1) {
\ncurrentPicIndex += backSkip;
\n}
\nnextPage();
\n}
\nsetFlipVisibility();
\nspinner.visible = true;
\nspinner.startSpinner();
\n\/\/set up listeners for load complete or error, go to changeTilesBeforeCollapse on complete
\nloader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
\nloader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,loadingError);
\n\/\/load image
\nloader.load(new URLRequest(largePicURLs[currentPicIndex + pageShift]));
\n}
\nfunction setPagingVisibility():void {
\nbtnPrevPage.visible = false;
\nbtnPrevPage.mouseEnabled = false;
\nbtnNextPage.visible = false;
\nbtnNextPage.mouseEnabled = false;
\nif (pageShift + numTiles < numPics – 1) {
\nbtnNextPage.visible = true;
\nbtnNextPage.mouseEnabled = true;
\n}
\nif (pageShift > 0) {
\nbtnPrevPage.visible = true;
\nbtnPrevPage.mouseEnabled = true;
\n}
\n}
\nfunction btnNextPageHandler(evt:MouseEvent):void {
\nnextPage();
\n}
\nfunction btnPrevPageHandler(evt:MouseEvent):void {
\nprevPage();
\n}
\nfunction nextPage():void {
\nvar k:int;
\npageShift += numTiles;
\nif (pageShift + numTiles > numPics) {
\npageShift = numPics – numTiles;
\n}
\nfor (k = 0; k < numTiles; k++) {
\nif (tiles[k].thumbnailHolder.numChildren > 0) {
\ntiles[k].thumbnailHolder.removeChildAt(0);
\n}
\ntiles[k].thumbnailHolder.addChild(thumbnails[k + pageShift]);
\n}
\nsetPagingVisibility();
\n}
\nfunction prevPage():void {
\nvar k:int;
\npageShift -= numTiles;
\nif (pageShift < 0) {
\npageShift = 0;
\n}
\nfor (k = 0; k < numTiles; k++) {
\nif (tiles[k].thumbnailHolder.numChildren > 0) {
\ntiles[k].thumbnailHolder.removeChildAt(0);
\n}
\ntiles[k].thumbnailHolder.addChild(thumbnails[k + pageShift]);
\n}
\nsetPagingVisibility();
\n}<\/p>\n

Step 4: Create one folder in the name of gallery, inside of it create two folders in the name of asfiles and pictures. Inside of asfiles folder create ascript folder, and inside of it create three folders in the name of loader, object, and preloader. The folders chart is given below for reference:<\/p>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-607\"\r\n <\/div><\/a><\/p>\n

Step 5: Create images in the size of 400X300 and also make the copy of images in thumbnail size inside the pictures folder. Here I have taken 30 images for gallery.<\/p>\n

Step-6: Now have open four actionscript file in the name of LoadSpinner2, Tile, GalleryLoader, ThumbsLoader. Save GalleryLoader, ThumbsLoader in loader folder, and Tile in object and LoadSpinner2 in preloader folder.<\/p>\n

Write the following code in LoadSpinner2.as file:<\/p>\n

package asfiles.ascript.preloaders {
\nimport flash.display.Sprite;
\nimport flash.display.Shape;
\nimport flash.events.Event;
\nimport flash.geom.Rectangle;
\nimport flash.filters.BlurFilter;
\npublic class LoadSpinner2 extends Sprite {
\nprivate var back:Shape;
\nprivate var spinner:Shape;
\nprivate var rectWidth:Number;
\nprivate var rectHeight:Number;
\nprivate var sticks:Vector.<Shape>;
\nprivate var numSticks:int;
\nprivate var count:int;
\nprivate var dimColor:uint;
\nprivate var brightColor:uint;
\nprivate var colors:Vector.<uint>;
\nprivate var alphas:Vector.<Number>;
\nprivate var sticksHolder:Sprite;
\nprivate var _bgAlpha:Number;
\npublic function LoadSpinner2(w:Number,h:Number) {
\nrectWidth=w;
\nrectHeight=h;
\nnumSticks=12;
\ncount=0;
\n_bgAlpha = 0.1;
\nsticks= new Vector.<Shape>(numSticks);
\nsticksHolder = new Sprite();
\nthis.addChild(sticksHolder);
\nsticksHolder.x=0;
\nsticksHolder.y=0;
\nvar i:int;
\nfor(i=0;i<numSticks;i++){
\nsticks[i]=new Shape();
\nsticksHolder.addChild(sticks[i]);
\nsticks[i].x=0;
\nsticks[i].y=0;
\n}
\nsetColors(0x0088DDFF, 0xFF88DDFF);
\ndrawBack();
\n}
\npublic function set bgAlpha(n:Number):void {
\n_bgAlpha = n;
\ndrawBack();
\n}
\npublic function setColors(color1:uint, color2:uint):void {
\nvar a1:uint = (color1 >> 24) & 0xFF;
\nvar r1:uint = (color1 >> 16) & 0xFF;
\nvar g1:uint = (color1 >> 8 ) & 0xFF;
\nvar b1:uint = color1 & 0xFF;
\nvar a2:uint = (color2 >> 24) & 0xFF;
\nvar r2:uint = (color2 >> 16) & 0xFF;
\nvar g2:uint = (color2 >> 8 ) & 0xFF;
\nvar b2:uint = color2 & 0xFF;
\nvar a,r,g,b:Number;
\ncolors = new Vector.<uint>(numSticks);
\nalphas = new Vector.<Number>(numSticks);
\nvar i:Number;
\nvar t:Number;
\nfor (i = 0; i < numSticks; i++) {
\nt = i\/(numSticks-1);
\nt = t*t;
\na = a1 + t*(a2-a1);
\nr = r1 + t*(r2-r1);
\ng = g1 + t*(g2-g1);
\nb = b1 + t*(b2-b1);
\ncolors[i] = (r << 16) | (g << 8 ) | b;
\nalphas[i] = Number(a)\/255;
\n}
\ndrawSpinner(count);
\n}
\nprivate function drawBack():void {
\nthis.graphics.clear();
\nthis.graphics.lineStyle(2,0xFFFFFF,_bgAlpha);
\nthis.graphics.beginFill(0xFFFFFF,_bgAlpha);
\nthis.graphics.drawRoundRect(-rectWidth\/2,-rectHeight\/2,rectWidth,rectHeight,10,10);
\nthis.graphics.endFill();
\n}
\nprivate function drawSpinner(k:int):void {
\nvar minRad:Number=10;
\nvar maxRad:Number=25;
\nvar ang=Math.PI*2\/numSticks;
\nvar i:Number;
\nvar t:Number;
\nfor(i=0;i<numSticks;i++){
\nt = i\/(numSticks-1);
\nt = t*t;
\nsticks[i].graphics.clear();
\nsticks[i].graphics.lineStyle(4,colors[i],alphas[i],false,”normal”,”round”);
\nsticks[i].graphics.moveTo(minRad*Math.cos(i*ang),minRad*Math.sin(i*ang));
\nsticks[i].graphics.lineTo(maxRad*Math.cos(i*ang),maxRad*Math.sin(i*ang));
\n}
\n}
\npublic function stopSpinner():void {
\nthis.removeEventListener(Event.ENTER_FRAME,doSpin);
\ncount=0;
\n}
\npublic function startSpinner():void {
\nthis.addEventListener(Event.ENTER_FRAME,doSpin);
\n}
\nprivate function doSpin(e:Event):void {
\ncount+=1;
\ncount=count%numSticks;
\nsticksHolder.rotation = 360*count\/numSticks;
\n}}}
\nWrite the following code in Tile.as:
\npackage asfiles.ascript.objects {
\nimport flash.display.Sprite;
\nimport flash.geom.Point;<\/p>\n

public class Tile extends Sprite {
\npublic var which:Number;
\npublic var openPosition:Point;
\npublic var closedPosition:Point;
\npublic var color:uint;
\npublic var thumbnailHolder:Sprite;
\npublic function Tile() {
\nopenPosition = new Point();
\nclosedPosition = new Point();
\nthumbnailHolder = new Sprite();
\nthumbnailHolder.mouseEnabled = false;
\nthis.addChild(thumbnailHolder);
\n}}}
\nWrite the following code GalleryLoader.as:
\npackage asfiles.ascript.loaders {
\nimport flash.display.Loader;
\nimport flash.display.BitmapData;
\nimport flash.display.Bitmap;
\nimport flash.events.EventDispatcher;
\nimport flash.events.Event;
\nimport flash.events.IOErrorEvent;
\nimport flash.net.URLRequest;
\nimport flash.net.URLLoader;
\npublic class GalleryLoader extends EventDispatcher {
\npublic static const ALL_LOADED:String = “allLoaded”;
\npublic static const XMLLOAD_ERROR:String = “xmlLoadError”;
\npublic static const IMGSLOAD_ERROR:String = “imgsLoadError”;
\nprivate var xmlRequest:URLRequest;
\nprivate var xmlLoader:URLLoader;
\nprivate var xmlContent:XML;
\nprivate var _numPics:int;
\nprivate var isError:Boolean;
\nprivate var _bmpDataVec:Vector.<BitmapData>;
\nprivate var _capsVec:Vector.<String>;
\nprivate var _picsVec:Vector.<String>;
\nprivate var thumbsToLoad:Array;
\nprivate var thumbsLoader:ThumbsLoader;
\npublic function GalleryLoader(xml:String){
\nxmlRequest=new URLRequest(xml);
\n}
\npublic function loadXML():void {
\nxmlLoader=new URLLoader();
\nxmlLoader.addEventListener(Event.COMPLETE, xmlLoadComplete);
\nxmlLoader.addEventListener(IOErrorEvent.IO_ERROR, xmlError);
\nxmlLoader.load(xmlRequest);
\n}
\nprivate function xmlLoadComplete(e:Event):void {
\nxmlContent = new XML(xmlLoader.data);
\nxmlLoader.removeEventListener(Event.COMPLETE, xmlLoadComplete);
\nxmlLoader.removeEventListener(IOErrorEvent.IO_ERROR, xmlError);
\nprocXML();
\n}
\nprivate function procXML():void {
\nvar j:int;
\n_numPics=xmlContent.tile.length();
\nthumbsToLoad=[];
\n_bmpDataVec=new Vector.<BitmapData>(_numPics);
\n_picsVec=new Vector.<String>(_numPics);
\n_capsVec=new Vector.<String>(_numPics);
\nfor(j=0;j<_numPics;j++){<\/p>\n

thumbsToLoad.push(xmlContent.tile[j].thumb.toString());
\n_picsVec[j]=xmlContent.tile[j].pic.toString();
\n_capsVec[j]=xmlContent.tile[j].cap.toString();
\n}
\nthumbsLoader=new ThumbsLoader();
\nthumbsLoader.addEventListener(ThumbsLoader.IMGS_LOADED,imgsDone);
\nthumbsLoader.addEventListener(ThumbsLoader.LOAD_ERROR,imgsError);
\nthumbsLoader.loadImgs(thumbsToLoad);
\n}
\nprivate function imgsError(e:Event):void {
\ndispatchEvent(new Event(GalleryLoader.IMGSLOAD_ERROR));
\n}
\nprivate function imgsDone(e:Event):void {
\nvar j:int;
\nthumbsLoader.removeEventListener(ThumbsLoader.IMGS_LOADED,imgsDone);
\nthumbsLoader.removeEventListener(ThumbsLoader.LOAD_ERROR,imgsError);
\nfor(j=0;j<_numPics;j++){
\n_bmpDataVec[j]=thumbsLoader.bitmapsArray[j].clone();
\nthumbsLoader.bitmapsArray[j].dispose();
\n}
\ndispatchEvent(new Event(GalleryLoader.ALL_LOADED));
\n}
\nprivate function xmlError(e:IOErrorEvent):void {
\ndispatchEvent(new Event(GalleryLoader.XMLLOAD_ERROR));
\n}
\npublic function get bmpDataVec():Vector.<BitmapData> {
\nreturn _bmpDataVec;
\n}
\npublic function get picsVec():Vector.<String> {
\nreturn _picsVec;
\n}
\npublic function get capsVec():Vector.<String> {
\nreturn _capsVec;
\n}
\npublic function get numPics():int {
\nreturn _numPics;
\n}}}<\/p>\n

Write the following code in ThumbLoader.as file:<\/p>\n

package com.ascript.loaders {
\nimport flash.display.Loader;
\nimport flash.display.Bitmap;
\nimport flash.display.BitmapData;
\nimport flash.events.Event;
\nimport flash.events.EventDispatcher;
\nimport flash.events.IOErrorEvent;
\nimport flash.net.URLRequest;
\npublic\u00a0 class ThumbsLoader extends EventDispatcher {
\npublic static const IMGS_LOADED:String = “imgsLoaded”;
\npublic static const LOAD_ERROR:String = “loadError”;
\nprivate var loadersArray:Array;
\nprivate var numImgs:int;
\nprivate var numLoaded:int;
\nprivate var isError:Boolean;
\nprivate var _bitmapsArray:Array;
\nprivate var loadCanRun:Boolean;
\npublic function ThumbsLoader(){
\nthis.loadCanRun=true;
\n}
\npublic function loadImgs(imgsFiles:Array):void {
\nif(loadCanRun){
\nloadCanRun=false;
\nnumLoaded=0;
\nisError=false;
\nnumImgs=imgsFiles.length;
\n_bitmapsArray=[];
\nloadersArray=[];
\nfor(var i:int=0;i<numImgs;i++){
\nloadersArray[i]=new Loader();
\nloadersArray[i].contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);<\/p>\n

loadersArray[i].contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorOccured);
\nloadersArray[i].load(new URLRequest(imgsFiles[i]));
\n}
\n}
\n}
\nprivate function imgLoaded(e:Event):void {
\nnumLoaded+=1;
\ncheckLoadStatus();
\n}
\nprivate function errorOccured(e:IOErrorEvent):void {
\nisError=true;
\ndispatchEvent(new Event(ThumbsLoader.LOAD_ERROR));
\n}
\nprivate function checkLoadStatus():void {
\nvar i:int;
\nif(numLoaded==numImgs && isError==false){
\nfor(i=0;i<numImgs;i++){
\n_bitmapsArray[i]=Bitmap(loadersArray[i].content).bitmapData;
\n}
\nfor(i=0;i<numImgs;i++){ \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0loadersArray[i].contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, errorOccured);
\nloadersArray[i].contentLoaderInfo.removeEventListener(Event.COMPLETE, imgLoaded);
\nloadersArray[i]=null;
\n}<\/p>\n

loadersArray=[];
\nloadCanRun=true;
\ndispatchEvent(new Event(ThumbsLoader.IMGS_LOADED));
\n}
\n}
\npublic function get bitmapsArray():Array {
\nreturn _bitmapsArray;
\n}
\n}
\n}<\/p>\n

Step 7: Open a xml file, save it as gallery and write the following code:<\/p>\n

<gallery>
\n<tile>
\n<thumb>Pictures\/Image1_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image1.jpg<\/pic>
\n<cap>Natural Beauty<\/cap>
\n<\/tile>
\n<tile>
\n<thumb>Pictures\/Image2_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image2.jpg<\/pic>
\n<cap>Seashore in the dusk<\/cap>
\n<\/tile>
\n<tile>
\n<thumb>Pictures\/Image3_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image3.jpg<\/pic>
\n<cap>Seashore<\/cap>
\n<\/tile>
\n<tile>
\n<thumb>Pictures\/Image4_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image4.jpg<\/pic>
\n<cap>Green way<\/cap>
\n<\/tile>
\n<tile>
\n<thumb>Pictures\/Image5_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image5.jpg<\/pic>
\n<cap>Grass Bed<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image6_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image6.jpg<\/pic>
\n<cap>Umbrella Tree<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image7_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image7.jpg<\/pic>
\n<cap>Moon at night<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image8_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image8.jpg<\/pic>
\n<cap>winter sun<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image9_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image9.jpg<\/pic>
\n<cap>Mountain<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image10_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image10.jpg<\/pic>
\n<cap>Root House<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image11_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image11.jpg<\/pic>
\n<cap>Amazing House<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image12_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image12.jpg<\/pic>
\n<cap>Spring<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image13_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image13.jpg<\/pic>
\n<cap>Sea Rock<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image14_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image14.jpg<\/pic>
\n<cap>Mountain View<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image15_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image15.jpg<\/pic>
\n<cap>Blue Sea<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image16_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image16.jpg<\/pic>
\n<cap>Desert<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image17_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image17.jpg<\/pic>
\n<cap>Thunder<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image18_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image18.jpg<\/pic>
\n<cap>Greeny Island<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image19_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image19.jpg<\/pic>
\n<cap>Squirrel<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image20_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image20.jpg<\/pic>
\n<cap>Mountain House<\/cap>
\n<\/tile>
\n<tile>
\n<thumb>Pictures\/Image21_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image21.jpg<\/pic>
\n<cap>Sea heart<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image22_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image22.jpg<\/pic>
\n<cap>Mountain<\/cap>
\n<\/tile>
\n<tile>
\n<thumb>Pictures\/Image23_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image23.jpg<\/pic>
\n<cap>Sunset<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image24_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image24.jpg<\/pic>
\n<cap>Lavender Flower<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image25_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image25.jpg<\/pic>
\n<cap>Village Life<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image26_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image26.jpg<\/pic>
\n<cap>Grass Tree<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image27_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image27.jpg<\/pic>
\n<cap>Golden Grass<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image28_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image28.jpg<\/pic>
\n<cap>Evening Sky<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image29_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image29.jpg<\/pic>
\n<cap>Cloud Formation<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image30_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image30.jpg<\/pic>
\n<cap>Bacterial Flower<\/cap>
\n<\/tile><tile>
\n<thumb>Pictures\/Image31_thumbnail.jpg<\/thumb>
\n<pic>Pictures\/Image31.jpg<\/pic>
\n<cap>Rainbow Sky<\/cap>
\n<\/tile>
\n<\/gallery><\/p>\n

Now run the program.<\/p>\n","protected":false},"excerpt":{"rendered":"

Step 1: Open a new a document in flash Actionscript 3.0 in the size of 525X450 PX. Step 2: Set up the BG color as black or needed color. Step 3: Paste the following code in Layer-1, first Keyframe by giving F9 to open the actionacript panel: import fl.transitions.*; import fl.transitions.easing.*; import flash.display.Bitmap; import flash.display.BitmapData; […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[39,38],"class_list":["post-606","post","type-post","status-publish","format-standard","hentry","category-flash","tag-flash-action-script","tag-flash-vibrating-gallery"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=606"}],"version-history":[{"count":50,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/606\/revisions"}],"predecessor-version":[{"id":733,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/606\/revisions\/733"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}