［FLASH］減速スライドのあるイメージギャラリー - くろひょうのwebデザインのお勉強帳

f:id:pleasure10501:20150430174326p:plain

サムネイルにカーソルを置くと横にスライドするFlashムービーをつくります。

スライドの早さは徐々に減速するようになります。

Photoshopで画像を用意

レイヤーを重ねて複数毎のメイン画像のファイル（ph01.psd）、サムネイル画像のファイル（ph01s.psd）を作り、psd形式で保存する

FLASH

①新規ファイル作成　　ステージのファイルのサイズを設定する

②読み込み　　　
メイン画像のファイルをライブラリに読み込む（背景画像は除外）→　ライブラリにpsdアセットができる

f:id:pleasure10501:20150430173312p:plain

③大きな画像をシンボルに変換する

レイヤーをステージにプレスドラッグして、シンボルに変換

　　種類：ムービークリップ　　基準：左上

　終わったらステージ上の画像を削除する　画像１〜５までこれを繰り返す　

f:id:pleasure10501:20150430173813p:plain

④メインのムービークリップを作成する

挿入　＞　新規シンボル　種類：ムービークリップ　名前：main

⑤　④のステージに③のシンボルを横並びする

ステージの中心点「＋」と画像シンボル１の左上がピッタリ合うようにくっつける

f:id:pleasure10501:20150430174933p:plain
微調整はインスタンスのプロパティの「位置」の座標軸をX＝０、Y＝０にすればよい

全て横並びにする

f:id:pleasure10501:20150430175515p:plain

画像をクリックし、インスタンス名を「ph○（数字）_mc」とつけていく

⑥　シーン１に戻り、シンボル”main”のムービークリップをのせる

f:id:pleasure10501:20150430180031p:plain

ステージの位置とシンボルの位置を合わせる
ステージに置いた”main”にインスタンス名「main_mc」をつける

⑦　サムネイル画像の読み込み

新規レイヤーを作成し、レイヤー名を「ボタン」にする。このレイヤー上にサムネイル画像を配置していきます。

サムネイル画像のファイル（ph01s.psd）を読み込む　→
ライブラリからステージにプレスドラッグして画像を配置する

f:id:pleasure10501:20150430181935p:plain

（余白は各10pxにしています）

⑧　サムネイル画像をボタンにする＆インスタンス名をつける

ステージ上のサムネイルを選択してシンボルに変換（種類：ボタン）

その後プロパティのインスタンス名をつける（ph1s_btn 〜 ph5s_btn）

⑨　新規レイヤーを作成　

レイヤーのプロパティを開き、アクションスクリプトを記述していきます。

var base: Number;
var startEdge: Number = 0;
var rate: Number = 5;

this.ph1s_btn.onRollOver = function(){
base = main_mc.ph1_mc._x ;
}
this.ph2s_btn.onRollOver = function(){
base = main_mc.ph2_mc._x ;
}
this.ph3s_btn.onRollOver = function(){
base = main_mc.ph3_mc._x ;
}
this.ph4s_btn.onRollOver = function(){
base = main_mc.ph4_mc._x ;
}
this.ph5s_btn.onRollOver = function() {
base = main_mc.ph5_mc._x ;
}
this.main_mc.onEnterFrame = function(){
main_mc._x -= (main_mc._x + base-startEdge) / rate;
}