ActionScript ThumbGrid for SlideShowPro slideout or rollout?

Apari
Apari used Ask the Experts™
on
Basically I'd like the ThumbGrid instance to slide or roll over when the mouse is over SlideShow.

I'd like it to disappear two ways, 1) if a thumbnail is clicked or 2) if the mouse leaves the activation area.

I have two codes here unfortunately neither quite does what I want.

The first slides up but then won't go away.

The second activates ThumbGrid. It has a nice tween fading effect but only disappears if you click a thumbnail.

I want it to be able to slide in and out fluidly.

I've tried working it out myself but unfortunately AS3 is not my forte.

Much Appreciation for any assistance.
(1)
import net.slideshowpro.slideshowpro.*;

my_tg.visible = false;

function onImageEvent(event:SSPImageEvent) {
if (event.type=="imageRollOver") {
my_tg.visible = true;
}
if (event.type=="imageRollOut") {
my_tg.visible = false;
}
}

my_ssp.addEventListener(SSPImageEvent.IMAGE_ROLLOVER, onImageEvent);
my_tg.addEventListener(SSPImageEvent.IMAGE_ROLLOUT, onImageEvent);


(2)
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;   
import net.slideshowpro.slideshowpro.*;
import net.slideshowpro.thumbgrid.*;

var tgVisible:Boolean=true;
var _tween:Tween;
my_tg.visible=false;


function onImageClick(event:SSPImageEvent) {
    if(event.zone=="action") {
        animate(true);
    }
}

function onThumbEvent(event: TGRequestEvent) {
    animate(false);
}

function animate( show:Boolean ):void {
    var end:int = show == true ? 1 : 0;
    _tween = new Tween( my_tg, "alpha", Strong.easeOut,  my_tg.alpha, end, .5, true );
    if( ! show ){
        _tween.addEventListener( TweenEvent.MOTION_FINISH, onComplete );
    } else {
        my_tg.visible=true;
    }
}

function onComplete(e:TweenEvent) {
    my_tg.visible=false;
}

my_ssp.addEventListener(SSPImageEvent.IMAGE_CLICK, onImageClick, false, 2);
my_tg.addEventListener(TGRequestEvent.LOAD_THUMB, onThumbEvent);

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2009

Commented:
Can you please post more code or the source file?

I do not quite understand what you mean by leave the activation area, where is the activation area?

Your first code doesn't do any moving, it only toggles the visibility. I don't understand why you said it moves but don't disappear.

In the second code, you only showed me the imports, that wouldn't help in anything.

Author

Commented:
Hi again,

Please find attached everything you should need.

The code I've left in the actions frame - only goes away when you click a thumbnail.

I want the thumbgrid to slide up and down when mousing over as well.

Many thanks!

test.zip
Top Expert 2009

Commented:
OK I'm not sure if this is what you want, but anyway see the code.

Code 1:

import net.slideshowpro.slideshowpro.*;


my_tg.alpha = 0;
my_tg.y = 615;

var movingTween:Tween;

function showBar(event:MouseEvent):void {
    if (movingTween != null) {
        movingTween.stop();
    }
    my_tg.alpha = 1;
    movingTween = new Tween( my_tg, "y", Strong.easeOut,  my_tg.y, 390, .5, true );
}

function hideBar(event:MouseEvent):void {
    movingTween = new Tween( my_tg, "y", Strong.easeOut,  my_tg.y, 615, .5, true );
    movingTween.addEventListener(TweenEvent.MOTION_FINISH, doHide);
}

function doHide(event:TweenEvent):void {
    movingTween.removeEventListener(TweenEvent.MOTION_FINISH, doHide);
    my_tg.alpha = 0;
}

my_tg.addEventListener(MouseEvent.MOUSE_OVER, showBar);
my_tg.addEventListener(MouseEvent.MOUSE_OUT, hideBar);


Code 2:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import net.slideshowpro.slideshowpro.*;
import net.slideshowpro.thumbgrid.*;

var _tween:Tween;


function onImageClick(event:SSPImageEvent) {
    if(event.zone=="action") {
        animate(true);
    }
}

function onThumbEvent(event: TGRequestEvent) {
    animate(false);
}

function animate( show:Boolean ):void {
    var end:int = show == true ? 1 : 0;
    _tween = new Tween( my_tg, "alpha", Strong.easeOut,  my_tg.alpha, end, .5, true );
    if( ! show ){
        _tween.addEventListener( TweenEvent.MOTION_FINISH, onComplete );
    } else {
        my_tg.y = 390;
        my_tg.alpha = 1;
    }
}

function onComplete(e:TweenEvent) {    
    my_tg.y = 615;
    my_tg.alpha = 0;
}

my_ssp.addEventListener(SSPImageEvent.IMAGE_CLICK, onImageClick, false, 2);
my_tg.addEventListener(TGRequestEvent.LOAD_THUMB, onThumbEvent);
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi,

I don't know what happened. The first of the examples was working and then suddenly it's throwing this error:

1046: Type was not found or was not a compile-time constant: TweenEvent.

Source: function doHide(event:TweenEvent):void {


The second only works with clicking.

Basically I'd like it to behave like this:

On loading - show thumbnails for a few moments then slide down (option to turn of and off?)
When mousing over the image area, slide thumbnails up
If you mouse out of the image area, thumbnails slide down
If you click on an image the thumbnails slide down

I hope that is clear enough. Thank you so much for your help.

Top Expert 2009

Commented:
Hey, I'm sorry I didn't reply to you yet, I'm a little busy.

If you can't wait, please press the request attention button so other experts will help you.

Author

Commented:
Thank you. I might be able to wait a little longer.

I have asked another question regarding removing event listeners but I think I might be getting off track.

I've been working with the second bit of code you gave me. I understand the adding the RollOver part which is exactly what I needed.

I also added RollOut, but my problem now is that it flickers when you put the mouse over the thumbgrid. It almost behaves how I envisage but the flickering is a problem.
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import net.slideshowpro.slideshowpro.*;
import net.slideshowpro.thumbgrid.*;

var _tween:Tween;


function onImageEvent(event:SSPImageEvent) {
   if (event.type=="imageRollOver") {
       animate(true);
   }  
	  if (event.type=="imageRollOut") {
       animate(false);
   }
}

function onThumbEvent(event:TGRequestEvent) {
   animate(false);
}

function animate( show:Boolean ):void {
   var end:int = show == true ? 1 : 0;
   _tween = new Tween( my_tg, "alpha", Strong.easeOut,  my_tg.alpha, end, .5, true );
   if( ! show ){
       _tween.addEventListener( TweenEvent.MOTION_FINISH, onComplete );
   } else {
       my_tg.y = 390;
       my_tg.alpha = 1;
   }
}

function onComplete(e:TweenEvent) {    
   my_tg.y = 615;
   my_tg.alpha = 0;
}

my_ssp.addEventListener(SSPImageEvent.IMAGE_ROLLOVER, onImageEvent);
my_ssp.addEventListener(SSPImageEvent.IMAGE_ROLLOUT, onImageEvent);
my_tg.addEventListener(TGRequestEvent.LOAD_THUMB, onThumbEvent);

Open in new window

Top Expert 2009
Commented:
Hmm I took out a little time. Took a look at your code and I realised what is happening.

This problem is a little hard to resolve, not sure if it's exactly SlideShowPro's fault. I tried to edit as little as your code as possible but your code do have some problems. I fixed the flickering issue, it uses some trick because that's the only way I can think of.

This is probably all I will be helping you with because I have spent a lot of time on this and do not wish to continue further, I'm sorry but I think it will be better to ask SlideShowPro related questions in their forums and not in EE. I know it's related to Flash, but not many have the experience with SlideShowPro and it requires some time to understand how SlideShowPro works.

With that, I think it might just take me more time to fix other issues. I hope you understand what I mean. Again, I'm sorry for being unable to help you from here.

Anyway, see code below.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import net.slideshowpro.slideshowpro.*;
import net.slideshowpro.thumbgrid.*;

var _tween:Tween;
var imgWidth:Number;
var imgX:Number;

function onImageEvent(event:SSPImageEvent) {
   if (event.type=="imageRollOver") {
       animate(true);
   }  
   if (event.type=="imageRollOut" && mouseY < 390) {
       animate(false);
   }
}
var tweening:Boolean = false;

function onThumbEvent(event:TGRequestEvent) {
   animate(false);
}

function animate( show:Boolean ):void {
   var end:int = show == true ? 1 : 0;
   _tween = new Tween( my_tg, "alpha", Strong.easeOut,  my_tg.alpha, end, .5, true );
   if( ! show ){
       _tween.addEventListener( TweenEvent.MOTION_FINISH, onComplete );
   } else {      
       my_tg.y = 390;
       my_tg.alpha = 1;
   }
}

function onComplete(e:TweenEvent) {    
   my_tg.y = 615;
   my_tg.alpha = 0;
}

my_ssp.addEventListener(SSPImageEvent.IMAGE_ROLLOVER, onImageEvent);
my_ssp.addEventListener(SSPImageEvent.IMAGE_ROLLOUT, onImageEvent);
my_tg.addEventListener(TGRequestEvent.LOAD_THUMB, onThumbEvent);
my_tg.addEventListener(MouseEvent.MOUSE_OUT, checkCollidingSSP);
my_ssp.addEventListener(SSPImageFormatEvent.IMAGE_ALIGN, getPosition);

function getPosition(e:SSPImageFormatEvent):void {
    imgX = e.x;
    imgWidth = e.w;    
}
function checkCollidingSSP(e:MouseEvent):void {
    if (mouseX < imgX || mouseX > imgX + imgWidth) {
        animate(false);
    }
}

Author

Commented:
Thanks so much for looking at it I realise it was a bigger job that I thought and I've changed my mind on how to acheive it with roll_over buttons .

Thanks again for all your help.

Have a nice day.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial