«
»

How To: SimpleViewer 2 and SWFAddress.

As this is an update to an existing post I will dispense with a basic introduction. The major difference between this post and the previous is that the new version uses Actionscript 3. Here is the deep linking example of SimpleViewer 2 and SWFAddress 2.4.

What you will need to download:


Make a new folder on your desktop – you can call it whatever you would like, for the tutorial 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 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-pro2_1/examples/flash_embed.

Rename simpleviewer_flash_embed.fla to simpleviewer_swfaddress.fla, delete simpleviewer_flash_embed.swf and simpleviewer_flash_embed.html.

Unzip swfaddress-2.4zip

Copy the asual folder found in swfaddress-2.4\dist\as\3\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
  • images folder
  • thumbs folder
  • gallery_1.xml
  • gallery_2.xml
  • index.html
  • simpleviewer_swfaddress.fla
  • simpleviewer.swf
  • 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
<!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="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="swfaddress.js"></script>
<script type="text/javascript">
            var flashvars = {};
            var params = {};
            params.scale = "noscale";
            params.allowfullscreen = "true";
            params.allowScriptAccess = "sameDomain";
            swfobject.embedSWF("simpleviewer_swfaddress.swf", "galleryContent", "900", "670", "10.0.0", false, flashvars, params);
</script>
<style type="text/css" media="screen">
    object {
                outline:none;
            }
    body {         
                margin:0;
                padding:0;
        }
</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 open simpleviewer_swfaddress.fla with Adobe Flash Professional. Delete all the buttons and the text box, with the exception of the Load Gallery 1 and 2 buttons. (Feel free to change the background color so it’s not so hard to look at.)

SimpleViewer 2 flash_embed example screen shot

Now select the code layer’s Actions – Frame within the simpleviewer_swfaddress.fla document and replace the existing code 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
//Mike Rchards - mikerichardsphotography.com
//This code is provided free without guarantee and is "AS IS".

//import required classes
import flash.display.*;
import flash.net.URLRequest;
import com.asual.swfaddress.*;

//turn off stage auto resizing
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;     

//Init variables
var svAPI:Object; //svAPI is the object to call API methods on
var swfLoaded:Boolean = false;
var galleryURL:String; //used when switching between galleries
var imageIndex:Number;
var svLoader:Loader = new Loader(); //loader to load SimpleViewer swf into
var galleryShowing:Boolean = true;

//the default galleryname should be the same as the name of the xml minus .xml
var defaulGallery:String = "gallery_1";
var currentGalName:String ="";

//add svLoader to the "mcLoader" stage movieclip on the main timeline
mcLoader.addChild(svLoader);

//listen for SWF loaded
svLoader.contentLoaderInfo.addEventListener(Event.INIT, onViewerInit);

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

function handleSWFAddress(e:SWFAddressEvent) {
    var address = SWFAddress.getValue();
    var path = e.path;
    var arr:Array = path.split("/");
    var galName = arr[1];
    var imgId:Number = parseInt(arr[2], 10);

    switch(galName) {
        case "" :
            // If the gallery name is empty set to the default gallery.
            if (isNaN(imgId)) {imgId =0;}
            galName = defaulGallery;
            loadGallery(galName, imgId);
            break;
        case currentGalName :
            if (isNaN(imgId)) {imgId =0;}          
            imageIndex = imgId;
            break;
        default :
            if (isNaN(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;
    }
   
    //Adds just the gallery name to the browser title bar. The title is taken from the gallery XML title.
    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);
}

/**
* This function loads the SimpleViewer SWF
*/
function loadGallery(galName:String, imgId:Number){
    currentGalName = galName;
    galleryURL = galName + ".xml"; //url;

    //unload previous simpleviewer instance
    if (svAPI != null ) svAPI.dispose();
    svAPI = null;
    //flash 9 - unload
    if (swfLoaded) svLoader.unload();
    //Flash 10 - unloadAndStop
    //if (_viewerLoaded) svLoader.unloadAndStop();
   
    SWFAddress.setValue('/'+galName+'/'+imgId+'/');

    imageIndex = imgId;
   
    //load simpleviewer swf
    var urlReq:URLRequest = new URLRequest("simpleviewer.swf");
    svLoader.load(urlReq);
    swfLoaded = true;
}

function updateGalleryUrl(e:Object){
    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+'/'+e.data+'/');   
}

/**
* Fired when preloader is available
* Can set flashvars at this point
*/
function onViewerInit(e:Event):void{
    trace("onViewerInit");

    //listen for
    Object(svLoader.content).addEventListener("svComplete", onGalleryLoaded);
    trace("setViewerFlashVars");
    var options:Object = Object(svLoader.content).embedOptions;

     //set gallery.xml url based on current galleryId
    options.galleryURL = galleryURL;   
    options.firstImageIndex = imageIndex;
}

/**
 * Fired when gallery has completly loaded (SWF +  XML)
 * API is now available.
 */
function onGalleryLoaded(e:Event):void{
    svAPI = Object(svLoader.content).api;
    svAPI.setSize(mcLoader.mcFrame.width,mcLoader.mcFrame.height);

    //Init Event Listeners
    svAPI.addEventListener("svImageChange",updateGalleryUrl);  
}

//Init Button Click Handlers
mcButton1.addEventListener(MouseEvent.CLICK,loadGallery1);
mcButton2.addEventListener(MouseEvent.CLICK,loadGallery2);

//Button Click Handlers
function loadGallery1(e:Event){
    loadGallery("gallery_1",0);
}

function loadGallery2(e:Event){
    loadGallery("gallery_2",0);
}

Save (Crtl + S) simpleviewer_swfaddress.fla.

Export (Crtl + Alt + Shift + S) simpleviewer_swfaddress.fla as simpleviewer_swfaddress.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:

  • images folder
  • thumbs folder
  • gallery_1.xml
  • gallery_2.xml
  • index.html
  • simpleviewer_swfaddress.swf
  • simpleviewer.swf
  • 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. You can also directly link to an image.

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

Tags: , , , , ,

Leave a Reply