2 Replies Latest reply: Jun 19, 2012 5:02 PM by sinious RSS

    cs5 Advanced Photo Album Template Live Links

    signsupplies5

      I'm using this template as a "quick & dirty" content slider for my website. I got everything to work great, there's no issues with it's functionality or actionscript. I would just like to make each image a "clickable" link. I got 4 images that I want to take users to 4 separate webpages, I've searched and searched for answers but most are over my head. Is there anybody that could help me? Here's the actions:

       

      ****

      import fl.data.DataProvider;

      import fl.events.ListEvent;

      import fl.transitions.*;

      import fl.controls.*;

       

      // USER CONFIG SETTINGS =====

      var secondsDelay:Number = 7;

      var autoStart:Boolean = true;

      var transitionOn:Boolean = true; // true, false

      var transitionType:String = "Fade"; // Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, Zoom, Random

      var hardcodedXML:String="<photos><image title='Your Choice'>image1.jpg</image><image title='Quick Option'>image2.jpg</image><image title='New Product'>image3.jpg</image><image title='Get Started'>image4.jpg</image></photos>";

      // END USER CONFIG SETTINGS

       

      // DECLARE VARIABLES AND OBJECTS =====

      var imageList:XML = new XML();

      var currentImageID:Number = 0;

      var imageDP:DataProvider = new DataProvider();

      var slideshowTimer:Timer = new Timer((secondsDelay*1000), 0);

      // END DECLARATIONS

       

      // CODE FOR HARDCODED XML =====

      imageList = XML(hardcodedXML);

      fl_parseImageXML(imageList);

      // END CODE FOR HARDCODED XML

       

      // EVENTS =====

      imageTiles.addEventListener(ListEvent.ITEM_CLICK, fl_tileClickHandler);

      function fl_tileClickHandler(evt:ListEvent):void

      {

          imageHolder.imageLoader.source = evt.item.source;

          currentImageID = evt.item.imgID;

      }

      playPauseToggle_mc.addEventListener(MouseEvent.CLICK, fl_togglePlayPause);

      function fl_togglePlayPause(evt:MouseEvent):void

      {

          if(playPauseToggle_mc.currentLabel == "play")

          {

              fl_startSlideShow();

              playPauseToggle_mc.gotoAndStop("pause");

          }

          else if(playPauseToggle_mc.currentLabel == "pause")

          {

              fl_pauseSlideShow();

              playPauseToggle_mc.gotoAndStop("play");

          }

      }

      next_btn.addEventListener(MouseEvent.CLICK, fl_nextButtonClick);

      prev_btn.addEventListener(MouseEvent.CLICK, fl_prevButtonClick);

      function fl_nextButtonClick(evt:MouseEvent):void

      {

          fl_nextSlide();

      }

      function fl_prevButtonClick(evt:MouseEvent):void

      {

          fl_prevSlide();

      }

      slideshowTimer.addEventListener(TimerEvent.TIMER, fl_slideShowNext);

      function fl_slideShowNext(evt:TimerEvent):void

      {

          fl_nextSlide();

      }

      // END EVENTS

       

      // FUNCTIONS AND LOGIC =====

      function fl_parseImageXML(imageXML:XML):void

      {

          var imagesNodes:XMLList = imageXML.children();

          for(var i in imagesNodes)

          {

              var imgURL:String = imagesNodes[i];

              var imgTitle:String = imagesNodes[i].attribute("title");

              imageDP.addItem({label:imgTitle, source:imgURL, imgID:i});

          }

          imageTiles.dataProvider = imageDP;

          imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source;

          title_txt.text = imageDP.getItemAt(currentImageID).label;

      }

      function fl_startSlideShow():void

      {

          slideshowTimer.start();

      }

      function fl_pauseSlideShow():void

      {

          slideshowTimer.stop();

      }

      function fl_nextSlide():void

      {

          currentImageID++;

          if(currentImageID >= imageDP.length)

          {

              currentImageID = 0;

          }

          if(transitionOn == true)

          {

              fl_doTransition();

          }

          imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source;

          title_txt.text = imageDP.getItemAt(currentImageID).label;

      }

      function fl_prevSlide():void

      {

          currentImageID--;

          if(currentImageID < 0)

          {

              currentImageID = imageDP.length-1;

          }

          if(transitionOn == true)

          {

              fl_doTransition();

          }

          imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source;

          title_txt.text = imageDP.getItemAt(currentImageID).label;

      }

      function fl_doTransition():void

      {

          if(transitionType == "Blinds")

          {

              TransitionManager.start(imageHolder, {type:Blinds, direction:Transition.IN, duration:0.25});

          } else if (transitionType == "Fade")

          {

              TransitionManager.start(imageHolder, {type:Fade, direction:Transition.IN, duration:0.25});

          } else if (transitionType == "Fly")

          {

              TransitionManager.start(imageHolder, {type:Fly, direction:Transition.IN, duration:0.25});

          } else if (transitionType == "Iris")

          {

              TransitionManager.start(imageHolder, {type:Iris, direction:Transition.IN, duration:0.25});

          } else if (transitionType == "Photo")

          {

              TransitionManager.start(imageHolder, {type:Photo, direction:Transition.IN, duration:0.25});

          } else if (transitionType == "PixelDissolve")

          {

              TransitionManager.start(imageHolder, {type:PixelDissolve, direction:Transition.IN, duration:0.25});

          } else if (transitionType == "Rotate")

          {

              TransitionManager.start(imageHolder, {type:Rotate, direction:Transition.IN, duration:0.25});

          } else if (transitionType == "Squeeze")

          {

              TransitionManager.start(imageHolder, {type:Squeeze, direction:Transition.IN, duration:0.25});

          } else if (transitionType == "Wipe")

          {

              TransitionManager.start(imageHolder, {type:Wipe, direction:Transition.IN, duration:0.25});

          } else if (transitionType == "Zoom")

          {

              TransitionManager.start(imageHolder, {type:Zoom, direction:Transition.IN, duration:0.25});

          } else if (transitionType == "Random")

          {

              var randomNumber:Number = Math.round(Math.random()*9) + 1;

              switch (randomNumber) {

                  case 1:

                      TransitionManager.start(imageHolder, {type:Blinds, direction:Transition.IN, duration:0.25});

                      break;

                  case 2:

                      TransitionManager.start(imageHolder, {type:Fade, direction:Transition.IN, duration:0.25});

                      break;

                  case 3:

                      TransitionManager.start(imageHolder, {type:Fly, direction:Transition.IN, duration:0.25});

                      break;

                  case 4:

                      TransitionManager.start(imageHolder, {type:Iris, direction:Transition.IN, duration:0.25});

                      break;

                  case 5:

                      TransitionManager.start(imageHolder, {type:Photo, direction:Transition.IN, duration:0.25});

                      break;

                  case 6:

                      TransitionManager.start(imageHolder, {type:PixelDissolve, direction:Transition.IN, duration:0.25});

                      break;

                  case 7:

                      TransitionManager.start(imageHolder, {type:Rotate, direction:Transition.IN, duration:0.25});

                      break;

                  case 8:

                      TransitionManager.start(imageHolder, {type:Squeeze, direction:Transition.IN, duration:0.25});

                      break;

                  case 9:

                      TransitionManager.start(imageHolder, {type:Wipe, direction:Transition.IN, duration:0.25});

                      break;

                  case 10:

                      TransitionManager.start(imageHolder, {type:Zoom, direction:Transition.IN, duration:0.25});

                      break;

              }

          } else

          {

              trace("error - transitionType not recognized");

          }

      }

      if(autoStart == true)

      {

         fl_startSlideShow();

         playPauseToggle_mc.gotoAndStop("pause");

      }

      ***

        • 1. Re: cs5 Advanced Photo Album Template Live Links
          signsupplies5 Community Member

          can anybody out there please help me??

          • 2. Re: cs5 Advanced Photo Album Template Live Links
            sinious Community Member

            Without writing the code for you, the general idea is knowing what the image number is. That seems to be your issue. Your click events need to be able to extract the name of the image that was clicked (who's instance name can have that number in it). Based on that number you can determine what to do.

             

            Any MouseEvent.CLICK function handlers will give you the name (if you set it) of what was clicked.

             

            e.g.

             

            import flash.display.Sprite;

            import flash.events.MouseEvent;

             

            var a:Sprite = new Sprite();

            a.beginFill(0xFF0000,1);

            a.graphics.drawRect(0,0,100,100); // draw red rectangle

            a.graphics.endFill();

             

            addChild(a);

             

            // give it a name

            a.name = "a_1";

            a.addEventListener(MouseEvent.CLICK, handleClick);

             

            // Now on a click, extract the name and use it:

            function handleClick(e:MouseEvent):void

            {

                 // what button was clicked?

                 trace(e.target.name);

             

                 // get the number

                 var num:int = int(e.target.name.toString().split('_')[1]);

             

                 trace("Button #" + num + " clicked");

             

                 // do something based on the number

                 if (num == 1)

                 {

                      // do something based on button 1

                 }

                 else if (num == 2)

                 {

                      // do something based on button 2

                 }

                 // etc...

            }