減速スライド

ActionScript フォトショップ

準備

  1. 5枚の写真を用意する
    1. 好きな画像を5枚フォトショップで開く
    2. 解像度を幅500または高さ400のどちらかに解像度を合わせる（500×400より小さくならないように！）
      解像度メニュー
      元サイズ
      変更後サイズ
  2. 500×400の画像にトリミング
    1. 新規で500×400のカンバスを作る
      新規作成
    2. 先ほど解像度を変えた写真をペーストする
      トリム
    3. 5枚とも同様の処理をする
  3. 上記とは別に新規に100×100のサムネイル画像を作成する
    • やり方は500×400と同じ

ここまでは順調だった。。。。

Flashビルダー

  1. 500×500のサイズで新規作成
    • 元画像の高さ(400)＋サムネイルの高さ(100)で高さ500であることに注意
      新規作成
  2. ステージにサムネイルを並べてボタンシンボルまたはムービークリップに変換
    サムネイル
    • 基準点を左上にする
  3. ステージの下部に整列
    整列
  4. 配置したタイムラインのレイヤーの名前を「サムネイル」に変更
    レイヤーネーム変更
  5. 挿入メニューから「新規シンボル」を選択し、ムービークリップで作成
    新規シンボル
    ムービークリップ
  6. 作ったムービークリップの編集画面に写真の本体をペースト
    空
    ペースト
  7. プロパティで座標を0:0に変更
    座標設定
  8. 画像をシンボルに変換でムービークリップに変換する（基準点は左上）
    シンボル変換
  9. 他画像も同様に作成し、作成したムービークリップの基準点（今回は左上）をプレスドラッグで隙間なく並べる
    吸着されて綺麗に並びます！
  10. ステージに戻ってタイムラインにレイヤーを追加し、「メイン」と名称変更
    レイヤー名称変更
  11. メインレイヤーを選んだ状態で先ほど作った写真連続写真をライブラリから適当な場所に貼り付ける
    ライブラリ貼り付け
  12. プロパティから座標を座標を0:0に変更
    座標設定
  13. タイムラインにレイヤーを追加し、「Action」と名前を変える
    Action
  14. Actionの1フレーム目にActionScriptを記載します。
    ※省略してますが、インスタンス名は必ず付けてください！
  • 授業の形
//それぞれの写真の基準点のX座標
var coordinatesX=0; //型定義の代わりに数字で初期化

//元写真幅の移動幅（1写真の幅/rate）
var rate=5;

//onRollOver:マウスが対象に乗ったとき
//元画像オブジェクトを関数に渡す
thum1_mc.onRollOver=function(){
	setPosition(main_mc.pic1_mc);
}
thum2_mc.onRollOver=function(){
	setPosition(main_mc.pic2_mc);
}
thum3_mc.onRollOver=function(){
	setPosition(main_mc.pic3_mc);
}
thum4_mc.onRollOver=function(){
	setPosition(main_mc.pic4_mc);
}
thum5_mc.onRollOver=function(){
	setPosition(main_mc.pic5_mc);
}

//main_mcのenterFrameでcoordinatesXとrateでコントロール
main_mc.onEnterFrame = function(){
	main_mc._x -= (main_mc._x + coordinatesX)/rate;
}

//元画像のX座標をグローバル変数に退避
function setPosition(obj){
	coordinatesX = Math.floor(obj._x);
}
  • CSSスプライトライクな作り

（オブジェクト名が違うのは別タイミングでやったため）

stop();

var thumbs=5;
var mainSize=this._width/thumbs;
var rate=10;
var toPic;
var nowX;

pic1_mc.onRollOver = function(){
	nowX = pic1_mc._x/Math.floor(pic1_mc._width);
	picMove(nowX);
}
pic2_mc.onRollOver = function(){
	nowX = pic2_mc._x/Math.floor(pic2_mc._width);
	picMove(nowX);
}
pic3_mc.onRollOver = function(){
	nowX = pic3_mc._x/Math.floor(pic3_mc._width);
	picMove(nowX);
}
pic4_mc.onRollOver = function(){
	nowX = pic4_mc._x/Math.floor(pic4_mc._width);
	picMove(nowX);
}
pic5_mc.onRollOver = function(){
	nowX = pic5_mc._x/Math.floor(pic5_mc._width);
	picMove(nowX);
}

main_pic_mc.onEnterFrame = function(){
	main_pic_mc._x -= (main_pic_mc._x + toPic)/rate;
}


function picMove(index){
	toPic = mainSize * index;
}

何が違うのか？

授業でやった形式は大きな写真のムービークリップのx座標を起点にスクロールさせているが、
後者はCSSスプライトと同じイメージで元写真を5枚一続きを１つのオブジェクトとして扱って、
サムネイルの数から移動量を割り出してスクロールさせている。
さらに、後者の場合シンボルへの変換は不要となる。