"Permalink" is a term coined from the weblog world to describe URLs that take users directly to content that's part of a larger group. SlideShowPro for Flash offers permalink functionality by automatically updating the browser's location bar with unique URLs to slideshow content. This allows you to copy a URL directly to an image, share it with someone else, or use it as a hyperlink from a separate HTML document, and SlideShowPro (when loaded) will begin with that content.
In order to use permalinks, you must use Flash 8 or higher. Permalinks will not work with SWFs published from Flash MX 2004. You should also be somewhat comfortable editing HTML. This walkthrough will also make use of SWFObject 2.0, a useful (and free) Javascript utility, to embed SWFs. You can download SWFObject from here: http://code.google.com/p/swfobject/
If you are editing your XML document by hand, open it and add an id attribute to each album element. Fill it with a short identifier without spaces or ampersands. For example:
<album id="nature" title="Nature" description="Images of trees, lakes and flowers" lgpath="gallery/album1/lg/">
Repeat this for each album in your XML document.
You now have the option of adding a unique id to each img element as well. If you don't supply an id, SlideShowPro will use the numerical position of slideshow content when creating permalinks. For example, the fourth image in the nature would create a permalink like so:
http://mydomain.com/slideshow.html#id=nature&num=4
If you plan on adding additional content to the beginning of your album, or may change the content ordering, an id for each img element is recommended. For example:
<img src="myimage.jpg" id="treeFrog" />
...would create a permalink that looks like this:
http://mydomain.com/slideshow.html#id=nature&num=treeFrog
Select your instance of SlideShowPro for Flash on the Stage of your FLA, and ensure OPTIONS/Permalinks is set to "On" in the Component Inspector panel. When finished, publish a new SWF.
Because we're using SWFObject to embed our SWF, it's less confusing to not use the HTML document Flash creates. Simply create a new HTML document, and in the <body> area create a DIV to hold our SWF, like so:
<body> <div id="flashcontent"></div> </body>
Place the following script in the HTML document's head:
<script type="text/javascript">
<!--
function flashPutHref(href) { location.href = href; }
-->
</script>
This code is what our SWF will use to communicate with JavaScript to alter the document URL. When finished, add the following directly below that:
<script type="text/javascript" src="http://yourdomain.com/js/swfobject.js">
</script>
<script type="text/javascript">
var flashvars = {
initialURL: escape(document.location)
}
swfobject.embedSWF(
"slideshowpro.swf",
"flashcontent",
"550",
"400",
"9.0.0",
"expressInstall.swf",
flashvars
);
</script>
The first line is our SWFObject 2.0 file (see previous page for download URL if you don't have it). We recommend creating a "js" folder in the root of your domain, placing the file there, and referencing to it using an absolute (http) URL like above.
The third line is the script used to embed our SWF. Simply replace slideshowpro.swf with the name of your SWF, and replace flashcontent with the ID of the DIV you created in step three.
Your document is now completely setup for permalinks. Whenever a user clicks on an image link, the browser's document path will automatically update with the applicable album id and image id/number so you (or anyone) can reference it externally.
Test online: It is important that you test permalinks from a web server and not on your local machine. SlideShowPro for Flash will not attempt to update your browser's document path unless it originates from http. This is to avoid annoying errors and warnings when working locally.