Possible to set length of MovieClip in TimelineMax to Tween with scrollbar drag

[heyitsjayy 13 Likes (Newbie)]

By using TimelineMax, I'm attempting to scroll through a series of grouped MovieClips (grouped into one larger movieClip) in a slideshow of images, if you will.

 

This grouped MovieClip (called productSlider) is going to be scrolled through by a separate scrollbar, similar to how this 'slider microsite' is controlled by the scrollbar at the top (not using the play, pause, rewind methods):

http://active.tutspl...-timeline-lite/

 

I've set this up a bit differently, and got the larger 'productSlider' to slide when the scrollbar is dragged up and down (using ondrag, etc).

 

The grouped MovieClip an into a problem though.. Basically it needs to scroll the ENTIRE height/length of the MovieClip (1377px) up and down. Though right now it only moves a portion of the entire MovieClip. Is there a way to insert a height (total Y coordinate), rather than a TimeLineLite based on time? (if that even makes sense)

 

Is there any ideas on how to get it to read the length (in pixels). Not sure if this is being set up right, so am open to suggestions & help! Thank you in advance for reading!

 

Here is some code being used (mainly converted from the example in the link above):

 

function secondAnimation():void
{
trace("second Animation");

var productArray:Array = new Array(productSlider.product1,productSlider.introproduct2, productSlider.product3,
productSlider.product4, productSlider.product5, productSlider.product6);

productArray.y = "-57";
//this positions th grouped MC off the top of the stage slightly since its longer and it should be slightly centered on start
secondtl.insert(TweenLite.to(productSlider, 3, { y:productArray.y, ease:Linear.easeNone}));
secondtl.pause();
}

///update productSlider
function updateNavigationSlides(e:MouseEvent):void {
//goes to that part in time,
// the calculation is a simple proportion fraction between the y position of the selection and the current timeline duration
secondtl.gotoAndStop(scrollbar.y*secondtl.totalDuration/480);
}

function drag(event:MouseEvent):void
{
//adds a listener to mouse movement so every time the mouse moves it updates the navigation slides
stage.addEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides);
//starts drag of the slider
//updates navigation 1 time
updateNavigationSlides(null);
scrollbar.startDrag(false,new Rectangle(147, 55, 0, 380));
}

function drop(event:MouseEvent = null):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides);
scrollbar.stopDrag();
}

[jamiejefferson 1,185 Likes (Superhero)]

Sorry if I've misunderstood how your slider stuff is setup (I glossed over that tutorial because I don't have flash installed), but it looks like on line 10 you are only tweening productSlider 57 pixels (when you say it should be 1377?). Since productArray.y is a string, this will be a relative tween to 57px from productSlider's current position. I'm only guessing here, but if you were trying to tween productSlider from y=1320 to y=-57, then you can just change line 8 to

productArray.y = -57;
// otherwise
productArray.y = "-1377";

 

The other point I can foresee an issue in is updateNavigationSlides where you have your scroll height as 480 but scrollbar only drags between 55 and 380. This math only works if scrollbar's min y=0, so you'll need to change line 18 to

secondtl.gotoAndStop((scrollbar.y-55)*secondtl.totalDuration/325);

 

This way your gotoAndStop values for secondtl have a range of 0-3 so you will have access to the whole tween. Before you would have had a range of 0.34375(55*3/480) - 2.375(380*3/480) so you would have been skipping the front and tail of the tween.

[heyitsjayy 13 Likes (Newbie)]

Thank you! This sort of works.. it is a bit hard to describe.

The -55 was there since it needed to start in the middle of the gallery, in a sense. at -55 down from the top point.

 

Adding a larger number (like -1377) made it jump down pretty far down the productSlider. That's the part that was a bit fuzzy.

I'd imagine just from the TweenLite.to(productSlider, 3, { y:productArray.y,

adding a number there would make it tween to that position.

 

Still a bit confused on how this could work. I went ahead and changes to that code you suggested (thank you again - by the way). But it now will scroll way past the end of the scroller's end point.

 

Edit: I'll try and descibe a bit better later on - and include a basic .Fla demo file to go with it! Cheers!

[heyitsjayy 13 Likes (Newbie)]

Hopefully this can help explain it better.

This is in a 160x600 stage size. The top of the black box is 0, or the top of the flash stage.

The prodScroll goes off the stage quite a bit (greyed area). Its 1377 total though starts at -57. The slider button itself starts at a position not at 0.. It starts at y:170. and is 100px tall. So that leaves the 380 scroll distance in the Rect area, since the total area height between the black is 480.

 

Am assuming that tutorial takes the registration point (like where it has navigation_mc.selection_mc.x ) I've switched that out with scolller.y - so this would just look for the reg point of that movieclip and not look for the actual width/height of it to scroll through, from what I can see?

 

Could anyone lend any more ideas for how to achieve this? It looks like by starting the prodScroller at an x position other than zero (to 55), it throws off the Timeline height/size since when you scroll down it scrolls the prodSlider very far off the stage to the top.

 

Biggest question is, how can you define the start x position for the top of the Slider as well (needs to start at -57), when it can't be at the beginning, x:0?