Detecting rollouts without errors

  • uknightuss
  • Graduate
  • Graduate
  • uknightuss
  • Posts: 196
  • Loc: Los Angeles

Post 3+ Months Ago

Greetings 2 all 2nite, or 2day if that is your way! :)

I'm having a little difficulty with a project here because I do not fully understand how to use ActionScript to its fullest potential.. I'm still very green with "AS" you could say..

So on with the problem.

I'm working on THIS Thumbnail Scrollbar (please excuse the spooky baby faces!), and the problem that I'm encountering is that when you scroll back and forth to the left and right some of the thumnails get stuck in their "up" state and do not return to their smaller sizes. It usually happens a lot more when you are making the scrollbar move slowly.

I'm using the actionscript in the sample below to make the thumbnails play their movie sequence of growing and shrinking.

Code: [ Select ]
// used on first frame of movieclip for growing and shrinking
this.onEnterFrame = function ()
{
  if (active == true)
  {
    nextFrame();
  }
  else
  {
    prevFrame();
  } // end if
};
  1. // used on first frame of movieclip for growing and shrinking
  2. this.onEnterFrame = function ()
  3. {
  4.   if (active == true)
  5.   {
  6.     nextFrame();
  7.   }
  8.   else
  9.   {
  10.     prevFrame();
  11.   } // end if
  12. };

And the "AS" used on the thumbnails themselves.
Code: [ Select ]
on (rollOver)
{
  active = true;
}
on (rollOut)
{
  active = false;
}
  1. on (rollOver)
  2. {
  3.   active = true;
  4. }
  5. on (rollOut)
  6. {
  7.   active = false;
  8. }


Obviously this code alone is not working well enough.

I can imagine something to do, but I don't know how to code this stuff very well.. I imagine that the thumbnails could each be assigned a label (or an array of thumbnails with one label?), and could then be checked every second by some fancy "AS" to see if they are truly the active thumbnail, and if not to do the "prevFrame" action.

Did that make sense?

Can somebody give me some guidance please?

Thank You for anything you can help with.

-RK
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • contstrictor
  • Novice
  • Novice
  • contstrictor
  • Posts: 26

Post 3+ Months Ago

what you can do it this
instead of making the buttons make them movie clips and call the clipEvent functions on the movieClips themselves eg:

Code: [ Select ]
onClipEvent(load){
this._xscale = //whatever size you want
this._yscale = //whatever size you want.
div = 3 // or whatever speed factor you want you "buttons" to ease.
}
onClipEvent(enterFrame){
this._xscale += (tagetXscale - this._xscale)/div;
this._yscale +=(targetYscale - this._yscale)/div;

//then you can add button functionality to the clips

this.onRollOver = function(){
targetXscale = //new number to expand your clip by
targetYscale = //new number to expand your clip by
}
//If you want it to do something when clicked
this.onRelease = function(){
yourFunction()// eg getURL("blah blah...");
}
}
  1. onClipEvent(load){
  2. this._xscale = //whatever size you want
  3. this._yscale = //whatever size you want.
  4. div = 3 // or whatever speed factor you want you "buttons" to ease.
  5. }
  6. onClipEvent(enterFrame){
  7. this._xscale += (tagetXscale - this._xscale)/div;
  8. this._yscale +=(targetYscale - this._yscale)/div;
  9. //then you can add button functionality to the clips
  10. this.onRollOver = function(){
  11. targetXscale = //new number to expand your clip by
  12. targetYscale = //new number to expand your clip by
  13. }
  14. //If you want it to do something when clicked
  15. this.onRelease = function(){
  16. yourFunction()// eg getURL("blah blah...");
  17. }
  18. }

//this will shrink or expand the clips anyhow you want and will make the movie clips behave like buttons.

A word of caution though. try to use different variable names for different clips otherwise you'll have all the clips growing when you pass your mouse over one of then.
  • uknightuss
  • Graduate
  • Graduate
  • uknightuss
  • Posts: 196
  • Loc: Los Angeles

Post 3+ Months Ago

I've been messing around with the script you provided but cannot get anything to function the way that it has been hypothesized.. I'm not sure what I'm doing here with this, what I need to add/modify..

Could you please elaborate further?

Thank you again for the contribution of knowledge!
  • contstrictor
  • Novice
  • Novice
  • contstrictor
  • Posts: 26

Post 3+ Months Ago

Have you ever tried animating with actionscript? If you have it's the same concept except that instead of playing with the _x and _y coordinates you'll be manipulating the _xscale and _yscale this will work with sizes.
Look up animating with actionscript from Jesse Stratfords site. http://www.actionscript.org
  • uknightuss
  • Graduate
  • Graduate
  • uknightuss
  • Posts: 196
  • Loc: Los Angeles

Post 3+ Months Ago

I didn't see the specific tutorial that you suggested but did find This Other Tutorial which basically showed me the same things that you were trying to show me.

Between your scripting suggestion and the tutorial that I found, this is the code that I ended up using on each thumbnail. It works really well except that I could not figure out how to do the animation between the two states "up and over".. In my version it just jumps to the enlarged state on rollover.. I would like for it to animate, but can't seem to get that part of it yet..

Code: [ Select ]
onClipEvent(load){
    this._xscale = 100;
    this._yscale = 100;
}
onClipEvent (enterFrame) {
    this.onRollOver = function(){
    this._xscale = 130;
    this._yscale = 130;
    this.onRollOut = function(){
    this._xscale = 100;
    this._yscale = 100;
    this.onRelease = function(){
  tellTarget("_root.TnE.enlg"){
      gotoAndPlay("two");
  } // End of TellTarget
}
}
}
}
  1. onClipEvent(load){
  2.     this._xscale = 100;
  3.     this._yscale = 100;
  4. }
  5. onClipEvent (enterFrame) {
  6.     this.onRollOver = function(){
  7.     this._xscale = 130;
  8.     this._yscale = 130;
  9.     this.onRollOut = function(){
  10.     this._xscale = 100;
  11.     this._yscale = 100;
  12.     this.onRelease = function(){
  13.   tellTarget("_root.TnE.enlg"){
  14.       gotoAndPlay("two");
  15.   } // End of TellTarget
  16. }
  17. }
  18. }
  19. }


Thanks for the help on this. If you or anybody else would like to help make the script any better(animated), or even to point me towards another good tutorial so I can learn on my own, then I'd be appreciative. :D

I already have some ideas of what I need to do, but ran out of time to work on it for the time being.. So later I will begin the experiments again!

Again, thanks!
  • uknightuss
  • Graduate
  • Graduate
  • uknightuss
  • Posts: 196
  • Loc: Los Angeles

Post 3+ Months Ago

I have updated my sample page as well to reflect the new and improved scroller.

Please have a look

Thanks!

PS, the old one is still there for reference (just scroll the page down)..
  • uknightuss
  • Graduate
  • Graduate
  • uknightuss
  • Posts: 196
  • Loc: Los Angeles

Post 3+ Months Ago

I forgot to mention that I AM having buggy behavior with the thumbnail buttons not always doing their action. (in other words nothing happens when you click them and then all of a sudden they will start working again).

Any suggestions?

The code I'm using is shown above in my previous post, if there is a flaw with it please let me know. Thank you

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 17 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.