成安造形大学　コンピュータ基礎演習３・４　2009年度概要

第１２回　インスタンスの動的生成（12月11日）

Fri, 11 Dec 2009 00:00:00 +0900

本日の課題

動的なインスタンス生成を使ったインタラクティブコンテンツを作成する
パブリッシュを行いHTMLにSWFを配置させる
サンプル：
サンプルソースのダウンロード：091211.fla

インスタンスの動的な生成

ムービークリップやボタンのインスタンスはアクションスクリプトでも生成できる
インスタンスの数を可変させたり大量のインスタンスを配置する場合に便利
空のインスタンスを作成する方法とライブラリのシンボルから作成する方法とがある
アクションスクリプトで生成したインスタンスはアクションスクリプトで削除しないとステージから消えない点に注意する

空のインスタンスを作成する

新規のシンボル挿入のように空のインスタンスを作成できる
JPEGやSWFを読込むためのコンテナなどに使われる場合が多い

例：

// 空のインスタンスを作成してJPEGを読込む
var load_mc:MovieClip = new MovieClip();
addChild(load_mc);
var load_req:URLRequest = new URLRequest("myphoto.jpg");
var photo_loader:Loader = new Loader();
photo_loader.load(load_req);
load_mc.addChild(photo_loader);

ライブラリのシンボルから作成する

ライブラリのシンボルからアクションスクリプトでインスタンスを作成するにはリンケージの設定が必要
ライブラリパネルでシンボルのリンケージ設定を行いシンボルにクラスを設定する
MovieClip()の代わりに設定したクラス名を使うことでインスタンスが生成される

例：

// 動的にインスタンスを生成してプロパティを設定する
var snow_mc:snow_class = new snow_class();
addChild(snow_mc);
snow_mc.x = 100;
snow_mc.y = 100;

例：

// 動的に生成したインスタンスをステージから消す
removeChild(snow_mc);

評価ポイント

リンケージの設定が正しくできているか？（20点）
動的なインスタンス生成と表示が正しくできているか？（20点）
動的なインスタンス生成が効果的に使えているか？（20点）
配列や繰返しが効果的に使えているか？（20点）
効果的なインタラクティブコンテンツが作成できたか？（20点）

DreamweaverまたはFTPソフトなどでサーバにアップロード（PUT）して提出する

Flashファイル(*.fla)、SWFファイル(*.swf)及びHTMLファイルを提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の火曜日の午後９時まで

第１１回　サウンドの読み込みとコントロール（12月4日）

Fri, 04 Dec 2009 00:00:00 +0900

本日の課題

サウンドを使ったインタラクティブコンテンツを作成する
パブリッシュを行いHTMLにSWFを配置させる
サンプル：
サウンドファイルのダウンロード：sound.zip
サンプルソースのダウンロード：091204.fla

サウンドファイルの読込み

読み込めるサウンドファイルはMP3、 WAV（Windows及びQuickTimeがインストールされているMacOS）、AIFF（MacOSおよびQuickTimeがインストールされているWindows）
サウンドはステージに直接配置はできないのでライブラリに読み込んで使う
使用しなかったサウンドはライブラリから削除する

タイムラインでのサウンドの指定

読み込んだサウンドはキーフレームのプロパティで設定する
どのレイヤーにも設定可能だがサウンド用のレイヤーを用意した方が視覚的にわかりやすい
SEのように短いサウンドは同期をイベントに、BGMのようにループさせるサウンドは同期をスタートに設定する
サウンド再生を止めるには同期をストップに設定する

外部サウンドファイルの再生

長い曲など容量が大きい（1MB以上）サウンドはライブラリに読み込まずにActionScriptを使ってストリーミング再生する
ストリーミング再生可能なファイルはMP3のみ
外部サウンドファイルを再生するにはSoundとURLRequestの２つのクラスを使う

例：

// 外部サウンドファイルを読み込んで再生する
var my_snd:Sound = new Sound();
var snd_URL:URLRequest = new URLRequest("my_music.mp3");
my_snd.load(snd_URL);
my_snd.play();

サウンドを停止させるにはSoundChannelを使う

// 外部サウンドファイルを読み込んで再生、停止する
var my_snd:Sound = new Sound();
var snd_URL:URLRequest = new URLRequest("my_music.mp3");
my_snd.load(snd_URL);
var my_sndCh:SoundChannel = my_snd.play();
my_sndCh.stop();

SoundTransformを使うとサウンドのボリュームとパンを制御できる

// 外部サウンドファイルを読み込んで
// ボリューム0.5、パン0で再生する
var my_snd:Sound = new Sound();
var snd_URL:URLRequest = new URLRequest("my_music.mp3");
my_snd.load(snd_URL);
var my_sndTr:SoundTransform = new SoundTransform(0.5, 0);
var my_sndCh:SoundChannel = my_snd.play(0, 1, my_sndTr);

評価ポイント

サウンドファイルの読み込みが正しくできているか？（20点）
キーフレームでのサウンド設定が正しくできているか？（20点）
外部サウンドファイルの読み込みと再生が正しくできているか？（20点）
サウンドが効果的に使えているか？（20点）
パブリッシュが正しくできているか？（20点）

Flashファイル(*.fla)及びHTMLファイルを提出する

外部サウンドファイルの提出は不要

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の火曜日の午後９時まで

第１０回　SWFファイルの読込みとパブリッシュ（11月27日）

Fri, 27 Nov 2009 00:00:00 +0900

本日の課題

SWFファイル読込みを使ったインタラクティブコンテンツを作成する
パブリッシュを行いHTMLにSWFを配置させる
サンプル：
SWFファイルのダウンロード：swf.zip
サンプルソースのダウンロード：091127.fla

マスク

レイヤーを部分的に表示させたい場合にマスクを使う
マスクは特定のレイヤーをマスクに設定することで使用できる
マスクレイヤーの着色された部分だけが対象レイヤーでは表示される
マスクレイヤーは通常のレイヤー同様にトゥイーンなどが設定できる

SWFファイルの読込み

別ファイルのFlashムービー（SWFファイル）をActionScriptで読込むことが可能
JPEGの読込み同様にLoaderとURLRequestの２つのクラスを使う
SWFファイルとピクセルサイズを合わせ左上を基準点にした配置用のムービークリップを作成しておくと便利
読み込まれたムービーはムービークリップとなりステージの概念はなくなるので背景やマスクなどの工夫が必要になる
容量の多いムービーも分割して必要時に読み込む事で待ち時間を少なくできる

例：

var load_req:URLRequest = new URLRequest("mymovie.swf");
var swf_loader:Loader = new Loader();
swf_loader.load(load_req);
load_mc.addChild(swf_loader);
// 注：ファイル名はhtmlファイルからの相対パス

パブリッシュ

作成したFlashコンテンツをインターネットで公開するにはパブリッシュを行う
通常はSWFを直接ブラウザで表示させずにHTMLに配置した状態で公開する
パブリッシュ設定ではSWFだけでなくSWFを表示させるためのHTMLファイルなどの設定も可能
Dreamweaverを使ってオリジナルのページにSWFを配置することも可能
いずれの場合も「AC_RunActiveContent.js」というファイルが自動的に生成されるので、このファイルもHTMLと同じディレクトリに置いておく必要がある

評価ポイント

swf読み込み用のムービークリップが正しく作成できているか？（20点）
Loaderを使ってのswf読み込みが正しくできているか？（20点）
読み込んだswfに対しての背景やマスク処理が適切に設定できているか？（20点）
パブリッシュが正しくできているか？（20点）
効果的なインタラクティブコンテンツが作成できたか？（20点）

Flashファイル(*.fla)及びSWFファイル、HTMLファイルを提出する

読込ませるSWFファイルがオリジナルの場合はそれらのファイル（flaファイルは不要）も提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の火曜日の午後９時まで

第９回　JPEGファイルの読込み（11月20日）

Fri, 20 Nov 2009 00:00:00 +0900

本日の課題

JPEGファイル読込みを使ったインタラクティブコンテンツを作成する
サンプル：
JPEGファイルのダウンロード：photo.zip
サンプルソースのダウンロード：091120.fla

JPEGファイルをFlashで使う

FlashムービーにJPEGファイルを読み込んで表示させることができる
JPEG圧縮を保ったまま読み込むことが可能
手動でライブラリに読み込んでおく方法とアクションスクリプトで読込む方法とがある
トゥイーンやフィルタ・マスクと併用することで様々な表現が可能

ライブラリに読み込む

画像ファイルをライブラリに読み込むとビットマップシンボルとして登録される
ビットマップシンボルの画像は分解することで編集が可能
画像を差し替えたい場合は再度ファイルを読込み直す必要がある
フィルタなどを適用させたい場合はムービークリップなどに変換する必要がある

ActionScriptで読み込む

アクションスクリプトを使うことで動的にJPEGファイルを読み込むことが可能
アクションスクリプトでJPEGファイルを読み込むにはLoaderとURLRequestの２つのクラスを使う
JPEGファイルとピクセルサイズを合わせ左上を基準点にした配置用のムービークリップ作成しておくと便利

例：

var load_req:URLRequest = new URLRequest("myphoto.jpg");
var photo_loader:Loader = new Loader();
photo_loader.load(load_req);
load_mc.addChild(photo_loader);
// 注：ファイル名はhtmlファイルからの相対パス

ファイルの差替えやファイル名の変更で簡単にムービーの更新が可能

配列と繰返し処理

たくさんのファイルを一度に読み込む場合など配列と繰返しを使うことでプログラムがシンプルになる

例：ファイル名を配列に格納する

var photolist:Array = new Array();
photolist[1] = "photo/myphoto_1.jpg";
photolist[2] = "photo/myphoto_2.jpg";
photolist[3] = "photo/myphoto_3.jpg";

例：繰返し処理

var i:Number;
for (i=1; i<=3; i++) {
  var load_req:URLRequest = new URLRequest(photolist[i]);
  var photo_loader:Loader = new Loader();
  photo_loader.load(load_req);
  this["load_"+i+"_mc"].addChild(photo_loader);
}

評価ポイント

JPEG配置用のムービークリップが正しく作成できているか？（20点）
Loaderを使っての画像読み込みが正しくできているか？（20点）
効果的な画像の表示ができているか？（20点）
配列や繰返しが効果的に使えているか？（20点）
効果的なインタラクティブコンテンツが作成できたか？（20点）

第８回　インスタンスのプロパティ（11月13日）

Fri, 13 Nov 2009 00:00:00 +0900

本日の課題

インスタンスのプロパティ設定を使ったコンテンツを作成する
サンプル：
サンプルソースのダウンロード：091113.fla

インスタンスのプロパティ

ムービークリップやボタンのインスタンスはそれぞれプロパティと呼ばれる属性を持っている
アクションスクリプトではプロパティの取得と設定ができる
プロパティを変更することでインスタンスの表示を自由に操作ができる

例：ボタンクリックでインスタンスを右に回転させる

rotation_btn.addEventListener(MouseEvent.MOUSE_DOWN, rot_r);
function rot_r(e:MouseEvent) {
  my_mc.rotation += 45;
}

例：インスタンスをフレーム毎に右に移動させる

my_mc.addEventListener(Event.ENTER_FRAME, move_right);
function move_right(e:Event) {
  my_mc.x += 10;
}

主なプロパティ

x, y, width, height, rotation, scaleX, scaleY, alpha

条件分岐

条件によって実行させたいアクションスクリプトを切り替えたい場合に用いる

例：インスタンスがステージの右端まで移動したら左端に巻き戻す

my_mc.addEventListener(Event.ENTER_FRAME, move_right);
function move_right(e:Event) {
  my_mc.x += 10;
  if (my_mc.x > stage.stageWidth) {
    my_mc.x = 0;
  }
}

オリジナルプロパティ

ムービークリップのインスタンスにはオリジナルのプロパティを追加できる
インスタンス毎に番号や属性を持たせることができる

例：インスタンスの移動方向をボタンで切り替える

my_mc.x_speed = 0;
my_mc.addEventListener(Event.ENTER_FRAME, move_mymc);
function move_mymc(e:Event) {
  my_mc.x += my_mc.x_speed;
  if (my_mc.x < 0) {
    my_mc.x = stage.stageWidth;
  }
  if (my_mc.x > stage.stageWidth) {
    my_mc.x = 0;
  }
}

right_btn.addEventListener(MouseEvent.MOUSE_DOWN, move_r);
function move_r(e:MouseEvent) {
  my_mc.x_speed = 10;
}

left_btn.addEventListener(MouseEvent.MOUSE_DOWN, move_l);
function move_l(e:MouseEvent) {
  my_mc.y_speed = -10;
}

評価ポイント

プロパティの設定が正しくできているか？（20点）
フレーム毎のイベント処理が正しくできているか？（20点）
条件分岐が正しく使えているか？（20点）
オリジナルのプロパティを活用できているか？（20点）
効果的なインタラクティブムービーが作成できたか？（20点）

必ずFlashファイル(*.fla)を提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の火曜日の午後９時まで

第７回　ムービークリップのコントロール（11月6日）

Fri, 06 Nov 2009 00:00:00 +0900

本日の課題

アクションスクリプトを使ったインタラクティブコンテンツを作成する
インスタンスのタイムラインを制御する方法を理解する
サンプル：
サンプルソースのダウンロード：091106.fla

インスタンスのタイムラインの制御

アクションスクリプトでは自身のタイムラインだけではなく他のムービークリップのインスタンスの制御も可能
他のインスタンスに命令を送るにはインスタンスに名前を付けておく必要がある
インスタンス名は必ず半角英数で記述し「_」(アンダーバー)以外の記号は使用しない
インスタンス名の最初の文字に数字を使用しない
ムービークリップの場合は名前の後ろに「_mc」を付ける（例：myClip_mc）
同一タイムライン上では同じインスタンス名を使用しない

インスタンスのパス

他のタイムライン上のインスタンスはパスで指定する
例：自身のタイムライン上にある「clip_1_mc」という名前のインスタンスに命令を送る場合
```
this.clip_1_mc.stop();
```
例：「clip_1_mc」という名前のインスタンスの中にある「clip_2_mc」という名前のインスタンスに命令を送る場合
```
this.clip_1_mc.clip_2_mc.play();
```
例：「clip_1_mc」という名前のインスタンスの中にある「clip_2_mc」という名前のインスタンスから「clip_1_mc」に命令を送る場合（相対パス）
```
MovieClip(parent).gotoAndStop("title");
```
上記の例を絶対パスで記述すると次のようになる
```
MovieClip(root).clip_1_mc.gotoAndStop("title");
```
インスタンス名を「"」(ダブルクォーテーション）で括らない点に注意

評価ポイント

インスタンス名が正しく設定できているか？（20点）
インスタンスのパス指定が正しく設定できているか？（20点）
ボタンのアクションが正しく設定できているか？（20点）
ムービークリップの特長を活かせているか？（20点）
効果的なインタラクティブムービーが作成できたか？（20点）

必ずFlashファイル(*.fla)を提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の火曜日の午後９時まで

第６回　アクションスクリプト基礎（10月30日）

Fri, 30 Oct 2009 00:00:00 +0900

本日の課題

アクションスクリプトを使ったインタラクティブコンテンツを作成する
サンプル：
サンプルソースのダウンロード：091030.fla

アクションスクリプト(Action Script)とは

Flashに搭載されているプログラム言語のこと
文法はJavaScriptに近い
play, stop, gotoAndPlay などの簡単な命令でタイムラインをコントロールできる
アクションスクリプトにもバージョンがありFlash CS3にはver3.0が実装されている
この授業ではアクションスクリプト3.0を使用する
新規ファイル作成時は「Flash ファイル (AS 3.0)」を選択する
アクションスクリプトの動きはムービープレビューで確認する

フレームアクション

フレームに記述されたアクションスクリプトのこと
キーフレームにのみ記述できる
そのフレームが再生される前に自動的に実行される
特定のフレームでタイムラインを停止させたい場合やフレームに配置されているボタンのアクションを設定する場合などに使う
どのレイヤーのキーフレームにも記述できるが、専用のレイヤーを使う方が視覚的にわかりやすい
例：ムービーを停止させるアクション
```
this.stop();
```

イベント

ボタンがクリックされた時にアクションを実行させるにはボタンのインスタンスがマウスのイベントを処理できるように設定する必要がある
アクションでタイムライン上のボタンを指定するにはインスタンスに名前を付けておく必要がある
インスタンス名は必ず半角英数で設定し名前の後ろは「_btn」を付ける（例：next_btn）
イベントを処理する際のアクションは関数（function）にまとめておく
例えばnext_btnというインスタンス名のボタンをクリックしたときにムービーを再生するアクションは次のようになる
```
next_btn.addEventListener(MouseEvent.MOUSE_UP, go_next);
function go_next(e:MouseEvent) {
  this.play();
}
```
※go_nextは任意の関数名

ラベル

gotoAndPlay()で再生フレームを移動させる場合、数値での指定ではフレームの挿入や削除の度に数値を変更する必要がある
フレームにラベル（名前）を付けて指定すればフレーム数が変化してもアクションを変更する必要がない
どのレイヤーのキーフレームにも設定できるが、専用のレイヤーを使う方が視覚的にわかりやすい
例えばmenu_btnというインスタンス名のボタンをクリックしたときにmenuというラベルのフレームを再生するアクションは次のようになる：
```
menu_btn.addEventListener(MouseEvent.MOUSE_UP, go_menu);
function go_menu(e:MouseEvent) {
  this.gotoAndPlay("menu");
}
```

評価ポイント

アクションが正しく場所に設定できているか？（20点）
インスタンス名が正しく設定できているか？（20点）
ボタンのアクションが正しく設定できているか？（20点）
フレームの移動が正しくできているか？（20点）
効果的なインタラクティブムービーが作成できたか？（20点）

必ずFlashファイル(*.fla)を提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の火曜日の午後９時まで

第５回　ボタンシンボル（10月23日）

Fri, 23 Oct 2009 00:00:00 +0900

本日の課題

ボタンシンボルの特長を生かしたインタラクティブコンテンツを作成する
サンプル：
サンプルソースのダウンロード：081024.fla

ボタンシンボル

ボタンシンボルはボタンインターフェースを簡単に作成できる特殊なシンボル
通常のタイムラインとは違って４つのフレームで構成されている
それぞれのフレームはマウスの動きに応じて自動的に表示される
各フレーム１フレームづつなのでアニメーションを表示させる場合はムービークリップと組み合わせる
特長を生かしてボタン以外のインターフェースにも利用できる
ボタンの動作はムービークリップ同様にムービープレビューで確認する

ライブフィルタ

ライブフィルタはリアルタイムにビットマップベースの画像効果を付けることが可能
ライブフィルタが設定できるのはムービークリップ、ボタン、およびテキスト
トゥイーンにも対応しておりフィルタを使ったアニメーションも作成可能
複数のフィルタを重ねることも可能
ライブフィルタが表示できるのはFlash Player ver.8以上

評価ポイント

シンボル作成が正しくできているか？（20点）
シンボルの種類を正しく使い分けているか？（20点）
ボタンシンボルの特長を活かせているか？（20点）
ムービークリップを効果的に組み合わせているか？（20点）
効果的なコンテンツが作成できたか？（20点）

必ずFlashファイル(*.fla)を提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の火曜日の午後９時まで

第４回　ムービークリップ（10月16日）

Fri, 16 Oct 2009 00:00:00 +0900

本日の課題

ムービークリップの特長を生かしたアニメーションを作成する
サンプル：
サンプルソースのダウンロード：091016.fla

ムービークリップシンボル

本来はプログラムでムービーを制御するための特殊なシンボル
その特長を生かして効果的なアニメーションが作成できる
ムービークリップのインスタンスは編集画面では再生されないのでムービープレビューで確認する

ムービークリップの特長

配置されているタイムラインに左右されずにアニメーションが再生される
フレーム数の異なるアニメーションを混在させたり組み合わせることができる
同じレイヤー上でも単独でアニメーションが再生される
ムービークリップをマスクにすることで動きのあるマスク効果が可能
インスタンスに名前を付ける事でActionScriptによる制御が可能

評価ポイント

シンボル作成が正しくできているか？（20点）
シンボルの種類を正しく使い分けているか？（20点）
ムービークリップの特長を活かせているか？（20点）
ムービークリップを効果的に組み合わせているか？（20点）
効果的なアニメーションが作成できたか？（20点）

必ずFlashファイル(*.fla)を提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の火曜日の午後９時まで

第３回　アニメーション応用（10月2日）

Fri, 02 Oct 2009 00:00:00 +0900

本日の課題

シンボル内アニメーションとモーションガイドを使ったアニメーションを作成する
サンプル：
サンプルソースのダウンロード：091002.fla

シンボル内アニメーション

トゥイーン機能をフルに使うには必ずグラフィックをシンボルに変換する
シンボルの編集画面に切り替えるにはライブラリパネルから呼び出す方法とステージ上のインスタンスをダブルクリックする２つの方法がある
シンボル内にもタイムラインがありアニメーションを作成することができる
シンボル内アニメーションを組み合わせることで複雑なアニメーションを簡単に作成できる

モーションガイド

モーションガイドを使うことで曲線的な動きが表現できる
モーションガイドはモーションガイドレイヤーに描いた曲線にインスタンスを吸着させることで利用可能になる

評価ポイント

シンボルに変換が正しくできているか？（20点）
トゥイーンアニメーションが正しく作成できているか？（20点）
シンボル内アニメーションが正しく使えているか？（20点）
モーションガイドが正しく使えているか？（20点）
効果的なアニメーションが作成できたか？（20点）

必ずFlashファイル(*.fla)を提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の火曜日の午後９時まで

第２回　アニメーション基礎（9月25日）

Fri, 25 Sep 2009 00:00:00 +0900

本日の課題

シンボルとインスタンスの概念を理解する
トゥイーン機能を使ったアニメーションを作成する
サンプル：
サンプルソースのダウンロード：090925.fla

シンボルとインスタンス

パラパラアニメの手法では同じ絵を何度も複製することになり編集しにくい状態になる
同じグラフィックを複数のキーフレームに渡って使う場合は必ずシンボルに変換する
シンボルに変換されるとステージ上のグラフィックはインスタンスとなる
インスタンスは実体のない分身のようなもので実際にはシンボルのグラフィックを参照しているだけ
シンボルを編集するとそのシンボルを参照しているインスタンスもすべて更新される
シンボルは入れ子にすることができ、複雑なシンボルも作成可能

トゥイーンアニメーション

アニメーションの起点と終点を設定するだけで、その間の動きを自動的に設定してくれるのがトゥイーン機能
トゥイーン機能をフルに使うには必ずグラフィックをシンボルに変換する
フレームを右クリックで表示される「モーショントゥイーンを作成」は安易に使用しない
トゥイーンは位置だけでなく、大きさや色、透明度なども自動的に設定される
イーズイン、イーズアウトを設定することで加速、減速も表現できる
トゥイーンは１レイヤーづつしか設定できないので、インスタンス毎に違う動きを付ける場合はレイヤーを追加する

評価ポイント

シンボルに変換が正しくできているか？（20点）
トゥイーン設定が正しくできているか？（20点）
大きさ、色、透明度などのトゥイーンが使えているか？（20点）
レイヤーが正しく使えているか？（20点）
効果的なアニメーションが作成できたか？（20点）

必ずFlashファイル(*.fla)を提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の火曜日の午後９時まで

第１回　Flash概要（9月18日）

Fri, 18 Sep 2009 00:00:00 +0900

Flashの歴史

1996年　「FUTURE Splash ANIMATOR」発売開始
- ドローソフトであった「スマートスケッチ」にアニメーション機能を加えたもの
- アニメーションGIFが主流だったWebのアニメに革命をもたらした
1997年　「FUTURE Splash ANIMATOR」はmacromedia社に買収されて「Flash」と改名
同年「Flash2」発売開始、サウンド機能を備える
1998年　「Flash3」発売開始、ムービークリップ機能を搭載
- Flashの一番の特長であるムービークリップ機能が搭載され複雑なアニメーションも簡単に作成できるようになった
1999年　「Flash4」発売開始、スクリプト機能を強化
- Webアニメーションツールとして確固たる地位を築いたFlashが、Webアプリケーションツールとしての道を模索しはじめた
2000年　「Flash5」発売開始、オブジェクト指向スクリプト機能を強化
- XMLなどにも対応し、よりプロフェッショナルなツールへと進化
- 携帯にもFlashが搭載されるようになり、携帯コンテンツ作成ツールとしても注目を集める
2002年　「Flash MX 」(ver.6) 発売開始、デジタルビデオ埋込機能を搭載
- このバージョンより「STUDIO」としてDreamweaverなどとパッケージ化され、FlashはWebデザイナーにとって必須スキルとなる
2003年　「Flash MX 2004」(ver.7) 発売開始
- このバージョンより、通常版とプロフェッショナル版とに別れる、プロフェッショナル版ではプレゼンテーション作成機能や携帯コンテンツ作成機能などが使えるようになっている
2005年　「Flash8」発売開始、ライブエフェクト機能など表現力を高める機能を搭載
2007年　「Flash CS3」(ver.9) 発売開始、このバージョンよりAdobeからの発売となる
- このバージョンよりActionScript 3.0を搭載
2008年　「Flash CS4」(ver.10) 発売開始、モーショントゥイーン、3D回転などの新機能を搭載

WebサイトにおけるFlashの使用例

トップページなどのオープニングイメージに使用
- 企業サイトや商品サイトに多い
- フレンチキュイジーヌ　ティアレ
サイト共通のインターフェースとして使用
- 様々なサイトで使われる
- au
デジタルビデオプレイヤーとして使用
- プラグインやソフトのインストールが必要ないため多くの動画サイトで使われている
- YouTube
ゲームや占いなどの特殊なコンテンツに使用
- ゲームサイトなどの多くがFlashでコンテンツを作成している
- ハム太郎とっとこむ
Webアプリケーションとして使用
- ECサイトや予約システムなどのインターフェースに使われる
- フジ・コーポレーション
サイト全体を構築
- プロモーションサイトやイメージサイトに多い
- アマナイメージズ
- ecotonoha [ エコトノハ ]
携帯コンテンツでの使用
- ３キャリアとPCでデータが共有できる
- ディープブレイン
ブログパーツでの利用
- 企業のプロモーションから個人まで多くのブログパーツが配布されている
- プロアクティブ

第１２回　テンプレートの作成と編集（7月9日）

Thu, 09 Jul 2009 00:00:00 +0900

課題：テンプレートを使ったページ作成

テンプレートの意味と特長を理解する

Dreamweaverにおけるテンプレートの作成ならびに活用方法を理解する

DreamweaverのFTP機能を使ってファイルをアップロードする

完成データ

授業前の準備

教材のダウンロード：web_11.zip
ダウンロードしたフォルダの名前を変更する
- 例：web_11_10810000
Dreamweaverを起動しサイト設定を行う
サイト設定でサイト名、ローカルルートフォルダ、ならびにリモートサーバ情報を設定する
前回の課題データがリモートサーバに残っている場合は削除しておく
退室時にはDreamweaverを終了させる前にサイト設定を削除およびフォルダを削除すること
必要に応じてデータは各自でUSBメモリなどにコピーする

テンプレート

テンプレートはページ全体のレイアウトを共有させるために使用する
テンプレートを作成するには新規で作成するか既存のページをテンプレートとして保存する
テンプレートには１箇所以上の編集可能領域を設定する必要がある
テンプレートからページを作成するには新規ページ作成時にテンプレートを指定する
テンプレートの内容を変更するとテンプレートを使っているすべてのページが自動的に更新される
テンプレートはDreamweaver独自の機能なので他のソフトでファイルを編集する際は注意が必要

評価ポイント

テンプレートの作成が正しくできているか？（20点）
編集可能領域の設定が正しくできているか？（20点）
テンプレートからの新規ページ作成が正しくできているか？（20点）
テンプレートの機能を生かせているか？（20点）
魅力あるページデザインになっているか？（20点）

サイト全体をDreamweaverでアップロード（PUT）して提出する

Fireworksファイル（*.png）などの素材はフォルダにまとめてクローク設定をしておく

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の月曜日の午後９時まで

第１１回　ロールオーバーの設定[フレームとビヘイビア]（7月2日）

Thu, 02 Jul 2009 00:00:00 +0900

課題：リンクのロールオーバー設定

テキストリンクと画像リンクのロールオーバー設定の方法

Fireworksのフレーム機能とスライス機能を使ってロールオーバー画像を書き出す

DreamweaverのFTP機能を使ってファイルをアップロードする

授業前の準備

教材のダウンロード：web_10.zip
ダウンロードしたフォルダの名前を変更する
- 例：web_10_10810000
Dreamweaverを起動しサイト設定を行う
サイト設定でサイト名、ローカルルートフォルダ、ならびにリモートサーバ情報を設定する
前回の課題データがリモートサーバに残っている場合は削除しておく
退室時にはDreamweaverを終了させる前にサイト設定を削除およびフォルダを削除すること
必要に応じてデータは各自でUSBメモリなどにコピーする

ロールオーバーの設定（テキスト）

テキストにリンクを設定するとカラーが青で下線表示の状態になる
テキストリンクの表示を変えるにはaタグのスタイルを定義する
aタグには状態に合わせて表示を変える特殊なセレクタがある
a:hoverセレクタでテキストリンクのロールオーバー時のスタイルを定義することができる

ロールオーバーの設定（画像）

Webの画像のロールオーバーはJavascriptやCSSで表示画像ファイルを入れ替えることで実現している
ロールオーバー用の画像はFireworksのフレーム機能を使うと管理が楽であると共にスライス機能でフレーム毎にファイル名を変えて書き出すことができる
ロールオーバーを設定する画像にはHTML上で名前をつけておく必要がある
Dreamweaverではビヘイビア機能を使って画像のロールオーバー用Javascriptを自動的に設定することができる

評価ポイント

CSSによるテキストリンクのロールオーバーが正しくできているか？（20点）
Fireworksでのロールオーバー画像作成が正しくできているか？（20点）
Fireworksからの画像書き出しが正しくできているか？（20点）
ビヘイビアを使った画像のロールオーバーが正しく設定できているか？（20点）
魅力あるページデザインになっているか？（20点）

サイト全体をDreamweaverでアップロード（PUT）して提出する

Fireworksファイル（*.png）などの素材はフォルダにまとめてクローク設定をしておく

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の月曜日の午後９時まで

第１０回　ボタン画像の作成とリンク[スライス機能]（6月25日）

Thu, 25 Jun 2009 00:00:00 +0900

課題：スライス機能を使っての画像の書き出しとリンク設定

Fireworksのスライス機能を使って複数の画像を同時に書き出す

画像にリンクを張る方法と注意点の確認

DreamweaverのFTP機能を使ってファイルをアップロードする

授業前の準備

教材のダウンロード：web_09.zip
ダウンロードしたフォルダの名前を変更する
- 例：web_09_10810000
Dreamweaverを起動しサイト設定を行う
サイト設定でサイト名、ローカルルートフォルダ、ならびにリモートサーバ情報を設定する
前回の課題データがリモートサーバに残っている場合は削除しておく
退室時にはDreamweaverを終了させる前にサイト設定を削除およびフォルダを削除すること
必要に応じてデータは各自でUSBメモリなどにコピーする

スライス機能を使っての画像の書き出し

背景と一体化したロゴやボタンなどはFireworksのスライス機能を使ってファイルを書き出す
スライスツールを使って書き出す領域を指定する
スライス名がそのまま書き出すファイル名になる
スライスごとに書き出すフォーマットを設定できる

画像へのリンク設定

画像にリンクを設定するとリンク色のボーダー（境界線）が自動的に表示される
CSSでボーダーが表示されないように設定する

評価ポイント

スライス機能を使っての書き出しが正しくできているか？（20点）
画像のフォーマットが適切に設定されているか？（20点）
画像の配置とリンクの設定が適切に行われているか？（20点）
ファイルが正しくアップロードできているか？（20点）
魅力あるページデザインになっているか？（20点）

サイト全体をDreamweaverでアップロード（PUT）して提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の月曜日の午後９時まで

成安造形大学 コンピュータ基礎演習３・４ 2009年度概要

第１２回 インスタンスの動的生成（12月11日）

本日の課題

インスタンスの動的な生成

空のインスタンスを作成する

ライブラリのシンボルから作成する

評価ポイント

第１１回 サウンドの読み込みとコントロール（12月4日）

本日の課題

サウンドファイルの読込み

タイムラインでのサウンドの指定

外部サウンドファイルの再生

評価ポイント

第１０回 SWFファイルの読込みとパブリッシュ（11月27日）

本日の課題

マスク

SWFファイルの読込み

パブリッシュ

評価ポイント

第９回 JPEGファイルの読込み（11月20日）

本日の課題

JPEGファイルをFlashで使う

ライブラリに読み込む

ActionScriptで読み込む

配列と繰返し処理

評価ポイント

第８回 インスタンスのプロパティ（11月13日）

本日の課題

インスタンスのプロパティ

条件分岐

オリジナルプロパティ

評価ポイント

第７回 ムービークリップのコントロール（11月6日）

本日の課題

インスタンスのタイムラインの制御

インスタンスのパス

評価ポイント

第６回 アクションスクリプト基礎（10月30日）

本日の課題

アクションスクリプト(Action Script)とは

フレームアクション

イベント

ラベル

評価ポイント

第５回 ボタンシンボル（10月23日）

本日の課題

ボタンシンボル

ライブフィルタ

評価ポイント

第４回 ムービークリップ（10月16日）

本日の課題

ムービークリップシンボル

ムービークリップの特長

評価ポイント

第３回 アニメーション応用（10月2日）

本日の課題

シンボル内アニメーション

モーションガイド

評価ポイント

第２回 アニメーション基礎（9月25日）

本日の課題

シンボルとインスタンス

トゥイーンアニメーション

評価ポイント

第１回 Flash概要（9月18日）

Flashの歴史

WebサイトにおけるFlashの使用例

第１２回 テンプレートの作成と編集（7月9日）

課題：テンプレートを使ったページ作成

授業前の準備

テンプレート

評価ポイント

第１１回 ロールオーバーの設定[フレームとビヘイビア]（7月2日）

課題：リンクのロールオーバー設定

授業前の準備

ロールオーバーの設定（テキスト）

ロールオーバーの設定（画像）

評価ポイント

第１０回 ボタン画像の作成とリンク[スライス機能]（6月25日）

課題：スライス機能を使っての画像の書き出しとリンク設定

成安造形大学　コンピュータ基礎演習３・４　2009年度概要

第１２回　インスタンスの動的生成（12月11日）

第１１回　サウンドの読み込みとコントロール（12月4日）

第１０回　SWFファイルの読込みとパブリッシュ（11月27日）

第９回　JPEGファイルの読込み（11月20日）

第８回　インスタンスのプロパティ（11月13日）

第７回　ムービークリップのコントロール（11月6日）

第６回　アクションスクリプト基礎（10月30日）

第５回　ボタンシンボル（10月23日）

第４回　ムービークリップ（10月16日）

第３回　アニメーション応用（10月2日）

第２回　アニメーション基礎（9月25日）

第１回　Flash概要（9月18日）

第１２回　テンプレートの作成と編集（7月9日）

第１１回　ロールオーバーの設定[フレームとビヘイビア]（7月2日）

第１０回　ボタン画像の作成とリンク[スライス機能]（6月25日）