[Draggable > addEventListener > callback > this]

Ahhh I forgot about bind(). Thanks you guys. Both are great answers.

[Draggable > addEventListener > callback > this]

Hi.

 

From inside the callback method of the addEventListener, is there a way to get a relative reference to the draggable instance?

 

In the codepen, to retrieve the instance inside the options callback, I use "this". Using "this" inside the addEventListener callback retrieves the target element (not sure why because the listener is attached to the draggable instance).

 

it would be preferable for me to use the addeventlistener way but in my situation I have many draggable instances and would like to access their properties and methods from inside the same callback. Let me know if that doesn't make sense.

 

Thanks.

See the Pen jbQGav by anon (@anon) on CodePen

[Doc : camelCase for Draggable.addEventListener()]

I see. Thanks for the help.

[Doc : camelCase for Draggable.addEventListener()]

Here's the codpen but I see the difference already:

 

See the Pen jbQGav by anon (@anon) on CodePen

 

Looks like the variable to use addEventlistener on isn't the draggable instance. Could you explain the "[0]" at the end of Draggable.create?

 

Thanks.

[Doc : camelCase for Draggable.addEventListener()]

Hi.

 

Getting an error when using Draggable.addEventListener. I have tried both camel case and lowercase. The docs currently say camel case.

 

plugin version: 0.14.1

error: Uncaught TypeError: draggable.addEventListener is not a function

 

When console logging the draggable object I'm not seeing an addEventListener method on the object or it's prototype. Is it still available? 

 

Thanks.

[as2 slideshow]

Sorry for all the code. This basically what I need to know. As of now, if tween1 is in mid tween and then gets overwritten by tween2, the onComplete perameter for tween1 still still executes even though it didn't reach the end of the tween. Is there a way to prevent the onComplete from executing?

thanks.

[as2 slideshow]

Does anyone know of a slideshow tutorial or source code with greensock transitions? I'm looking for a slide transition with timer and prev and next buttons. I've done it with either buttons or timer but getting both to work is starting to wear on me. Here is the code if you can see ways to help, it would be appreciated. As far as I can tell, the timer part works great by itself, but as soon as I click on a button while in mid-transition, I'll get duplicate copies of timers. Does the onComplete perameter fire even if the tween never reaches it's finish? Is there a way to deal with that? Thanks.

 

var waitTime:Number = 1; //the timer between each transition

 

var clipNum:Number = 0; //dont change

var startX:Number = slides_mc.clip_1._x; //for slide positioning

var homeX:Number = slides_mc._x; //stores original slide_mc x position

var curX:Number = slides_mc._x; //stores the current slide_mc x position

var timer:Number;

var tween:TweenMax;

var clipArray:Array = [slides_mc.clip_1,

slides_mc.clip_2,

slides_mc.clip_3,

slides_mc.clip_4,

slides_mc.clip_5,

slides_mc.clip_6];

 

setPosition();

startTimer();

 

//position all slides side by side

function setPosition():Void

{

for (var i:Number = 0; i < clipArray.length; i++)

{

var clip:MovieClip = clipArray;

 

clip._x = (clip._width * i) + startX;

}

}

 

//start and clear timer

function startTimer():Void

{

timer = setInterval(function ()

{

if (clipNum >= clipArray.length - 1)

{

slide1();

}

else

{

slide2();

}

clearInterval(timer);

}, waitTime * 1000);

}

 

function slide1():Void

{

TweenMax.to(slides_mc,.7,{startAt: {blurFilter:{blurX:20}},

blurFilter:{blurX:0},

_x: homeX,

//delay: waitTime,

ease: Quint.easeOut,

overwrite:3,

onComplete: startTimer});

clipNum = 0;

curX = homeX;

trace("clipNum = " + clipNum);

trace("curX = " + curX);

}

 

function slide2():Void

{

TweenMax.to(slides_mc,.7,{startAt: {blurFilter:{blurX:20}},

blurFilter:{blurX:0},

_x: curX - slides_mc.clip_1._width,

//delay: waitTime,

ease: Quint.easeOut,

overwrite:3,

onComplete: startTimer});

clipNum++;

curX = curX - slides_mc.clip_1._width;

trace("clipNum = " + clipNum);

trace("curX = " + curX);

}

 

//nav buttons

btn_next.onRelease = function()

{

clearInterval(timer);

 

curX = curX - slides_mc.clip_1._width;

clipNum++;

trace("clipNum = " + clipNum);

trace("curX = " + curX);

 

TweenMax.to(slides_mc,.7,{startAt: {blurFilter:{blurX:20}},

blurFilter:{blurX:0},

_x: curX,

ease: Quint.easeOut,

ovewrite:3,

onComplete: startTimer });

}

 

btn_prev.onRelease = function()

{

clearInterval(timer);

 

curX = curX + slides_mc.clip_1._width;

clipNum--;

trace("clipNum = " + clipNum);

trace("curX = " + curX);

 

TweenMax.to(slides_mc,.7,{startAt: {blurFilter:{blurX:20}},

blurFilter:{blurX:0},

_x: curX,

ease: Quint.easeOut,

ovewrite:3,

onComplete: startTimer });

}