Advanced Scrolling Animation using Tween Lite

hey folks. i'll try concise possible.

 

imagine res. of 320 x 480 flash file in art displayed, @ bottom of .fla there 5 icons, 2 inside white space , 3 on grey space. i'm trying achieve if mouse hovers near bottom right corner of screen, 2 icons in white space, shifted left, allowing icons in grey space move left well, taking palce of icons in white space. i'm trying implement scrolling animation. let's in bottom right , bottom left of screen have 2 invisible smaller screens can listen mouse_over event, perform following code current implementation:

 

// showing implementation of bottom right invisible screen, bottom left invisible screen

// identical except when mouse hovers icons should shift right

 

brscreen.addeventlistener(mouseevent.mouse_over, mouseover);

brscreen.addeventlistener(mouseevent.roll_over, rollover);

 

public function mouseover(me:mouseevent):void

{

 

     var iconposition:uint;

 

     // 5 icons on bottom of page in array called myarray

     for(int i:uint = 0; <myarray.length; i++)

     {

          var currenticon:displayobjectcontainer = myarray[i];

          iconposition = currenticon.x; // x position of icons change when scrolling occurs

 

          tweenlite.to(currenticon, 2, {x:iconposition - 50, y: 450, ease:quart.easein}); // assume libraries imported

          // y value of icon never changes since side-to-side scroll, 450 arbitrary value

     }

}

 

public function rollout(me:mouseevent):void

{

     brscreen.removeeventlistener(mouseevent.mouse_over, mouseover);
}

 

the desired behaviour mouse hovered on near bottom right screen, icons continue scrolling mouse hovered off elsewhere, side-to-side scrolling stops. issue when hover mouse near bottom right screen, icons shifted left once, seems if mouse_over event isn't propagating while i'm hovering on bottom right portion of screen, additionally when hover mouse elsewhere , and re-hover bottom right portion of screen, icons shifted left once. want continuously shift icons left long mouse remains hovered above bottom right portion of screen.

 

if have hard time understanding desired behaviour is, here youtube vid., check @ 25 - 40 seconds or when starts manipulating icons @ bottom of screen, instead of using fingers touch screen, i'm going use mouse since flash app. appreciated.

 

http://www.youtube.com/watch?v=egy7q9vpmdc

More discussions in Animation tips and tricks

adobe