yoppa.org

Webアニメーション 2010

Webアニメーション ガイダンス

PDF形式で閲覧する

Webアニメーション授業の概要

  • シラバスの説明
  • 対象年次、単位数、教室などの確認
  • 授業スケジュールをおおまかに (授業の進行によっては、変更の可能性もあります。)

とりあえず自己紹介

  • 田所 淳 (たどころ あつし)
  • 千葉商科大学と多摩美術大学で非常勤講師
  • 授業をしている以外の日は、フリーランスでWebを中心にデザイン・プログラミングをしています

授業の内容

  • この授業では、Web上でアニメーションを作成する方法を、ワークショップ形式で解説します
  • 具体的なツールは、Adobe Flashを使用します
  • コンピュータ(Windows)の基本操作には習熟していることを前提として進めます
  • わからないことは、積極的に質問してください。その場で挙手してください
  • 授業の内容は、Webサイトに随時掲載していきます https://yoppa.org/webani10/

成績評価の基準

  • 課題提出内容,履修態度などを総合的に評価する
  • 出席、履修態度:30%
  • 中間課題:30%
  • 最終課題:40%
  • 2回の課題を提出することがとても大事です!!
  • 多少不本意な出来であっても、必ず提出すること

※ 注意!! 出席していても授業に参加していなければ欠席扱いにします

  • 寝てる
  • 他のことをやっている (twitter、mixi、YouTube、2ch.、チャット ..etc.)
  • 私語など他の受講者に迷惑になるような受講者は、退席してもらうこともあります

Adobe Flashについて

  • Adobe Flashは、アニメーションやインタラクティブなWebページを作成するための、制作プラットフォーム
  • アドビシステムズ(Adobe Systems)社が開発・販売している
  • Web上で閲覧するには、Adobe Flash Playerというプラグインを介して閲覧する
  • Adobe Flash Playerの普及度は 99%、最新のバージョンFlash Player 10では94.7% (Adobeによる「Flash Player Version Penetration」より)
  • 現在、Webでのインタラクティブコンテンツ、アニメーション、動画などのプラットフォームとして、ほぼデファクトスタンダード
  • しかし、HTML5の登場によって、若干雲行きに変化も?
  • AppleのiPhone、iPadは、Flashを不採用、今後の搭載予定も(いまのところ)なし

Flashの簡単な歴史

  • 1996年 Future Wave Software社によりFutureSplash Animatorという名称で開発された
  • 同年、マクロメディア(Macromedia)社が買収、Macromedia Flash としてバージョンアップしていく
  • 2005年、マクロメディアがアドビシステムズに買収され、Adobe Flash に改名
  • 現在のバージョンはCS4、2010年春にCS5リリース予定
  • より詳細な歴史は、wikipediaのAdobe Flashの項目を参照

FutureSplash Animator
FutureSplah Animatorの画面

Flashサイトをいくつか紹介

  • UTweet! – Twitter IDやキーワードを入力すると、Twitterと連動したムービーが生成される
  • iida calling – 5・7・5のリズムでつぶやいた言葉がオンガクになる
  • FONTPARK – フォントでお絵描き
  • Wonderwall – マウスの挙動やブラウザ履歴によって形態が変化するインタフェイス
  • Audiotool – Web上で使用できる、音楽制作スタジオ

とりあえず起動してみる

  • Windowsボタン → Adobe → Adobe Flash を選択
  • たまに起動に時間がかかる場合あり
  • いくら待っても起動しない場合には、知らせてください

操作画面の概要

  • ステージ：アニメーションを制作する「舞台」、この画面領域が最終的にアニメーションとして出力される
  • タイムライン：映画のフィルムに相当するもの、時間軸にそってアニメーションを組みたてていく
  • ツールボックス：道具箱。線や図形、文字など道具を選択して、画面に描いていく
  • プロパティ：現在選択している部分のより詳細な設定をする画面

ツールを使用してみる

  • 様々なツールを実際に使用して、ステージに絵を描いてみる
  • 選択、ダイレクト選択、ペン、線、矩形、円、鉛筆、ブラシ、消しゴム、バケツ …etc.

(時間があれば) 映像視聴

  • 「ファインディング・ニモ」メイキング映像
  • CGアニメーション長編映画ができあがるまでには、どういった分担で、どういう工程を経て制作されているのか

アンケート