Those of you who may have followed my previous Flash AS3 Slideshow post may have noted that it was rather limiting in function. While there are sometimes valid uses for a slideshow to statically transition between images (whether or not those images are dynamically loaded), there are typically much more useful things we can do in the presentation. In this post, we will review how to add an optional link to each slide in the XML data that will then turn the individual slides into hyperlinks whenever they are displayed.

One challenge I dealt with in adding these links was the fact that, during transition between slides, there is no easy way for the user to know on which slide they are actually clicking. Overcoming this obstacle is really as simple as having each slide hide its link whenever it is in transition. This way, there is no hyperlink available during transition, and there is no confusion over where you will be taken. Here, you can see it in action, and each of the slides will link directly to the image which it is displaying:

Once again, the source code is available to peruse at your convenience. Let’s look quickly at the differences we have added, though. First, notice the difference in data. We have added a <link> tag to our XML items that will be parsed to create the hyperlink (visible in the dynamic XML file):

<slide>
    <title>Slide Title</title>
    <image>/path/to/image/</image>
    <link>http://www.google.com</link>
</slide>

In order to accommodate the link, we need to create a transparent layer on our slide that will link to the designated URL when clicked. To do so, we first need to include the appropriate libraries to manage URLs and navigation within our Slides.as file:

import flash.net.*;

Now, we check to see if a link was provided in the XML and build said transparent element that will act as our hyperlink. Within the Slide constructor, you will find the following has been added:

this.myURL = data.link;

// If the link was provided, we build the element
if (this.myURL != '')
{
    this.link.graphics.beginFill(0xFFFFFF, 0);
    this.link.graphics.drawRect(0, 0, my_width, my_height);
    this.link.graphics.endFill();
    this.link.buttonMode = true;
    this.link.addEventListener(MouseEvent.CLICK, linkClicked);
    this.addChild(this.link);
    this.link.visible = false;
}

Then, to support the actual click event, we build the following method:

/**
 * Handle the navigation if the link is clicked
 *
 * @param MouseEvent e The MouseEvent.CLICK event
 * @return void
 */
protected function linkClicked (e :MouseEvent) :void
{
    var request :URLRequest = new URLRequest(this.myURL);
    navigateToURL(request);
}

Finally, we need to show and hide the link at various times through transition. Keep in mind that if we simply attach the show and hide to our fadeIn() and fadeOut() methods, our first slide will not be linked until after one entire cycle, because it never technically fades in on the first load. So, to juggle the initial display of slide number one as well as our transitions, we have small additions to both the onFadeIn() and fadeOut() methods. You can look at the source code for the exact changes.

When all of this is in place, our slideshow retains its exact same transition but adds in the provided link action when a URL is provided from the XML data.

As always, feedback and comments are welcome. I have many, many more things I’d like to support in this slideshow, and I’ll try to add them a piece at a time.