くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[Flash]スライドムービークリップ

スライド画像はFlashでもつくれます

f:id:pleasure10501:20150423205258p:plain

左右の矢印をクリックすると画像がスライドします。
最後の画像まで来ても、クリックすると最初の画像になる、カルーセル方式です。

左右の矢印の上下もボタンになっており、矢印以外を適当に押しても動きます。
矢印は不透明にしています。

 

① Photoshopで画像をレイヤーで重ねておき、保存します(psd形式

f:id:pleasure10501:20150409190044p:plain

② Flashで読み込みます 読み込み > ライブラリに読み込み

  レイヤーを次に変換 : キーフレーム にする

f:id:pleasure10501:20150409190401p:plain

③ アイテムに追加された「gallery.psd(保存したpsdファイル名)」をクリックし、中央のステージにドロップする  →インスタンスが作成されます
 ・インスタンス名を「gallery_mc」とする ・ステージの中央に画像を移動

④画像を送るボタンをつくる

  1. レイヤーを新規作成。ムービークリップの上に置く。
  2. ステージの高さと同じ長さの長方形をつくり、右側に置く。(これが右側のボタンの領域になります)

    f:id:pleasure10501:20150423211334p:plain

  3. この長方形を「シンボルに変換」でボタンにする

  4. 選択ツールでこの長方形をダブルクリック (ボタンのアクションの設定)
    アップの黒丸をヒットまでドラッグする
  5. ボタンの設定のまま、レイヤーをもう1つ追加

    f:id:pleasure10501:20150423211730p:plain 
    このレイヤー2に矢印をつけます

  6. 矢印を描きます (▶でもなんでもよい)

    f:id:pleasure10501:20150423211846p:plain

  7. 矢印を選択して、「シンボルに変換」でグラフィックにします

    これで右側の矢印ができました。
    アイテムはこのようになっています

    f:id:pleasure10501:20150423212746p:plain

  8. ボタン領域と矢印を複製して、左側にもつくります
    ボタン領域と矢印を選択して、altキーを押しながらドラッグすると複製になります。そのまま修正>横方向に反転をすると向きが変わります。
  9. 右ボタンのインスタンス名を「right_btn」 左ボタンを「left_btn」とつける

    ☆1つのアイテムからコピーをいくつも作れます。さらにそれぞれに別名(インスタンス名)をつけることもできます。

⑤ボタンのレイヤーの上に新規レイヤー追加 ・・・Action用

Actionレイヤーを選択して、フレームのプロパティにスクリプトを書き込む

 

this.onLoad = function() {
    this.gallery_mc.stop();
}

this.right_btn.onRelease = function() {
    if (this._parent.gallery_mc._currentframe!= 5) {
        this._parent.gallery_mc.nextFrame();
        } else {
            this._parent.gallery_mc.gotoAndStop(1);
            }
}

this.left_btn.onRelease = function() {
    if (this._parent.gallery_mc._currentframe!= 1) {
        this._parent.gallery_mc.prevFrame();
        } else {
            this._parent.gallery_mc.gotoAndStop(5);
            }
}