減速スライドショー（基本形）

プレビュー

Flash

HTML5

減速スライド（基本形） - jsdo.it - share JavaScript, HTML5 and CSS

スマートフォンの方はこちら

減速スライド（基本形） - js do it

作り方

• Photoshop
  1. メイン用(500px×400px)を作る
  2. サムネイル用(100px×100px)を作る
• Flash Professional
  1. 写真をPhotoshopからコピー＆ペースト
  2. サムネイル画像をムービークリップに変換&インスタンス名を付ける
  3. 新規シンボルを作成&インスタンス名を付ける
  4. 3で作成したシンボルの中に入り、メイン用画像を繋げてそれぞれにインスタンス名を付ける
  5. タイムラインにアクションを記述する

コード（ActionScript 2.0）

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

this.s01_mc.onRollOver = function(){
	base = main_mc.ph01_mc._x;
}

this.s02_mc.onRollOver = function(){
	base = main_mc.ph02_mc._x;
}

this.s03_mc.onRollOver = function(){
	base = main_mc.ph03_mc._x;
}

this.s04_mc.onRollOver = function(){
	base = main_mc.ph04_mc._x;
}

this.s05_mc.onRollOver = function(){
	base = main_mc.ph05_mc._x;
}

this.main_mc.onEnterFrame = function(){
	main_mc._x -= (main_mc._x + base)/rate;
}