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