as3 Scaling Image Gallery

Published on August 16, 2009 in Actionscript, Download, Flash and Tutorials. 6 Comments Tags: , , , , .

I remember ~5-6 years ago when I decide to make my first flash components using actionscript only, scaling image slideshow was one of them.
I got lots of feedback, comments and after that I start my freelance flash development carrier.
In fact, the slideshows, galleries are the flash elements that I'm using almost in all flash projects/websites, so I think it might be useful to share some code for scaling image gallery.

It's more like slimbox, shadowbox js image plugins u can see now-days.
Please comment for any additional features, suggestions and bugs. I'll try to find a time and take a look.

Example(click to the image for the preview-new window):
scgallery_preview

public properties:

PLAIN TEXT
Actionscript:
  1. public var easeType : Function
  2. public var transitionDuration : Number
  3. public var fadeDuration : Number
  4. public function set borderColor(pColor : Number) : void
  5. public function get borderColor() : Number
  6. public function set borderThickness(pThickness : Number) : void
  7. public function get borderThickness() : Number
  8. public function set controlsVOffset(pOffset : Number) : void
  9. public function get controlsVOffset() : Number
  10. public function set boundingRect(pArea : Rectangle) : void
  11. public function set slideshowMode(pMode : Boolean) : void
  12. public function get slideshowMode() : Boolean

public methods:

PLAIN TEXT
Actionscript:
  1. public function nextImage() : void
  2. public function prevImage() : void
  3. public function loadImage(pIndex : uint = 1) : void
  4. public function hide() : void
  5. public function destroy() : void
  6. public function setData(pData : XMLList) : void
  7. public function loadData(pDataLocation : String) : void

events:

PLAIN TEXT
Actionscript:
  1. ScGallery.TRANSITION_START
  2. ScGallery.TRANSITION_COMPLETE
  3. ScGallery.TRANSITION_UPDATE
  4. ScGallery.LOAD_START
  5. ScGallery.LOAD_COMPLETE
  6. ScGallery.SLIDESHOW_COMPLETE
  7. ScGallery.ON_HIDE

ScGallery.as

PLAIN TEXT
Actionscript:
  1. package com.abrahamyan.liquid
  2. {
  3.     import flash.events.TimerEvent;
  4.     import flash.utils.Timer;
  5.     import flash.geom.ColorTransform;
  6.     import flash.geom.Rectangle;
  7.     import flash.events.MouseEvent;
  8.     import flash.text.TextFieldAutoSize;
  9.     import flash.display.Bitmap;
  10.     import flash.display.Loader;
  11.     import flash.net.URLRequest;
  12.     import flash.events.IOErrorEvent;
  13.     import flash.events.Event;
  14.     import flash.net.URLLoader;
  15.     import flash.display.SimpleButton;
  16.     import flash.display.MovieClip;
  17.     import flash.display.Sprite;
  18.  
  19.     import gs.TweenLite;
  20.     import gs.easing.*;
  21.     import gs.OverwriteManager;
  22.  
  23.     /**
  24.      * @author armen abrahamyan | http://abrahamyan.com | armflash (at) gmail.com
  25.      * v 1.00
  26.      */
  27.     public class ScGallery extends Sprite
  28.     {
  29.         public static const TRANSITION_START : String = "transition_start";
  30.         public static const TRANSITION_COMPLETE : String = "transition_complete";
  31.         public static const TRANSITION_UPDATE : String = "transition_update";
  32.         public static const LOAD_START : String = "load_start";
  33.         public static const LOAD_COMPLETE : String = "load_complete";
  34.         public static const SLIDESHOW_COMPLETE : String = "slideshow_complete";
  35.         public static const ON_HIDE : String = "on_hide";
  36.         public static const HOR_BORDER_WIDTH : Number = 15;
  37.         public static const TOP_BORDER_WIDTH : Number = 30;
  38.         public static const BOTTOM_BORDER_WIDTH : Number = 10;
  39.         public static const VERT_ITEM_SPACE : Number = 10;
  40.         public var easeType : Function = Strong.easeOut;
  41.         public var transitionDuration : Number = 1;
  42.         public var fadeDuration : Number = .5;
  43.         private var _slideshowMode : Boolean;
  44.         private var _slideInterval : Number = 2;
  45.         private var _controlsVOffset : Number = 100;
  46.         private var _borderThickness : Number = 2;
  47.         private var _borderColor : Number = 0xcccccc;
  48.         private var _border : MovieClip;
  49.         private var _prev_btn : MovieClip;
  50.         private var _next_btn : MovieClip;
  51.         private var _close_btn : SimpleButton;
  52.         private var _info_mc : MovieClip;
  53.         private var _holder : MovieClip;
  54.         private var _bg : MovieClip;
  55.         private var _data : XMLList;
  56.         private var _dataLength : uint;
  57.         private var _dataLoader : URLLoader;
  58.         private var _imageLoader : Loader;
  59.         private var _circleLoader : MovieClip;
  60.         private var _currentIndex : uint;
  61.         private var _image : Bitmap;
  62.         private var _onResize : Boolean;
  63.         private var _onLoad : Boolean;
  64.         private var _areaRect : Rectangle;
  65.         private var _updateTimer : Timer;
  66.        
  67.         /**
  68.          * @param pArea outer rect area
  69.          */
  70.         public function ScGallery(pArea : Rectangle = null)
  71.         {
  72.             init(pArea);
  73.         }
  74.         /**
  75.          * sets border color
  76.          * @param pColor
  77.          */
  78.         public function set borderColor(pColor : Number) : void
  79.         {
  80.             _borderColor = pColor;
  81.             var transform : ColorTransform = new ColorTransform();
  82.             transform.color = _borderColor;
  83.             _border.transform.colorTransform = transform;
  84.         }
  85.         /**
  86.          * returns border color
  87.          */
  88.         public function get borderColor() : Number
  89.         {
  90.             return _borderColor;
  91.         }
  92.         /**
  93.          * set border thickness
  94.          * @param pThinkness
  95.          */
  96.         public function set borderThickness(pThickness : Number) : void
  97.         {
  98.             _borderThickness = pThickness;
  99.             _border.x = _holder.x - _borderThickness;
  100.             _border.y = _holder.y - _borderThickness;
  101.         }
  102.         /**
  103.          * returns border thickness
  104.          */
  105.         public function get borderThickness() : Number
  106.         {
  107.             return _borderThickness;
  108.         }
  109.         /**
  110.          * set vertical offset of controls
  111.          * @param pOffset
  112.          */
  113.         public function set controlsVOffset(pOffset : Number) : void
  114.         {
  115.             _controlsVOffset = pOffset;
  116.             _next_btn.y = _prev_btn.y = _controlsVOffset;
  117.         }
  118.         /**
  119.          * returns controls vertical offset
  120.          */
  121.         public function get controlsVOffset() : Number
  122.         {
  123.             return _controlsVOffset;
  124.         }
  125.         /**
  126.          * sets outer bounding rect, Scgallery will position itself inside bounding rect (center)
  127.          * @param pArea
  128.          */
  129.         public function set boundingRect(pArea : Rectangle) : void
  130.         {
  131.             _areaRect = pArea;
  132.             this.x = _areaRect.x + (_areaRect.width - this.width) * .5;
  133.             this.y = _areaRect.y + (_areaRect.height - this.height) * .5;
  134.             _border.x = _holder.x - _borderThickness;
  135.             _border.y = _holder.y - _borderThickness;
  136.             _border.width = _holder.width + 2 * _borderThickness;
  137.             _border.height = _holder.height + 2 * _borderThickness;
  138.         }
  139.         /**
  140.          * sets slideshow mode
  141.          * @param pMode
  142.          *
  143.          */
  144.         public function set slideshowMode(pMode : Boolean) : void
  145.         {
  146.             _slideshowMode = pMode;
  147.             if(_slideshowMode)
  148.             {
  149.                 if(!(_onLoad || _onResize))
  150.                 {
  151.                     nextImage();
  152.                 }
  153.             }
  154.             else
  155.             {
  156.                 if(_updateTimer)
  157.                 {
  158.                     resetUpdateTimer();
  159.                 }
  160.             }
  161.         }
  162.         /**
  163.          * returns slideshow mode
  164.          */
  165.         public function get slideshowMode() : Boolean
  166.         {
  167.             return _slideshowMode;
  168.         }
  169.         /**
  170.          * start loading next image
  171.          */
  172.         public function nextImage() : void
  173.         {
  174.             if(_currentIndex <_dataLength)
  175.             {
  176.                 loadImage(++_currentIndex);
  177.             }
  178.         }
  179.         /**
  180.          * start loading prev image
  181.          */
  182.         public function prevImage() : void
  183.         {
  184.             if(_currentIndex> 1)
  185.             {
  186.                 loadImage(--_currentIndex);
  187.             }
  188.         }
  189.         /**
  190.          * hides ScGallery
  191.          */
  192.         public function hide() : void
  193.         {
  194.             destroy();
  195.             TweenLite.to(this, fadeDuration, {alpha:0, onComplete:onFadeOutComplete});
  196.         }
  197.         /**
  198.          * cleanup/remove listeners, use it before deleteing class instance ref
  199.          */
  200.         public function destroy() : void
  201.         {
  202.             _next_btn.removeEventListener(MouseEvent.CLICK, onControlsClick);
  203.             _prev_btn.removeEventListener(MouseEvent.CLICK, onControlsClick);
  204.             _close_btn.removeEventListener(MouseEvent.CLICK, onControlsClick);
  205.             _holder.removeEventListener(MouseEvent.MOUSE_OVER, onHolderOver);
  206.             _holder.removeEventListener(MouseEvent.MOUSE_OUT, onHolderOut);
  207.             _holder.removeEventListener(MouseEvent.MOUSE_MOVE, onHolderMove);
  208.             if(_updateTimer)
  209.             {
  210.                 resetUpdateTimer();
  211.             }
  212.         }
  213.         /**
  214.          * when fade out complete dispatchs ON_HIDE event
  215.          */
  216.         private function onFadeOutComplete() : void
  217.         {
  218.             dispatchEvent(new Event(ON_HIDE));
  219.         }
  220.         /**
  221.          * init
  222.          */
  223.         private function init(pArea : Rectangle = null) : void
  224.         {
  225.            
  226.             _border = this['border_mc'];
  227.             _prev_btn = this['prev_mc'];
  228.             _next_btn = this['next_mc'];
  229.             _close_btn = this['close_btn'];
  230.             _info_mc = this['info_mc'];
  231.             _holder = this['holder_mc'];
  232.             _bg = this['bg_mc'];
  233.            
  234.             if(pArea)
  235.             {
  236.                 boundingRect = pArea;
  237.             }
  238.             controlsVOffset = _controlsVOffset;
  239.             borderColor = _borderColor;
  240.             _next_btn.buttonMode = _prev_btn.buttonMode = true;
  241.            
  242.             _info_mc.description_txt.autoSize = TextFieldAutoSize.RIGHT;
  243.             _next_btn.addEventListener(MouseEvent.CLICK, onControlsClick);
  244.             _prev_btn.addEventListener(MouseEvent.CLICK, onControlsClick);
  245.             _close_btn.addEventListener(MouseEvent.CLICK, onControlsClick);
  246.             _holder.addEventListener(MouseEvent.MOUSE_OVER, onHolderOver);
  247.             _holder.addEventListener(MouseEvent.MOUSE_OUT, onHolderOut);
  248.            
  249.             OverwriteManager.init(OverwriteManager.NONE);
  250.         }
  251.         /**
  252.          * on holde rmouseover
  253.          */
  254.         private function onHolderOver(event : MouseEvent) : void
  255.         {
  256.            
  257.             if(_onLoad || _onResize)
  258.             {
  259.                 return;
  260.             }
  261.            
  262.             _holder.addEventListener(MouseEvent.MOUSE_MOVE, onHolderMove);
  263.         }
  264.         /**
  265.          * on holder mouse out
  266.          */
  267.         private function onHolderOut(event : MouseEvent) : void
  268.         {
  269.             if(_holder.hitTestPoint(stage.mouseX, stage.mouseY, true))
  270.             {
  271.                
  272.                 return;
  273.             }
  274.             _next_btn.visible = false;
  275.             _prev_btn.visible = false;
  276.             _holder.removeEventListener(MouseEvent.MOUSE_MOVE, onHolderMove);
  277.         }
  278.         /**
  279.          * onholder mouse move
  280.          */
  281.         private function onHolderMove(event : MouseEvent) : void
  282.         {
  283.             if(event.localX> _holder.width * .5)
  284.             {
  285.                 if(_currentIndex != _dataLength)
  286.                 _next_btn.visible = true;
  287.                 _prev_btn.visible = false;
  288.             }
  289.             else
  290.             {
  291.                
  292.                 _next_btn.visible = false;
  293.                 if(_currentIndex != 1)
  294.                 _prev_btn.visible = true;
  295.             }
  296.         }
  297.         /**
  298.          * enable/disable controls
  299.          * @param pEnabled
  300.          */
  301.         private function enableControls(pEnabled : Boolean = true) : void
  302.         {
  303.             _next_btn.mouseEnabled = _prev_btn.mouseEnabled = _close_btn.mouseEnabled = pEnabled;
  304.         }
  305.         /**
  306.          * on controls click
  307.          */
  308.         private function onControlsClick(event : MouseEvent) : void
  309.         {
  310.             switch(event.target)
  311.             {
  312.                 case _next_btn:
  313.                     slideshowMode = false;
  314.                     nextImage();
  315.                     break;
  316.                 case _prev_btn:
  317.                     slideshowMode = false;
  318.                     prevImage();
  319.                     break;
  320.                 case _close_btn:
  321.                     hide();
  322.                     break;
  323.             }
  324.             _next_btn.visible = false;
  325.             _prev_btn.visible = false;
  326.             _holder.removeEventListener(MouseEvent.MOUSE_MOVE, onHolderMove);
  327.         }
  328.         /**
  329.          * set data directly, calls build method automatically
  330.          * @param pData
  331.          */
  332.         public function setData(pData : XMLList) : void
  333.         {
  334.             _data = pData;
  335.             _dataLength = _data.length();
  336.            
  337.             if(_updateTimer)
  338.             {
  339.                 resetUpdateTimer();
  340.             }
  341.            
  342.             build();
  343.         }
  344.         /**
  345.          * loads XML data from url, will use setData after load complete
  346.          */
  347.         public function loadData(pDataLocation : String) : void
  348.         {
  349.             _dataLoader = new URLLoader();
  350.             _dataLoader.addEventListener(Event.COMPLETE, onDataLoaded);
  351.             _dataLoader.addEventListener(IOErrorEvent.IO_ERROR, onDataLoadError);
  352.             _dataLoader.load(new URLRequest(pDataLocation));
  353.         }
  354.         /**
  355.          *
  356.          */
  357.         private function onDataLoadError(event : IOErrorEvent) : void
  358.         {
  359.             trace("XML load error");
  360.         }
  361.         /**
  362.          * when data is loaded
  363.          */
  364.         private function onDataLoaded(event : Event) : void
  365.         {
  366.             setData(XML(event.target.data).image);
  367.             _dataLoader.removeEventListener(Event.COMPLETE, onDataLoaded);
  368.             _dataLoader.removeEventListener(IOErrorEvent.IO_ERROR, onDataLoadError);
  369.             _dataLoader = null;
  370.         }
  371.         /**
  372.          * shows simple circle loader animation
  373.          */
  374.         private function showCircleLoader() : void
  375.         {
  376.             _circleLoader = new CircleLoader();
  377.             _circleLoader.x = _holder.x + _holder.width * .5;
  378.             _circleLoader.y = _holder.y + _holder.height * .5;
  379.             addChild(_circleLoader);
  380.         }
  381.         /**
  382.          * hides circle laoder
  383.          */
  384.         private function hideCircleLoader() : void
  385.         {
  386.             if(_circleLoader)
  387.             {
  388.                 removeChild(_circleLoader);
  389.                 _circleLoader = null;
  390.             }
  391.         }
  392.         /**
  393.          * loads first image
  394.          */
  395.         private function build() : void
  396.         {
  397.            
  398.             if(!_areaRect)
  399.             {
  400.                 _areaRect = new Rectangle(0, 0, 800, 800);
  401.             }
  402.            
  403.             loadImage();
  404.         }
  405.         /**
  406.          * loads image with pIndex number
  407.          * @param pIndex
  408.          */
  409.         public function loadImage(pIndex : uint = 1) : void
  410.         {
  411.             _currentIndex = pIndex;
  412.             showCircleLoader();
  413.             enableControls(false);
  414.             _onLoad = true;
  415.             _info_mc.alpha = 0;
  416.             _info_mc.visible = false;
  417.             _close_btn.visible = false;
  418.             _close_btn.alpha = 0;
  419.             _holder.alpha = 0;
  420.             _border.alpha = 0;
  421.             _next_btn.visible = _prev_btn.visible = false;
  422.            
  423.             _imageLoader = new Loader();
  424.             _imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
  425.             _imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onImageLoadError);
  426.            
  427.             _imageLoader.load(new URLRequest(_data[_currentIndex - 1].@src.toString()));
  428.             dispatchEvent(new Event(LOAD_START));
  429.         }
  430.         /**
  431.          *
  432.          */
  433.         private function onImageLoadError(event : IOErrorEvent) : void
  434.         {
  435.             _imageLoader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, onImageLoadError);
  436.             trace("image load error");
  437.         }
  438.         /**
  439.          * when image is loaded
  440.          */
  441.         private function onImageLoaded(event : Event) : void
  442.         {
  443.             _imageLoader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, onImageLoadError);
  444.             _imageLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onImageLoaded);
  445.             if(_holder.numChildren> 0)
  446.             _holder.removeChildAt(0);
  447.            
  448.             hideCircleLoader();
  449.             _image = _imageLoader.content as Bitmap;
  450.             _imageLoader = null;
  451.             //
  452.             _border.width = _image.width + 2 * _borderThickness;
  453.             _border.height = _image.height + 2 * _borderThickness;
  454.             _info_mc.y = TOP_BORDER_WIDTH + _image.height + VERT_ITEM_SPACE;
  455.             _info_mc.title_txt.width = _image.width;
  456.             _info_mc.description_txt.width = _image.width;
  457.             _info_mc.count_txt.width = _image.width;
  458.             _info_mc.title_txt.text = _data[_currentIndex - 1].title.toString();
  459.            
  460.             _info_mc.description_txt.text = _data[_currentIndex - 1].description.toString();
  461.             _info_mc.count_txt.y = _info_mc.description_txt.y + _info_mc.description_txt.textHeight + VERT_ITEM_SPACE;
  462.             _info_mc.count_txt.text = "img " + _currentIndex + " / " + _dataLength;
  463.             _close_btn.x = HOR_BORDER_WIDTH + _image.width - _close_btn.width;
  464.             _next_btn.x = HOR_BORDER_WIDTH + _image.width - _next_btn.width;
  465.             dispatchEvent(new Event(LOAD_COMPLETE));
  466.             resize();
  467.             _onLoad = false;
  468.            
  469.         }
  470.         /**
  471.          * resize
  472.          */
  473.         private function resize() : void
  474.         {
  475.             _onResize = true;
  476.             dispatchEvent(new Event(TRANSITION_START));
  477.             TweenLite.to(_bg, transitionDuration, {width:_image.width + 2 * HOR_BORDER_WIDTH, height:_image.height + TOP_BORDER_WIDTH + VERT_ITEM_SPACE + BOTTOM_BORDER_WIDTH + _info_mc.height, ease:easeType, onComplete:onResizeComplete, onUpdate :o nResizeUpdate});
  478.         }
  479.         /**
  480.          * resize is in process
  481.          */
  482.         private function onResizeUpdate() : void
  483.         {
  484.             this.x = _areaRect.x + (_areaRect.width - _bg.width) * .5;
  485.             this.y = _areaRect.y + (_areaRect.height - _bg.height) * .5;
  486.             dispatchEvent(new Event(TRANSITION_UPDATE));
  487.         }
  488.         /**
  489.          * when resize complete
  490.          */
  491.         private function onResizeComplete() : void
  492.         {
  493.             this.x = Math.round(this.x);
  494.             this.y = Math.round(this.y);
  495.             _holder.addChild(_image);
  496.            
  497.             TweenLite.to(_holder, fadeDuration, {alpha:1, onComplete:onFadeComplete});
  498.             TweenLite.to(_border, fadeDuration, { alpha:1});
  499.             TweenLite.to(_info_mc, fadeDuration, {autoAlpha:1});
  500.             TweenLite.to(_close_btn, fadeDuration, {autoAlpha:1});
  501.             _onResize = false;
  502.         }
  503.         /**
  504.          * when fade in complete
  505.          */
  506.         private function onFadeComplete() : void
  507.         {
  508.             enableControls();
  509.             dispatchEvent(new Event(TRANSITION_COMPLETE));
  510.             if(_slideshowMode)
  511.             {
  512.                 if(_currentIndex == _dataLength )
  513.                 {
  514.                     slideshowMode = false;
  515.                     dispatchEvent(new Event(SLIDESHOW_COMPLETE));
  516.                     return;
  517.                 }
  518.                 _updateTimer = new Timer(_slideInterval * 1000, 1);
  519.                 _updateTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onSlideTimerComplete);
  520.                 _updateTimer.start();
  521.             }
  522.         }
  523.         /**
  524.          * on slideshow timer complete
  525.          */
  526.         private function onSlideTimerComplete(event : TimerEvent) : void
  527.         {
  528.             resetUpdateTimer();
  529.             nextImage();
  530.         }
  531.         /**
  532.          * reset timer
  533.          */
  534.         private function resetUpdateTimer() : void
  535.         {
  536.            
  537.             _updateTimer.removeEventListener(TimerEvent.TIMER_COMPLETE, onSlideTimerComplete);
  538.             _updateTimer = null;
  539.         }
  540.     }
  541. }

how to use:
copy slideshow folder from FLA files library to ur FLA's library.
copy gs and com folders (with sub folders) to the same directory as ur FLA file, or copy anywhere else and include them in ur FLA files class path.
use xml provided in example as a template to describe data for your Scgallery:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <images>
  3.     <image src="images/img1.jpg">
  4.         <title>title 1</title>
  5.         <description>description1</description>
  6.     </image>
  7.     <image src="images/img2.jpg">
  8.         <title>title 2</title>
  9.         <description>description 2description 2 description 2description 2description 2description 2description 2description 2description 2 description 2 description 2description 2description 2description 2description 2description 2description 2 end</description>
  10.     </image>
  11.     <image src="images/img3.jpg">
  12.         <title>title 3</title>
  13.         <description>description3</description>
  14.     </image>
  15.     <image src="images/img4.jpg">
  16.         <title>title 4</title>
  17.         <description>description4</description>
  18.     </image>
  19.  
  20. </images>

In the FLA file or in your document class call ScGallery as here:

PLAIN TEXT
Actionscript:
  1. import flash.geom.Rectangle;
  2. import com.abrahamyan.liquid.ScGallery;
  3. import flash.display.MovieClip;
  4. var _gallery:ScGallery;
  5. _gallery =new ScGallery(new Rectangle(0,0,800,600));
  6. addChild(_gallery);
  7. _gallery.loadData("xml/data.xml");

Download source files

Bookmark and Share

Releated Posts

6 Responses to “as3 Scaling Image Gallery”

Feed for this Entry Trackback Address
  • Yugi
    August 17, 2009 at 9:16 am

    As always, very nice post. Thanks for sharing the code.

  • F2nd
    August 22, 2009 at 7:14 pm

    Excellent gallery, Armen and something to learn from. I can’t find anything I don’t like, maybe just some design tweaks like semi-transparent navigation arrows, but functionality is just fine.

  • Jinjaninja
    September 21, 2009 at 2:56 pm

    Awesome post. Made my day much simpler. Your attention to detail with your commenting is superb makes it crystal clear what’s happening when. Keep up the good work.

  • Everin
    November 19, 2009 at 10:01 pm

    Very nice work Abraham.

    To implement category, draw to buttons (or 1000) and on key frame one:

    /////// remove all //////////

    addEventListener(Event.ENTER_FRAME,myEnterFrame);
    function myEnterFrame(event:Event) {
    if ( _gallery ){
    _gallery.removeEventListener(ScGallery.ON_HIDE, onGalleryHide);
    removeChild(_gallery);
    _gallery =null;
    }
    }
    ////////////// end remove all /////////////////

    /////////////// buttons //////////

    unu_btn.buttonMode = true;
    unu_btn.addEventListener(MouseEvent.CLICK, Load_Gallery);

    function Load_Gallery(event : MouseEvent) : void {

    removeEventListener(Event.ENTER_FRAME,myEnterFrame); // STOP THIS LISTENER
    _gallery =new ScGallery(new Rectangle(0,0,800,600));
    _gallery.addEventListener(ScGallery.ON_HIDE, onGalleryHide);
    addChild(_gallery);
    _gallery.loadData(“xml/portraits.xml”);

    }
    // repetate the code for button two //

    doi_btn.buttonMode = true;
    doi_btn.addEventListener(MouseEvent.CLICK, Load_Gallery2);

    function Load_Gallery2(event : MouseEvent) : void {
    removeEventListener(Event.ENTER_FRAME,myEnterFrame); // STOP THIS LISTENER
    _gallery =new ScGallery(new Rectangle(0,0,800,600));
    _gallery.addEventListener(ScGallery.ON_HIDE, onGalleryHide);
    addChild(_gallery);
    _gallery.loadData(“xml/data.xml”);

    }
    ///////////////////////////////////////////////////////////////

    Duplicate the data.xml and rename it for each buttons, is pretty self explanatory.

    Have a nice day,

  • alex
    January 23, 2011 at 2:33 pm

    You saved my life with this gallery. Thanks a lot Armen.

    I just need a tiny help. Is it possible to open the gallery in a specific image like having a thumb menu and opening the gal with that selected image? is it???

    Thanks a lot man.

  • armen
    January 24, 2011 at 10:28 am

    @alex, I believe “public function loadImage(pIndex : uint = 1) : void” is what u are looking for.

    if that will not help, u can add inside ScGallery.as:
    public var defIndex:Number=1;
    and change inside build() method: loadImage(defIndex);

    When u start gallery u can change that variable:
    _gallery = new ScGallery(new Rectangle(0,0,800,600));
    _gallery.defIndex =3;
    after that gallery will start from 3 th image.
    thx

Leave a Reply