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.
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.
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.