Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
undefinedman

Scaling the objects inside MovieClip

Recommended Posts

Hey Jack, 

 

I came back here because of one little (or not) thing to repair and I would like to have your opinion about that.

 

On the video below I have showed how the scaling reacts on the button (MovieClip with elements inside).

 

http://youtu.be/IreHrg27uwM

 

It goes wrong when I try to scale it from the handles you will see in the video.

Element Button is a MovieClip which is containing background and textfield (not visible in the video, cause I have forgotten to enable it), Anyway I can't scale the Element Button like usually, because the background has to be redrawn to keep original radius corners or gradients and the text cannot be scaled always on the center of the button. What I did is:

 

In the Main class where all elements are managed is:



transformItem = transformManager.addItem(element);
transformItem.minScale = 0;
transformItem.minWidth = 20;
transformItem.minHeight = 20;					
transformItem.addEventListener(TransformEvent.MOVE, onMoveElement, false, 0, true);
transformItem.addEventListener(TransformEvent.FINISH_INTERACTIVE_MOVE, onMoveElementComplete, false, 0, true);
transformItem.addEventListener(TransformEvent.SCALE, onScaleElement, false, 0, true)
transformItem.addEventListener(TransformEvent.SELECT, onSelectElement, false, 0, true);
transformItem.addEventListener(TransformEvent.DESELECT, onDeselectElement, false, 0, true);
transformItem.addEventListener(TransformEvent.DELETE, onRemoveElement, false, 0, true);
transformItemsArray.push(transformItem);

While scaling the element I call updateProperties() method in the Element itself, this way I have always 'fresh' data. So in this case width, height, x, y, so the background can be drawn correctly.

 

This is how the ButtonElement class look like.



package
{
	import fl.motion.Color;
	import flash.display.GradientType;
	import flash.display.Shape;
	import flash.events.Event;
	import flash.geom.ColorTransform;
	import flash.geom.Matrix;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import nl.adlantic.adbase.adcreator.models.vo.AdCreatorButtonElementVO;
	import nl.adlantic.utils.FontManager;
	import nl.adlantic.utils.MathUtil;
	
	/**
	 *
	 * @author Grzegorz Tomasiak
	 * @copy 2013 © AdLantic. All rights reserved.
	 *
	 */
	
	public class AdCreatorButtonElement extends AdCreatorElement
	{		
		private var textfield:TextField;
		private var textFormat:TextFormat;
		private var background:Shape;
		private var border:Shape;
		private var colorTransform:ColorTransform;
		private var properties:AdCreatorButtonElementVO;
		private var tempProperties:AdCreatorButtonElementVO;		
		
		public function AdCreatorButtonElement()
		{
			createBackground();
			createBorder();
			createTextField();
			addObjects();
		}
		
		/**
		 *
		 * Override
		 *
		 */
		
		override public function setProperties($properties:Object):void
		{
			super.setProperties($properties);
			
			properties = $properties as AdCreatorButtonElementVO;
			
			if (properties)
			{
				updateBackground();
				updateBorder();
				updateTextField();				
			}
		}
		
		override public function updateProperties($properties:Object):void
		{
			super.updateProperties($properties);
			
			tempProperties = new AdCreatorButtonElementVO($properties);
			
			for (var prop:Object in $properties)
			{
				if(properties.hasOwnProperty(prop))
				properties[prop] = tempProperties[prop];
			}
			
			updateBackground();
			updateBorder();
			//updateTextField();
		}
		
		/**
		 *
		 * Methods
		 *
		 */
		
		private function createBackground():void
		{
			background = new Shape();
			colorTransform = new ColorTransform();
		}
		
		private function createBorder():void
		{
			border = new Shape();			
		}
		
		private function createTextField():void
		{
			textFormat = new TextFormat();
			
			textfield = new TextField();
			textfield.multiline = true;
			textfield.wordWrap = true;
			textfield.selectable = false;
			textfield.setTextFormat(textFormat);
		}
		
		private function addObjects():void
		{
			addChild(background);
			addChild(border);
			//addChild(textfield);
		}
		
		private function updateBackground():void
		{
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(properties.width, properties.height, Math.PI / 2);
			
			background.graphics.clear();
			background.graphics.beginGradientFill(GradientType.LINEAR, [properties.background_color, Color.interpolateColor(properties.background_color, 0x000000, .5)], [1, 1], [0, 255], matrix);
			background.graphics.drawRoundRect(0, 0, properties.width, properties.height, properties.radius);
			background.graphics.endFill();
			
			this.scaleX = 1;
			this.scaleY = 1;
			textfield.scaleX = 1;
			textfield.scaleY = 1;
			
			trace(this.x, this.y);
		}
		
		private function updateBorder():void
		{
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(properties.width, properties.height, Math.PI / 2);
			
			border.graphics.clear();
			
			if(properties.border_thickness > 0)
			{
				border.graphics.lineStyle(properties.border_thickness, 0, 1, true);
				border.graphics.lineGradientStyle(GradientType.LINEAR, [properties.border_color, Color.interpolateColor(properties.border_color, 0x000000, .5)], [1, 1], [0, 255], matrix);
				border.graphics.drawRoundRect(properties.border_thickness / 2, properties.border_thickness / 2, properties.width - properties.border_thickness, properties.height - properties.border_thickness, properties.radius);
				border.graphics.endFill();
			}
		}
		
		private function updateTextField():void
		{
			textFormat.color = properties.format.color;
			textFormat.font = properties.format.font;
			textFormat.size = properties.format.size;
			textFormat.align = properties.format.align;
			textFormat.bold = properties.format.bold;
			
			textfield.text = properties.text;
			textfield.width = properties.width;
			textfield.height = 20;
			
			if (FontManager.instance.isFontEmbedded(properties.format.font))
			textfield.embedFonts = true;
			else textfield.embedFonts = false;
			textfield.setTextFormat(textFormat);
			
			textfield.y = background.height / 2 - textfield.height / 2;
		}
	}
}

My question is, do you already know what's the problem and how to possibly fix it or you have advices to to that thing differently. Any help would be awesome. Thank you.

Link to comment
Share on other sites

I definitely looks like some sort of problem with your redraw/update logic, but I don't have time to sift through all the code and troubleshoot it for you (not that you were asking for that). I wish I had more time. However, here's an idea (maybe you're already doing this): use a dummy Sprite that has alpha:0, and that's the one you'd add to TransformManager. Then, you just listen for TransformEvents and whenever you receive one, you update your REAL object that's visible which is BEHIND the dummy object. So to the user, it'd look like they're transforming the real object, but they're just affecting the transparent dummy Sprite. You can use whatever logic you want to ensure that your real object is positioned/scaled/draw appropriately. 

 

I hope that helps!

  • Like 1
Link to comment
Share on other sites

Hah you're the man! This solution was more than perfect. It resolved all my problems. Now button and other elements works exactly how it should be. Many many thanks for this clever idea :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×