2014-09-08

2014-09-08

動くことへの渇望Add Star

 

 

アニメーション

  • 「アニメーション」とは、生命や魂を意味するラテン語の「ANIMA」を語源とする言葉
  • 一般的に、本来静止している絵を生きてるかのように動かす技術
  • 歴史的には、1830年プラトーの作ったフェナキスティスコープや、ホーナーの考案したゾートロープまで遡ることができます

 

f:id:web-javascript:20130615111603j:image

 

 

ジョセフ=プラトーのフェナキスティスコープ用円盤

 



この時代から現在に至るまで、アニメーションに利用される原理は変わらず、そのほとんどが間欠運動あるいは仮現運動と呼ばれる眼の残像効果を利用した錯視に基づいています。

いわゆる「パラパラ漫画」と同じ原理です。


  • 【間欠運動】運動が時間とともに持続するのでなく、ある時間経過すると停止し、停止したのち、ふたたび運動が開始することを繰り返す運動

コンピュータが利用される以前は、これを透明のセルロイド板に描画することで実現していたため、「セルアニメーション」と呼ばれていました。

描画用シートは、その後不燃性のアセテートに変わりましたが、用語として使用されています。


物理法則を利用する

自然な動きに見せるためには「物理法則」を利用します。


縦方向の動きは重力を意識した動きにする
  • 落ちるときは加速する
  • あがるときは減速する

※はずむアニメーションの場合、材質も考慮にいれます。


横方向の動きは慣性の法則を利用する
  • 加速するときの移動距離
  • 減速するときの移動距離
  • 摩擦による減速

「つめ」と「のこし」

あるものが動くアニメーションは、動きの始めと終わりの間に何枚かの絵を描いたり「トゥイーン機能」を利用して作成します。


Flashに至る道程

Flashはそもそも「SmartSketch」というドローイングソフトソフトでした。


 

 


Photoshopで描いた絵をIllustratorで編集できるようなことができるソフトでした。

つまり「ビットマップ」を「ベクトル」に変換できる画期的なソフトでした。

この段階では、まだ「時間軸」をもっていません。


それを、インターネット向けのアニメーションツールと位置付け「FutureSplash Animator」として市場に出したものがはじまりです。


 

 


紆余曲折をへて、マウスの動きに合わせてアニメーションしたり、音を鳴らしたりなど、インタラクティブなソフトとして進化しました。


結局のところ、人がインターネットに何を望むのかと「Flashへの進化の道のり」は、シンクロしていたように思います。

そして現在では、Flashムービーとしての役割よりも「プログラミング言語」としての「ActionScript」の価値が次の時代への扉を開けようとしています。

それは、「HTML5+CSS3」vs「Flash」などという単純な構図ではありません。


Flashの役割

  • 初心者がつくる「動的コンテンツ」のパッケージ
  • プレゼンテーションツール
  • ビデオコンテンツなどのインターネット配信
  • ActionScriptを利用した「UI」
  • データベースと連動させたリッチコンテンツ
  • AIRアプリの作成

実際の現場では、まだまだムービーコンテンツの需要がありますが、今後は「AIRアプリ」に移行していくことになるでしょう。

いすれにせよ、まだまだ「特殊性」を認められる「FlashActionScript)」です。

この機会に「Flashコンテンツのコンセプトの立て方」から「実践」まで勉強しましょう。


ActionScript


 

f:id:web-0127:20140225215852j:image

 



基本操作

  • ツール」と「描画」については、授業で解説します

Fashムービーの基本練習

(1)新規ファイル作成(ActionScript2.0

 

f:id:web-css-design:20120519115842j:image

 


(2)ワークスペースを「デザイナー」に変更

  • 「プロパティ」パネルと「ライブラリ」パネルは常に表示させます

 

f:id:web-css-design:20120519120301j:image

 

 

f:id:web-css-design:20120519120640j:image

 


(3)円を描く(楕円ツール

  • 楕円ツールを選択後、線「赤 5px程度」と塗り「なし」の設定を変更する
  • 「オブジェクトの描画(丸が四角で囲まれたアイコン)」と「スナップ(磁石のアイコン)」のチェックを外す
  • 「オブジェクトの描画」がチェックされているとIllustratorと同じベクトル、外れているとPhotoshopと同じビットマップになります

 

f:id:web-0127:20140225222023j:image

 


  • 消しゴムツールを使う場合、「ビットマップ」で描画します

 

f:id:web-css-design:20120519121525j:image

 


(4)F6で「キーフレームの挿入(複製)」

 

f:id:web-css-design:20120519123114j:image

 


(5)消しゴムツールで一部分を消す

 

f:id:web-css-design:20120519123330j:image

 


(6)この操作を、円がなくなるまで繰り返す

  • 繰り返す回数は、なりゆき

 

f:id:web-css-design:20120519124222j:image

 


(7)Enterキーを押して動きを確認する


(8)フレームレートを「24.00」から「12.00」に変更する

  • 単純な動きでは、「24.00」は早すぎます

 

f:id:web-css-design:20120519124414j:image

 


(9)レイヤー名をクリックし、フレームをすべて選択する

 

f:id:web-css-design:20120519124654j:image

 

 

f:id:web-css-design:20120519125028j:image

 


(10)再生をすると、何もない画面に円が描画されるムービーになります

  • ムービーをクリックすると再生されます

 

 
Gadgets powered by Google