ActionScript3で丸数字のカウントダウン

質問

ActionScript3.0で映画などでよく見かける

3　→　2　→　1　などが丸数字で

丸の円の部分がぐるっと一周して動くようなカウントダウンをしたいのですが、

どなたか具体的な方法、もしくはサンプルなどが記載されているページなど

ご存知でしたら、教えて頂けないでしょうか。

よろしくお願い致します

回答No.2

BlurFiltan · ベストアンサー

＃１です。

Actionscript で不可能というわけではありませんよ。

例えば Flash の(Flex の場合は知りません)
ドキュメントクラスのクラスファイルのスクリプトでしたら
次のような感じで近いような(遠いような)ものはできます。

「CountDown.as」
//---------------------------------------
package {

import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.LineScaleMode;
import flash.display.CapsStyle;
import flash.display.JointStyle;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;

public class CountDown extends MovieClip {
//カウント数の設定
var cnt:int = 3;
//中心点の設定(一応ステージ中央)
var c_x:Number = stage.stageWidth / 2;
var c_y:Number = stage.stageHeight / 2;
//円の半径の設定
var c_r:Number = 100;
//フレームレートの設定
var fr:int = 20;
//
var i:int = 0;
//
var circle:Sprite;
var cnt_txt:TextField;
var txt_fmt:TextFormat;
//
public function CountDown() {
//
circle = new Sprite();
circle.x = c_x;
circle.y = c_y;
this.addChild(circle);
//
cnt_txt = new TextField();
cnt_txt.autoSize = TextFieldAutoSize.LEFT;
this.addChild(cnt_txt);
//
txt_fmt = new TextFormat();
//
this.addEventListener(Event.ENTER_FRAME,makeCircle);

}

public function makeCircle(evt:Event):void {
if (i == 0) {
circle.graphics.clear();
circle.graphics.lineStyle(15, 0xCCCCCC, 1, false, LineScaleMode.VERTICAL,CapsStyle.NONE, JointStyle.ROUND);
circle.graphics.moveTo(c_r*Math.sin(2*Math.PI/fr*i) , -c_r*Math.cos(2*Math.PI/fr*i));
//
cnt_txt.text = cnt.toString();
txt_fmt.color = 0xCCCCCC;
txt_fmt.size = 60;
cnt_txt.setTextFormat(txt_fmt);
cnt_txt.x = c_x - cnt_txt.width / 2;
cnt_txt.y = c_y - cnt_txt.height / 2;
} else {
circle.graphics.lineTo(c_r*Math.sin(2*Math.PI/fr*i) , -c_r*Math.cos(2*Math.PI/fr*i));
}
//
if (i < fr) {
i++;
} else {
cnt--;
if (cnt == 0) {
this.removeChild(circle);
this.removeChild(cnt_txt);
this.removeEventListener(Event.ENTER_FRAME,makeCircle);
}
i = 0;
}

}
}
}
//---------------------------------------

しかし，，，
こんなチャチで薄っぺらなものを時間かけて考えて作るよりも
タイムラインアニメーションで作った方が
もっと風情のあるものがもっと簡単にできますよ。

さらに質を高めるスクリプトをゴチャゴチャ考えたり進むよりも
タイムラインアニメーションの SWF または FLV を作るなどして(＃１で書いたサンプルを自分の良いように作り替えるなどして)，
Flash Builder 製の SWF 内にロードする方が現実的で良いと思います。

ロードすると言うのは
SWF を loader.load でロードするとか
FLV を FLVPlayback にロードするとかいう意味です。

※ちなみに私は Flex のことは全く知りません。
　 何ができて，何ができないかもわかりません。
　 loader.load の件などは Flash の感覚で書いてます。

お礼

大変良くわかるご説明ありがとうございました。

スクリプトでの描画とFALSHのロード両方を試してみて、
FLEXと連携する必要のないアニメーションはFALSHで作成した方が
FLEXのソース管理的にもラクということが良くわかりました。

ありがとうございました。

回答No.1

BlurFiltan

"ActionScript3.0で"
つまり
"スクリプトで"
と書かれている意味がわかりません(意図が理解し難いです)。

スクリプトではなく，
普通にそういう風なアニメーションを作れば良いだけではないでしょうか？

もしスクリプトで作成(？)するにしても，
普通に作れなければスクリプトも何もないと思いますし。

その「普通に作る」例です。
私が知っている中では
次↓のようなサンプルがあります。
「ビデオ後アニメーション(FlashMX2004(ActionScript2.0)）」
http://suzupara.iinaa.net/mixi/video_anime/

上記の本来は全く別件のためのサンプルですが
上記ページでDLできる「video_anime.zip」を解凍すれば出てくる
「omake」フォルダ内に「count_down.fla」という FLA ファイルがあって
その FLA ファイルが カウントダウン する FLV の作成元のサンプルになっています。

「count_down.fla」は
かなり古い Flash(Flash 4 (CS4 ではない普通の 4)) で作られた FLAファイル のようで
私の Flash CS4 では「予期せぬファイル形式です」が出ますが
http://www.adobe.com/jp/support/flash/downloads.html
ココ↑でアップデート済みの Flash CS5.5 では「count_down.fla」を開くことはできました。

無事に開けるとよろしいですが(＝開けない場合は知りません)。

補足

サンプルありがとうございます。Flash　CS5で開きました。
言葉足らずで申し訳ありません。当方Flexですので、
まさにこれをActionScriptで作りたいと思った次第です。

graphics.drawCircleメソッドで円を書くことができると思いますが、
アニメーションのように描画するのであればtimerやinterval
を使わないとできないものなのかが、知りたいと思いました。

エフェクトのようにdurationプロパティを指定して、
描画できるようなことは（クラスなど）できないものなのでしょうか？