«
»

How to: Adding SWFAddress to SimpleViewer

SimpleViewer is an flash gallery that has gained some popularity on the net. Like with anything in this world of ours, it has strengths and weaknesses. It’s primary strength is that it allows people who do not know a lot about flash to set up a flash gallery. One of it’s weaknesses is that it does not handle deep linking in flash. Adding deep linking to SimpleViewer allows you to link to an individual image within the gallery instead of just being able to link to the base Flash movie clip. In this article I will show you how to add deep linking to SimpleViewer using SWFAddress.

With the integration of SWFAddress, the browser history will update every time you click a thumbnail, allowing for the use of the browser’s back button. You also get a nice clean URL, and the updating of the URL allows users to link to individual images which wouldn’t be possible otherwise.

I will be focusing on a Multiple galleries example, but you could easily adapt this if you only have one gallery.

Here is an Example of the finished working code or you can check out my galleries.

First and foremost you are going to need SimpleViewer Pro, SWFAddress, SWFObject and Adobe Flash Professional, so if you don’t have them head over to their respective sites and grab a copy of each. Adobe offers a free trial of Flash Professional which you can use for 30 days. This tutorial is based on SimpleViewer Pro 1.9, SWFObject 2.2 and SWFAddress 2.4.

Make a new folder on your desktop – you can call it whatever you would like, I’m going to call mine gallery.

Extract the file you download from the SimpleViwer site, simpleviewer-pro.zip.

Copy all of the files in the Flash Embed example folder into your gallery folder. You will find the Flash Embed example in the SimpleViewer folder you created when you extracted the simpleviewer-pro.zip under simpleviewer-pro\simpleviewer_pro\examples\Flash Embed.
Copy all of the files in simpleviewer-pro\simpleviewer_pro\source folder into your gallery folder.

Unzip swfobject_2_2.zip

Copy swfobject.js from swfobject_2_2\swfobject to the gallery folder.

Unzip swfaddress-2.4.zip

Copy the asual folder found in swfaddress-2.4\dist\as\2\com\ to gallery\com\.

Copy swfaddress.js from swfaddress-2.4\dist\js to the gallery folder.

In the gallery folder right click new>text document. Rename the text file to index.html.

You should now have all of the files you need in the gallery folder:

  • com folder
  • gallery1 folder
  • gallery2 folder
  • gallery1.xml
  • gallery2.xml
  • index.html
  • multiple_galleries.fla
  • multiple_galleries.swf
  • simpleviewer.fla
  • viewer.swf
  • swfobject.js
  • swfaddress.js

In your gallery folder open index.html and copy the following code into index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simpleviewer Gallery with SWFAdress</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="swfaddress.js"></script>
<script type="text/javascript">
            var flashvars = {};
            flashvars.firstImageIndex = "0";
            var params = {};
            params.play = "true";
            params.menu = "false";
            params.quality = "best";
            params.scale = "noscale";
            params.allowfullscreen = "false";
            params.allowScriptAccess = "sameDomain";
            params.swLiveConnect = "true";
            var attributes = {};
            attributes.id = "galleryContent";
            swfobject.embedSWF("multiple_galleries.swf", "galleryContent", "880", "560", "8.0.0", false, flashvars, params, attributes);
</script>
<style type="text/css" media="screen">
    object { outline:none; }
</style>
</head>
<body>
<div id="galleryContent">
    <p>In order to view these galleries you must have <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Adobe Flash Player</a> installed.
    If you know that you have Flash installed, then please ensure JavaScript and/or Active Content are enabled.</p>
</div>
</body>
</html>

In your gallery folder, navigate to com\airtightinteractive\apps\viewers\simpleViewer and open Thumb.as with Adobe Flash Professional.

Find (Ctrl + F) public function select() at line 247.

At the end of line 248 hit enter and add:

//This function is for the SWFAdress integration, the main part of which be found in multiple_galleries.fla.
//It passes the imageID to the SWFAdress functions when a thumb is clicked.
_root.updateGalleryUrl(mIndex);

Save (Ctrl + S) and close Thumb.as

In your gallery folder open simpleviewer.fla with Adobe Flash Professional.

Export (Crtl + Alt + Shift + S) simpleviewer.fla – save as viewer.swf into your gallery folder.

In your gallery folder open multiple_galleries.fla with Adobe Flash Professional.

Copy the following and paste into line 2 of the code layer’s Actions – Frame within the multiple_galleries.fla document:

//Import the SimpleViewer classes
import com.airtightinteractive.apps.viewers.simpleViewer.*

//Import the swfaddress classes
import com.asual.swfaddress.*
//the default galleryname should be the same as the name of the xml file minus .xml
// This is the gallery that will be loaded if the gallery name is null
var defaulGallery:String = "gallery1";
var currentGalName:String ="";

Remove what is now line 17, var galleryId:Number;

Change line 23 from loadGallery(1); to:

SWFAddress.setValue('/gallery1/0/');

Change line 27 from loadGallery(2); to:

SWFAddress.setValue('/gallery2/0/');

(If you would prefer to link to your galleries via a HTML hyperlink you can remove the buttons from the stage and use <a href=’http://yoururl.com/foldername/#/galleryname/(optionally include image number/)’ >thelink</a>. With this method, I could link to the example gallery2 with <a href=’http://www.mikerichardsphotography.com/example/#/gallery2/’ >thelink</a>.)

Remove lines 34 (function loadGallery(galId)) through 52 (which is the end of the document) and replace them with the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
//Mike Rchards - mikerichardsphotography.com
//This code is provided free without guarantee and is "AS IS".
// SWFAddress calls this function when the address changes
// (2 Ways: The Browser's address bar , or SWFAddress.setValue())
function handleChange(event:SWFAddressEvent) {
    var path = event.path;
    // The array with the address path information.
    var arr:Array = path.split("/");
    var galName = arr[1];
    var imgId = arr[2];

    switch(galName) {
        case "" :
            // If the gallery name is empty set to the default gallery.
            galName = defaulGallery;
            loadGallery(galName, imgId);
            break;
        case currentGalName :
            if (imgId == null or imgId == "") {imgId ="0";}
            _root.firstImageIndex = imgId;
            ImageArea.getInstance().showImage(imgId);
            ThumbArea.getInstance().selectedThumbIndex = imgId;
            break;
        default :
            //if there is no image id load the first image.
            if (imgId == null or imgId == "") {imgId ="0";}
            //If the galName is not the currentGalName load the new gallery.
            //Prevents swf from being reloaded every time you update
            //the address from clicking a thumb
            if (currentGalName != galName) {loadGallery(galName, imgId);}
            break;
    }
   
   
    //If you have multi word titles you can hard code them
    // with a simple if, if else and else statements.
    // if (galName == "mytotallycoolimages"){
    //galName = "My Totally Cool Images";}
    //If you need to hard code wrap the next three lines in the else statement.
   
    // Sets the first letter of the gallery name to be capital.
    //You can safely comment these three lines out if you
    //don't want this functionality
    var firstLetter:String=new String();
    firstLetter=galName.substr(0,1);
    galName=firstLetter.toUpperCase()+galName.substr(1,t.length);
   
    //Adds just the gallery name. You can safely change the text inside the quotes
    SWFAddress.setTitle('Simpleviewer With SWFAdress  : ' + galName);
   
    // Example of  how to add the gallery name and image ID to the title bar.
    //SWFAddress.setTitle('Simpleviewer With SWFAdress  : ' + galName +' image ' +  imgId);
}
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);

// This function loads the gallery
function loadGallery(galName:String, imgId:String){

    currentGalName = galName;
    _root.xmlDataPath = galName + ".xml"
    var theId:Number = parseInt(imgId, 10);
    SWFAddress.setValue('/'+galName+'/'+theId+'/');
    // use firstImageIndex to goto the correct image.
    _root.firstImageIndex = theId;     
    mLoader_mcl.loadClip("viewer.swf",mcLoader);
}

function updateGalleryUrl(imgIndex:Number){
   
    var path = SWFAddress.getValue();
    var arr:Array = path.split("/");
    var galName = arr[1];
    //We are disregarding arr[2] because we are being
    //passed the new image id, imgIndex, and don't need the current one.

    currentGalName = galName;
    // SWFAddress.setValue updates the address bar and calls handleChange(event:SWFAddressEvent)
    SWFAddress.setValue('/'+galName+'/'+imgIndex+'/'); 
}

Save (Crtl + S) multiple_galleries.fla.

Export (Crtl + Alt + Shift + S) multiple_galleries.fla as multiple_galleries.swf into your gallery folder.

To test you must upload the files to your server.

Make sure to upload all of the following files and folders:

  • gallery1 folder
  • gallery2 folder
  • gallery1.xml
  • gallery2.xml
  • index.html
  • multiple_galleries.swf
  • viewer.swf
  • swfobject.js
  • swfaddress.js

The browser history is updated every time you click a thumbnail, thus enabling the browser back button. You can now link to any image via a nice URL and as you click on thumbnails you can watch the address bar change.

This code is provided without guarantee and is “AS IS”.

Tags: , , , ,

7 Responses to “How to: Adding SWFAddress to SimpleViewer”

  1. Mike says:
    May 23, 2009 at 11:52 am

    Just had someone point out a copy and paste error. I fixed it above.

    if (currentGalName != ) {loadGallery(galName, imgId);}

    should have been:

    if (currentGalName != galName) {loadGallery(galName, imgId);}

    Reply
  2. tif says:
    June 5, 2009 at 2:04 am

    maybe you can help:

    trying to use simplviewer(not pro), and make a multiple galleries.
    I made two separate galleries in separate folders. I’m trying to run them from flash movie , which load “viewer.swf” from each folder.

    btn1.onRelease = function() {
    container_mc.loadMovie(‘folder1/viewer1.swf’)
    };

    only if i place gallery file in the main folder, it works.
    the prolem is that i cant place more then one gallery in the main folder, becouse they have the same xml name(that i cant change).
    thanks

    Reply
  3. disway says:
    October 15, 2009 at 9:19 pm

    Nice tut, can’t wait to dig in. However I noticed the back or forward buttons do not work when you are inside the gallery. In other words, when you are at image 3, you cannot use back button to go to image 2. The buttons do work going between the galleries on your Example page though. Any ideas? Could this be another case of “ID” tag issue? Hope I didn’t open a can of worm for you. By the way I am using Safari on a Intel Mac with 10.6.

    Reply
    • Mike says:
      October 16, 2009 at 10:46 am

      Huh strange I didn’t notice that and you just caught me as I’m heading out of town for a week… It would most likely be one of 2 issues either the event is not being caught or the caught event is not processing and updating the flash. Without having time to play with it at the moment I would lean towards the latter. I’ll have to take a look at it when I get back.

      Reply
  4. Mike says:
    October 30, 2009 at 7:30 pm

    Updated the code above to fix the back button issue, see the changes below.

    import com.airtightinteractive.apps.viewers.simpleViewer.*

    //...

    switch(galName) {
            case "" :
                // If the gallery name is empty set to the default gallery.
                galName = defaulGallery;
                loadGallery(galName, imgId);
                break;
            case currentGalName :
                if (imgId == null or imgId == "") {imgId ="0";}
                _root.firstImageIndex = imgId;
                ImageArea.getInstance().showImage(imgId);
                ThumbArea.getInstance().selectedThumbIndex = imgId;
                break;
            default :
                //if there is no image id load the first image.
                if (imgId == null or imgId == "") {imgId ="0";}
                //If the galName is not the currentGalName load the new gallery.
                //Prevents swf from being reloaded every time you update
                //the address from clicking a thumb
                if (currentGalName != galName) {loadGallery(galName, imgId);}
                break;
        }

    Also updated the example to use swfadress 2.4

    Reply
  5. boris says:
    November 14, 2009 at 5:51 pm

    how do you open the image in the litebox, can you please let me know that? thanks, cheeres kloshark (at) hotmail.com

    Reply

Leave a Reply