«
»

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
//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.EXTERNAL_CHANGE, handleSWFAddressExt);
SWFAddress.addEventListener(SWFAddressEvent.INTERNAL_CHANGE, handleSWFAddressInt);

/*
* This function runs on external change - URL, Link, Back/Forward Button
**/
function handleSWFAddressExt(e:SWFAddressEvent):void {

    var path:String = e.path;
    var arr:Array = path.split("/");
    var galName:String = arr[1];
    var imgId:Number = parseInt(arr[2], 10);
    // If the gallery name is empty set to the default gallery.
    if (galName == "" || galName == "unknown") {galName = defaulGallery;}
    // If the image number is not a number set it to the first image.
    if (isNaN(imgId)) {imgId =0;}
    imageIndex = imgId - 1;
       
    // If the galName is the currentGalName load the new image.
    if(galName == currentGalName){
        svAPI.showImage(imgId);
    }else{// If the galName is not the currentGalName load the new gallery.
        loadGallery(galName, imgId);
        //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);
    }  
}

/**
* This function runs on internal change - clicking a thumbnail, autoplay
**/
function handleSWFAddressInt(e:SWFAddressEvent):void {
    var path:String = e.path;
    var arr:Array = path.split("/");
    var imgId:Number = parseInt(arr[2], 10);
    imageIndex = imgId - 1;
}

/**
* 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 +'/');
     
    //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, e.data, and don't need the current one.
    var imgId:Number = e.data + 1  
    // SWFAddress.setValue updates the address bar and calls handleChange(event:SWFAddressEvent)
    SWFAddress.setValue('/'+galName+'/'+imgId+'/');  
}

/**
* 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;
    //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",1);
}

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

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.

To use the following example you will need to add your SimpleViewer Pro swf to the folder and upload it to a server. SV2swfaddress.zip

The MIT License

Copyright (c) 2010 Michael Richards – mikerichardsphotography.com

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the “Software”), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Tags: , , , , ,

One Response to “How To: SimpleViewer 2 and SWFAddress.”

  1. Mike says:
    September 16, 2010 at 7:12 pm

    If you are using SimpleViewer 2.0.3 or above with this SWFAddress code make sure your embed code does not contain the following line.

    flashvars.firstImageIndex = ’0′;

    Reply

Leave a Reply