初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

Flash FlashでjQuery風スライドショーを作成する

jQueryでも作成できますが今回はあえてFlashに慣れる為に
Flashでスライドショーを作成してみます。

まずPhotoshop複数の写真を同じファイルにまとめます。
サイズはFlashのデフォルトサイズの550px × 400pxで作成しておきます。

画像をまとめる方法はこちらの前半に記載しています。

http://bellsmarket.hatenablog.com/?page=1428767713



メニュー→ファイル→読み込み→ライブラリに読み込みを選択
先ほど画像をまとめたPSDファイルを選択し、キーフレームを選びます。
f:id:bellsmarket:20150427221753p:plain:w500

これでムービークリップでライブラリに追加されます。

追加されたムービークリップをステージに挿入します。
挿入後、ムービークリップインスタンス名をphoto_mcにします。
f:id:bellsmarket:20150427221756p:plain:w500
次に画像を変更する際をボタンを作成します。
タイムラインでレイヤーを新規作成します。

写真のサイドに大きな四角を矩型(くけい)ツールで作成します。
作成したオブジェクトを選択し、メニュー→修正→シンボルに変換→ボタンを選択しOKを押します。
ライブラリに追加されたボタンをダブルクリックします。
f:id:bellsmarket:20150427221759p:plain:w500
新規レイヤーを作成して矢印のマークを作成します。
f:id:bellsmarket:20150427221805p:plain:w500
キーフレームを画像と同じに挿入します。
f:id:bellsmarket:20150427222436p:plain

シーン1に戻りボタンを反対側にも作成します。
右側のボタンを選択しShiftを押しながらドラッグ&ドロップします。
ドロップする前にAltを押すと複製できます。
f:id:bellsmarket:20150427221802p:plain:w500
f:id:bellsmarket:20150427221807p:plain:w500

ドロップしたオブジェクトを回転させます。
インスタンス名を
右ボタンに【right_btn】
左ボタンに【left_btn】
とします。

タイムラインでレイヤーを新規作成します。
アクションと名前をつけ、スクリプトを下記のように記載します。

this.onLoad =function() {
	
	this.photo_mc.stop();
	}
this.right_btn.onRelease =  function() {
	if(this._parent._photo_mc_currentframe !=5){
		this._parent.photo_mc.nextFrame();
	} else {
		this._parent.photo_mc.gotoAndStop(1);
	}
}
this.left_btn.onRelease =  function() {
	if(this._parent._photo_mc_currentframe !=1){
		this._parent.photo_mc.prevFrame();
	} else {
		this._parent.photo_mc.gotoAndStop(5);
	}
}


command + Enterでプレビューします。
ボタンを押すと写真が切り替わるようになります。

topへ戻る