BlitMask objects dynamically scaled

[rjForbes]

Hi there,

 

I have been playing with BlitMask and have it working but with a caveat.

 

I am creating some flow based objects (pipes, data links) for a training module, and I am setting them up as objects that can be placed on the stage and scaled dynamically.

 

For example, you could drag a pipe from the library on the stage that is 20px high X 200px wide and scale it to 20px high X 800px wide to start building a pipe flow. You would continue to add pipes and connections and varying lengths until the system is built. When the custom flow function is called for that pipe, it determines the new scaled width of the object and scales the animated flow content accordingly. This works fine normally with masks and dynamic objects.

 

So i started to try and implement BlitMask for this to take advantage of the performance and it works, but the graphic quality is low. Im assuming this is because it is using its original object dimensions and not the scaled one.

 

Here is the code for a simple data link flow I am using to try and implement this. It is for a Object that is initially 200px X 20px then scaled:

 

	//************* Main Flow Function *************\\
	public function flow(speed:Number = 1):void
	{
		 // Setup scaling based on layout
		if (this.width > this.height)
		{
			scale = 200 / this.width;
			amount = (this.width / offset) + 3;
		}
		else
		{
			scale = 200 / this.height;
			amount = (this.height / offset) + 3;
		}

			// Remove flowContainer if it already exists;
			if (flowContainer != null)
			{
				removeChild(flowContainer);
			}

			// Create flowContainer for clips, add to stage
			flowContainer = new Sprite();
			addChild(flowContainer);

			var blitMask:BlitMask = new BlitMask( flowContainer, flowContainer.x, -10, 200, 20, true, true, 0xffff00, true);

			// Scale the flowContainer, offset its x value
			flowContainer.scaleX = scale;
			flowContainer.x = -offset * scale;

			//Add Data links to animate
			for (var i:int = 0; i				{
				var dlc:Data_Link_Clip = new Data_Link_Clip();
				dlc.x = i * offset;
				dlc.y = 0;
				dlc.cacheAsBitmap = true;
				dlc.cacheAsBitmapMatrix = dlc.transform.concatenatedMatrix;

				if (speed < 0){
					dlc.scaleX = -1;
				}else{
					dlc.scaleX = 1;
				}
				flowContainer.addChild(dlc).name = "dataLinkClip" + i;
			}


			// Set Timing speed, convert negative to positive values
			var timep:Number = Math.abs(speed);

			// Set Direction based on negative or positive value
			var dirp:Number;

			if (speed > 0){
				dirp = 0;
			}else if (speed < 0){
				dirp = (-2 * offset) * scale;
			}else{
				dirp = 0;
			}

			// Animate horizontally for data clips
			TweenMax.to(flowContainer,timep,{x:dirp, repeat:-1, ease:Linear.easeNone});

	}
	// End Main Flow Function

[Carl]

sorry for the delayed response. I don't really understand the problem and couldn't really visualize what your code was doing.

 

it would help if you could provide any of the following:

 

-screenshots of the item before and after being scaled to get an idea of the "low quality".

 

-files that are simplified as much as possible to exhibit the problem. they don't have to be your production files or contain any of the data link stuff.

 

thanks

[GreenSock]

I haven't had a chance to dive deep into your code yet, but from a cursory glance I was wondering if you tried scaling BEFORE you create the BlitMask. Your code seems to do the opposite.

 

BAD:

var blitMask:BlitMask = new BlitMask( flowContainer, flowContainer.x, -10, 200, 20, true, true, 0xffff00, true);                   
flowContainer.scaleX = scale;

 

BETTER:

flowContainer.scaleX = scale;
var blitMask:BlitMask = new BlitMask( flowContainer, flowContainer.x, -10, 200, 20, true, true, 0xffff00, true); 

Just a thought. If you still have trouble, please post the files like Carl requested.