こんにちは、研究員のスズキです。
今回は、Flashでサイトを作る際に良く使っている、TweenerというActionScriptのアニメーション用のライブラリを、ちょっと変わった使い方をしてみたら何気に非常に便利だったのでご紹介させて下さい。
Tweenerとは
まず、Flashサイト/コンテンツを制作する際に、現状、Flash CS3等の製品を利用する以外にもFlexBuilder、Flex SDKやFlash Develop等様々な開発環境を使って制作する事ができます。
この中でFlexBuilderやFlex SDK、Flash DevelopはASのコードを書くのには非常に便利なツールなのですが、Flash特有のタイムラインが無いので、アニメーション部分を補完してくれる、Tweenerのライブラリは個人的に愛用させて頂いてます。
ちなみに、先日オープンしたDESIGN SHOWCASEのサイトもアニメーションの部分等でTweenerにお世話になってます。
Tweenerの使い方
このTweener、アニメーション用のライブラリとして使うだけでも申し分無いくらい強力なのですが、実はcolorプロパティをいじれちゃう所が何気に便利なので、最近個人的に気に入っているこのTweenerのcolorプロパティについて書いてみたいと思います。
その前に、簡単なTweenerの使い方を説明すると、google codeにあるTweenerのプロジェクトからライブラリを落としてきてASのimportの部分でTweenerのライブラリを指定するだけで、簡単に使えるようになります。
Tweenerのアニメーションの説明は既に沢山の所で紹介されているので、簡潔に書かせていただきますが、こんな感じのソースで簡単にアニメーションを実装する事ができます。
package {
import flash.display.*;
import caurina.transitions.Tweener;
import flash.events.MouseEvent;
[SWF( backgroundColor='0xFFFFFF', width='300', frameRate='30')]
public class Tweener_Test extends Sprite {
public function Tweener_Test() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
init();
}
private function init():void{
//まずSprite型のBoxを作る
var Box:Sprite = new Sprite();
Box.graphics.beginFill(0x000000);
Box.graphics.drawRect(0,0,50,50);
Box.graphics.endFill();
//ステージにBoxを配置
addChild(Box);
//Tweenerのアニメーション設定
Box.addEventListener(MouseEvent.CLICK,function():void{
//Boxがクリックされたら、X座標250に2秒間で移動
Tweener.addTween(Box, {x:250,time:2,transition:"linear"});
});
}
}
}
これで、Boxがクリックされたら、X座標250に2秒間で移動するというアニメーションができます。
Tweenerのcolorプロパティを使ってみる
次に色を変化させるに関しては、
//Tweenerのアニメーション設定
Box.addEventListener(MouseEvent.CLICK,function():void{
//Boxがクリックされたら、X座標250に2秒間で移動
Tweener.addTween(Box, {_color:0xFF0000,x:250,time:2,transition:"linear"});
});
こんな感じで、_colorでBOXの色を指定してあげると色を変化させる事ができます。
ただ、これだけだと、「ちょっと便利だね」程度な感じなので、次に画像を使ったサンプルをご紹介します。
画像を読み込む場合
これも、FlexBuilderやFlex SDK、Flash Developを使ってて悩ましい部分なのですが、ちょっとしたロゴやキャプション等の説明テキストを入れる場合、Flashのように矩形を書いたり、フォントをアウトライン化する事ができないので困りますね。
方法として、
の2通りありますが、フォントデータは容量も大きいのでちょっとした画像やキャプションならembedしちゃった方が早いですね。
読み込んだ画像の色をTweenerで変える
1.例えばこんな感じの画像ファイルがあったとします。
あえて複数のフォントで作った画像を使ってみます。
この画像をActionScriptでEmbedし、色を変えてみましょう。
package {
import flash.display.*;
import caurina.transitions.Tweener;
import flash.events.MouseEvent;
[SWF( backgroundColor='0xFFFFFF', width='300', frameRate='30')]
public class Tweener_Test03 extends Sprite {
[Embed(source='test_img01.png')]
private var Test_Img:Class;
public function Tweener_Test03() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
init();
}
private function init():void{
//embedした画像をBitmap化して配置
var Test_img:Bitmap = new Test_Img() as Bitmap;
addChild(Test_img);
//ダミーボタン(Box)を作成
var Box:Sprite = new Sprite();
Box.graphics.beginFill(0x000000);
Box.graphics.drawRect(0,0,300,100);
Box.graphics.endFill();
Box.alpha = 0;
//ステージにダミーボタン(Box)を配置
addChild(Box);
//Tweenerのアニメーション設定
Box.addEventListener(MouseEvent.CLICK,function():void{
//クリックされたら、画像の中の文字の色を変化させる
Tweener.addTween(Test_img, {_color:0xFF0000,time:2,transition:"linear"});
});
}
}
}
このようにすると画像がクリックされるとTESTという文字の色が変化します。ちょっとしたロゴの色を変えたい時なんかは便利ですよね。
もちろんTweenerのアニメーションと同じように、時間を設定したり黒→赤→緑みたいな感じにしたり、transitiontypeを設定したりなんかも自由にできます。
ただし、この方法を使うにあったって、いくつか条件があります。
この方法を使うにあたって気をつける事
まず、背景が透明な画像である事。
ためしに上記のソースでembedするデータをjpg形式にしてみます。
すると、背景色の部分も同時に赤に変わってしまいますね。
次に、embedする画像によってgif形式かpng形式を分けておく必要があります。
たとえば、上記のように画像を透明のgif画像にした場合、アンチエイリアスの関係でギザギザになってしまいます。
逆に、ビットマップフォントなんかを使う場合は、gif形式の方が軽いしキレイですよ。
AS3では、Bitmapクラスを使えばもっと色を自由に扱う事もできるのですが、ちょっとしたエフェクトとして色の変化をつけたい時なんかには、Tweenerのcolorプロパティは使えますね。
P.S:前回のエントリーでswfobjectとswfadressに関してのエントリーを書くと宣言させて頂いたのですが、バグを再現するのが難しかったのでもうちょっと検証してからアップしますね！
