Thursday, 23 July 2009 04:18

Hyper-Linking Main Gallery Images in SimpleViewer Pro

by Ari Magder
(0 votes)

Recently, while working on a site for my good friend Aaron Axelrod, I needed to make some code changes to the Actionscript in SimpleViewer Pro.

For those of you who don't know Simpleviewer is a neat little flash based image gallery created by the people at Airtight Interactive.

While I am not a huge fan of using flash when another solution will work as well, Aaron was already using SimpleViewer with a PHP management tool that allowed him to update his galleries himself. Since he wasn't ready to make the move to a full blown CMS based site yet, but wanted to update the look and user experience of his current site we decided that keeping Simpleviewer was the best option.

Since Aaron is primarily a painter/sculptor (and a damn good one), it was important to him that users be able to see very large images of his work in order to understand the detail and texture that normally one can only experience when viewing art in person. We decided to accomplish this by linking the main images in his gallery to much larger detail images that would demonstrate the level of detail that he wanted.

Unfortunately SimpleViewer Pro does not support an option to do this so I modified the code myself and posted the following on the Airtight Interactive forums.

The original post (with some helpful comments by other contributors) can be found here.

-------------------------------------------------------------------------------------------------

After searching for a simple solution to the fact that SimpleViewer Pro *cough* doesn't have the ability to hyperlink the main images in the gallery, I decided to just edit the script myself. For those of you who have something better to do with your evenings: here you go!

A few notes:

1) I shifted the image navigation arrows off the edges of the main image so that the entire image could be clickable, this should be pretty easy for you to change back.

2) the hit areas for the two image navigation arrows were originally defined based on the maximum image area (or so it would appear) I redefined the sizes so that they are now based on the size of the current main image, and relocated the code segment so that I could be sure it would execute every time a new image was loaded.

3) Even though I do expect you to know how to use flash and follow simple directions, I am trying to make this as easy as possible. So, for those of you who are more advanced, sorry for dumbing it down.

Now on to the good part:

First off, My solution utilizes a movie clip on the stage in order to generate the clickable area over the picture. To do this:

1 ) open up simpleviewer.fla
2 ) open the Library
3 ) under "navigation buttons" right click either "ImageBackButton" or "ImageNextButton" and click "Duplicate"
4 ) in the Name box type "ImageClickArea" (without quotes), make sure the "Export for ActionScript" and "Export in first frame" boxes are checked, then click "ok"
5 )Now double-click the Symbol next to ImageClickArea in your library to open it up on the stage
6 )make sure that you have the "arrow" layer selected in the timeline, click on the white box arrow on the stage and press delete.
7 ) click on "Scene 1" above the stage to return to scene 1
8 ) click on frame 15 in the third layer (items to load) in the timeline window, and you should see a bunch of items on the stage.
9 ) drag and drop the ImageClickArea symbol out of your library and onto the stage.
10 ) save the simpleviewer.fla file. (make sure to use "save as" and save it as a Flash 8 document if you are using a newer version of flash)

Now on to the action script edits:

This requires changes in the following actionscript files:

ImageArea.as
XMLManager.as

they are located in the following directory in the simpleviewer extraction:

source\com\airtightinteractive\apps\viewers\simpleViewer

Changes to XMLManager.as:

Code:


after the following three lines of code:

public var imageCount:Number;
public var imageFileNames:Array;
public var imageCaptions:Array;

add this line to create a new array to hold the hyperlink addresses:

public var imageFullLinks:Array; //create array var to hold the links

 

Code:


after the following three lines of code:

imageCount = 0;
imageFileNames = [];
imageCaptions = [];

add this line to initialize the new array:

imageFullLinks = []; //initialize empty array for links

 

Code

after the following three lines of code:

var resultNode:XMLNode = xmlRoot.childNodes[i];
imageFileNames.push(resultNode.childNodes[0].firstChild.nodeValue);
imageCaptions.push(resultNode.childNodes[1].firstChild.nodeValue);

add this line to fill the new array with values from the xml file:

imageFullLinks.push(resultNode.childNodes[2].firstChild.nodeValue); //pull the link from the third tag under the current images main tag in the XML file



Now save XMLManager.as

We just made it so that XMLManager.as is going to pull links from your gallery's xml file. in order to do this you need to add tags to hold this information. this changes the structure of image items in the xml as follows:

Code:

the original structure:

<image>
<filename></filename>
<caption></caption>
<image>

becomes:

<image>
<filename></filename>
<caption></caption>
<link></link>
<image>


Now for the changes to ImageArea.as:

 


Code:


After the following three lines of code:

private var mNextBtn:RolloverButton;
private var mBackBtn:RolloverButton;
private var mPlayBtn:RolloverButton;

Add this line of code to create a new variable to handle our new button:

private var mImageClickArea:RolloverButton; //create button to mask over the image to enable leftclick

 

Code:


After these three lines of code:

mBackBtn = new RolloverButton(mButtonHolder_mc.mcBackBtn);
mBackBtn.doAction = Delegate.create(this, onClickBack);
mBackBtn.setRGB(mXMLManager.imageFrameColor);

Add this code segment to initialize and set up behavior for our image linking button:

//image left click *ari*
mButtonHolder_mc.attachMovie("ImageClickArea","mcImageClickArea",mButtonHolder_mc.getNextHighestDepth());
mImageClickArea = new RolloverButton(mButtonHolder_mc.mcImageClickArea);
mImageClickArea.doAction = Delegate.create(this,openFullImage);
//end image left click *ari*

 

Code:


Comment out (or delete) the following lines of code. They control the size and location of the hit area for the image nav buttons and we are going to re-write them:

mBackBtn.setHitPosn(0,0);
mBackBtn.setHitSize(mWidth/3+fw,mHeight);
mNextBtn.setHitPosn(mWidth*2/3-fw,0);
mNextBtn.setHitSize(mWidth/3+ fw,mHeight);

 

Code

comment out (or delete) these two lines of code:

mBackBtn.setBtnPosn(imgx - mBackBtn.clickShift,imgy + h/2 - btnW/2);
mNextBtn.setBtnPosn(imgx + w - btnW,imgy + h/2 - btnW/2);

replace them with the collowing code segment which customizes the button positioning, hit area positioning, and hit area sizing for the image nav buttons as well as adding the hit area specifications for the new image hyperlink button:

mBackBtn.setBtnPosn(imgx - btnW - mBackBtn.clickShift,imgy + h/2 - btnW/2); //customize position of image back button
mNextBtn.setBtnPosn(imgx + w,imgy + h/2 - btnW/2); //customize position of image next button


//image nav hit areas remain same size as imageArea *ari* customized hit positions and hit widths
mBackBtn.setHitPosn(imgx-w/3,imgy);
mBackBtn.setHitSize(w/3,h);
mNextBtn.setHitPosn(imgx+w,imgy);
mNextBtn.setHitSize(w/3,h);
//image left click hit area *ari*
mImageClickArea.setHitPosn(imgx,imgy);
mImageClickArea.setHitSize(w,h);
//end image left click hit area *ari*

 

Code:


after this code segment defining the openImageLink function:

public function openImageLink(){
getURL(mXMLManager.imagePath + mXMLManager.imageFileNames[mCurrentImageIndex],"_blank");
}

paste in the following function for opening the link when the image is clicked (if you want the link to load in the same window change the _blank to _self):

//*ari* begin custom function to open the full size image
private function openFullImage(){
if (mXMLManager.imageFullLinks[mCurrentImageIndex] != null){
getURL(mXMLManager.imageFullLinks[mCurrentImageIndex],"_blank");
}
}
//*ari* end custom function to open the full size image



now save your ImageArea.as file, go back to your simpleviewer.fla file and publish it. the new swf should handle linking from the main images.

If anyone wants to make improvements, please go ahead. In particular if anyone could alter svManager to handle the new fields, and post the code here, I'd appreciate it, otherwise I'll probably do so myself.

"
Last modified on Tuesday, 25 August 2009 06:30

Ari Magder

E-mail: This e-mail address is being protected from spambots. You need JavaScript enabled to view it
Read 1952 times Like this? Tweet it to your followers!
Category: Latest News
Share: