以下は、Flashの初歩的な操作でスライドを作成する手順を説明します。さらに手の込んだ作成例はコンテンツデザイン総合演習のページ(2004年SA: 野沢聡史 作成)を参照してください。なおアクションスクリプトはできるだけ使わないで作成しています。
以下の練習で使う写真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 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から25フレームまで矢印が表示)
(タイムライン上部の赤い□(再生ヘッド)をマウスでドラッグして動かしグラフィックが次第に薄くなることを確認)
上図の一番左下にある「レイヤーの追加」をクリックしてレイヤーを追加し、今度は20フレームから同様の操作を繰り返す。ただし、40フレームをキーフレームに変換し、 アルファを 0 → 100 → 0 のように変える。
すべてのグラフィックに対して レイヤーの追加、 グラフィックスをステージに配置、キーフレーム作成、アルファ変更をします。
スライドがいつまでも繰り返さないようにするには、BS_2 のレイヤーの最後のフレーム(キーフレームのはず)をクリックし、ステージ画面下の「アクション-フレーム」に
stop();
と記述します。また、NY_1 の第1フレームにも同様にすれば、マウス右クリックで「再生」しない限り動きません。
(上図の第1フレームにはこの操作が施してあるのでフレームに「アクション」の印のαがついています。)
フレームが移り変わる速さは「ステージ」をクリックしてから、「プロパティ」で「フレームレート」(毎秒のコマ数)の値を調節して変えられます。
「ファイル」 → 「パブリッシュ設定」(タイプ: Flash(swf)、HTML にチェック確認)
→ 「パブリッシュ」 (これで swf ファイルと HTMLファイルが作成されます)
swfファイルあるいはHTMLファイルを開けば作成したスライドが見られます。(HTMLファイルは切り取って自分のWebサイトに使えます)
下記の例では右クリック → 「再生」で開始します。
スライドの再生を開始するボタンを作成します。フラッシュのステージ上で作ることもできますが Photoshop や Illustrator で作成したものでも使えます。
ここでは下記からgifファイルの矢印画像をダウンロードします。
http://www.ne.senshu-u.ac.jp/%7Enkmr/inflit04/flash/btn.gif
on (release){_root.gotoAndPlay(2) ;
}
これで出来上がりです。→ ボタンを押すと1度だけ実行します。(ボタンのデザインは各自で工夫してください)
使用する写真は少し小さめ(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フレームに戻ってから「モーショントゥイーンを作成」します。
作成例: