Animation flash. Text effects.
My curve text writer animation.
An interesting idea cam in to my space. It's curve text animation. Effect like as type writer, but simply as a pen move by paper. I am made it by Flash Develop (FD) and Inkscape software.At first I made bitmap text in Inkscape and a curve. The curve I will use like a guide to pen move on. Pen will made a mask to text:"All You Need Is Love!!!"
In Inkscape I call the page setup (Shift+ctrl+D) to set width 550 and height 400 [OK], when I write some text (look at screen shot).
bitmap text screen shot
The next step I made export to raster (Shift+Ctr+E), to click the page button and push export. It's operation made the bitmap.png file. Now I draw by my hand curve guide.
text animation guide for writing effect screen shot
At last I deleted the text in Inkscape, and save curve image as (Shift+Crl+S) sk1 graphics. Sk1 is easy format, I will parse it to the curve guide.
I write some small action script code.
package
{
import flash.display.*;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.utils.*;
import lex.sk1.*;
/**
* ...
* @author Lexcuk
*/
public class TextCurveAnimationDoc extends Sprite
{
[Embed(source = "bitmap.png")]
public var bitmapPng:Class;
[Embed(source = "curve-text.sk1", mimeType = "application/octet-stream")]
public var sk1Class:Class;
public var grPath:LexGraphPath;
public var leterSprite:Sprite;
public var maskSprite:Sprite;
public var maskBitmapdata:BitmapData;
public var penSprite:Sprite;
public var bigPenSprite:Sprite;
public var bigPenParentSprite:Sprite;
public var penCount:int;
public function TextCurveAnimationDoc()
{
var dataStr:String = (new sk1Class()).toString();
var strArr:Array = dataStr.split('\n');
var s:String = '';
var color:uint;
pathArr = new Vector.<LexGraphPath>();
var pathArr:Vector.<LexGraphPath>;
trace(strArr);
Sk1.sk1Height = 400;//!!!
for (var i:int = 0; i < strArr.length; i++) {
s = strArr[i];
if (s.indexOf('lp') == 0) {
color = Sk1.parseLp(s);
trace(color.toString(16));
var comArr:Vector.<GraphComand> = Sk1.createPath(strArr, i, color);
grPath = new LexGraphPath(color);
grPath.pathArr = comArr;
grPath.pointArr = grPath.converToPoint(2);//segmentSize
pathArr.push(grPath);
}
}
addChild(leterSprite = new Sprite());
leterSprite.addChild(new bitmapPng());
addChild(maskSprite = new Sprite());
maskSprite.addChild(new Bitmap(maskBitmapdata = new BitmapData(550, 400, true, 0x00000000)));
leterSprite.cacheAsBitmap = maskSprite.cacheAsBitmap = true;
leterSprite.mask = maskSprite;
addChild(penSprite = new Sprite());
penSprite.graphics.beginFill(0xFF0000);
penSprite.graphics.drawCircle(0, 0, 5);
bigPenParentSprite = new Sprite();
bigPenParentSprite.addChild(bigPenSprite = new Sprite())
bigPenSprite.graphics.beginFill(0x000000);
bigPenSprite.graphics.drawCircle(0, 0, 10);
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
public function enterFrameHandler(e:Event):void {
if (penCount >= grPath.pointArr.length) {
maskBitmapdata.fillRect(new Rectangle(0, 0, 550, 400), 0x00000000);
penCount = 0;
}
penSprite.x = bigPenSprite.x = grPath.pointArr[penCount].x;
penSprite.y = bigPenSprite.y = grPath.pointArr[penCount].y;
maskBitmapdata.draw(bigPenParentSprite);
penCount++;
}
}
}
The library sk1 and sample code you can find in source.
