Flash制作講座フラッシュ制作講習

FLASH制作からActionScriptによるFlashコンテンツ制作のためのフラッシュ制作講座

「Flash Player」は、いまも“ゾンビ”のように生き続けている?

wired.jp

Flashコンテンツはまだまだ存在していて、UIでも使用されているサービスもまだある。

 

ちょっとしたアニメーションや映像加工ならまだまだFlashは用途が多い。

 

GifアニメやAVIにも出力は可能なので、スタメンでは厳しいかもしれないがピンチヒッターとしてFlash自体はオーサリングツールとしてもまだ用途はある気がする。

 

走る犬2DのGifアニメをAdobe Flashを利用して製作してみます。

今回のFlash制作講座では2D走る犬のGifアニメーションを作成する一連の流れについてアドビのフラッシュで製作に関して説明しました。

 

[第1のフロー]


ここではシルエットイラストを使用して、ベクターイラストデータを準備してみます。

f:id:jedisystemer:20181113145752p:plain

 

[第2のフロー]


では各部をバラバラにしパーツ作成から、シルエットイラストを関節や部位で切り分けて、可動範囲をもとに各パーツを製作。また奥側の足パーツも複製して調整作成という作業を行います。

f:id:jedisystemer:20181113145821p:plain

f:id:jedisystemer:20181113145942p:plain

[第3のフロー]


最終工程として、Flashに取り込んでアニメーション作成にて、各パーツを個別にFlashに取り込んで、アニメーションを製作。シーケンスで書き出した画像をPhotoshopGifアニメーションに書き出して完成という工程でこの講座内容は完了します。

f:id:jedisystemer:20181113150441g:plain

 

この記事内容について注意したい点がありますが、それはFlashでアニメーション製作時にはかならずトップレイヤーにすべてを配置して、ActionScriptを使用せずに製作する必要があるに関しては意識しておいた方がよいでしょう。

 

 

 

 

 

 

 

GifアニメーションをAdobe Flashを利用して制作してみましょう。

今回のFlash制作講座ではgif画像のアニメを作成する一連の流れについてアドビ社のフラッシュで制作に関して説明しました。

 

[第1のフロー]


ここではフラッシュを使用して、タイムラインにアニメーションを制作してみます。



[第2のフロー]


ではタイムラインに制作したアニメーションから、[ファイル]⇒[書き出し]⇒[ムービーの書き出し]⇒[ファイルの種類]⇒[PNG シーケンス(*.png)]または[JPG シーケンス(*.jpg)]で書き出しという作業を行います。



[第3のフロー]


最終工程として、Photoshopにて、[ファイル]⇒[開く]ダイアログ⇒[画像シーケンス]をチェック。画像がすべて読み込まれたら[ファイル]⇒[Webおよびデバイス用に保存]でGIFを選択という工程でこの講座内容は完了します。



この記事内容について注意したい点がありますが、それはFlashタイムラインのActionScript入れ子ムービークリップは無効になることに関しては意識しておいた方がよいでしょう。

 

今回のFlash制作講座ではgif画像のアニメを作成する一連の流れについてアドビ社のフラッシュで制作に関して説明しました。

flashでAVIムービーを書き出す時間の目安

855フレームのflashアニメーションをAVIムービー720px×480pxのサイズで書き出した時の所用時間です。

マシンスペックはそこそこ高い環境です。


その所要時間


25秒。


855フレームを25で割ると、34.2。

つまり1秒あたり、まぁまぁのパソコンでAVIムービーを書き出す場合、
1秒間に34コマぐらいの処理が可能です。映像の尺は40秒ぐらいでした。


ただしファイルサイズが900Mbyte近い恐ろしいサイズに。

 

FLVかf4v形式にエンコードしないと、とてもまともに取り扱いできません。

 

Flashムービー逆再生・巻き戻し方法

FlashアニメーションやMCのトゥイーンなどで、逆再生や巻き戻しを簡単に早く実現する方法について。


確かにFlashコンテンツは、ActionScript3で制御する方がかっこいいし、さも作っている感がある場合もあります。

大掛かりなFlashシステムなどではオブジェクト化する必要があるので、MCのアニメーションをActionScript3で制御するのがふさわしい場合がありますが、大抵は手間ばかりかかり難解な記述をすらすら理解できる人でないと、時間ばかりかかっちゃいます。


タイムライン上の動きを単純に逆再生、巻き戻しをしたい場合は、ActionScriptで記述する方法もありますが、もっと簡単に.............

 

 

詳しくは》Flashアニメーション逆再生・巻き戻しを簡単に

 

Flash制作, WEB制作.

Flashゲーム 手間のかからない熱帯魚育成シュミレーション

熱帯魚好きや、熱帯魚を飼いたいけれど手間やお金がかかってしまうのでと飼いたくても飼えない人におすすめなのが、

「3D水族館へようこそ!」

だ。

3D水族館へようこそ!は、無料のオンラインゲームで、YahooのIDを持っていれば、だれでも無料でプレイできる熱帯魚観賞ゲームだ。

魚を購入して、エサをあげて成長させる。

 

成長とともにレベルや値段があがり、魚を売ることで、次の高いレベルの魚を購入するための、シルバー、経験値とダイヤモンドを獲得しながら熱帯魚を育てていく育成シュミレーションゲームだ。

 

ゲーム自体はプラグインFlashプレーヤー上で立体的でリアルな3Dの熱帯魚が餌を食べたり、病気になったり、リアルに水槽の中を泳いだり、実際の水槽があるようなクオリティだ。

 

パソコン用モニターに全画面表示もできるので、デジタル水槽のように鑑賞することも楽しめる。

レベルが上がり、シルバーやダイヤ、経験値をためることで、水槽を増やしたり、水槽内や背景のデコレーションを変更したり、実際の水槽並にリアルな自分だけの水族館を作ることができる。

 

魚の成長すれば売却時のシルバーが増えていきます。水槽は毎日掃除をしてあげないと魚たちは病気になったり死んだりしてしまいます。

レベルが上がれば、さらに......................


記事の詳細は 》 

Flash熱帯魚ゲームで手間のかからない自分だけの水族館


Flashゲーム, Flash制作.

マウスカーソルの位置にあわせて方向転換するActionScript3.0

// ActionScript Document

マウスカーソルの位置に合わせて、方向転換するMCをActionScriptで作成してみます。
例えば動物の目を作る時などに役に立ちます。

まず

//マウスカーソルを非表示にします
Mouse.hide();

//MCの準備
//マウスカーソルを骨に差し替える bone_mc を作成
//目のMC rEye lEye を作成

//マウスの位置に対するイベント追加します
stage.addEventListener(MouseEvent.MOUSE_MOVE, followMouse);

function followMouse(event:MouseEvent):void {

//マウスカーソルをたとえば骨のMCに変えて、マウスの位置と同期

bone_mc.x = mouseX;
bone_mc.y = mouseY;

//イベント発生後に随時画面を更新します
event.updateAfterEvent();

//マウス座標を取得して、右目のX方向の距離を計算
var emcRX : Number = mouseX - rEye.x;
//マウス座標を取得して、右目のY方向の距離を計算
var emcRY : Number = mouseY - rEye.y;
//右目位置からnoマウス位置のラジアンを計算
var radR : Number  = Math.atan2(emcRY,emcRX);
//ラジアンを角度へ変換...........................


詳しくは 》マウスカーソル位置に方向転換するActionScript

 

 

関連記事

Actionscript3.0, Flash制作, マウスカーソル