Flashによるスライド

以下は、Flashの初歩的な操作でスライドを作成する手順を説明します。さらに手の込んだ作成例はコンテンツデザイン総合演習のページ(2004年SA: 野沢聡史 作成)を参照してください。なおアクションスクリプトはできるだけ使わないで作成しています。

  1. ボタン等の制御のないスライド

  2. 制御ボタンの追加

  3. 横に移動するスライド

 

1. ボタン等の制御のないスライド

写真のダウンロード

以下の練習で使う写真4点をダウンロードしておきます。次のURLを右クリックしてから「対象をファイルに保存」を左クリックで入手します。

http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/flash/BS_1.jpg

http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/flash/BS_2.jpg

http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/flash/NY_1.jpg

http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/flash/NY_2.jpg

 

Flashの起動と画像の読み込み

「Flash MX2004」起動 → 「ファイル」 → 「新規」

 → (画面下部の「プロパティ」で「サイズ」をクリックするとステージのサイズが変更できます。ここでは550x400ピクセル)

「表示」 → 「グリッド」 →「グリッドの表示」

(グリッドはなくても良いのですが、グラフィックの位置を決めるのに役に立ちます)

写真の読み込みとシンボルへの変換

「ファイル」 → 「読み込み」(上記ダウンロード済みの BS_1.jpg を読み込む)

BS_1.jpg , BS_2.jpg のように連番のときは次のようなメッセージが出るが、「はい」でそのまま読み込んで、あとから「シンボルへの変換」をしてもよいが、ここでは「いいえ」を選択する。

 

 →  「挿入」  →  「シンボルに変換」 

下記のボックスで「タイプ」は「グラフィック」、「名前」には  bs_1  を入力し 「 OK 」

同様にして、  BS_2.jpg 、NY_1.jpg 、 NY_2.jpg を読み込み、グラフィックに変換する。名前は bs_2 , ny_1 , ny_2 

「ウインドウ」 → 「ライブラリ」をクリックするとライブラリウインドウが開きます。名前のところに読み込んだ画像(ビットマップ)、変換したグラフィックが収納されており、どれかをクリックすると上部のアイテムに表示されるます。

タイムライン / レイヤー

タイムラインの下に表示されている「レイヤー1」の部分をクリックするとレイヤーの名前が変更できます。

「レイヤー1」 → 「NY_1」 に変更 (以降、新しいレイヤーを作るたびに名前を変更します)

(今は、レイヤー NY_1 だけが表示されているはずです)

  1. 上の NY_1 のタイムラインの先頭第1フレームを 「左クリック」で選択し、続いて「右クリック」でメニューを表示して 「キーフレームの挿入」 をクリック (●が表示される) 
  2. ステージにライブラリからグラフィック ny_1 をステージにドラッグする(上図)
  3. タイムラインの25フレームを左クリックし、さらに  「右クリック」(メニュー) → 「キーフレームの挿入」   (これで 1-25 フレームが灰色に表示)
  4. 「1フレームを右クリック」 → 「モーショントゥイーンを作成」

  (下図のように 1から25フレームまで矢印が表示) 

アルファ値の変更

  1. 「タイムラインのフレームクリック」 → ステージ上の ny_1 をクリック
  2. ステージの下の「プロパティパネル」の 「カラー」 から 「アルファ」を選び アルファ値 100% にする
  3. 「タイムラインの25フレームクリック」 → ステージ上の ny_1 をクリック
  4. ステージの下の「プロパティパネル」の 「カラー」 から 「アルファ」を選び アルファ値  0% にする

(タイムライン上部の赤い□(再生ヘッド)をマウスでドラッグして動かしグラフィックが次第に薄くなることを確認)

上図の一番左下にある「レイヤーの追加」をクリックしてレイヤーを追加し、今度は20フレームから同様の操作を繰り返す。ただし、40フレームをキーフレームに変換し、 アルファを 0  → 100  → 0 のように変える。

すべてのグラフィックに対して レイヤーの追加、 グラフィックスをステージに配置、キーフレーム作成、アルファ変更をします。

スライドがいつまでも繰り返さないようにするには、BS_2 のレイヤーの最後のフレーム(キーフレームのはず)をクリックし、ステージ画面下の「アクション-フレーム」に 

    stop();

と記述します。また、NY_1 の第1フレームにも同様にすれば、マウス右クリックで「再生」しない限り動きません。

(上図の第1フレームにはこの操作が施してあるのでフレームに「アクション」の印のαがついています。)

フレームが移り変わる速さは「ステージ」をクリックしてから、「プロパティ」で「フレームレート」(毎秒のコマ数)の値を調節して変えられます。

 

パブリッシュ

「ファイル」 → 「パブリッシュ設定」(タイプ: Flash(swf)、HTML にチェック確認)

 →  「パブリッシュ」 (これで swf ファイルと HTMLファイルが作成されます)

 swfファイルあるいはHTMLファイルを開けば作成したスライドが見られます。(HTMLファイルは切り取って自分のWebサイトに使えます)

下記の例では右クリック → 「再生」で開始します。

 TOPへ

2.制御ボタンの追加

スライドの再生を開始するボタンを作成します。フラッシュのステージ上で作ることもできますが Photoshop や Illustrator で作成したものでも使えます。

ここでは下記からgifファイルの矢印画像をダウンロードします。 

http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/flash/btn.gif

  1. 「ボタン等の制御のないスライド」で作成した flaファイルを開き、NY_1の第1フレームをクリックし「アクション・フレーム」に stop() ; を入力
  2. タイムラインにボタン用のレイヤーを追加する
  3. 「ファイル」 → 「読み込み」 で ボタン用 gifファイルを読み込む
  4. 「挿入」 「シンボルに変換」 で btn という名前のボタンにする  (ステージ上の btn は delete キーで削除してよい)
  5. ボタン用レイヤーの第1フレームをクリックし、キーフレームにする
  6. ライブラリから ボタン btn をドラッグして ステージの希望する位置に配置(最終フレームまで灰色に変わる)
  7. 第1フレームをクリック ステージ上の btn をクリック 「アクション-ボタン」に以下を入力

  on (release){_root.gotoAndPlay(2) ;
   }

これで出来上がりです。→ ボタンを押すと1度だけ実行します。(ボタンのデザインは各自で工夫してください)

 TOPへ

3.横に移動するスライド

使用する写真は少し小さめ(300×225)です。以下からダウンロードしてください。

http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/fl2/BS_1.jpg

http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/fl2/BS_2.jpg

http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/fl2/NY_1.jpg

http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/fl2/NY_2.jpg

見本の fla ファイルをダウンロードして研究してみてください。

http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/fl2/horizontal2.fla

このスライドでは ステージの大きさに合わせたマスクを利用しています。ツールボックスの「矩形ツール(R)」をクリックしてからステージと同じサイズの □ を描き、その内側に写真よりやや小さめの □ を描いてから、後者の内側でマウスを右クリックし、「カット」を実行すれば額縁のようなマスクができます。

写真はライブラリーからグラフィック ny1 から bt2 までを第1フレームでつなぎ合わせます。このときフレームのレイヤーは見えなくしておく(「目」の印の位置のボタンをクリック X に)とやりやすいでしょう。

160フレームのあたりにキーフレームを置き、このとき、つなげた絵を「ダイレクト選択ツール」で左に動かし、最後の絵がフレーム内に収まるようにします。その後、第1フレームに戻ってから「モーショントゥイーンを作成」します。

 

作成例:

 TOPへ