A Flash Developer Resource Site

Results 1 to 1 of 1

Thread: Accordian style masking

  1. #1
    Junior Member
    Join Date
    Dec 2005
    Posts
    5

    Accordian style masking

    Hello,

    I am trying to make a masking effect that on rollover/rollout expands/collapses the masks of the focused masked image wile collapsing the rest horizontally...This is a technique that is similar to accordion type menu and the menu icons on the new OSX for Macs...has anyone seen any thread, articles, or tuts on this subject matter

    thanks for oyur help in advance

    Kendall

    Here's an update

    I managed to come up with a technique however its stil flawed

    code:

    var maskObject:MovieClip = maskMc;
    var maskPos:Number = maskObject._x;
    var imageObject:MovieClip = imageContainer;
    var speed = 7;
    var changing = 0;
    function LoadImage() {
    imageObject.loadMovie('images/'+image);
    }
    function Collapse(collapseTo:Number) {
    if (changing>0) {
    clearInterval(changing);
    }

    maskObject.onEnterFrame = function() {
    ChangeWidth(collapseTo);
    };

    //changing = setInterval(this, "ChangeWidth", 100, collapseTo);
    }
    function Expand(expandTo:Number) {
    if (changing>0) {
    clearInterval(changing);
    }

    maskObject.onEnterFrame = function() {
    ChangeWidth(expandTo);
    };

    //changing = setInterval(this, "ChangeWidth", 100, expandTo);
    }
    function ChangeWidth(tWidth:Number) {
    if (Math.abs(Math.round(maskObject._width)-tWidth)>1) {
    dist = maskObject._width-tWidth;
    maskObject._width -= dist/7;
    } else {
    maskObject._width = tWidth;
    delete maskObject.onEnterFrame;
    }
    maskObject._x = (leftSibling._x+leftSibling._width+4)/7;
    }
    LoadImage();
    this.onEnterFrame = function() {
    maskObject._x = leftSibling._x+leftSibling._width+4;
    };


    Then i call it by a mousover with...
    code:

    _root.slide1.Collapse(15);
    _root.slide3.Collapse(15);
    _root.slide4.Collapse(15); this._parent.Expand((this._parent.imageContainer._ width-(19*3)));


    Problem is they do not maintain spacing consitancey so it isnt as fluent as it should be
    Last edited by Isekream; 05-08-2006 at 01:10 PM. Reason: update

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center