kanariia.com blog

[Adobe MAX Japan 2009]ROXIK城戸さんのアレとTweensyで観覧車やってみた

2009-02-07 (土)
as3 | study | tweensy
adobemax2009 | as3 | flash | sample | tween | tweensy

すでにたくさんのレポートが投稿されてるみたいですが、
私もAdobe MAX 2日目参加してきました！！

感想をまとめようかと思いましたが、
私と全く同じセッションを選択されているll_koba_llさんのこの記事に書いてあるまとめが、
本当に感じたこととか一緒でうまくまとめてくださってるので、

まとめるの割愛します(あんなにうまく文まとまりましぇんｗ)。

受けたセッションの中でも、
すぐやってみたいと思ったのが
ROXIK城戸さんが実際にコードを書いて
日本語変数でものすごくわかりやすかった
ムービークリップの座標を視点で制御するアレ。

そこで記憶とメモを基に、
サンプルを作ってみることにした。

まず準備

真ん中基準点のMC「box_mc」を作成。
セッションの時のを忠実に再現w
aの文字は動くとぶるぶるするので分解してシェイプに。
プロパティでクラスにbox_mcと設定。

サンプルたち

視点の横移動

view sample

PLAIN TEXT

Actionscript:

var 視点={x:0,y:0,angle:0,zoom:0};
var ボックスたち=[];
var ポイントたち=[];
ボックス追加();
function ボックス追加() {
var ポイント;
var ボックス;
for (var i=0; i<20; i++) {
ポイント={x:Math.random()*700,y:Math.random()*400};
ポイントたち[i]=ポイント;
ボックス=new box_mc();
ボックスたち[i]=ボックス;
addChild(ボックス);
}
}
function モーション(e:Event) {
視点.x+=2;
}
function レンダリング(e:Event) {
for (var i=0; i<ボックスたち.length; i++) {
var ポイント=ポイントたち[i];
var ボックス=ボックスたち[i];
ボックス.x=ポイント.x-視点.x;
ボックス.y=ポイント.y-視点.y;
}
}
addEventListener(Event.ENTER_FRAME,モーション);
addEventListener(Event.ENTER_FRAME,レンダリング);

視点の回転

view sample

PLAIN TEXT

Actionscript:

var 視点={x:0,y:0,angle:0,zoom:0};
var ボックスたち=[];
var ポイントたち=[];
ボックス追加();
function ボックス追加() {
var ポイント;
var ボックス;
for (var i=0; i<20; i++) {
ポイント={x:Math.random()*700,y:Math.random()*400};
ポイントたち[i]=ポイント;
ボックス=new box_mc();
ボックスたち[i]=ボックス;
addChild(ボックス);
}
}
function モーション(e:Event) {
//ポイント.x+=2;
//視点.x+=2;
視点.angle+=0.01;
}
function レンダリング(e:Event) {
var cos=Math.cos(視点.angle);
var sin=Math.sin(視点.angle);
for (var i=0; i<ボックスたち.length; i++) {
var ポイント=ポイントたち[i];
var ボックス=ボックスたち[i];
var 視点からの差x=ポイント.x-視点.x;
var 視点からの差y=ポイント.y-視点.y;
ボックス.x=視点からの差x*cos-視点からの差y*sin+350;
ボックス.y=視点からの差x*sin+視点からの差y*cos+200;
}
}
addEventListener(Event.ENTER_FRAME,モーション);
addEventListener(Event.ENTER_FRAME,レンダリング);

視点のズーム＆回転

view sample

PLAIN TEXT

Actionscript:

var 視点={x:0,y:0,angle:0,zoom:0};
var ボックスたち=[];
var ポイントたち=[];
ボックス追加();
function ボックス追加() {
var ポイント;
var ボックス;
for (var i=0; i<20; i++) {
ポイント={x:Math.random()*700,y:Math.random()*400};
ポイントたち[i]=ポイント;
ボックス=new box_mc();
ボックスたち[i]=ボックス;
addChild(ボックス);
}
}
function モーション(e:Event) {
//ポイント.x+=2;
視点.angle-=0.01;
視点.zoom+=0.01;
}
function レンダリング(e:Event) {
var cos=Math.cos(-視点.angle);
var sin=Math.sin(-視点.angle);
for (var i=0; i<ボックスたち.length; i++) {
var ポイント=ポイントたち[i];
var ボックス=ボックスたち[i];
var 視点からの差x=(ポイント.x-視点.x)*視点.zoom;
var 視点からの差y=(ポイント.y-視点.y)*視点.zoom;
ボックス.scaleX=ボックス.scaleY=視点.zoom;
ボックス.x=視点からの差x*cos-視点からの差y*sin+350;
ボックス.y=視点からの差x*sin+視点からの差y*cos+200;
}
}
addEventListener(Event.ENTER_FRAME,モーション);
addEventListener(Event.ENTER_FRAME,レンダリング);

感想

忘れないうちにってことでとりあえずアップしてみたけど、
かなりセッションでやってたやつに近いサンプルができたかな？

自分もこのソースみてまた勉強しようw

今回の城戸さんのスライド公開ならへんかなぁ(*´ω｀*)

[Adobe MAX Japan 2009] ROXIK城戸さんのをアレをやってみる

2009-02-04 (水)
as3 | study
adobemax2009 | as3 | sample

すでにたくさんのレポートが投稿されてるみたいですが、
私もAdobe MAX 2日目参加してきました！！

感想をまとめようかと思いましたが、
私と全く同じセッションを選択されているll_koba_llさんのこの記事に書いてあるまとめが、
本当に感じたこととか一緒でうまくまとめてくださってるので、

まとめるの割愛します(あんなにうまく文まとまりましぇんｗ)。

受けたセッションの中でも、
すぐやってみたいと思ったのが
ROXIK城戸さんが実際にコードを書いて
日本語変数でものすごくわかりやすかった
ムービークリップの座標を視点で制御するアレ。

そこで記憶とメモを基に、
サンプルを作ってみることにした。

まず準備

真ん中基準点のMC「box_mc」を作成。
セッションの時のを忠実に再現w
aの文字は動くとぶるぶるするので分解してシェイプに。
プロパティでクラスにbox_mcと設定。

サンプルたち

視点の横移動

view sample

PLAIN TEXT

Actionscript:

var 視点={x:0,y:0,angle:0,zoom:0};
var ボックスたち=[];
var ポイントたち=[];
ボックス追加();
function ボックス追加() {
var ポイント;
var ボックス;
for (var i=0; i<20; i++) {
ポイント={x:Math.random()*700,y:Math.random()*400};
ポイントたち[i]=ポイント;
ボックス=new box_mc();
ボックスたち[i]=ボックス;
addChild(ボックス);
}
}
function モーション(e:Event) {
視点.x+=2;
}
function レンダリング(e:Event) {
for (var i=0; i<ボックスたち.length; i++) {
var ポイント=ポイントたち[i];
var ボックス=ボックスたち[i];
ボックス.x=ポイント.x-視点.x;
ボックス.y=ポイント.y-視点.y;
}
}
addEventListener(Event.ENTER_FRAME,モーション);
addEventListener(Event.ENTER_FRAME,レンダリング);

視点の回転

view sample

PLAIN TEXT

Actionscript:

var 視点={x:0,y:0,angle:0,zoom:0};
var ボックスたち=[];
var ポイントたち=[];
ボックス追加();
function ボックス追加() {
var ポイント;
var ボックス;
for (var i=0; i<20; i++) {
ポイント={x:Math.random()*700,y:Math.random()*400};
ポイントたち[i]=ポイント;
ボックス=new box_mc();
ボックスたち[i]=ボックス;
addChild(ボックス);
}
}
function モーション(e:Event) {
//ポイント.x+=2;
//視点.x+=2;
視点.angle+=0.01;
}
function レンダリング(e:Event) {
var cos=Math.cos(視点.angle);
var sin=Math.sin(視点.angle);
for (var i=0; i<ボックスたち.length; i++) {
var ポイント=ポイントたち[i];
var ボックス=ボックスたち[i];
var 視点からの差x=ポイント.x-視点.x;
var 視点からの差y=ポイント.y-視点.y;
ボックス.x=視点からの差x*cos-視点からの差y*sin+350;
ボックス.y=視点からの差x*sin+視点からの差y*cos+200;
}
}
addEventListener(Event.ENTER_FRAME,モーション);
addEventListener(Event.ENTER_FRAME,レンダリング);

視点のズーム＆回転

view sample

PLAIN TEXT

Actionscript:

var 視点={x:0,y:0,angle:0,zoom:0};
var ボックスたち=[];
var ポイントたち=[];
ボックス追加();
function ボックス追加() {
var ポイント;
var ボックス;
for (var i=0; i<20; i++) {
ポイント={x:Math.random()*700,y:Math.random()*400};
ポイントたち[i]=ポイント;
ボックス=new box_mc();
ボックスたち[i]=ボックス;
addChild(ボックス);
}
}
function モーション(e:Event) {
//ポイント.x+=2;
視点.angle-=0.01;
視点.zoom+=0.01;
}
function レンダリング(e:Event) {
var cos=Math.cos(-視点.angle);
var sin=Math.sin(-視点.angle);
for (var i=0; i<ボックスたち.length; i++) {
var ポイント=ポイントたち[i];
var ボックス=ボックスたち[i];
var 視点からの差x=(ポイント.x-視点.x)*視点.zoom;
var 視点からの差y=(ポイント.y-視点.y)*視点.zoom;
ボックス.scaleX=ボックス.scaleY=視点.zoom;
ボックス.x=視点からの差x*cos-視点からの差y*sin+350;
ボックス.y=視点からの差x*sin+視点からの差y*cos+200;
}
}
addEventListener(Event.ENTER_FRAME,モーション);
addEventListener(Event.ENTER_FRAME,レンダリング);

感想

忘れないうちにってことでとりあえずアップしてみたけど、
かなりセッションでやってたやつに近いサンプルができたかな？

自分もこのソースみてまた勉強しようw

今回の城戸さんのスライド公開ならへんかなぁ(*´ω｀*)

[tweensy]いろいろ試してみる：TweensyGroupで特殊プロパティをトゥイーン

2009-01-28 (水)
study | tweensy
as3 | flash | library | sample | tween | tweensy | まとめ

訳しときながらTweensyGroupって何なのかわからなかったけど、
今日asDoc読んでてわかったような気が…。

TweensyGroupには、tweenerでいう特殊プロパティ的なもののトゥイーンのショートカットがあって、
Tweensyでやるよりコードがすっきりして、簡単。

色、輝度、マトリックス、…などなどをバラバラに指定できて、まとめて管理できるから”Group”ってことなのかな？？

それぞれの効果にTweensyTimelineを作ってグループ管理している模様。

時間、イージング、遅延とか各効果別に設定したいけど、制御系はグループ管理したいって時に使えるってことか。

とにかく今回は制御というよりかは特殊プロパティについて調べてみる。

TweensyGroupサンプル

透明度をあげつつ、ぼかしをとりつつ、ぼよんと拡大する。

view sample

Sample1.as

PLAIN TEXT

Actionscript:

package
{
import com.flashdynamix.motion.*;
import fl.motion.easing.*;
import flash.text.TextField;
import flash.display.MovieClip;
import flash.filters.BlurFilter;
import flash.geom.Matrix;
/**
* ...
* @author DefaultUser (Tools -> Custom Arguments...)
*/
public class Sample1 extends MovieClip
{
private var tween:TweensyGroup;
private var tf:TextField;
public function Sample1() {
tween = new TweensyGroup();
tween.onComplete = tweenComp;
//透明度
this.alpha = 0;
tween.alphaTo(this, 1, 1,Quartic.easeOut,0.5);
//フィルター
var blur:BlurFilter = new BlurFilter(30,30,1);
tween.filterTo(this, blur, {blurX:0,blurY:0}, 1,Quartic.easeOut,0.5)
//拡大・縮小
tween.scaleTo(this, 2, 2, Elastic.easeOut, 1);
//テキストフィールドを作成、追加
tf = new TextField();
tf.y = -(this.height/2)-20; //基準点が中央のため
addChild(tf);
}
public function tweenComp():void {
tf.text = "Complete!";
}
}
}

ショートカットの詳細

alphaToメソッド　-透明度の変更

public function alphaTo(instance:Object, alpha:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcのアルファを3秒かけて0.5にする
tween.alphaTo(mc, 0, 5,3);

brightnessToメソッド -輝度の変更

public function brightnessTo(instance:Object, amount:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcの輝度を3秒かけて0.5にする
tween.alphaTo(mc, 1, 5,3);

ColorToメソッド -色を変更

public function colorTo(instance:Object, color:uint, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcの色を3秒かけて0x000000(黒)にする
tween.colorTo(mc, 0x000000, 3);

ColorTransformToメソッド -ColorTranceformの適用

public function colorTransformTo(instance:Object, color:ColorTransform, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.geom.ColorTransform;

//mcの色をColorTransform オブジェクトctに5秒かけて適用
var ct:ColorTransform=new ColorTransform(-1, -1, -1, 1, 255, 255, 255, 0)
tween.colorTransformTo(mc, ct, 5)

contrastToメソッド -コントラストの変更

public function contrastTo(instance:Object, amount:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcのコントラストを3秒かけて1(最大)に変更
tween.contrastTo(mc 1,2);

filterToメソッド -フィルタ効果の適用

public function filterTo(instance:Object, filter:BitmapFilter, to:Object, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.filters.BlurFilter;

//ぼかしフィルターのblurX、blurYを10に5秒かけて適用
var blur:BlurFilter = new BlurFilter(0,0,1);
tween.filterTo(this, blur, {blurX:10,blurY:10}, 5);

matrixToメソッド -マトリックス変形の適用

public function matrixTo(instance:Object, mtx:Matrix, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.geom.Matrix;

//mcにMatrixオブジェクトmtxを3秒かけて適用
var mtx:Matrix = new Matrix(-1,2,1,2,1,2);
tween.matrixTo(this, mtx, 3);

rotateToメソッド -回転

public function rotateTo(instance:Object, rotation:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcの角度を3秒かけて180度に変更
tween.rotateTo(mc, 180, 3);

scaleToメソッド -拡大・縮小

public function scaleTo(instance:Object, scale:Number, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

//mcを1秒かけて50%に縮小
tween.scaleTo(mc,0.5,1)；

soundTransformTo -SoundTransformの適用

public function soundTransformTo(instance:Object, trans:SoundTransform, duration:Number = 0.5, ease:Function = null, delayStart:Number = 0): TweensyTimeline

import flash.media.SoundTransform;

////mcにSoundTranceformオブジェクトstを3秒かけて適用
var st:SoundTransform = new SoundTransform(1, 0);
tween.soundTransformTo(this, st, 3);

[tweensy]いろいろ試してみる：onComplete、YOYO、TweensySquence

2009-01-27 (火)
study | tweensy
actionscript | as3 | library | sample | tweensy

前の記事でwikiの日本語訳（微妙かも？）もしたことなので、
それとこのASDocを見ながらよく使いそうな事例をもとに
TweensyOriginalを使ってサンプルを作ってみまーす！

Tweensyを使う準備

Tweensy0.2.zipをダウンロード

解凍したファイルの
releases/source/cs3 or cs4/originalフォルダを適当なところに保存。

flashを開いて環境設定でTweensyOriginalのクラスパスを通す。

Tweensyのイージングの感じをシュミレーションするのには
SCRATCHBRAINさん作のこのツール使いました。あーたす！

作った３つのサンプル

三つのサンプルに共通するところ

mcをクリックしたら一時停止、再クリックで再開する。
完了イベントを取得、完了したらマウスイベント削除。
ムービークリップのサブクラスである。

TweensyOriginalサンプル1

view sample

mcが右から左に移動して、2秒後に完了。

TweensyTimeline使う
イージング使用
トゥイーンの遅延
プロパティpausedで条件判定して、トゥイーンの一時停止・再開
トゥイーン完了イベント取得

Sample1.as

PLAIN TEXT

Actionscript:

package {
import com.flashdynamix.motion.*;
import fl.motion.easing.*;
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.events.Event;
/**
* ...
* @author kanariia
*/
public class sample1 extends MovieClip {
private var tween:TweensyTimeline;
private var tf:TextField;
public function sample1() {
//テキストフィールドを作成、追加
tf = new TextField();
tf.x = 0;
tf.y = this.height;
addChild(tf);
//x軸0から450まで5.0秒かけてQuartic.easeOutで動かす
tween = Tweensy.fromTo(this, { x:0 }, { x:450 }, 5.0, Quartic.easeOut);
//目的地についたら一秒待つ
tween.delayEnd = 2.0;
//トゥイーンが完了したら、completeTween関数を実行
tween.onComplete =completeTween;
//イベントリスナー登録
addEventListener(MouseEvent.CLICK,pauseTween);
//オーバー時のマウスカーソルの形状人差し指に
buttonMode=true;
}
public function pauseTween(e:Event) {
if (tween.paused) {//一時停止してたら再開
tween.resume();
tf.text="再開したよ";
} else {//そうでなければ一時停止
tween.pause();
tf.text="一時停止したよ";
}
}
public function completeTween():void {
tf.text = "完了したよ";
//イベントリスナー削除
removeEventListener(MouseEvent.CLICK, pauseTween);
//オーバー時のマウスカーソルの形状デフォルトに
buttonMode = false;
}
}
}

TweensyOriginalサンプル2

view sample

mcが左右に移動するのを3往復する。

TweensyTimeline使う
イージング使用
トゥイーンの繰り返し(3往復)
プロパティpausedで条件判定して、トゥイーンの一時停止・再開
トゥイーン完了イベント取得

Sample2.as

PLAIN TEXT

Actionscript:

package {
import com.flashdynamix.motion.*;
import fl.motion.easing.*;
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.events.Event;
/**
* ...
* @author kanariia
*/
public class sample2 extends MovieClip {
private var tween:TweensyTimeline;
private var tf:TextField;
public function sample2() {
//テキストフィールドを作成、追加
tf = new TextField();
tf.x = 0;
tf.y = this.height;
addChild(tf);
//x軸0から450まで1.5秒かけてQuartic.easeInOutで動かす
tween = Tweensy.fromTo(this, { x:0 }, { x:450 }, 1.5, Quartic.easeInOut);
//トゥイーンの繰り返し
tween.repeatType = TweensyTimeline.YOYO;
tween.repeats = 3;
//トゥイーンが完了したら、completeTween関数を実行
tween.onComplete =completeTween;
//イベントリスナー登録
addEventListener(MouseEvent.CLICK,pauseTween);
//オーバー時のマウスカーソルの形状人差し指に
buttonMode=true;
}
public function pauseTween(e:Event) {
if (tween.paused) {//一時停止してたら再開
tween.resume();
tf.text="再開したよ";
} else {//そうでなければ一時停止
tween.pause();
tf.text="一時停止したよ";
}
}
public function completeTween():void {
tf.text = "完了したよ";
//イベントリスナー削除
removeEventListener(MouseEvent.CLICK, pauseTween);
//オーバー時のマウスカーソルの形状デフォルトに
buttonMode = false;
}
}
}

TweensyOriginalサンプル3

view sample

mcがステージを一周する数珠繋ぎトゥイーン。

TweensySquenceを使う
イージング使用
プロパティpausedで条件判定して、トゥイーンの一時停止・再開
トゥイーン完了イベント取得

Sample3.as

PLAIN TEXT

Actionscript:

package {
import com.flashdynamix.motion.*;
import fl.motion.easing.*;
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.events.Event;
/**
* ...
* @author kanariia
*/
public class sample3 extends MovieClip {
private var sequence:TweensySequence;
private var tf:TextField;
public function sample3() {
//テキストフィールドを作成、追加
tf = new TextField();
tf.x = 0;
tf.y = this.height;
addChild(tf);
//トゥイーンシーケンスを定義
sequence= new TweensySequence();
sequence.push(this, {x:0, y:0}, 1,Quartic.easeInOut);
sequence.push(this, {x:500, y:0}, 1,Quartic.easeInOut);
sequence.push(this, { x:500, y:350 }, 1,Quartic.easeInOut);
sequence.push(this, { x:0, y:350 }, 1, Quartic.easeInOut);
sequence.push(this, {x:0, y:150}, 1,Quartic.easeInOut);
sequence.start();
//トゥイーンが完了したら、completeTween関数を実行
sequence.onComplete =completeTween;
//イベントリスナー登録
addEventListener(MouseEvent.CLICK,pauseTween);
//オーバー時のマウスカーソルの形状人差し指に
buttonMode=true;
}
public function pauseTween(e:Event) {
if (sequence.paused) {//一時停止してたら再開
sequence.resume();
tf.text="再開したよ";
} else {//そうでなければ一時停止
sequence.pause();
tf.text="一時停止したよ";
}
}
public function completeTween():void {
tf.text = "完了したよ";
//イベントリスナー削除
removeEventListener(MouseEvent.CLICK, pauseTween);
//オーバー時のマウスカーソルの形状デフォルトに
buttonMode = false;
}
}
}

試す前にちょっとFlaファイルをいじる

Flashで適当なMCを作成。
ライブラリのリンケージ設定で、作ったmcにのサブクラスを定義。
ステージ上にmcを配置。
パブリッシュ、でOK。

つまづいたとこ

トゥイーンの繰り返しをしようと思って、
自分のブログのトゥイーンの繰り返しの説明のとこから、
Tweensy.YOYO; をコピって
コードにコピーしたら未定義とかいってエラー。。。

なんでなんでと調べるが、しばらく意味わからず。

じゃあ、しょーもないことやった。。

Tweensy使ってるとき→Tweensy.YOYO
TweensyTimeline使ってるとき→TweensyTimeline.YOYO

そらTweensyTimelineやのにTweensy.YOYOって書いたら怒られるよなぁ。。

みなさまコピペには注意ですｗ(あ、自分だけかｗ)

感想

Tweensyいい！繰り返しトゥイーンが二行で簡単！
数珠繋ぎトゥイーンもすんなりできました！

今回TweensyじゃなくてTweensyTimeline使った理由は特にないけど、
なんかプロパティとメソッドが充実してたから、こっち使ったほうがいいのかなと。。

あと、呼び名は「トゥイーンジー」に一票ヾ(ﾟ∀ﾟ)ﾉ

[progression勉強]CastImageLoaderのロード中にCastMovieClipを表示してみる

2008-12-03 (水)
progression | study
as3 | framework | progression | sample

今日はこの前作ったサンプルのソースを基に、
サムネイルをCastImageLoaderでロード中にアニメーションを入れてみたいと思います。

ということで、ググる。

apeirophobia: progression検証 #15 CastImageLoaderをコマンドで監視編
このエントリ、コメントを読んでると、
castImageLoaderにはデフォルトで読み込み状況を取得するイベントはない様子。

ということでこちら
CastImageLoaderを使ってみる - Is It So Easy?
を参考にCastImageLoaderのサブクラスを作成してみる。

CastImageLoaderではロードの進捗は監視できないけど、
_onCastLoadStart():voidでロード開始時
_onCastLoadComplete():voidでロード完了時
のイベントが受け取れるから、
ロードし始めたらローディングするMCをCastMovieClipにしたものをaddChildして、
ロードが完了したらremoveChildしてやって、それらしく見せてみようと思います。

この前作ったサンプルのクラス以外に、追加で作ったクラス

MyImgLoader.as(CastImageLoaderのサブクラス)

LoadImg.as(CastMovieClipのサブクラス)

LoadImg.asを作成
コンストラクタはこんな感じ。

PLAIN TEXT

Actionscript:

public function LoadImg( initObject:Object = null ) {
super(initObject);
//loaderの中央に表示
this.x = (initObject.loaderW - this.width) / 2;
this.y = (initObject.loaderH - this.height) / 2;
//透明にする
alpha = 0;
}

Index.flaの中にロード中に表示するMCを作る
ローディングはアニメGIFを使用。
こちらのサイトからダウンロードしたものを、
そのままライブラリにインポート。
できたMCにLoadImgクラスを設定するだけ。

MyImgLoader.asを作成
こんな感じ。

PLAIN TEXT

Actionscript:

package myproject {
import jp.progression.casts.*;
import jp.progression.commands.*;
import jp.progression.events.*;
import jp.progression.loader.*;
import jp.progression.*;
import jp.progression.scenes.*;
import myproject.LoadImg;
/**
* ...
* @author kanariia
*/
public class MyImgLoader extends CastImageLoader {
private var _container:CastButton;
private var _loadImg:LoadImg;
/*======================================================================*//**
* コンストラクタ
*/
public function MyImgLoader(initObject:Object=null) {
super(initObject );
//縦横比を固定
this.ratio = true;
//リサイズ
this.width = initObject.valueW;
this.height = initObject.valueH;
//表示リストは呼び出し元のCastButtonを参照する
_container = initObject.container;
//ロード中に表示するMCを作成
_loadImg = new LoadImg({loaderW:initObject.valueW,loaderH:initObject.valueH});
}
/*======================================================================*//**
/*Load開始時*/
protected override function _onCastLoadStart():void
{
addCommand(
//_loadImgを表示リストに追加
new AddChild(_container, _loadImg),
new Trace("読み込み開始")
)
}
/*Load完了時*/
protected override function _onCastLoadComplete():void
{
this.alpha = 0;
addCommand(
//_loadImgを表示リストから削除
new RemoveChild(_container, _loadImg),
new Trace("読み込み完了"),
//loaderを表示リストに追加、アルファ100にする
[new AddChild(_container, this),
new DoTweener(this,{alpha:1,time:2})]
);
}
}
}

MyBtn.asを修正
コンストラクタを大幅に修正

PLAIN TEXT

Actionscript:

public function MyBtn( initObject:Object = null ) {
super( initObject );
//リンク先設定
sceneId = new SceneId( "/index/photo"+initObject.num);
//画像のサイズ
var loaderW:Number = 80;
var loaderH:Number = 60;
//loaderの作成
_loader = new MyImgLoader( { container:this, valueW:loaderW, valueH:loaderH } );
//画像を読み込み
_loader.load(new URLRequest(initObject.url),new LoaderContext(true,null, null));
}

前のソースのままでは MyBtn.asの中で_loaderの座標を指定して
btnの位置が変わっているように見えていただけだったことに気づき、
(↑このままではloadImgが画面左上にくる)
_loaderの位置指定を消してIndexScene.asでbtnの位置を設定するように修正。

で、できたのがこれ！

気づいたこと
MyImgLoaderでload完了時、
自分をaddhildしてからDoTweenerしようとしたが、
エラーは出ないがTweenerが動作せず、ちょっとハマる。
結果、[ ]で囲んでParallelListにしたら、動いた！

//loaderを表示リストに追加、アルファ100にする
[new AddChild(_container, this), new DoTweener(this,{alpha:1,time:2})]

addChildのあとにはコマンドがきかないということなのか‥？

sample

[Adobe MAX Japan 2009]ROXIK城戸さんのアレとTweensyで観覧車やってみた

まず準備

サンプルたち

視点の横移動

視点の回転

視点のズーム＆回転

感想

関連する投稿

[Adobe MAX Japan 2009] ROXIK城戸さんのをアレをやってみる

まず準備

サンプルたち

視点の横移動

視点の回転

視点のズーム＆回転

感想

関連する投稿

[tweensy]いろいろ試してみる：TweensyGroupで特殊プロパティをトゥイーン

TweensyGroupサンプル

ショートカットの詳細

alphaToメソッド -透明度の変更

brightnessToメソッド -輝度の変更

ColorToメソッド -色を変更

ColorTransformToメソッド -ColorTranceformの適用

contrastToメソッド -コントラストの変更

filterToメソッド -フィルタ効果の適用

matrixToメソッド -マトリックス変形の適用

rotateToメソッド -回転

scaleToメソッド -拡大・縮小

soundTransformTo -SoundTransformの適用

関連する投稿

[tweensy]いろいろ試してみる：onComplete、YOYO、TweensySquence

Tweensyを使う準備

作った３つのサンプル

TweensyOriginalサンプル1

TweensyOriginalサンプル2

TweensyOriginalサンプル3

試す前にちょっとFlaファイルをいじる

つまづいたとこ

感想

関連する投稿

[progression勉強]CastImageLoaderのロード中にCastMovieClipを表示してみる

関連する投稿

alphaToメソッド　-透明度の変更