Mike Richards Photography Blog » flash gallery

How To: SimpleViewer 2 and SWFAddress.

Mike — Thu, 28 Jan 2010 18:07:54 +0000

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:

SimpleViewer Pro 2.0.1
SWFAddress 2.4
If you don’t have it Adobe Flash Professional

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

<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.)

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

//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);
// 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;
// If the galName is not the currentGalName load the new gallery.
if(galName != currentGalName){
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);

// 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+'/');

//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”.

How to: Adding SWFAddress to SimpleViewer

Mike — Fri, 15 May 2009 16:31:19 +0000

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

<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 thelink. With this method, I could link to the example gallery2 with thelink.)

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

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