読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

動くことへの渇望

アニメーション

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


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



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

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


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

物理法則を利用する

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

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

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

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

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

Flashに至る道程

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



Photoshopで描いた絵をIllustratorで編集できるようなことができるソフトでした。
つまり「ビットマップ」を「ベクトル」に変換できる画期的なソフトでした。
この段階では、まだ「時間軸」をもっていません。


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



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


結局のところ、人がインターネットに何を望むのかと「Flashへの進化の道のり」は、シンクロしていたように思います。
そして現在では、Flashムービーとしての役割よりも「プログラミング言語」としての「ActionScript」の価値が次の時代への扉を開けようとしています。
それは、「HTML5+CSS3」vs「Flash」などという単純な構図ではありません。

Flashとは

ひとことで言えば、Webコンテンツ作成ソフトです。

Flashにできること

(1)カートゥーンアニメーション
(2)バナー広告
(3)モーショングラフィック
(4)ビデオ配信コンテンツ
(5)ゲーム
(6)携帯電話用アニメーション
(7)Webページ
(8)リッチコンテンツ
など

Flashの役割

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

ベクター形式で描画されるため、拡大・縮小しても画像があれないという特徴があります。

Flashで書き出す「SWF」ファイル

Flashデータは、SWFファイルというFlash独特の画像形式で書き出して利用することが基本。


※SWF:Shockwave Flash の略ですが、データ量が軽いファイル形式であることから最近では Small Web Format と呼ぶ場合もあります。

Flashの弱点

(1)プラグインが必要
Flash Player というプラグインが必要です。ほとんどのパソコンにインストールはされていますが、バージョンにより表現できることに違いがありますから注意が必要です。

 
(2)検索エンジンにヒットしない
(3)情報を共有しにくい
など

Flashインターフェイス

ツールバー
●パネル類
 ・タイムライン
 ・プロパティインスペクタ
 ・ライブラリ
 ・変形
 ・アクション
など

Flashでできること

アニメーションの作成
  • 拡大・縮小による画質の劣化がない
  • データサイズが他の動画形式よりも小さい
コンテンツの作成
  • ActionScriptを使い、ユーザーが操作するコンテンツを作成できる
イラストの作成
  • イラストを作成し、アニメーション化したり、画像形式のファイルとして書き出すことができる
ビデオ映像や写真画像の利用
  • デジタルカメラなどで撮影した写真やビデオのムービーを加工してアニメーションやコンテンツを作成することができる

HTML5Flashの機能比較