[F8] drawRectangle N for a Mask

**donaldparkerii** · 07-10-2006, 07:30 PM

I have a movie clip target_mc, and I am trying to have targetMask_mc mask whatever content is loaded into it. I created both movie clips in actionscript, and it works fine until I load new content, then I just get a big green square (my fill color). Below is all my code the content loader section is where I think its going wrong.

Code:

/*//////////////////////////
///Create Content Loader///
/////////////////////////*/
_root.createEmptyMovieClip("target_mc",1);
target_mc._x = 17;
target_mc._y = 149;
_root.createEmptyMovieClip("targetMask_mc",2);
targetMask_mc._x = 16;
targetMask_mc._y = 149;
drawRectangle(targetMask_mc, 766, 500, 0x99FF00, 100);
function drawRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, fillColor:Number, fillAlpha:Number):Void {
    with (target_mc) {
        beginFill(fillColor, fillAlpha);
        moveTo(0, 0);
        lineTo(boxWidth, 0);
        lineTo(boxWidth, boxHeight);
        lineTo(0, boxHeight);
        lineTo(0, 0);
        endFill();
    }
}
targetMask_mc.cacheAsBitmap;
target_mc.setMask(targetMask_mc);




/*///////////////////////////
///      Build Menu      ///
//////////////////////////*/

import mx.utils.Delegate; 
var myMenu:XML = new XML (); 
myMenu.ignoreWhite = true; 
myMenu.onLoad = Delegate.create (this, menuLoad); 
myMenu.load ("menu1.xml"); 
// 
function menuLoad (success:Boolean):Void 
{ 
    if (success) 
    { 
        gen_menu.dataProvider = myMenu.firstChild; 
        var menuListener:Object = new Object (); 
        menuListener.change = function (evt_obj:Object) 
        { 
			var type:String = evt_obj.menuItem.attributes.type;
			var frameName:String = evt_obj.menuItem.attributes.data;
			var url:String = evt_obj.menuItem.attributes.url; 
			var msg:String = evt_obj.menuItem.attributes.msg;
			
			if(type == "cap"){
				trace("captivate");
				target_mc.unloadMovie();
				target_mc.loadMovie(url);
				msg_txt.text = "";
				capControl_mc._visible = true;
				capControl_mc.runTime();
				
			}else if((type == "txt") ||(type == "roll")){
				trace ("text or rollover");
				target_mc.unloadMovie();
				target_mc.loadMovie(url);
				if(msg){
					msg_txt.text = msg;
				}else{
					msg_txt.text = "";
				}
				capControl_mc._visible = false;
				delete capControl_mc.onEnterFrame;
			}//end if
        }; 
        gen_menu.addEventListener ("change", menuListener); 
    } 
    else 
    { 
        trace ("error loading XML file"); 
    } 
}

**madzigian** · 07-11-2006, 01:31 AM

you would need to re-set the mask on the target mc after each file has loaded... you can't really do anything to movies loaded with loadMovie() until the clip is done loading...and you definitely can't set a mask on a clip until it's contents are done loading.. The easy solution is to use the MovieClipLoader class, which allows you more flexibility in the loading process, and you can set a mask on a clip once it has initialized (which you can't detect with loadMovie()) as well as position the clip, adjust alpha, etc...

look up MovieClipLoader in your help files.... and if you need more help, search the forums... there are dozens of threads about it...

**donaldparkerii** · 07-11-2006, 12:17 PM

Ok I added a MovieClip Loader, and I cant get it to load anything at all.

Code:

stop();
_lockroot = true;
gen_menu.setStyle("themeColor","0xB5E3E1");
target_mc.scroll.setStyle("themeColor","0xB5E3E1");
capControl_mc._visible = false;
if (windowBG.main_window.move){ 
	windowBG.main_window.move=false; 
}


/*//////////////////////////
///Create Content Loader///
/////////////////////////*/
var targetLoader:MovieClipLoader;

var targetListener = new Object();

this.createEmptyMovieClip("target_mc",1);
target_mc._x = 17;
target_mc._y = 148;

this.createEmptyMovieClip("targetMask_mc",2);
targetMask_mc._x = 16;
targetMask_mc._y = 148;
drawRectangle(targetMask_mc, 766, 500, 0x99FF00, 100);
function drawRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, fillColor:Number, fillAlpha:Number):Void {
    with (target_mc) {
        beginFill(fillColor, fillAlpha);
        moveTo(0, 0);
        lineTo(boxWidth, 0);
        lineTo(boxWidth, boxHeight);
        lineTo(0, boxHeight);
        lineTo(0, 0);
        endFill();
    }
}

targetMask_mc.cacheAsBitmap;

targetListener.onLoadStart = function(){
	trace("loading started");
}

targetListener.onLoadComplete = function() {
	trace("loading finished");
	
};

targetListener.onLoadInit = function(){
	trace("movie clip init");
	target_mc.setMask(targetMask_mc);
}

targetLoader.addListener(targetListener);
target_mc.setMask(targetMask_mc);


/*///////////////////////////
///      Build Menu      ///
//////////////////////////*/

import mx.utils.Delegate; 
var myMenu:XML = new XML (); 
myMenu.ignoreWhite = true; 
myMenu.onLoad = Delegate.create (this, menuLoad); 
myMenu.load ("menu1.xml"); 
function menuLoad (success:Boolean):Void 
{ 
    if (success) 
    { 
        gen_menu.dataProvider = myMenu.firstChild; 
        var menuListener:Object = new Object (); 
        menuListener.change = function (evt_obj:Object) 
        { 
			var type:String = evt_obj.menuItem.attributes.type;
			var frameName:String = evt_obj.menuItem.attributes.data;
			var url:String = evt_obj.menuItem.attributes.url; 
			var msg:String = evt_obj.menuItem.attributes.msg;
			
			if(type == "cap"){
				trace("captivate");
				//target_mc.unloadMovie();
				targetLoader.unloadClip(target_mc);
				//target_mc.loadMovie(url);
				targetLoader.loadClip(url,target_mc);
				msg_txt.text = "";
				capControl_mc._visible = true;
				capControl_mc.runTime();
				
			}else if((type == "txt") ||(type == "roll")){
				trace ("text or rollover");
				//target_mc.unloadMovie();
				targetLoader.unloadClip(target_mc);
				//target_mc.loadMovie(url);
				targetLoader.loadClip(url,target_mc);
				if(msg){
					msg_txt.text = msg;
				}else{
					msg_txt.text = "";
				}
				capControl_mc._visible = false;
				delete capControl_mc.onEnterFrame;
			}//end if
        }; 
        gen_menu.addEventListener ("change", menuListener); 
    } 
    else 
    { 
        trace ("error loading XML file"); 
    } 
}

**madzigian** · 07-11-2006, 02:08 PM

you were close.. but your syntax is wrong. You never actually create the MovieClipLoader and when you call loadClip() and unloadClip(), you were doing so targeting the listener, and NOT the mcl instance :

var targetLoader:MovieClipLoader;

you're almost there.. but not quite.

Here's how i would do it...

Code:

MovieClip.prototype.drawRect = function(x, y, w, h, c, a) {
        var _mc:MovieClip = this;
        _mc.moveTo(x, y);
        _mc.lineStyle(0, c, a);
        _mc.beginFill(c, a);
        _mc.lineTo(x+w, y);
        _mc.lineTo(x+w, y+h);
        _mc.lineTo(x, y+h);
        _mc.lineTo(x, y);
        _mc.endFill();
};

/*
PARAMETERS:
x - x position
y - y position
w - width
h - height
c - fill color
a - alpha
*/

// This will be your container movieclip....
var MTclip = this.createEmptyMovieClip("empty", this.getNextHighestDepth());

// create the moviecliploader and listener object
var mcl:MovieClipLoader = new MovieClipLoader();
var listen:Object = new Object();

/// now.. the good stuff
listen.onLoadStart = function(target_mc:MovieClip) {
        trace("Loading file into : "+target_mc);
        target_mc._alpha = 0;
        target_mc.stop();
        var mask = this.createEmptyMovieClip("maskMC", this.getNextHighestDepth());
};

listen.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
        percent = Math.round(bytesLoaded/bytesTotal*100) + "% Loaded...";
        trace(percent);
};

listen.onLoadInit = function(target_mc:MovieClip) {
        target_mc._x = 17;
        target_mc._y = 148;
        mask.drawRect(target_mc._x, target_mc._y, 766, 500, 0x99FF00, 10);
        target_mc.setMask(mask);
        trace("Mask was set on : "+target_mc);
        target_mc._alpha = 100;
};

listen.onLoadComplete = function(target_mc:MovieClip) {
        trace("Clip loaded into : "+target_mc+" successfully!");
        target_mc.play();
};


mcl.addListener(listen);


// BUILD YOUR MENU --------------->>

import mx.utils.Delegate;
var myMenu:XML = new XML();
myMenu.ignoreWhite = true;

myMenu.onLoad = Delegate.create(this, menuLoad);
myMenu.load("menu1.xml");

function menuLoad(success:Boolean):Void {
	if (success) {
		gen_menu.dataProvider = myMenu.firstChild;
		var menuListener:Object = new Object();
		
		menuListener.change = function(evt_obj:Object) {
			var type:String = evt_obj.menuItem.attributes.type;
			var frameName:String = evt_obj.menuItem.attributes.data;
			var url:String = evt_obj.menuItem.attributes.url;
			var msg:String = evt_obj.menuItem.attributes.msg;

			if (type == "cap") {
				trace("captivate");
				
				// UnLoad Old & Load New  -------- >>

				mcl.unloadClip(MTclip);
				mask.removeMovieClip();
				mcl.loadClip(url, MTclip);
				
				msg_txt.text = "";
				capControl_mc._visible = true;
				capControl_mc.runTime();
				
			} else if ((type == "txt") || (type == "roll")) {
				trace("text or rollover");
				
				// UnLoad Old & Load New  -------- >>

				mcl.unloadClip(MTclip);
				mask.removeMovieClip();
				mcl.loadClip(url, MTclip);
				
				if (msg) {
					msg_txt.text = msg;
				} else {
					msg_txt.text = "";
				}
				
				capControl_mc._visible = false;
				delete capControl_mc.onEnterFrame;
			}
			//end if
		};
		gen_menu.addEventListener("change", menuListener);
	} else {
		trace("error loading XML file");
	}
}



// THE REST OF YOUR CODE WHICH I"M SURE YOU 
// ARE USING FOR SOMETHING....

stop();

this._lockroot = true;
gen_menu.setStyle("themeColor","0xB5E3E1");

// you can't use this.. because there is no mc with the name target_mc
// and if i'm not mistaken.. theme colors are like "haloBlue" etc
//target_mc.scroll.setStyle("themeColor","0xB5E3E1");
capControl_mc._visible = false;
if (windowBG.main_window.move){ 
        windowBG.main_window.move=false; 
}

/* I HAVE NO IDEA WHAT cacheAsBitmap; DOES SO I CAN"T TELL YOU HOW TO APPLY IT... SORRY */

hope that helps...

**donaldparkerii** · 07-11-2006, 05:17 PM

Right under the comment CREATE CONTENT LOADER is where I specified my movieclip loader.
var targetLoader:MovieClipLoader;

var targetListener = new Object();

this.createEmptyMovieClip("target_mc",1);
target_mc._x = 17;
target_mc._y = 148;
..........

cacheAsBitmap just has flash cache the movie clip as a bitmap vs a vector graphic. I used it once for creating a alpha mask, and now it just kind is a habbit.

As for the target_mc.scroll.themeColor.... most of my movies loaded have a scroll component with an instance name scroll so iI figured it would easier to specify once rather then everytime, but it does work.

Im not trying to come off like im super smart or anything... and I REALLY appericate your help

**madzigian** · 07-11-2006, 06:08 PM

right.. but as i said, your syntax is incorrect...

yours:

Code:

var targetLoader:MovieClipLoader;
var targetListener = new Object();

this would be correct:

Code:

var targetLoader:MovieClipLoader = new MovieClipLoader();
var targetListener:Object = new Object();

and you're right... target_mc.scroll.themeColor() would work just fine with a movieclip with the instance name target_mc. I missed that you named your empty clip with that...

You could even apply from within the MovieClipLoader() event listeners in the code that i wrote for you, such as inside the onLoadInit() event. I personally reserve target_mc for within MCL code... I relate it specifically to that. It just saves any possible confusion when i'm writing code.

Did you try the code i provided above?

if you replace the onLoadInit() above with the following, it should work just the way you want:

Code:

listen.onLoadInit = function(target_mc:MovieClip) {
        target_mc._x = 17;
        target_mc._y = 148;
        mask.drawRect(target_mc._x, target_mc._y, 766, 500, 0x99FF00, 10);
        mask.cacheAsBitmap;
        target_mc.setMask(mask);
        trace("Mask was set on : "+target_mc);
        target_mc._alpha = 100;
        target_mc.scroll.setStyle("themeColor","0xB5E3E1");
};

Since your mask and empty clip are generated at runtime, the fact that their instance names vary in my code doesn't matter. But swapping the original code i wrote with the code above, will handle the cacheAsBitmap and setStyle commands you wanted to apply.

cacheAsBitmap must be a Flash 8 thing..... Haven't upgraded from MX04 yet... I'm scared.... Ha Ha Ha

**donaldparkerii** · 07-11-2006, 10:19 PM

cool thanks again, I cant belive Flash 9 is commin out in a few months.... thats a whole nother freeekin language.

Thread: [F8] drawRectangle N for a Mask

Thread Tools

Display

[F8] drawRectangle API for a Mask

Posting Permissions