kanariia.com blog

[progression勉強]実制作でつまづいたとこをQ&A形式でまとめてみた

2009-04-28 (火)
progression | study
actionscript | as3 | flash | progression | まとめ

最近、仕事の案件でflash案件がきた（てかflashにした）ので、
初めてprogressionを使って制作してました。

まだprogressionでの制作方法やas3のことすら、熟知していないのでいろんなところで
つまづいきました。。

ちょっとしたとこでつまづいても解決法をみつけだすのに長時間悩んだりすることが結構あったので、
実制作でprogressionを使ってみて私が躓いたとこや疑問に思ったことと、ググったりして知った答えを
書きとめていたものを、 Q&A形式でまとめてみました！

Q.Castのコンストラクタからステージを参照できない

ステージリサイズで位置とかサイズとか可変させようと思ってコンストラクタで、
リサイズ時実行させる関数をstageにaddEventListenerさせようとしたらコンパイルエラー。

stageの参照は _onCastAddedの中なら可能です。
要は表示オブジェクトコンテナに追加されたタイミングではじめて参照出来るようになるってことですね。

よく考えたらわかることなのですが、なんでエラーが返ってくるのか理解できずに躓いてました。。。

PLAIN TEXT

Actionscript:

protected override function _onCastAdded():void {
stage.addEventListener( Event.RESIZE, onResizeHandler);
onResizeHandler(null);
addCommand(
// 任意のコマンドを記述してください。
new Trace(stage.stageWidth);
);
}

これでOK！

Q異なるシーン間で値の受け渡しがしたい！

progressionのget~系メソッドがいいらしい！
http://www.northprint.net/2009/03/progressionget.html

私は名前つけるのめんどくさかったのでgetSceneBySceneId使いました！
http://flabaka.com/blog/?p=577

たとえばIndexSceneの_testという値を参照する。

var a:IndexScene = IndexScene(getSceneBySceneId(new SceneId("/index")));
trace(a._test);

これは表示リストに追加されてからでないと無理なので、コンストラクタではなく、_onCastAddedの中でやること！
あとIndexSceneのインポートを忘れずに！

Q.progressionのrootはどうやって参照？

trick7さんの記事を参考に！
http://www.trick7.com/blog/2008/12/09-114334.php

Q.castButtonを追加したときも何か動かしたい！

castButton用castSpriteを作ってやる方法を参考にさせてもらいました！
http://narayama.heteml.jp/2008/09/castbuttoncastsprite.html

Q.あれ？onLoadとonInitの違いは何やったっけ？

これ、初歩的ですが、何度も何度もnorthprintさんのgihyoの記事に掲載されてたこの図で確認してます。。。

Q.tweeneerのコマンドはあるけど、tweensyのコマンドは用意されてないの？

コミッターの seyself さんが、 tweensy をコマンドとして使用できる DoTweensy コマンドを作成してくださっているそうです。
http://trac.progression.jp/browser/experiments/sayself/extensions/classes/com/seyself/extras/progression

Q.castButtonでsceneIdを指定してじゃなく次のシーンに飛ばすにはどうするの？

次のシーンのsceneIdを取得するには

progression.current.next.sceneId;

前のシーンのsceneIdを取得するには

progression.current.previous.sceneId;

ということで、やってみる。

IndexSceneで関数nextSceneId,prevSceneIdを用意しといて、
子シーンオブジェクトの_onInitとかで

var a:IndexScene = IndexScene(getSceneBySceneId(new SceneId("/index")));
a.nextSceneId=progression.current.next.sceneId;
a.prevSceneId=progression.current.previous.sceneId;

と書き換えておいて

その子シーンオブジェクトの中のCastBtn(_nextBtnと_prevBtn)のsceneIdを書き換えてやる。

var a:IndexScene = IndexScene(getSceneBySceneId(new SceneId("/index")));
_nextBtn.sceneId=a.nextSceneId;
_prevBtn.sceneId=a.prevSceneId;

これが一番良い方法かわからないですが、参考程度に。

Q.castButtonでhtmlページにリンクさせるにはどうするの？

castButtonのプロパティにhrefがあるから、以下のような記述をコンストラクタにする。

href="http://kanariia.com/blog/";

sceneId プロパティと href プロパティが両方とも設定されている場合には、href プロパティの設定が優先されるそうな。

あと、windowTargetプロパティも用意されてるので、以下のように使える。いやーさすが。

href="http://kanariia.com/blog/";
windowTarget="_blank";

Q.castImageLoaderで読み込んだ画像をスムージングしたい

ExImageLoaderのプロパティにsmoothingというのがあるので、
コンストラクタで

smoothing=true;

でOK。
castImageLoaderはExImageLoaderのサブクラスなので。

ちなみにリサイズの際、縦横比を維持したい場合は

ratio=true;

でOK。

Q.castButtonの_onCastRollOverと_onCastRollOutにDoTweenerを設定したが、超速でのせたりはずしたりするとエラーがかえってくる。

こんなエラーがよくでて困ったことありませんか。

[ERROR] <DoTweener : command_2031> コマンドで CommandTimeOutError エラーが発生。

原因はコマンドが実行中なのに同じインスタンスに他のコマンドが上書きされるからだと思われる。
実行中のコマンドを中断してやることが必要。

コマンドを中断するためにどうすればよいか、でみつけたのがinterrupt()メソッド。
これを使うためにはexecute()メソッドでコマンドを実行する必要があるらしい。

じゃあaddCommand使わないでやってみよーてことで、こんな感じ。

PLAIN TEXT

Actionscript:

package myproject.btn {
import jp.progression.casts.*;
import jp.progression.commands.*;
import jp.progression.events.*;
import jp.progression.loader.*;
import jp.progression.*;
import jp.progression.scenes.*;
/**
* ...
* @author kanariia
*/
public class TestBtn extends CastButton {
private var _rollOver:SerialList;
private var _rollOut:SerialList;
/*======================================================================*//**
* コンストラクタ
*/
public function TestBtn( initObject:Object = null ) {
super( initObject );
}
/*======================================================================*//**
* ユーザーが CastButton インスタンスにポインティングデバイスを合わせたときに送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onCastRollOver():void {
if (_rollOut) {
//_rollOutのコマンドをすべて解除する
_rollOut.interrupt();
}
_rollOver = new SerialList();
_rollOver.addCommand(
new DoTweener(this, { alpha:0.5, time:0.5, transition:"easeOutExpo" } )
);
//コマンド実行
_rollOver.execute();
}
/*======================================================================*//**
* ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onCastRollOut():void {
if (_rollOver) {
//_rollOverのコマンドをすべて解除する
_rollOver.interrupt();
}
_rollOut = new SerialList();
_rollOut.addCommand(
new DoTweener(this, { alpha:1, time:0.5, transition:"easeOutExpo" } )
);
//コマンド実行
_rollOut.execute();
}
}
}

スマートじゃないかもしれないけど、こうすればエラーはとまります！

Q.CastButtonの無効化はどうするの？

いつものようにenabled=false;にしても、無理だったので調べました。

ボタン有効・無効を設定する
buttonEnabledプロパティが用意されていたので、

buttonEnabled=false;

でいけるみたい！

Q.ページタイトルはどうやって変えるの？

http://blog.img8.com/archives/2008/11/004207.html

SceneObjectにはtitleというプロパティがあります。
prog.sync=true;じゃないと作動しないらしい。
あと、index.htmlのタイトルがIndexSceneにたどりつくまで
表示されるので、直しておくべし。

sceneObjectのコンストラクタとかに

title="テストサイト"

みたいな感じで書けばOK。

indexSceneでほかのシーンも作ってる場合は

aboutScene.title="about｜テストサイト";

て感じでOK。

IndexSceneで子・孫シーンをonLoadで一気に追加しておけば、
こんな設定も超簡単にすむｗ

ひとこと

自分用のメモみたいな感じなんで、きれいにまとまってるわけじゃないけど、
同じことで躓いてる人がこのエントリで救われるといいなー

[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使った理由は特にないけど、
なんかプロパティとメソッドが充実してたから、こっち使ったほうがいいのかなと。。

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

as3

[progression勉強]実制作でつまづいたとこをQ&A形式でまとめてみた

Q.Castのコンストラクタからステージを参照できない

Q異なるシーン間で値の受け渡しがしたい！

Q.progressionのrootはどうやって参照？

Q.castButtonを追加したときも何か動かしたい！

Q.あれ？onLoadとonInitの違いは何やったっけ？

Q.tweeneerのコマンドはあるけど、tweensyのコマンドは用意されてないの？

Q.castButtonでsceneIdを指定してじゃなく次のシーンに飛ばすにはどうするの？

Q.castButtonでhtmlページにリンクさせるにはどうするの？

Q.castImageLoaderで読み込んだ画像をスムージングしたい

Q.castButtonの_onCastRollOverと_onCastRollOutにDoTweenerを設定したが、超速でのせたりはずしたりするとエラーがかえってくる。

Q.CastButtonの無効化はどうするの？

Q.ページタイトルはどうやって変えるの？

ひとこと

関連する投稿

[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ファイルをいじる

つまづいたとこ

感想

関連する投稿

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