Action Script 21 Jul 2006 08:44 am

Slide Show Class for Dynamic Image Gallery updated

(Visited 8633 times)

May be you already read my post about Slide Show Class for Dyanmic Image Gallery.
Now the class is update which are now has horizontal and vertical slide fx available.

PLAIN TEXT
Actionscript:
  1. //
  2. //  Slide Show Tween Class V2
  3. //
  4. class janumedia.fx.tween {
  5.    
  6.     private var mc:MovieClip; // target mc
  7.     private var mask1:MovieClip; // mask1
  8.     private var mask2:MovieClip; // mask2
  9.     private var img1:MovieClip; // mc1
  10.     private var img2:MovieClip; // mc2
  11.     private var border:MovieClip; // border mc
  12.     private var width:Number; // width
  13.     private var height:Number // height
  14.     private var orientation:String; // slide orientation
  15.     private var data:Array; // image gallery
  16.     private var speed:Number; // tween speed interval
  17.     private var cur:Number; // current play
  18.     private var tw:Boolean; // tween status
  19.     private var intervalID;
  20.    
  21.     function tween(t:MovieClip,d:Array,s:Number,o,w:Number,h:Number){
  22.         // t = movieclip target ; d = image list in array ; s = swening speed interval in sec ;
  23.         // o = orientation --> available : "alpha" => alpha, "x" => horizontal, "y" => vertical
  24.         // w = witdh , h = height
  25.         mc          = t.createEmptyMovieClip("mainSlide",t.getNextHighestDepth());;
  26.         data        = d;
  27.         speed       = s;
  28.         cur         = 0;
  29.         tw      = false;
  30.         width      = w;
  31.         height    = h;
  32.         orientation = o == undefined ? "alpha" : o;
  33.         prepared();
  34.     }
  35.     private function prepared(){
  36.         img1 = mc.createEmptyMovieClip("img1",10);
  37.         img2 = mc.createEmptyMovieClip("img2",9);
  38.         img1.createTextField("status",10,200,125,10,10);
  39.         img2.createTextField("status",10,200,125,10,10);
  40.        
  41.         // set masking if the value is available
  42.         if(width != undefined and height != undefined) addMask(mc,0,0,width,height);
  43.        
  44.         if(data.length>= 1){
  45.             var theImg = nextImage();
  46.             if(theImg != "" && theImg != undefined ){
  47.                 deleteNoImage(img1);
  48.                 loadImage(img1,theImg);
  49.             } else {
  50.                 noImage(img1);
  51.             }
  52.         }
  53.        
  54.         if(data.length>= 2){
  55.             var theImg = nextImage();
  56.             if(theImg != "" && theImg != undefined ){
  57.                 deleteNoImage(img2);
  58.                 loadImage(img2,theImg);
  59.             } else {
  60.                 noImage(img2);
  61.             }
  62.         }
  63.        
  64.     }
  65.     private function beginTween(n:MovieClip){
  66.         clearInterval(intervalID);
  67.         //trace("begin tween "+n);
  68.        
  69.         switch(n){
  70.             case img1 :
  71.                 img2.owner = this;
  72.                 img2.onEnterFrame = function(){ this.owner.doSlide(this); }
  73.                 break
  74.             case img2 :
  75.                 img1.owner = this;
  76.                 img1.onEnterFrame = function(){ this.owner.doSlide(this); }
  77.                 break;
  78.         }
  79.     }
  80.    
  81.     private function doSlide(t:MovieClip){
  82.        
  83.         switch(orientation){
  84.             case "alpha":
  85.                 //trace("tween for "+t._name);
  86.                 t._x = 0;
  87.                 t._y = 0;
  88.                 t._alpha -= speed;
  89.                 var otherImg = eval( t._name == "img1" ? img2 : img1 );
  90.                 with(otherImg){
  91.                     _x = 0;
  92.                     _y = 0;
  93.                 }
  94.                 if(t._alpha <= 0) {
  95.                     t.swapDepths(9);
  96.                     otherImg.swapDepths(10);
  97.                     delete t.onEnterFame;
  98.                     var theImg = nextImage();
  99.                     if(theImg != "" && theImg != undefined ){
  100.                         deleteNoImage(t);
  101.                         loadImage(t,theImg);
  102.                     } else {
  103.                         noImage(t);
  104.                     }
  105.                 }
  106.                 break;
  107.             case "x":
  108.                 t._y = 0;
  109.                 t._x -= speed;
  110.                 t._alpha = 100;
  111.                 var otherImg = eval( t._name == "img1" ? img2 : img1 );
  112.                 with(otherImg){
  113.                     _x = t._x + t._width;
  114.                     _y = 0;
  115.                     _alpha = 100;
  116.                 }
  117.                 if(t._x <= - t._width ) {
  118.                     delete t.onEnterFame;
  119.                     var theImg = nextImage();
  120.                     if(theImg != "" && theImg != undefined ){
  121.                         deleteNoImage(t);
  122.                         loadImage(t,theImg);
  123.                     } else {
  124.                         noImage(t);
  125.                     }
  126.                 }
  127.                 break;
  128.             case "y":
  129.                 t._x = 0;
  130.                 t._y -= speed;
  131.                 t._alpha = 100;
  132.                 var otherImg = eval( t._name == "img1" ? img2 : img1 );
  133.                 with(otherImg){
  134.                     _x = 0;
  135.                     _y = t._y + t._height;
  136.                     _alpha = 100;
  137.                 }
  138.                
  139.                 if(t._y <=  - t._height ) {
  140.                     delete t.onEnterFame;
  141.                     var theImg = nextImage();
  142.                     if(theImg != "" && theImg != undefined ){
  143.                         deleteNoImage(t);
  144.                         loadImage(t,theImg);
  145.                     } else {
  146.                         noImage(t);
  147.                     }
  148.                 }
  149.                 break;
  150.         }
  151.     }
  152.    
  153.     private function nextImage():String{
  154.         var n = cur;
  155.         cur++;
  156.         cur = cur>= data.length ? 0 : cur;
  157.         //trace("cur : "+cur+" : "+data[n]);
  158.         return data[n];
  159.     }
  160.    
  161.     private function loadImage(t:MovieClip,img){
  162.         //trace("load : "+img+" to : "+t);
  163.        
  164.         t._parent.status.autoSize = "center";
  165.         t._parent.status.embedFonts = true;
  166.         var fmt:TextFormat = new TextFormat();
  167.         fmt.font = "Arial"
  168.         t._parent.status.setTextFormat(fmt);
  169.        
  170.         var my_mcl = new MovieClipLoader();
  171.         var myListener = new Object(); 
  172.         myListener.owner = this;
  173.         myListener.onLoadComplete = function (tmc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
  174.             tmc._alpha = 100;
  175.             if(this.owner.tw) this.owner.intervalID = setInterval(this.owner,"beginTween",speed * 1000,tmc);
  176.             this.owner.tw = true;
  177.         }
  178.         myListener.onLoadProgress = function(tmc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
  179.             var a = Math.round((bytesLoaded/bytesTotal)*100);
  180.             t._parent.status.text = a+"%";
  181.             //trace("load progress ");
  182.         }
  183.         my_mcl.addListener(myListener);
  184.         my_mcl.loadClip(img, t);
  185.     }
  186.    
  187.     private function deleteNoImage(t:MovieClip){
  188.         removeMovieClip(t.noimage);
  189.     }
  190.    
  191.     private function noImage(t:MovieClip){
  192.         // trace("no image");
  193.         var x = 0;
  194.         var y = 0;
  195.         var w = 399;
  196.         var h = 250;
  197.         t.createEmptyMovieClip("noimage", 123456);
  198.         var mc = t.noimage;
  199.         with(mc){
  200.             beginFill(0xFFFFFF);
  201.             lineStyle(0, 0xC9C9C9);
  202.             moveTo(x, y);
  203.             lineTo(w, y);
  204.             lineTo(w, h);
  205.             lineTo(x, h);
  206.             lineTo(x, y);
  207.             endFill();
  208.         }
  209.         mc.createTextField("status",10,mc._width/2,(mc._height/2)-14,10,10);
  210.         with(mc.status){
  211.             autoSize    = "center";
  212.             text        = "no image";
  213.             embedFonts  = true;
  214.             selectable  = false;
  215.             textColor   = 0xC9C9C9;
  216.         }
  217.  
  218.         var fmt:TextFormat = new TextFormat();
  219.         with(fmt){
  220.             font        = "Arial"; 
  221.             size        = 14;
  222.         }
  223.         mc.status.setTextFormat(fmt);
  224.     }
  225.    
  226.     private function addMask(t:MovieClip,x,y,w:Number,h:Number){
  227.  
  228.         var mask = t.createEmptyMovieClip("mask_mc", t.getNextHighestDepth());
  229.         with(mask){
  230.             beginFill(0xFF0000);
  231.             moveTo(x, y);
  232.             lineTo(w, y);
  233.             lineTo(w, h);
  234.             lineTo(x, h);
  235.             lineTo(x, y);
  236.             endFill();
  237.         }
  238.         t.setMask(mask);
  239.     }
  240.    
  241.     public function move(x:Number,y:Number):Void{
  242.         mc._x = x;
  243.         mc._y = y;
  244.     }
  245.    
  246.     public function set mode(t:String){
  247.         orientation = t;
  248.     }
  249.    
  250.     public function drawBorder(s:Number,w:Number,h:Number,c):Void{
  251.         border = mc.createEmptyMovieClip("border_mc", mc.getNextHighestDepth());
  252.         with(border){
  253.             lineStyle(s,c);
  254.             moveTo(0, 0);
  255.             lineTo(w, 0);
  256.             lineTo(w, h);
  257.             lineTo(0, h);
  258.             lineTo(0, 0);
  259.         }
  260.     }
  261.    
  262.     public function clearBorder(s:Number,w:Number,h:Number,c):Void{
  263.         border.clear();
  264.     }
  265. }

How to use it? Simple is much the same as the old version all you need to add is the fx / orientation, also add masking if you want it.

PLAIN TEXT
Actionscript:
  1. // sample 1 vertical slide show
  2. var slideShow = new janumedia.fx.tween(this,["image1.jpg","image2.jpg"],1,"y",320,250);

PLAIN TEXT
Actionscript:
  1. // sample 2 horisonal slide show
  2. var slideShow = new janumedia.fx.tween(this,["image1.jpg","image2.jpg"],1,"x",320,250);

PLAIN TEXT
Actionscript:
  1. // sample 3 alpha fx slide show
  2. var slideShow = new janumedia.fx.tween(this,["image1.jpg","image2.jpg"],1,"alpha",320,250);

Online example and get source

12 Responses to “Slide Show Class for Dynamic Image Gallery updated”

  1. on 01 Oct 2006 at 4:40 pm 1.SpecialK said …

    is it possible to make a pause between each transitions ?

  2. on 04 Oct 2006 at 5:25 am 2.janu said …

    Well offcourse possible.
    since the tweening base onEnterFrame event you can put some variable there
    somekind like:

    PLAIN TEXT
    CODE:
    1. var pause:Boolean; // pause control;
    2. var btnPause:Movieclip = myPauseButtonmc;
    3. btnPause.onPress = function(){
    4.       pause = true;
    5. }
    6. var btnUnPause:Movieclip = myUnPauseButtonmc;
    7. btnUnPause.onPress = function(){
    8.       pause = false;
    9. }
    10. var t:MovieClip = someMovieClip;
    11. t.onEnterFrame = function(){
    12.      if(pause) {
    13.         //stop process wait until status changed
    14.         return;
    15.      } else {
    16.         //continue the process here
    17.         trace("process keep continue");
    18.      }
    19. }

  3. on 06 Oct 2006 at 3:29 pm 3.SpecialK said …

    thank you for your answer.
    But I want to make a pause without controller, like a setInterval...

  4. on 03 Jan 2007 at 3:55 am 4.mantra said …

    perkenalkan saya mantra,script di atas saya pengen terapkan di website saya bli , gimana caranya load xml data,dan pada thumbnail bisa ke detail page php yang saya pakai .mohon pencerahan

  5. on 17 Jan 2007 at 3:08 am 5.janumedia said …

    dear mantra. mohon maaf belakangan ini saya amat sibuk.
    soal penggunaan xml sebenernya beberapa temen sempat bertanya pada saya. hari ini saya upload versi load data dari xml filenya ada di http://janumedia.com/source/AS2/SlideShowClass-v2a.zip
    Good luck utk website dan art worknya :)

  6. on 05 Mar 2007 at 5:07 pm 6.Geraint said …

    Great Code thanks!

    How would i go about putting a pause between each transitions?

    Regards Geraint

  7. on 17 Mar 2007 at 11:04 am 7.Nicolas said …

    ¡Muy buen trabajo!
    Muchas gracias

  8. on 02 Apr 2007 at 10:41 am 8.sonny said …

    hallo mas,berapa image yang maksimal di tampung?

  9. on 19 Apr 2007 at 4:05 am 9.sam said …

    Great Class! I was wondering if it is possible to have the slideshow change image after a certain period of time instead of moving to the next image right away. Like a pause.

    Also, is it possible to have controllers? (next, previous, play/pause)

    Thanks in Advance.

  10. on 11 Jun 2007 at 5:11 pm 10.mario said …

    Hi Janumedia.

    Is there any chance you will be able to answer the questions regarding the pause between images?

    Thanks for the great class

  11. on 12 Jun 2007 at 6:34 pm 11.Janu said …

    Hi mario,
    sure it is possible, please read my reply commment above

  12. on 13 Dec 2007 at 2:47 pm 12.zsolt said …

    Hi Janu,

    I have also interest in putting a setinterval ( wait ) in the class, and not in the .fla with buttons

    Is it possible to change the loadImage function to wait 5 sec before the tween?

Trackback This Post | Subscribe to the comments through RSS Feed

Leave a Reply

You must be logged in to post a comment.