flash lite概要

7
モバイル用Flash(FlashLite)の概要 タイムラインを使ったアニメ AS1.0を使ったアニメ 作成方法の説明

Upload: toshiharu-shirai

Post on 22-Jul-2015

721 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Flash lite概要

モバイル用Flash(FlashLite)の概要

タイムラインを使ったアニメAS1.0を使ったアニメ

作成方法の説明

Page 2: Flash lite概要

■FlashとはオーサリングツールをFlashと言い、再生する側はFlashPlayerといいます。プログラミングベースではFlexとかFlashDevelopなんかでも開発出来ます。ただFlashLiteをやるなら純正のAdobe Flash以外にありません。※パブリッシュされる実行ファイルはswf(すうぃふ)と呼びます。が、基本的にFlasher以外には通じないため「えすだぶりゅえふ」と呼んでます。

■Flashのバージョンモバイル用には現在、FlashLite1.0〜4.0までのバージョンがあります。

それぞれのプレイヤーには下位互換があるので、それ以前のバージョンで作成されたswfを再生することが出来ます。そんななかでなぜFlashLite1.1で作るのか疑問に思うかもしれません。

■なぜ、FlashLite1.1で作成するのか?古くはDoCoMo901シリーズから搭載されており、その後DoCoMo端末において2.0へ

の移行が滞ったため、シェア的にまだ多く残っているので下位端末のユーザーに合わせるためFlashLite1.1で作成しています。近年ではFlashLite2.0以降の端末シェアも伸びていますが、2.0で作成した場合のメリットが表現上においてはあまりないため1.1で作成するという現状があります。

最下位バージョンのFlashLite1.0で作成しない理由は、DoCoMo505,506,900シリーズにしか搭載されていない点と制限がさらにきつくなるからです。容量制限が20KBであったり通信が出来ないなど色々と重大な制限があります。

Page 3: Flash lite概要

■モバイルFlashの再生モバイルFlashの再生方法には下記の2通りあります。●全画面表示(インタラクティブ再生)ブラウザで直接swfにアクセスした状態です。キー操作が可能ですが、Flash単体では携帯アプリと違ってデータの保存や取得は出来ないので一度終了したら、また最初から再生されます。どのキーが使えるとかは端末によっても変わるため省略します。

●ページ内表示(インライン再生)ページ内に表示する方法です。

ここ数年内の端末では複数表示出来るものもありますが、下位端末に合わせて基本はページ内に1つしか表示出来ないと考えてください。。キー操作不可なので、表示する以外はなんにも出来ません。

■基本のステージサイズ(インタラクティブの場合、インラインは適宜)240px×240pxで設定しておき、ステージ外にも背景などを置くようにして作成します。

高さを大きいサイズで作ってしまうと、端末によっては小さく縮小されて表示されるため意図した見え方になりません。

きせかえツールなど他機種に対応する場合には、それぞれのサイズやバージョンに合わせて変更することもありますし、それ用の制作ツールなどもあります。これらを1ファイルで賄うために、意図した場所以外見えないように一番上の深度にカバーを置いておきます。

Page 4: Flash lite概要

■タイムラインとかフレームとかタイムラインはコレ→

●フレームレートの設定単位は fps = Frames Per Second1秒間に何回の描画処理を行うかという設定です。12fpsなら1秒間に12回画面を書き換えるということです。Wikipediaによると、60fpsあれば十分に滑らかな映像が再現できるとされ、それを謳い文句とした製品が発売されている。逆に、15fpsに満たない場合は映像を再現するのが難しい。

基本は8fpsで作成。

ただし実機で動かすと設定したフレームレートで動く端末は稀です。少しスクリプトを動かしただけでも2fps程度のパフォーマンスしか出ない機種も存在します。このフレームレートの低

下が「重い」と呼ばれる状態です。重い処理を繰り返すと端末のスペックとその処理の内容によってこのフレームレートが下がるため、全体的に再生の進行速度が遅くなります。これは1フ

レームの間に行われるべき処理を端末のスペックによって対応出来なくなるために遅くなります。

●シンボルの種類ムービークリップグラフィック ボタン

●インスタンスはシンボルのコピーこれをステージに配置するなり、スクリプトで複製するなりして、動かします。

●トゥイーングラフィックトゥイーンシェイプトゥイーンクラシックトゥイーン

この辺の用語とかをふまえたうえで実際に超簡単なアニメを作るときの雰囲気を、実際のオーサリング環境のキャプチャでざっと説明します。

Page 5: Flash lite概要

■トゥイーンを使ってタイムラインで動かす

1. 動かす対象のインスタンスを作るとりあえず矩形 ついでにフレームものばす

1. タイムラインにクラシックトゥイーンを作成するそうすると勝手にグラフィックシンボルになります

3. キーフレームを作成 10フレームで矩形の配置座標を動かす

Page 6: Flash lite概要

さっき作成したグラフィックをムービークリップに変更して、その中にASを書きます。

●1フレーム目●2フレーム目

1フレーム目_xそのムービクリップのx座標に10px足す = 右に移動_yそのムービクリップのy座標に10px足す = 下に移動

x座標が100pxを超えたらムービークリップの再生をストップさせる

2フレーム目prevFrame() 前のフレームに戻るフレームの繰り返し処理に必要

これで先ほどのトゥイーンで作成した動きと同じで、毎フレーム右下に移動して一定位置で

止まるという動きになります。

■同じ動きをアクションスクリプトで作る

(数値は適当です完璧一緒にする場合は移動距離をフレーム数で割るとかします。)

●ムービークリップのプロパティ

Page 7: Flash lite概要

■MC(ムービークリップ)構造とレイヤーと深度デザイナーにとってはレイヤーは馴染み深いと思いますが、Flashの内部では深度という設定に置き換わります。要するに重なり順を管理する数値です。●MC構造について(MCのネスト)ネストしていくと、親MCと子MC孫MCひ孫・・・というふうにドンドン増やせます。各MC内に別々の深度を持っています。

レイヤー1:青い矩形レイヤー2:緑の矩形

FlashLite1.1では7階層以上作ると実機での再生時にエラーになります。

次回はアクションスクリプト(AS1.0)の開発や携帯電話でのキー操作の実装。ガルコレやぼくレス1で使用されているturbineとの関連部分やバイナリデータ置換での変数渡しについて説明する予定です。

_root.mc1_root.mc2

_root.mc3.mc1_root.mc3.mc2

/mc1/mc2

/mc3/mc1/mc3/mc2