We create training material for nuses and working on a mask that will shadow everything but what is seen in a highlighting box. Basically I created a movieClip with a box border and no fill. I then move that onto the stage on the timeline when I need it to come on screen during the movie.
I move the box and size it. The box is assigned a var myPos (just so it knows it’s name by an array).
At frame 1 I have this function set up:
for(var i:Number = 0;i<myFaderArray.length;i++){
myFaderArray*.removeMovieClip()
myHighlighterArray*._alpha = 0
}
var myFireOnceArray:Array = new Array(false, false, false, false);
var myFaderArray:Array = new Array();
var myHighlighterArray:Array = new Array();
var currentFader:MovieClip;
var currentHighlighter:MovieClip;
var previousFader:MovieClip;
var previousHighlighter:MovieClip;
function drawMask(newHighlighter, alpha, color) {
var alpha:Number = (alpha == undefined) ? 35 : alpha;
var color:Number = (color == undefined) ? 0x000000 : color;
var highX:Number = newHighlighter._x;
var highY:Number = newHighlighter._y;
var highXW:Number = (newHighlighter._x+newHighlighter._width);
var highXH:Number = (newHighlighter._y+newHighlighter._height);
var curLdRootHeight:Number = this._parent._height
var curLdRootWidth:Number = this._parent._width;
//
var fadeHolder:MovieClip = this.createEmptyMovieClip("fadeHolder", this.getNextHighestDepth());
newHighlighter._alpha = 0;
fadeHolder._alpha = 0;
myFaderArray.push(fadeHolder);
myHighlighterArray.push(newHighlighter);
var holderOne:MovieClip = fadeHolder.createEmptyMovieClip("holderOne", fadeHolder.getNextHighestDepth());
var holderTwo:MovieClip = fadeHolder.createEmptyMovieClip("holderTwo", fadeHolder.getNextHighestDepth());
var holderThree:MovieClip = fadeHolder.createEmptyMovieClip("holderThree", fadeHolder.getNextHighestDepth());
var holderFour:MovieClip = fadeHolder.createEmptyMovieClip("holderFour", fadeHolder.getNextHighestDepth());
holderOne.lineStyle(0, 0, 0);
holderOne.beginFill(color, alpha);
holderOne.moveTo(0, 0);
holderOne.lineTo(highX, 0);
holderOne.lineTo(highX, curLdRootHeight);
holderOne.lineTo(0, curLdRootHeight);
holderOne.lineTo(0, 0);
holderOne.endFill();
holderTwo.lineStyle(0, 0, 0);
holderTwo.beginFill(color, alpha);
holderTwo.moveTo(highXW, 0);
holderTwo.lineTo(curLdRootWidth, 0);
holderTwo.lineTo(curLdRootWidth, curLdRootHeight);
holderTwo.lineTo(highXW, curLdRootHeight);
holderTwo.lineTo(highXW, 0);
holderTwo.endFill();
holderThree.lineStyle(0, 0, 0);
holderThree.beginFill(color, alpha);
holderThree.moveTo(highX, 0);
holderThree.lineTo(highXW, 0);
holderThree.lineTo(highXW, highY);
holderThree.lineTo(highX, highY);
holderThree.lineTo(highX, 0);
holderThree.endFill();
holderFour.lineStyle(0, 0, 0);
holderFour.beginFill(color, alpha);
holderFour.moveTo(highX, highXH);
holderFour.lineTo(highXW, highXH);
holderFour.lineTo(highXW, curLdRootHeight);
holderFour.lineTo(highX, curLdRootHeight);
holderFour.lineTo(highX, highXH);
holderFour.endFill();
newHighlighter.swapDepths(this.getNextHighestDepth());
//
newHighlighter.fader = fadeHolder;
}
In each highlighter movieClip, when it comes on the stage I have this code:
Code:
stop();
this.onUnload = function() {
this._alpha = _parent.myFaderArray[myPos]._alpha=0;
_parent.currentPos = undefined;
};
_parent.currentPos = myPos;
this._alpha = 0;
for (var i:Number = 0; i<_parent.myFaderArray.length; i++) {
_parent.myFaderArray*._alpha = 0;
_parent.myHighlighterArray*._alpha = 0;
}
if (_parent.myFaderArray[myPos] != undefined) {
fadeIn();
}
if (_parent.myFireOnceArray[myPos] == false) {
_parent.myFireOnceArray[myPos] = true;
_parent.drawMask(this);
}
function fadeIn() {
for (var i:Number = 0; i<_parent>=100) {
this._alpha = _parent.myFaderArray[myPos]._alpha=100;
this.onEnterFrame = null;
}
};
}
function fadeOut() {
this.onEnterFrame = function() {
this._alpha = _parent.myFaderArray[myPos]._alpha -= 5;
if (this._alpha<=0) {
this._alpha = _parent.myFaderArray[myPos]._alpha=0;
this.onEnterFrame = null;
}
};
}
It’s a bit bugy and didn’t know if there is a better way to do this.