クリック動作によって画像を切り替えます。

<br /> フラッシュアニメを見るにはプラグインが必要です。<br />

ｊｐｇファイルの読み込み

各画像ごとのレイヤーのほかに、whitemask、button、ASのレイヤーを作成します。
前回のイメージムービーの作成と同様の方法でjpgファイルをライブラリに読み込みます。
下図のように1フレームずつずらして各レイヤーのフレームに貼り付けます。

白幕の作成

画像の切り替え時に次の画像が白から浮き出るようにするためのシンボルwhitemaskを作成します。

• シンボルwhitemaskを作成し、位置0,0にステージと同じ大きさの長方形を描きます。
  
• 24フレームにキーフレームを挿入します。
  
• キーフレーム間でシェイプトゥイーンを作成します。
  
• 24フレームで長方形を選択し、プロパティで塗りを白、アルファを0%にします。
  1フレームで長方形を選択し、プロパティで塗りを白にします。
  
• ASレイヤーを作成し、24フレームにキーフレームを挿入し、F9キーを押してアクションスクリプトの編集ウインドを立ち上げ、stop() と記述してウインドウを閉じます。
  
• ステージに戻りシンボルwhitemaskをレイヤーwhitemaskの1フレームに貼り付けます。(位置0,0)
  

ボタンの作成

クリックした時に画像を切り替えるボタンを作成します。
マウスオーバーの時だけ表示するようにします。

• 挿入メニュー→新規シンボルで新規シンボルの作成ウインドウを開き名前をbutton、種類をボタンにしてOKボタンをクリックします。
  
• セット、半円、三角のレイヤーを作成します。
  
• レイヤー「セット」のアップフレームでステージの半分の幅で高さが同じ長方形を描きます。
  (位置0,0)
  
• レイヤー「三角」のアップフレームで三角矢印を描きます。
  (自由変形ツールで形状や大きさを適当に修正し、大体の位置に移動した後、整列ツールで先ほど書いた長方形の上下方向のセンターにくるようにします。)
  
• レイヤー「半円」のアップフレームで円（塗りは白、アルファは50%)を描き、下記の位置に移動します。
  

• レイヤー「三角」「半円」のオーバーフレーム、レイヤー「セット」のセットフレームにキーフレームを挿入します。
  
• アップフレームの三角と円を右に平行移動して長方形の枠外へ移動します。
  
• ステージに戻り、レイヤー「button」の1フレームに、シンボル「button」を貼り付けます。
  (位置225,0)
  プロパティでインスタンス名を「right_btn」にします。
  
• もう一度シンボル「button」を貼り付けます。この時の位置は、先ほどのシンボルの右端にあわせます。
  
• 自由変形ツールでバウンディングボックスの右端をドラッグして先ほどのシンボルの左端にあう位置にもって行きます。(シンボルが左右反転します。)
  
• シンボルを左に移動します。(位置225,0)
  プロパティでインスタンス名を「left_btn」にします。
  
• シンボル「button」の編集画面に移動して、レイヤー「セット」のアップフレームの長方形をアルファを0%にして透明にします。
  

アクションスクリプトの記述

アクションスクリプトで、クリックすると次の画像に移動するようにします。

• ステージに戻って、レイヤー「AS」の1フレームでF9を押して編集画面を出し、下記のように記述します。
  
  import flash.events.MouseEvent; this.stop();   right_btn.addEventListener(MouseEvent.CLICK,right);   function right(e:MouseEvent){   　　　w_mc.play();   　　　if(currentFrame==5){   　　　　　　this.gotoAndStop(1);   　　　}   　　　else{   　　　　　　this.nextFrame();   　　　}   }   left_btn.addEventListener(MouseEvent.CLICK,left);   function left(e:MouseEvent){   　　　w_mc.play();   　　　if(currentFrame==1){   　　　　　　this.gotoAndStop(5);   　　　}   　　　else{   　　　　　　this.prevFrame();   　　　}   }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  import flash.events.MouseEvent; this.stop();   right_btn.addEventListener(MouseEvent.CLICK,right);   function right(e:MouseEvent){   　　　w_mc.play();   　　　if(currentFrame==5){   　　　　　　this.gotoAndStop(1);   　　　}   　　　else{   　　　　　　this.nextFrame();   　　　}   }   left_btn.addEventListener(MouseEvent.CLICK,left);   function left(e:MouseEvent){   　　　w_mc.play();   　　　if(currentFrame==1){   　　　　　　this.gotoAndStop(5);   　　　}   　　　else{   　　　　　　this.prevFrame();   　　　}   }

  
  

ワイプやフェードインフェードアウトしながら画像を切り替えます。
下のサンプルは3種類の見せ方で画像の切り替えをしています。

<br /> フラッシュアニメを見るにはプラグインが必要です。<br />

ｊｐｇファイルの読み込みと拡大縮小＆トリム

jpg画像を読み込んで画像のサイズをステージサイズに合わせて、拡大縮小やトリムする手順です。

• ファイルメニュー→読み込み→ライブラリに読み込み　で、jpgファイルを選択します。
  (フォルダ内での複数ファイルを選択できます。)
  
• ステージの大きさと同じサイズの長方形を描きます。
  矩形ツールを選択し、Altキーを押しながらステージ上でクリックすると矩形の設定のウインドウが開くので、サイズを入力してOKボタンを押します。(線なし)
  
• 整列ツールで、ステージにぴったりあわせます。
  
• 長方形を選択してカラーパレットを開くと、先ほどライブラリに読み込んだ画像が追加されているので、その画像をクリックします。
  
• グラデーションの変形ツールを選択すると下図のような四角形が表示されるので、左下の角をドラッグすれば画像の大きさが変更できます。トリム位置を変更する時は、真ん中の丸をドラッグして画像を移動します。
  
• 画像を右クリックし「シンボルに変換」を選択して、シンボルに変更すれば画像のトリムの完了です。ほかの画像も同様の方法でトリムしてシンボルにしておきます。(各画像はレイヤーを新規に作成して、上記作業をします。)
  

フェードでの画像の切り替え

フェードアウト、フェードインで画像を切り替えます。20fpsで作成し、静止画1秒、切り替え2秒にします。

• photo2レイヤーを非表示にします。
  photo1レイヤーの21フレーム、61フレームにキーフレームを挿入します。
  
• photo1レイヤーの61フレームのシンボルを選択して、プロパティのカラー効果でスタイル　アルファを選択して、0％にします。
  
• photo1レイヤーの21～61フレームの間でクラシックトゥイーンを作成します。
  
• photo2レイヤーを表示して、1フレームのキーフレームを選択してドラッグし、21フレームに移動します。
  61フレームにキーフレーム、80フレームにフレームを挿入します。
  
• photo2レイヤーの21フレームでシンボルを選択し、プロパティのカラー効果でアルファを選択して0％に設定します。
  
• photo2の21～60フレームの間でクラシックトゥイーンを作成します。
  
• これで、フェードでの画像切り替えは完了です。

  <br /> フラッシュアニメを見るにはプラグインが必要です。<br />

ワイプでの画像の切り替え

ワイプで画像を切り替えます。20fpsで作成し、静止画1秒、切り替え2秒にします。
ワイプはマスクをphoto2にかけて作成します。

• photo1レイヤーの60フレームにフレームを追加します。
  photo2レイヤーの20フレームまでは空白フレーム、21フレームにシンボルの貼り付けてあるキーフレーム、80フレームにフレームを追加します。
  
• maskレイヤーをphoto2レイヤーの上に新規作成し、21フレームにキーフレームを挿入して、楕円ツールでステージ外に円を描きます。
  
• maskレイヤーの60フレームにキーフレームを挿入し、自由変形ツールで拡大してステージが隠れる大きさにします。
  
• maskレイヤーの21～60フレームの間にシェイプトゥイーンを作成します。
  
• タイムラインのmaskレイヤーのレイヤー名を右クリックし、マスクをクリックすると、すぐ下のレイヤーであるphoto2レイヤーにマスクがかかります。(この時、maskレイヤー、photo2レイヤーにロックがかかります。)
  
• これで、ワイプでの画像切り替えは完了です。

  <br /> フラッシュアニメを見るにはプラグインが必要です。<br />

後の画像が移動しての画像の切り替え

後の画像が上から降りてきて前の画像の上に加算立って行き画像を切り替えます。20fpsで作成し、静止画1秒、切り替え2秒にします。
後の画像はぼけた状態から始まります。

• photo1レイヤーの60フレームにフレームを追加します。
  photo2レイヤーの20フレームまでは空白フレーム、21フレームにシンボルの貼り付けてあるキーフレーム、60フレームにキーフレーム、80フレームにフレームを追加します。
  
• photo2レイヤーの21フレームでシンボルを選択し、ステージ外へ移動します。
  
• 移動したシンボルのプロパティのフィルターの追加でぼかしを追加します。
  
• photo2レイヤーの21～60フレームの間にクラシックトゥイーンを作成します。
  
• これで、移動での画像切り替えは完了です。

  <br /> フラッシュアニメを見るにはプラグインが必要です。<br />