デザインの学校 ウェブデザイン実戦編 FlashアニメとActionScript

2月20日の授業はWEBデザイン実践編の3回目。今回のテーマは「フラッシュ(Flash)」です。HTMLとCSSで作る従来のホームページを一歩超えた、“リッチコンテンツ”を制作していくための授業になりました。

 

先生はデジハリの講師でもある坂本先生。アニメーションやモーショントゥイーンの基礎から、ボタンに反応して動くような“フラッシュサイト”の制作まで一気に教わっていく、とても中身の濃~い講義になりました。

 

まずは「Flash」における画面構成や基本操作の確認をしつつ、最も基本的なアニメーションの制作からチャレンジしていきます。作成したオブジェクトをタイムライン上でアニメーションにする手順は、1.シンボルに変換⇒2.キーフレーム挿入⇒3.モーショントゥイーンの作成。

 

モーショントゥイーンの上にレイヤーをつくり、プロパティからガイドレイヤーに変更することで、ガイドに沿ったアニメーションにする方法なども学んでいきます。ちなみに「Flash」では、・[ctrl]+[enter]でのパブリッシュプレビュー
・[F5]: キーフレームを挿入
・[F8]でシンボルに変換
・・・といった各種ショートカットが存在するので、ぜひ覚えるように。初心者には小さいことのようですが、納期が存在するデザイナーの世界では、作業時間を短縮するショートカット機能はとても重要なのです。

 

1レイヤーのシンプルなものから複数のレイヤーを組み合わせたものまで、ひと通りアニメーションを制作していったのち、次はインスタンスについて詳しく学んでいきました。

 

インスタンスには[ムービークリップ]、[ボタン]、[グラフィック]の3種類が。主に授業ではボタンを使用したインタラクティブなコンテンツ制作に
チャレンジしてみました。ボタンには[アップ]、[オーバー]、[ダウン]、[ヒット]の4フレームがあり、サウンドを駆使することで、いわゆる“フラッシュサイト”をつくることもできるんですね。

 

続いていよいよActionScriptの勉強へ。忘れないように、あとで復習しないと大変そうです。授業ではスクリプトの基本的な機能、あるいはプロパティや
メソッドの概念などから学んでいきました。ActionScriptの良い点はちょっとした変更が加えられること。たとえばモーションのわずかなスピードについて、納品したあとになってクライアントから調整(=変更)のリクエストなどがあってもすぐさま、そして細かく対応できるところなんだそうです。

 

そして最後に制作したのは、アニメーション用オープンソースのライブラリである「Tweener」を利用したActionScriptの記述。今回は試しに「easeOutback」というトゥイーンを使ってみました。
ソースはこちら

 

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();
Tweener.addTween(mc,
{_Blur_blurX:10, _Blur_blurY:10,
x:200,y:0,time:2,transition:”easeOutback”});
Tweener.addTween(mc,
{_Blur_blurX:0, _Blur_blurY:0,
y:200,time:2,transition:”easeOutback”,delay:3});

 

すると、たまに見かけるフラッシュサイトのような動きに! 感動!
こんなことができてしまうなんて!

 

坂本先生いわく「今回の授業は駆け足で」とのことでしたが、フラッシュ特有の難しい機能や操作に関して概念から詳しく教えていただけたので、
本当に分かりやすくて勉強になりました。なんだか世界が広がったような気がします。

コメント

    • 坂本
    • 2010年 4月 30日

    アップされたときに、すぐ読んでいたのですが、コメントを書いてませんでした。
    よくまとまっています。すばらしいです。
    web、デジタル出版等、これから、アニメーションを表現できることが、ますます重要になってくると思います。
    気持ちいいものを、作ってくださいね。

  1. この記事へのトラックバックはありません。

*

PAGE TOP