top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_572

Flex:◇アニメーションの方法を知識0から学習する。tweener だよね・・・ 【Flex:9日目】

 2008-12-24
 Flashで制作しているときは、当たり前のように
 「タイムライン」を利用して行っていたアニメーション効果
 (※このあたり
   Director を使ってた頃からだから、もう
   馴染んでいたんだけど・・・)

 Flex3 では、「タイムライン」はないわけだよね。
 (プラグインみたいな形であるのかな。
  ともあれ、一般的に利用されているらしい)
   アニメーション用ライブラリ「tweener」に挑戦。
   (まったくの初めての経験・・・)

   ・(前回はこちら

詳細な顛末
 ◎Flex3でアニメーションに挑戦:(その1)

 追記に ▼

※この連載は、はじめて「Flex」に取り組んだmetaboyが、
 60日間体験版を利用して、ゆっくりと学んでゆく、詳細な記録です。
                      (昨日・本日の作業時間:3.0時間
【Flex:9日目】


FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more**************************************************
Flex3でアニメーションに挑戦:(その1)
**************************************************

 ■準備
 /*------------------------------------------*/
  ・tweenerライブラリは、Googleが提供してくれているのだね。
   早速アクセスして取得。
tweener - Google Code
tweener - Google Code 右サイドバーの
 「Featured Downloads:」
 にある、
 tweener_1_31_74_as3.zip
 を取得する。



 【設置】

 ■Flex3のプロジェクトファイルがある場所の
  srcフォルダ内に
  解凍してできた「caurina」フォルダごと複写

  ◇今回は、このライブラリをテスト利用するための
    新規プロジェクトを用意(基本スタートソース)
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="350" height="184"
creationComplete="initApp()"
layout="absolute"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#CFFDE6, #CFFDE6]"
borderColor="#7796FE" borderStyle="solid">

<mx:Script>
<![CDATA[
include "Script.as";
]]>
</mx:Script>
<mx:Button x="11" y="12"
label="移動させる1" width="100" height="25"
fontFamily="MS ゴシック"
id="bt_move1" enabled="true" labelPlacement="left"
click="moveXY(square,10,10,1)"/>
<mx:Button x="121" y="12"
label="リセット" width="100" height="25"
fontFamily="MS ゴシック"
id="bt_reset" enabled="true" labelPlacement="left"
click="resetXY(square)"/>
</mx:Application>

    □アプリケーションがコンパイル後、
     最初に実行するトリガとして
     initApp() を設定
    □スクリプトを Script.as として
     外部ファイル化
    □操作するためのボタンを2つ
     ・クリックしたら、x,y それぞれ
      10単位ずつ移動させるボタン
     ・リセットして最初の位置に戻す
      ボタン
     を配置。

  ◇外部ファイルにしている、mxmlソースファイル
   Script.as に「利用開始」記述
import mx.core.*;
import mx.controls.*;
import flash.display.*;

import caurina.transitions.Tweener;

include "Functions.as";
include "InitVars.as";

    □mx.controls は「ボタン」を利用するため
    □こういう描画処理には
     flash.display.* が必要だと学んだ。
    □import caurina.transitions.Tweener;
     が、Tweener を使うための初期処理だ。


 【基本の描画】

 ■スプライトとして、矩形や円を描画する方法は
public class Sprite
 こちらで学んだ。
 ソース例では、
var target2:Sprite = new Sprite();
target2.graphics.beginFill(0xCCFF00);
target2.graphics.drawRect(0, 200, 100, 100);
target2.name = "target2";

  ・オブジェクトのインスタンスを生成し
  ・beginFill で塗りつぶしの色を決め(塗り)
  ・drawRect で矩形を描画(始めのx,始めのy,幅,高さ)

 ★問題発生!
  これを応用して、
square.graphics.beginFill(0xFF88CC);
square.graphics.drawRect(0, 0, 80, 80);
square.x = 15;
square.y = 40;

 としてみたが、(squareは public として外で宣言済み)
 ・コンパイル自体はできたが(no error)
 ・実際に起動してみると、表示できなかった(非表示)

 いろいろ調べたが原因がわからない。
 やっと見つけたのdが
  ・Flex 3で直接Spriteを使用することはできない?
   ( by Memorise さん )
   ・UIComponentSpriteを継承している
   ・UIComponentを使うことで利用可能にする
   ありがとうございました。

 で、
private var square:UIComponent = new UIComponent();

 と宣言しておいて、実行したらOKでした。
public function makeSquare():void {

square.graphics.beginFill(0xFF88CC);
square.graphics.drawRect(0, 0, 80, 80);
square.x = 15;
square.y = 40;

addChild(square);

}

 これを、最初に実行する関数 initApp() で呼んでいます。


 【Tweenerの利用】

 ■「Tweener」のドキュメントを見てみる
Tweener Documentation and Language Reference
Tweener Documentation and Language Reference まずはこのドキュメントを
 学んで見るか



Tweener.addTween(myMovie, {_x:10, _y:10, time:1, transition:"linear"});

 このように、addTween というイベント(?)で
 位置を変えられることがわかる。
 ・transition は、効果の種類を設定するのでしょうね。

 で、動かすメイン関数を用意
public function moveXY(objVal:Object,intX:int,intY:int,numTime:Number):void {
nowX = objVal.x;
nowY = objVal.y;
Tweener.addTween(objVal, {
x:int(nowX)+ intX,
y:int(nowY)+ intY,
time:numTime,
transition:"easeout"
});
}

 ・効果は、
  「モーションを高速で開始し、
   実行するにつれてモーションを速度 0 まで減速」する
   easeout を設定
 ・x,y の値を保持し続けて動かすために
private var nowX:Number;
private var nowY:Number;

  変数を利用しています。

 併せて、リセット用の
public function resetXY(objVal:Object):void {
objVal.x = 15;
objVal.y = 40;
}

 を準備。


 【動作サンプル】

 ■次のようにできました







なかなか楽しい。

◇今日のGoogle
今日のGoogle(2008/12/24)

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/572-31d03a9d
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。