Great instructions on how to implement this mod!

I know nothing about actionscript but was able to follow this code and get it working successfully. 

What I can't seem to figure out how to do is to create a way to have text float over the center of the image when the user's mouse cursor hovers over the clickable main image area.  This would greatly aid in usability if the user received some visual queue that by clicking on the image it would take you some place related to that image.

For example, the text could read:  "View Entire Project" which would take the user to another gallery of related images of the picture originally clicked on.  When a user rolls out of the main image area, the text would disappear (like the way the navigation buttons behave).  I was able to use a movieclip by copying one of the navigation buttons but use some text rather than an arrow on it and I sucessfully got it to appear and disaappear when the mouse hovered over the image. 

I just couldn't for the life of me get it to move off of the coordinates 0,0 no matter what I entered using the "setPosn" function.  It would also render my clickable image area inoperable when the rollover feature was turned on.

My hacking is proving ineffective after one long day at it.  I'm sure it's some basic rookie mistake I'm making.

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:

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


Changes to

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
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
after the following three lines of code:

    var resultNode:XMLNode = xmlRoot.childNodes[i];    

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

We just made it so that 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:

the original structure:




Now for the changes to

After the following three lines of code&#58;

    private var mNextBtn&#58;RolloverButton;
    private var mBackBtn&#58;RolloverButton;        
    private var mPlayBtn&#58;RolloverButton;

Add this line of code to create a new variable to handle our new button&#58;

    private var mImageClickArea&#58;RolloverButton; //create button to mask over the image to enable leftclick
After these three lines of code&#58;

            mBackBtn = new RolloverButton&#40;mButtonHolder_mc.mcBackBtn&#41;;            
               mBackBtn.doAction = Delegate.create&#40;this, onClickBack&#41;;

Add this code segment to initialize and set up behavior for our image linking button&#58;

               //image left click *ari*
            mImageClickArea = new RolloverButton&#40;mButtonHolder_mc.mcImageClickArea&#41;;
            mImageClickArea.doAction = Delegate.create&#40;this,openFullImage&#41;;
            //end image left click *ari*
Comment out &#40;or delete&#41; 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&#58;

        mNextBtn.setHitSize&#40;mWidth/3+ fw,mHeight&#41;;
comment out &#40;or delete&#41; these two lines of code&#58;

            mBackBtn.setBtnPosn&#40;imgx - mBackBtn.clickShift,imgy + h/2  - btnW/2&#41;;        
            mNextBtn.setBtnPosn&#40;imgx + w - btnW,imgy + h/2  - btnW/2&#41;;    

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&#58;

            mBackBtn.setBtnPosn&#40;imgx - btnW - mBackBtn.clickShift,imgy + h/2  - btnW/2&#41;;        //customize position of image back button
            mNextBtn.setBtnPosn&#40;imgx + w,imgy + h/2  - btnW/2&#41;;        //customize position of image next button

            //image nav hit areas remain same size as imageArea *ari* customized hit positions and hit widths        
            //image left click hit area *ari*
            //end image left click hit area *ari*
after this code segment defining the openImageLink function&#58;

    public function openImageLink&#40;&#41;&#123;
        getURL&#40;mXMLManager.imagePath + mXMLManager.imageFileNames&#91;mCurrentImageIndex&#93;,"_blank"&#41;;    

paste in the following function for opening the link when the image is clicked &#40;if you want the link to load in the same window change the _blank to _self&#41;&#58;

    //*ari* begin custom function to open the full size image
    private function openFullImage&#40;&#41;&#123;
        if &#40;mXMLManager.imageFullLinks&#91;mCurrentImageIndex&#93; != null&#41;&#123;
    //*ari* end custom function to open the full size image

now save your 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.



(6 replies, posted in SimpleViewer v1)

Fixed it!!!  I removed the following attribute out of my CSS file...

html, body {
     font-size: 100.1%;
     font-family: arial, verdana, sans-serif;
     background: #000000;



(6 replies, posted in SimpleViewer v1)

I have the problem as well and I have Flash 9.  I have discovered that by removing my CSS file, the problem went away.  I already have the html height set at 100%, but this has no relationship to the frozen thumbnails. 

Still trying to isolate the conflict with my CSS file.