Topic: SimpleViewer 1.9 - Adding sound to default thumbView behavior

Hello,


First of all, I really like the SimpleViewer Player; it is very useful and it is an elegant and full-featured photo player.  One feature that I wish that it had was the ability to play some music for one or more items in the thumbnails after they are clicked.

I modified the ThumbArea script in svpro, which is below.  Any code added is marked with comments.  The problem is that the expected behavior does not execute - when you click on a thumbnail, I expect to hear music from the audio folder.  I wanted to put this in front of some people on here, hoping that one of you might have tried this before and can give me a good idea of the direction that I need to take this in.

Thanks in advance. smile

//****************************************************************************
//Copyright (C) 2008 Airtight Interactive. All Rights Reserved.
//Usage of this code is subject to the Terms of Use accompanying
//this product.
//****************************************************************************

import mx.transitions.easing.Strong;
import mx.transitions.Tween;
import mx.utils.Delegate;

import com.airtightinteractive.apps.viewers.simpleViewer.Options;
import com.airtightinteractive.apps.viewers.simpleViewer.RolloverButton;
import com.airtightinteractive.apps.viewers.simpleViewer.StageManager;
import com.airtightinteractive.apps.viewers.simpleViewer.Thumb;
import com.airtightinteractive.apps.viewers.simpleViewer.XMLManager;
import com.airtightinteractive.apps.viewers.simpleViewer.ImageArea;
import com.airtightinteractive.utils.RectUtil;

/**
 * ThumbArea is the holder that contains thumbnails.
 * Handle loading of thumbs, thumb page navigation. 
 * @author Felix Turner
 */
class com.airtightinteractive.apps.viewers.simpleViewer.ThumbArea {
    
    private static var instance : ThumbArea;
    
    private var mStageManager:StageManager;
    private var mXMLManager:XMLManager;
    private var mImageArea:ImageArea;
    
    private var mThumbs:Array; //refs to all thumbs     
    private var mNextBtn:RolloverButton;
    private var mBackBtn:RolloverButton;    
    private var mWidth:Number;
    private var mHeight:Number;            
    private var mDisplayAreaGotoX:Number;    
    private var mSelectedThumbIndex:Number;
    private var mPageSize: Number; //number of thumbs per page
    private var mFirstIndexDisplayed: Number; //first thumb on this page
    private var mLastIndexDisplayed: Number; //= mFirstIndexDisplayed + mPageSize        
    private var mColumns:Number;
    private var mRows:Number;
    //additions start here
    private var curTune:Number;
    private var aTunes:Array;
    //additions end here
    
    private var mClip_mc:MovieClip;    
    private var mPagingTwn:Tween;
    
    /**
     * @return singleton instance of ThumbArea
     */
    public static function getInstance() : ThumbArea {
        if (instance == null)
            instance = new ThumbArea();
        return instance;        
    }
    
    private function ThumbArea() {
        
    }
        
    /***
     * Initialize. Called after XML loaded
     */
    function init(target:MovieClip){        
        
        mClip_mc = target.createEmptyMovieClip("thumbarea",target.getNextHighestDepth());        
                        
        mStageManager = StageManager.getInstance();
        mXMLManager = XMLManager.getInstance();    
        mImageArea = ImageArea.getInstance();
        mRows = mXMLManager.thumbnailRows;
        mColumns = mXMLManager.thumbnailColumns;
        mPageSize = mRows*mColumns;            
        mFirstIndexDisplayed = 0;
        mSelectedThumbIndex = 0;
        mLastIndexDisplayed = mPageSize;        
        mDisplayAreaGotoX = 0;                
        mWidth = (Thumb.thumbWidth + Thumb.padding)*mColumns;
        mHeight = (Thumb.thumbHeight + Thumb.padding)*mRows - Thumb.padding;    
        //added code
        curTune = 0;
        for (var i = 0; i<mPageSize; ++i)
        {
            var sString = "audio/" + i + ".mp3";
            //var soundLoader = new URLRequest(sString);
            aTunes[i] = new Sound();
            aTunes[i].loadSound(sString, true);
            aTunes[i].stop();
        }
        //end added code
        
        Key.addListener(this);
        if (Options.enableMouseWheel) Mouse.addListener(this);
        
        //allow zero thumbs
        if (mPageSize == 0) return;
        
        //show thumb nav buttons if required
        if (mXMLManager.imageCount > mPageSize ) {
        
            //init thumbnail navigation buttons
            mClip_mc.attachMovie("ThumbNextButton","mcNextBtn",mClip_mc.getNextHighestDepth());    
            mNextBtn = new RolloverButton(mClip_mc.mcNextBtn);            
            mNextBtn.doAction = Delegate.create(this, showNextPage);  
            mClip_mc.attachMovie("ThumbBackButton","mcBackBtn",mClip_mc.getNextHighestDepth());    
            mBackBtn = new RolloverButton(mClip_mc.mcBackBtn);            
            mBackBtn.doAction = Delegate.create(this, showPreviousPage);
            
            //position thumb nav buttons
            if (Options.fixedLayout){            
                mBackBtn.setPosn(Options.backThumbArrowX,Options.backThumbArrowY);
                mNextBtn.setPosn(Options.nextThumbArrowX,Options.nextThumbArrowY);
            }else{                
                if (mRows == 1){
                    //for for 1 row, put arrows at same y as thumbs
                    mBackBtn.setPosn(- mBackBtn.width,(mHeight - mBackBtn.height)/2);
                    mNextBtn.setPosn(mWidth - Thumb.padding,(mHeight - mBackBtn.height)/2);                
                }else if (mColumns == 1){
                    //for 1 column place arrows closer together
                    mBackBtn.setPosn(Thumb.thumbWidth/2- mBackBtn.width,mHeight);
                    mNextBtn.setPosn(Thumb.thumbWidth/2,mHeight);
                }else{                
                    mBackBtn.setPosn(Thumb.thumbWidth/2 - mBackBtn.width/2,mHeight);
                    mNextBtn.setPosn(mWidth - Thumb.thumbWidth/2 - mNextBtn.width/2 - Thumb.padding,mHeight);
                }            
            }    
                                                  
            mBackBtn.clickShift = 1;
            mNextBtn.clickShift = 1;
            mNextBtn.hideOnRollOut = false;
            mBackBtn.hideOnRollOut = false;
            
            mBackBtn.setRGB(mXMLManager.pagingArrowsColor);
            mNextBtn.setRGB(mXMLManager.pagingArrowsColor);
                        
         }        
                            
        //mcDisplayArea slides within a mask to create paging
        mClip_mc.createEmptyMovieClip("mcDisplayMask",mClip_mc.getNextHighestDepth());
        mClip_mc.mcDisplayMask.beginFill(0xFFFF00, 100);
        var maskWidth:Number = mWidth - Thumb.padding + Thumb.selectedFrameOffset*2;
        var maskHeight:Number = mHeight + Thumb.selectedFrameOffset*2;
        RectUtil.rectangle(mClip_mc.mcDisplayMask, -Thumb.selectedFrameOffset,-Thumb.selectedFrameOffset,maskWidth,maskHeight);
        mClip_mc.mcDisplayMask.endFill();
        mClip_mc.createEmptyMovieClip("mcDisplayArea",mClip_mc.getNextHighestDepth());    
        mClip_mc.mcDisplayArea.createEmptyMovieClip("mcSlidingDisplayArea",mClip_mc.mcDisplayArea.getNextHighestDepth());    
        mClip_mc.mcDisplayArea.setMask(mClip_mc.mcDisplayMask);    
        mPagingTwn = new Tween(mClip_mc.mcDisplayArea.mcSlidingDisplayArea, "_x", Strong.easeOut, 0, 0, Options.thumbnailMotionLength, false);
        //mClip_mc.mcDisplayMask._alpha = 20;                                            
        
            
    }
    
    /**
     * Start loading thumbs. Called by StageManager. 
     * 
     */
    public function createThumbs():Void{
        
        mThumbs = [];
        for (var i : Number = 0; i <= mXMLManager.imageCount-1; i++) {            
            mThumbs[i] = new Thumb(mClip_mc.mcDisplayArea.mcSlidingDisplayArea, i,mXMLManager.thumbPath + mXMLManager.imageFileNames[i]);
            //position thumbs
            var pageIndex =     Math.floor(i/(mColumns*mRows));                
            var ipos = i%mColumns;
            var jpos =     Math.floor((i - pageIndex*pageSize)/mColumns);        
            mThumbs[i].setPosn((Thumb.thumbWidth+Thumb.padding)*ipos + mWidth*pageIndex, 
                                (Thumb.thumbHeight+Thumb.padding)*jpos );                                    
        }    
        updateNav();
        //load 1st thumb        
        mThumbs[0].loadThumb();                                
    }
    
    /**
     * Tween to page that shows the requested index
     * 
     */
    private function showIndex(index:Number,instantTween:Boolean){
        var newPageId = Math.floor(index/mPageSize);
        mDisplayAreaGotoX = -mWidth*newPageId;
        var tweenTime = instantTween ? 1 : Options.thumbnailMotionLength;        
        mPagingTwn.continueTo(mDisplayAreaGotoX,tweenTime);        
        mFirstIndexDisplayed = mPageSize*newPageId;    
        //added code
        playTune(index);
        //end added code
        updateNav();                                
    }
    
    //added code
    private function playTune(index:Number) 
    {
        if (curTune==index)
        {
            //stop the tune that is playing
            stopTune(index);
        }
        else
        {
            //stop the tune that is playing
            stopTune(curTune);
            //play the tune that has an index of whatever it is
            aTunes[index].play();
        }
        curTune = index;
    }
    
    private function stopTune(index:Number)
    {
        aTunes[index].stop();
    }
    //end added code
                     
    private function updateNav(){             
        mLastIndexDisplayed = mFirstIndexDisplayed + mPageSize;                
        mBackBtn.visible = mFirstIndexDisplayed > 0;
        mNextBtn.visible = mLastIndexDisplayed < mXMLManager.imageCount;                
    }
        
    private function showNextPage():Void{        
        mFirstIndexDisplayed += mPageSize;        
        //show next page
        mDisplayAreaGotoX -= mWidth;
        mPagingTwn.continueTo(mDisplayAreaGotoX,Options.thumbnailMotionLength);    
        updateNav();
    }
    
    private function showPreviousPage():Void{        
        mFirstIndexDisplayed -= mPageSize;
        if (mFirstIndexDisplayed < 1) mFirstIndexDisplayed = 0;        
        //show prev page
        mDisplayAreaGotoX += mWidth;
        mPagingTwn.continueTo(mDisplayAreaGotoX,Options.thumbnailMotionLength);
        updateNav();
    }
            
    public function showImageProgress(index:Number,percent:Number){
        mThumbs[index].showImageProgress(percent);    
    }
        
    public function showImageLoadComplete(index:Number){
        mThumbs[index].showImageLoadComplete();
        //show first image when loaded        
        if (index == mSelectedThumbIndex){
            mThumbs[index].select();
        }
    }    
    
    public function set selectedThumbIndex(index:Number):Void{        
        //if (index == mSelectedThumbIndex) return;
        if (index < 0 ) return;
        if (index >= mXMLManager.imageCount) {
            if (!Options.enableLooping){
                return;
            }else{            
                index=0; 
            }
        }
                
        //unselect last
        mThumbs[mSelectedThumbIndex].unselect();        
        mSelectedThumbIndex = index;        
        mThumbs[index].select();                    
        if (mSelectedThumbIndex < mFirstIndexDisplayed){
            showIndex(mSelectedThumbIndex,false);
        }else if  (mSelectedThumbIndex >= mLastIndexDisplayed){
            showIndex(mSelectedThumbIndex,false);
        }
        
        mImageArea.setPlaying(false); //manual navigation disables autoplay
        
    } 
                    
    public function get selectedThumbIndex():Number{
        return     mSelectedThumbIndex;        
    }
            
    public function get pageSize():Number{
        return mPageSize;
    }
    
    public function setPosn(x:Number,y:Number):Void{        
        x = Math.round(x);
        y = Math.round(y);    
        mClip_mc._x = x;
        mClip_mc._y = y;        
    }    
        
    private function onKeyDown() {            
        if(Key.isDown(Key.LEFT)) {    
            selectedThumbIndex = selectedThumbIndex -1;                                    
        }else if(Key.isDown(Key.RIGHT)) {
            selectedThumbIndex ++;    
        }else if(Key.isDown(Key.UP))  {                
            selectedThumbIndex -= mColumns;
        }else if(Key.isDown(Key.DOWN)) {
            selectedThumbIndex += mColumns;
        }else if(Key.isDown(Key.HOME)) {
            selectedThumbIndex = 0;
        }else if(Key.isDown(Key.END)) {
            selectedThumbIndex = mXMLManager.imageCount-1;
        }else if(Key.isDown(Key.PGUP)) {
            selectedThumbIndex -= mPageSize;
        }else if(Key.isDown(Key.PGDN)) {
            selectedThumbIndex += mPageSize;
        }
    }
    
    private function onMouseWheel(delta:Number) {
        if (!Options.enableMouseWheel) return;        
        if (delta > 0){
            selectedThumbIndex --;    
        }else{
            selectedThumbIndex ++;    
        }
    }
    
    function toString():String{
        return "thumbArea";    
    }
    
    public function get width():Number{
        return     mWidth - Thumb.padding;        
    }
    
    public function get height():Number{
        return     mHeight;        
    }
    
    //returns extra height due to arrow buttons
    public function get navHeight():Number{
        
        if (mXMLManager.imageCount <= mPageSize || mPageSize == 0 ||mRows == 1) {
            return 0;    
        }else{
            return Thumb.thumbHeight;;
        }        
    }
    
    //returns extra width due to arrow buttons
    public function get navWidth():Number{
        
        return 0;
        /*
        if (mXMLManager.imageCount <= mPageSize || mPageSize == 0 ){
            return 0;    
        }else if (mRows == 1){
            return Thumb.thumbHeight*2;
        }else{            
            return 0;    
        }*/        
    }
    
    public function loadNextThumb(index:Number){
        var p:Number = index+1;
        mThumbs[p].loadThumb();        
    }
}