Different size some shape during time

template

#1

Hello everyone, I use flash templates for animation graphics. And I need change width of shape (rectangle) during time. For example I have 100px width of rectangle in 15th frame. And I need 150px width of rectangle in 80th frame with the same x position like start. And I need send this information to the templates like when I send data to dynamic text via my client. Could you help me, please? Thank you very much.


#2

I have a simple ActionScript Class that handle rectangular “cards” with various options, including rounded corners, backgrounds and borders. Even has a simple highlight animation. You can animate all the properties using Greensock TweenLite classes.

You can view an example here:
https://casparcgforum.org/t/problem-with-blend-modes-in-flash-templates/678/6?u=rrebuffo

I will post it in a moment.
You could use that or just view it as an example.


#3

Here:

Card.as
package
{
	import flash.display.*;
	import flash.geom.*;
	import flash.filters.*;
	import flash.utils.*;
	import com.greensock.TweenLite;
	import com.greensock.easing.Quad;
	
	public class Card extends MovieClip
	{
		public var PreviewMode:Boolean = false;
		public var Constructing:Boolean = false;
		public var BgColor1:uint = 0xDDDDDD;
		public var BgColor2:uint = 0xCCCCCC;
		public var BgAlpha:Number = 1;
		public var Shadow:Number = 0;
		public var Border:Number = 0;
		public var Width:int = 100;
		public var Height:int = 100;
		public var Radius:Number = 0;
		public var Skew:Number = 0;
		public var Anchor:String = "BC";
		public var highlightProgress:Number = 0;
		public var bgHighlightProgress:Number = 0;
		private var rectangle:Sprite;
		private var border:Sprite;
		private var shadow:Sprite;
		private var cardMask:Sprite;
		private var highlight:Sprite;
		private var bgHighlight:Sprite;
		private var _x:Number = 0;
		private var _y:Number = 0;
		private var shadowFilter:DropShadowFilter;
		private var skewMatrix:Matrix = new Matrix();
		private var tempMatrix:Matrix;
		private var skewSet:Boolean = false;
		private var bgTween:TweenLite;
		private var hlTween:TweenLite;
		private var bgTimeout:uint;
		private var hlTimeout:uint;
		private var bgDuration:Number;
		private var hlDuration:Number;
		private var _set:Boolean = false;

		public function Card()
		{
			this.alpha = 0;
			this.cacheAsBitmap = true;
			rectangle = new Sprite();
			border = new Sprite();
			shadow = new Sprite();
			cardMask = new Sprite();
			highlight = new Sprite();
			bgHighlight = new Sprite();
			this.addChild(rectangle);
			this.addChild(shadow);
			this.addChild(cardMask);
			this.addChild(bgHighlight);
			this.addChild(border);
			this.addChild(highlight);
			rectangle.cacheAsBitmap=true;
			border.cacheAsBitmap=true;
			shadow.cacheAsBitmap=true;
			cardMask.cacheAsBitmap=true;
			highlight.cacheAsBitmap=true;
			bgHighlight.cacheAsBitmap=true;
			
		}
		
		public function Construct():void
		{
			if(!_set && !PreviewMode)
			{
				_set = true;
				setupHighlight();
			}
			if(!skewSet)
			{
				tempMatrix = rectangle.transform.matrix;
				skewMatrix.c = Skew;
				tempMatrix.concat(skewMatrix);
				skewSet = true;
			}
			switch(Anchor)
			{
				case "TL":
					_x = 0;
					_y = 0;
					break;
				case "TR":
					_x = -Width;
					_y = 0;
					break;
				case "TC":
					_x = -(Width/2);
					_y = 0;
					break;
				case "BL":
					_x = 0;
					_y = -Height;
					break;
				case "BR":
					_x = -Width;
					_y = -Height;
					break;
				case "BC":
				default:
					_x = -(Width/2);
					_y = -Height
					break;
			}
			
			rectangle.graphics.clear();
			var tr:Number = (Radius>Border*2)? Radius-Border*2 : 0;
			if(BgColor1 != BgColor2)
			{
				var matrix:Matrix = new Matrix();
				matrix.createGradientBox(Width, Height, (Math.PI/180)*90, 0, 0);
				rectangle.graphics.beginGradientFill(GradientType.LINEAR,[BgColor1,BgColor2],[BgAlpha,BgAlpha],[0x00,0xFF],matrix,SpreadMethod.REPEAT);
			}
			else
			{
				rectangle.graphics.beginFill(BgColor1,BgAlpha);
			}
			rectangle.graphics.drawRoundRect(_x,_y,Width,Height,tr,tr);
			rectangle.graphics.endFill();
			
			border.graphics.clear();
			if(Border>0)
			{
				border.graphics.beginGradientFill(GradientType.LINEAR,[BgColor1,BgColor2],[BgAlpha,BgAlpha],[0x00,0xFF],matrix,SpreadMethod.REPEAT);
				border.graphics.drawRoundRect(_x,_y,Width,Height,Radius,Radius);
				if(Width>Border*2 && Height>Border*2)border.graphics.drawRoundRect(_x+Border,_y+Border,Width-Border*2,Height-Border*2,tr,tr);
				border.graphics.endFill();
				border.transform.colorTransform = new ColorTransform(1.2,1.2,1.2,1.2,25,25,25,0);
			}
			
			shadow.graphics.clear();
			if(Shadow>0)
			{
				shadowFilter = new DropShadowFilter(Shadow/3,90,0x000000,1,Shadow,Shadow,1,1,false,true,true);
				shadow.graphics.beginFill(0x000000,1);
				shadow.graphics.drawRoundRect(_x,_y,Width,Height,Radius,Radius);
				shadow.graphics.endFill();
				shadow.filters = new Array(shadowFilter);
			}
			else
			{
				shadow.filters.splice(0);
			}
			
			cardMask.graphics.clear();
			cardMask.graphics.beginGradientFill(GradientType.LINEAR,[BgColor1,BgColor2],[BgAlpha,BgAlpha],[0x00,0xFF],matrix,SpreadMethod.REPEAT);
			if(Width>Border*2 && Height>Border*2) cardMask.graphics.drawRoundRect(_x+Border,_y+Border,Width-Border*2,Height-Border*2,tr,tr);
			cardMask.graphics.endFill();
			cardMask.transform.colorTransform = new ColorTransform(2.5,2.5,2.5,1,5,5,5,0);
			
			cardMask.mask = bgHighlight;
			

            rectangle.transform.matrix = tempMatrix;
            border.transform.matrix = tempMatrix;
            shadow.transform.matrix = tempMatrix;
            cardMask.transform.matrix = tempMatrix;
            highlight.transform.matrix = tempMatrix;
            bgHighlight.transform.matrix = tempMatrix;
			if(Constructing)
			{
				drawHighlight(true);
				drawBgHighlight(true);
			}
		}
		
		private function setupHighlight()
		{
			var matrix = new Array();
			matrix = matrix.concat([1, 0, 0, 0, 255]); // red
            matrix = matrix.concat([0, 1, 0, 0, 255]); // green
            matrix = matrix.concat([0, 0, 1, 0, 255]); // blue
            matrix = matrix.concat([0, 0, 0, 1, 1]); // alpha
			var cf:ColorMatrixFilter = new ColorMatrixFilter(matrix);
			highlight.filters = new Array(cf);
			if(!Constructing)
			{
				setTimeout(animateHighlight,1500,true);
				setTimeout(animateBgHighlight,1000,true);
			}
			hlDuration = 5+(Width/160);
			bgDuration = 8+(Width/200);
		}
		
		private function animateHighlight(first:Boolean = false)
		{
			var High:int = 6;
			var Low:int = 3;
			var RandomNumber:int = Math.floor(Math.random()*(1+High-Low))+Low;
			var nextHL:Number = Number(RandomNumber);
			if(hlTween!=null)
			{
				hlTween.kill();
				hlTween = null;
				highlightProgress=0;
			}
			if(first) nextHL = 0;
			hlTween = TweenLite.to(this,hlDuration,{highlightProgress:1,delay:nextHL,ease:Quad.easeInOut,onUpdate:drawHighlight,onComplete:animateHighlight});
		}
		
		private function animateBgHighlight(first:Boolean = false)
		{
			var High:int = 7;
			var Low:int = 4;
			var RandomNumber:int = Math.floor(Math.random()*(1+High-Low))+Low;
			var nextBG:Number = Number(RandomNumber);
			if(first) nextBG = 0;
			if(bgTween!=null)
			{
				bgHighlightProgress=0;
				bgTween.kill();
				bgTween = null;
			}
			bgTween = TweenLite.to(this,bgDuration,{bgHighlightProgress:1,delay:nextBG,ease:Quad.easeInOut,onUpdate:drawBgHighlight,onComplete:animateBgHighlight});
			
		}
		
		private function drawHighlight(_cons:Boolean = false)
		{
			if((Constructing && _cons) || !Constructing)
			{
				if(Border<=0) return;
				var grmatrix:Matrix = new Matrix();
				var tr:Number = (Radius>4)? Radius-4 : 0;
				grmatrix.createGradientBox(Width, Height, (Math.PI/180)*50,-(Width*2)+((Width*4)*highlightProgress),-Height+((Height*2)*highlightProgress));
				highlight.graphics.clear();
				highlight.graphics.beginGradientFill(GradientType.LINEAR,[0xFFFFFF,0xFFFFFF,0xFFFFFF,0xFFFFFF,0xFFFFFF],[0,.8,1,.8,0],[0x00,0x33,0x99,0xCC,0xFF],grmatrix,SpreadMethod.PAD);
				highlight.graphics.drawRoundRect(_x,_y,Width,Height,Radius,Radius);
				if(Width>Border*2 && Height>Border*2) highlight.graphics.drawRoundRect(_x+Border,_y+Border,Width-Border*2,Height-Border*2,tr,tr);
				highlight.graphics.endFill();
			}
		}
		
		private function drawBgHighlight(_cons:Boolean = false)
		{
			if((Constructing && _cons) || !Constructing)
			{
				
				var grmatrix:Matrix = new Matrix();
				var tr:Number = Radius;
				grmatrix.createGradientBox(Width, Height, (Math.PI/180)*2,(Width*3)-((Width*6)*bgHighlightProgress),0);
				bgHighlight.graphics.clear();
				bgHighlight.graphics.beginGradientFill(GradientType.LINEAR,[0xFFFFFF,0xFFFFFF,0xFFFFFF,0xFFFFFF,0xFFFFFF],[0,.6,.85,.6,0],[0,63,127,191,255],grmatrix,SpreadMethod.PAD);
				bgHighlight.graphics.drawRoundRect(_x,_y,Width,Height,tr,tr);
				bgHighlight.graphics.endFill();
			}
		}
		
		public function removeHL()
		{
			if(bgTween == null) return;
			bgTween.kill();
			hlTween.kill();
			TweenLite.to(highlight,.2,{alpha:0,ease:Quad.easeOut});
			TweenLite.to(bgHighlight,.2,{alpha:0,ease:Quad.easeOut});
		}
		
		public function restoreHL()
		{
			if(bgTween==null) return;
			TweenLite.to(highlight,.5,{alpha:1,ease:Quad.easeOut, delay:1.5});
			TweenLite.to(bgHighlight,.5,{alpha:1,ease:Quad.easeOut, delay:1.5});
			hlTween.kill();
			bgTween.kill();
			setTimeout(animateHighlight,1000);
			setTimeout(animateBgHighlight,500);
		}

	}
	
}

You need to download Greensock’s AS3 Tweening libraries for it to work.

There are a few options for anchor, color and bg and border and corners:

PreviewMode [true/false] Disables highlight animations.
Constructing [true/false] Should be set befor tweening and after the tween completed. This keeps highlights in sync with the animation.
card.
BgColor1 [0xRRGGBB] Top gradient color
BgColor2 [0xRRGGBB] Bottom gradient color (same as top for solid color)
BgAlpha [0.0/1.0] Opacity of the background
Shadow [20] Pixels of drop shadow spread
Border [4] Border thickness, it goes inwards so if you need to go outside you must add this value to the size
Width [300] Horizontal size
Height [100] Vertical size
Radius [20] Corner curve radius
Skew [-0.12] Diagonal distorsion. It results often in odd behaviors when tweening. Use with caution haha
Anchor:

  • “TL”: Aligns to the top left
  • “TC”: Aligns to the top center
  • “TR”: Aligns to the top right
  • “BL”: Aligns to the bottom left
  • “BC”: Aligns to the bottom center
  • “BR”: Aligns to the bottom right

Creating a rounded rectangle with a border and shadow is very easy:

var bgRectangle:Card = new Card();
bgRectangle.Width = 1600;
bgRectangle.Height = 150;
bgRectangle.BgColor1 = bgRectangle.BgColor2 = 0xFFCC66;
bgRectangle.BgAlpha = .9;
bgRectangle.Shadow = 10;
bgRectangle.Border = 3;
bgRectangle.Radius = 20;
bgRectangle.Anchor = "BC";
bgRectangle.Construct();
bgRectangle.alpha = 1; //this is VERY important. The class constructor sets the alpha as 0 to avoid unwanted flickers if it's added to the stage and constructed before Play(); function.
addChild(bgRectangle)

Tweening it is also very straightforward and this is the result you are looking for:

private function Animate()
{
	bgRectangle.Constructing = true;
	bgRectangle.removeHL();
	TweenLite.from(bgRectangle,1,{Width:0,ease:Strong.easeInOut,delay:0,onUpdate:bgRectangle.Construct,onComplete:TweenCompleted});			
}

private function SetSize(w:int)
{
	TweenLite.to(bgRectangle,1,{Width:w,ease:Strong.easeInOut,delay:0,onUpdate:bgRectangle.Construct,onComplete:TweenCompleted});			
}

private function TweenCompleted()
{
	bgRectangle.Constructing = false;
	bgRectangle.restoreHL();
}

The intro animation doesn’t need to set the Constructing and remove/restore functions. The highlights begin a few seconds after the class instantiate.