getPixelを使ってテキストの座標をピクセル単位で取得する 
![]()
入力したテキストの座標をピクセル単位で取得して
画像なりベクターなりのオブジェクトを配置することをやってみたくてサンプルを作りました。
簡単に言えばgetPixelを使ってみたかっただけです。
haru-komugi様のソースを参考に以下のような流れで組んでみました。
テキストフィールドをビットマップデータに変換
↓
ビットマップのカラー値をピクセル単位で取得し、座標を得る
↓
Spriteで円を作る
↓
パーティクル生成してTweenerでアニメーションさせる
↓
強引に話題のTeraClockも使っちゃう
GOボタン: テキストに入力した文字をパーティクルで形成します。
TIMEボタン: 現在の時間をパーティクルで形成します。
ソースコードは以下(HTMLコンバーター使用)flaファイルもアップしておきます
//------------------------
// import
//------------------------
import fl.controls.Button;
import fl.events.ComponentEvent;
import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();
import flash.events.Event;
import flash.display.Sprite;
import com.trick7.utils.TeraClock;
//------------------------
// goボタン
//------------------------
var goButton:Button = new Button();
goButton.label = "GO";
goButton.autoRepeat = true;
goButton.setSize(50, 50);
goButton.move(210, 5);
goButton.addEventListener(ComponentEvent.BUTTON_DOWN, buttonGoHandler);
stage.addChild(goButton);
function buttonGoHandler(event:ComponentEvent):void
{
if(container) stage.removeChild( container ); //コンテナ削除
count = 0; //カウント初期化
drawTxt();
}
//------------------------
// timeボタン
//------------------------
var timeButton:Button = new Button();
timeButton.label = "TIME";
timeButton.autoRepeat = true;
timeButton.setSize(50, 50);
timeButton.move(270, 5);
timeButton.addEventListener(ComponentEvent.BUTTON_DOWN, buttonTimeHandler);
stage.addChild(timeButton);
function buttonTimeHandler(event:ComponentEvent):void
{
if(container) stage.removeChild( container ); //コンテナ削除
count = 0; //カウント初期化
myText.text = String(clock.hours2) + ":" + String(clock.minutes2) + ":" + String(clock.seconds);
drawTxt();
}
//------------------------
// 入力テキストを元に円を描画
//------------------------
var bd:BitmapData; //入力テキストのビットマップ
var container:Sprite; //コンテナ
var circle:Sprite; //文字を形成する円
var count:int = 1; //カウント
function drawTxt():void
{
//ビットマップに置き換え
bd = new BitmapData( myText.width , myText.height );
bd.draw( myText );
//コンテナつくる
container = new Sprite();
stage.addChild( container );
//白以外の座標を取得して円を並べる
for( var i:int = 0 ; i < bd.width ; i += 2 )
{
for( var j:int = 0 ; j < bd.height ; j += 2 )
{
if( bd.getPixel( i , j ) != 0xffffff )
{
circle = new Sprite();
circle.name = "circle"+count;
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(5, 5, 5);
var xNum:int = i * 5 + 10;
var yNum:int = j * 5 + 50;
circle.x = Math.ceil(Math.random()*500);
circle.y = Math.ceil(Math.random()*400+300);
circle.scaleX = 5;
circle.scaleY = 5;
container.addChild( circle );
count++;
//
Tweener.addTween(circle, {
x: xNum,
y: yNum,
scaleX: 1,
scaleY: 1,
time: 1,
delay: 0.01 * count,
transition: "easeOutBounce",
onComplete: onMoveFinished,
onCompleteParams:[circle] //パラメータ
});
}
}
}
}
function onMoveFinished(mc:Sprite):void
{
var xNum:int = Math.ceil(Math.random()*1000-200);
var yNum:int = Math.ceil(Math.random()*800-200);
Tweener.addTween(mc, {
x: xNum,
y: yNum,
alpha: 0,
time: 1,
delay: 1,
transition: "easeInOutQuad"
});
}
//------------------------
// TeraClock
//------------------------
var clock:TeraClock = new TeraClock();
clock.addEventListener(TeraClock.SECONDS_CHANGED, secondsListener);
clock.addEventListener(TeraClock.MINUTES_CHANGED, minutesListener);
clock.addEventListener(TeraClock.HOURS_CHANGED, hoursListener);
function secondsListener(e:Event):void
{
//myText.text = String(clock.hours2) + ":" + String(clock.minutes2) + ":" + String(clock.seconds);
}
function minutesListener(e:Event):void { /*trace(clock.minutes +"分になったよ。");*/ }
function hoursListener(e:Event):void { /*trace(clock.hours+"時になったよ。");*/ }
Tweener:http://code.google.com/p/tweener/
TeraClock:http://www.trick7.com/blog/2008/09/02-074335.php
alt
[...] getPixelを使ってテキストの座標をピクセル単位で取得する に改良を加えてパーティクル時計にしてみました。 [...]