add mask tween to scroller

  • virtualgeorge
  • Newbie
  • Newbie
  • virtualgeorge
  • Posts: 13

Post 3+ Months Ago

In flash 8 I created a thumnail scroller from a tutorial and have this in frame 1

Code: [ Select ]
panel.onRollOver = panelOver;

function panelOver() {
    this.onEnterFrame = scrollPanel;
    delete this.onRollOver;
}

var b = stroke.getBounds(_root);

function scrollPanel () {
    if (_xmouse<b.xMin || _xmouse>b.xMax || _ymouse<b.yMin || _ymouse>b.ymax) {
    this.onRollOver = panelOver;
    delete this.onEnterFrame;
}

    if (panel._y >= 4) {
        panel._y = 4;
     }
    if (panel._y <= -248) {
        panel._y = -248;
     }

    //set to half stage width
    var ydist = _ymouse - 140;
    
    //sets speed - lower = faster
    panel._y += -ydist / 7;

        }
  1. panel.onRollOver = panelOver;
  2. function panelOver() {
  3.     this.onEnterFrame = scrollPanel;
  4.     delete this.onRollOver;
  5. }
  6. var b = stroke.getBounds(_root);
  7. function scrollPanel () {
  8.     if (_xmouse<b.xMin || _xmouse>b.xMax || _ymouse<b.yMin || _ymouse>b.ymax) {
  9.     this.onRollOver = panelOver;
  10.     delete this.onEnterFrame;
  11. }
  12.     if (panel._y >= 4) {
  13.         panel._y = 4;
  14.      }
  15.     if (panel._y <= -248) {
  16.         panel._y = -248;
  17.      }
  18.     //set to half stage width
  19.     var ydist = _ymouse - 140;
  20.     
  21.     //sets speed - lower = faster
  22.     panel._y += -ydist / 7;
  23.         }


I have a mask so you see only 3 thumnails and scroll to see the rest. As you move the mouse over the movie you can scroll through the images. But I want to tween the mask so initially it is small and only shows 1 thumnail, then when moused over the mouse expands to expose more thumnails so I added this to the above code named the mask 'mask':

Code: [ Select ]
 //mask tween 
    mask.onRollOver = function ()
        {
        mask.gotoAndPlay(2);
        }
    mask.onRollOut = function ()
        {
        mask.gotoAndPlay(11);
  1.  //mask tween 
  2.     mask.onRollOver = function ()
  3.         {
  4.         mask.gotoAndPlay(2);
  5.         }
  6.     mask.onRollOut = function ()
  7.         {
  8.         mask.gotoAndPlay(11);


So now the mask does tween when rolled over & out but now my scroller doesn't work. I did the mask tween wrong so it screws up the rest of the code so my images don't scroll when moused over.

Can someone please point me in the right direction?
thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

well the problem is that you now have two "mouse active" objects stacked over the top of each other. You need to not make the mask a button (something becomes a button when you assign it an onRollOver, etc event)

so you just need to combine the two actions...
Code: [ Select ]
function panelOver() {
this.onEnterFrame = scrollPanel;
delete this.onRollOver;
mask.gotoAndPlay(2);
}

panel.onRollOut = function(){
this._parent.mask.gotoAndPlay(11);
}
  1. function panelOver() {
  2. this.onEnterFrame = scrollPanel;
  3. delete this.onRollOver;
  4. mask.gotoAndPlay(2);
  5. }
  6. panel.onRollOut = function(){
  7. this._parent.mask.gotoAndPlay(11);
  8. }


If that doesn't work I would use a hitTest on the panel and find out if the mouse is over the panel or not (if over do scroll and mask, else stop). That will remove buttons from the equation entirely.
  • virtualgeorge
  • Newbie
  • Newbie
  • virtualgeorge
  • Posts: 13

Post 3+ Months Ago

Thanks! That almost worked but I forgot to mention that my thums have actions too so they have rollover effects.

When I did the above I lose my rollover effects on the thums.
When I remove the
panel.onRollOut = function(){
this._parent.mask.gotoAndPlay(11);
}

Then it works except I just need a different way to get the onRollOut effect for the mask tween. I will go look up hitTest as I am not sure how to do that.

Here is an example of what I have
http://salonjoshuaboutique.com/ftest.html
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

yeah hitTest is the way to go. Basically what that does is give you a true or false if any objects (can include your mouse pointer) overlap so you don't need to use a mouse action to trigger movement, etc

I built something like that a while ago. There's probably way more than you need here, but feel free to use whatever you need. (mine's a sideways scroller so you'll have to change the x and y's

Code: [ Select ]
 
//-------------------------------------------------------------//
//                   Scroller Controls
//-------------------------------------------------------------//
// ------- setup ---//
var myScroller = scrollBar_mc;  // what gets scrolled
var myTarget = scrollControl; // scroll control bar
var myMask = scrollMask; // mask shape
var maxSpeed = 15; //maximum number of pixels to move per frame.
 
// ------- scroll system ---//
var scrollCenter = myMask._width/2;
 
   
myTarget.onEnterFrame = function()
{
    if(myScroller._width > myMask._width){
        var xMouse = Math.floor(myTarget._xmouse);
        var yMouse = Math.floor(myTarget._ymouse);
       
        if (myTarget.hitTest(_root._xmouse, _root._ymouse, false))
        {
            if(!myScroller.isTweening()){
                myScroller.stopTween();
            }
           
            // check if mouse is inside controler area and move content
            var containerEnd = myMask._x + myMask._width;
            var scrollerEnd = myScroller._x + myScroller._width;
           
            //need absolute value of distance from center.
            var absDiff = Math.abs(xMouse - scrollCenter);
           
            //figure out percentage from center to use to multiply and figure out speed.
            var percentage = absDiff/scrollCenter;
           
            //get speed.
            var curSpeed = maxSpeed * percentage;
           
            if(xMouse > scrollCenter && containerEnd < scrollerEnd){
                // if mouse is on right side of the controler scroll clip left
                myScroller._x = Math.round(myScroller._x - curSpeed);
            }else if(xMouse < scrollCenter && myMask._x > myScroller._x){
                // if mouse is on left side of the controler scroll clip right
                myScroller._x = Math.round(myScroller._x + curSpeed);
            }
            else if( myMask._x < myScroller._x)
            {
                myScroller._x = myMask._x;
            }
        }else{
           
            // if mouse leaves scroll area, fix the content
           
            // remove if we don't like the bounce //
            var dist = Math.round((myMask._x - myScroller._x)/_global.blockWidth) * _global.blockWidth;
            var endTarg = Math.round(myMask._x - dist + 2);
           
            if(!myScroller.isTweening()){
                myScroller.tween("_x",endTarg,1,"easeOutExpo");
            }
           
           
            var moveTarg = (myScroller._x + endTarg)* 0.5;
            if(myScroller._x > endTarg || myScroller._x < endTarg){
                var moveDiff = endTarg - moveTarg;
                if(moveDiff < 0.5){
                    myScroller._x = endTarg;
                }else{
                    myScroller._x = moveTarg;
                }
            }
            // remove is we don't like the bounce //
        }
    }
}
 
  1.  
  2. //-------------------------------------------------------------//
  3. //                   Scroller Controls
  4. //-------------------------------------------------------------//
  5. // ------- setup ---//
  6. var myScroller = scrollBar_mc;  // what gets scrolled
  7. var myTarget = scrollControl; // scroll control bar
  8. var myMask = scrollMask; // mask shape
  9. var maxSpeed = 15; //maximum number of pixels to move per frame.
  10.  
  11. // ------- scroll system ---//
  12. var scrollCenter = myMask._width/2;
  13.  
  14.    
  15. myTarget.onEnterFrame = function()
  16. {
  17.     if(myScroller._width > myMask._width){
  18.         var xMouse = Math.floor(myTarget._xmouse);
  19.         var yMouse = Math.floor(myTarget._ymouse);
  20.        
  21.         if (myTarget.hitTest(_root._xmouse, _root._ymouse, false))
  22.         {
  23.             if(!myScroller.isTweening()){
  24.                 myScroller.stopTween();
  25.             }
  26.            
  27.             // check if mouse is inside controler area and move content
  28.             var containerEnd = myMask._x + myMask._width;
  29.             var scrollerEnd = myScroller._x + myScroller._width;
  30.            
  31.             //need absolute value of distance from center.
  32.             var absDiff = Math.abs(xMouse - scrollCenter);
  33.            
  34.             //figure out percentage from center to use to multiply and figure out speed.
  35.             var percentage = absDiff/scrollCenter;
  36.            
  37.             //get speed.
  38.             var curSpeed = maxSpeed * percentage;
  39.            
  40.             if(xMouse > scrollCenter && containerEnd < scrollerEnd){
  41.                 // if mouse is on right side of the controler scroll clip left
  42.                 myScroller._x = Math.round(myScroller._x - curSpeed);
  43.             }else if(xMouse < scrollCenter && myMask._x > myScroller._x){
  44.                 // if mouse is on left side of the controler scroll clip right
  45.                 myScroller._x = Math.round(myScroller._x + curSpeed);
  46.             }
  47.             else if( myMask._x < myScroller._x)
  48.             {
  49.                 myScroller._x = myMask._x;
  50.             }
  51.         }else{
  52.            
  53.             // if mouse leaves scroll area, fix the content
  54.            
  55.             // remove if we don't like the bounce //
  56.             var dist = Math.round((myMask._x - myScroller._x)/_global.blockWidth) * _global.blockWidth;
  57.             var endTarg = Math.round(myMask._x - dist + 2);
  58.            
  59.             if(!myScroller.isTweening()){
  60.                 myScroller.tween("_x",endTarg,1,"easeOutExpo");
  61.             }
  62.            
  63.            
  64.             var moveTarg = (myScroller._x + endTarg)* 0.5;
  65.             if(myScroller._x > endTarg || myScroller._x < endTarg){
  66.                 var moveDiff = endTarg - moveTarg;
  67.                 if(moveDiff < 0.5){
  68.                     myScroller._x = endTarg;
  69.                 }else{
  70.                     myScroller._x = moveTarg;
  71.                 }
  72.             }
  73.             // remove is we don't like the bounce //
  74.         }
  75.     }
  76. }
  77.  
  • virtualgeorge
  • Newbie
  • Newbie
  • virtualgeorge
  • Posts: 13

Post 3+ Months Ago

Thanks! I will see if I can figure that out :)

Post Information

  • Total Posts in this topic: 5 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.