FLASHのお勉強_フォトビューアー2７_マウスホイールで写真を拡大・縮小

　HTMLに挿入されたビューアーで、埋め込まれたサイズで閲覧している画面の拡大ボタンをクリックすると全画面表示になるタイプのビュアーである。　その全画面表示状態で、マウスホイールの操作に応じて、表示写真（画像）が拡大、縮小する。
　サイズの大きな写真を閲覧するビューアーの場合、画面の小さなノートブック型で閲覧している場合には写真が画面をはみ出してしまい、ボタン操作も不能になってしまう。　これを避けるためにまず小さなサイズで表示し、これを拡大・縮小して閲覧するタイプのビューアーとして作成してみた。

SAMPLE

ステージなどの準備

●725*450のステージ（24fps）を設定（背景色、ステージサイズは好みや写真サイズに応じて決める）。
●写真を送るボタン（リンケージ識別子：f_btn）、戻るボタン（リンケージ：b_btn）、画面拡大ボタン（リンケージ：expand_btn）、縮小ボタン（リンケージ：shrink_btn）を作成し（シンボル化、各25*25px）、ライブラリーに格納する。
●swfと同じディレクトリにimgフォルダを置き、その中に拡大写真（p1.jpg,p2.jpg,,,）、サムネイル写真（140*80、ps1.jpg,,,,）
　それぞれ25枚を収納しておく。拡大写真のサイズは任意だが、ここでは幅が1200px位のものを使っている。
●swfを埋め込むhtmlで、埋め込みスクリプトの項の param allowFullScreen を true にする。

スクリプト　Frame1に記述 （as2.0）


//Tween、easingクラスのインポート
import mx.transitions.Tween;
import mx.transitions.easing.*;

//グローフィルターの設定(写真の枠取り)
import flash.filters.GlowFilter;
var glow:GlowFilter = new GlowFilter(0xffffff, 0.8, 16, 16, 8, 1, true);

//画面表示の基本設定
Stage.align = "LT";
Stage.scaleMode = "noScale";

//スライド枚数
var pNum = 25;
//サムネイルの幅、高さ
var tw = 140;
var th = 80;
//サムネイル整列列数
var col = 5;
//サムネイル群収納用ムービークリップの作成と表示
this.createEmptyMovieClip("thumbnailContainer",this.getNextHighestDepth());

//サムネイルの初期表示
loadThumb();

//拡大写真読み込み用ムービークリップ
this.createEmptyMovieClip("load_mc",50);
load_mc.createEmptyMovieClip("in_mc",50);

//拡大写真表示領域
var screen_w = 725;
var screen_h = 410;

//拡大・縮小ボタンの作成、非表示
this.attachMovie("shrink_btn","shrink_btn",this.getNextHighestDepth());
this.attachMovie("expand_btn","expand_btn",this.getNextHighestDepth());
expand_btn._x = Stage.width - 50;
expand_btn._y = Stage.height - 30;
btnVisibility(2);

//送り・戻りボタンの作成、非表示
this.createEmptyMovieClip("buttons_mc",60);
buttons_mc.attachMovie("f_btn","f_btn",61);
buttons_mc.attachMovie("b_btn","b_btn",62);
buttons_mc._visible = false;

//escキーでノーマル表示に切り替わったらサムネイルを表示
myListener = new Object();
myListener.onResize = function() {
  if (Stage["displayState"] == "normal") {
    load_mcRels();
  }
};
Stage.addListener(myListener);


//サムネイル群のロード・表示とイベント
function loadThumb() {
  for (i = 1; i < pNum + 1; i++) {
    mc = thumbnailContainer.createEmptyMovieClip("thumb" + i, i);
    mc.createEmptyMovieClip("inside_mc",i);
    mc.inside_mc._x = -tw / 2;
    mc.inside_mc._y = -th / 2;
    mc.inside_mc.loadMovie("img/ps" + i + ".jpg");
    mc._x = Stage.width / 2;
    mc._y = Stage.height / 2;
    mc.order = i;
    mc.onRelease = function() {
      mcEnable(1);
      picNo = this.order;
      loadPic(picNo);
    };
    setThumb(mc);
  }
}
//サムネイル群の配置
function setThumb(mc) {
  pOrder = mc.order;
  mc._x = targetx = (tw + 3) * (0.5 + ((pOrder - 1) % col));
  mc._y = targety = (th + 3) * (0.5 + Math.floor((pOrder - 1) / col));
  lag = pOrder * 0.05;
  mcTween = new Tween(mc, "_alpha", None.easeOut, 0, 0, lag, true);
  mcTween.onMotionFinished = function() {
    new Tween(mc, "_alpha", None.easeOut, 0, 100, lag / 2, true);
  };
}

//拡大写真のロードと表示
function loadPic(picNo) {
  thumbnailContainer._visible = false;
  btnVisibility(0);
  buttons_mc._visible = true;
  buttons_mc._x = Stage.width - 130;
  buttons_mc._y = Stage.height - 30;
  buttons_mc.f_btn._x = 40;
  var mcLoader:MovieClipLoader = new MovieClipLoader();
  jpg = "img/p" + picNo + ".jpg";
  mcLoader.loadClip(jpg,load_mc.in_mc);
  var oListener:Object = new Object();
  oListener.onLoadInit = function() {
    var load_mc_w = load_mc._width;
    var load_mc_h = load_mc._height;
    load_mc._x = screen_w / 2;
    load_mc._y = screen_h / 2;
    load_mc.in_mc._x = -load_mc_w / 2;
    load_mc.in_mc._y = -load_mc_h / 2;
    //写真表示領域に収まるように倍率を決める
    var wh_ratio = load_mc_w / load_mc_h;
    if (wh_ratio >= screen_w / screen_h) {
      var xscale = screen_w / load_mc_w * 100;
      var yscale = screen_w / load_mc_w * 100;
    } else {
      var xscale = screen_h / load_mc_h * 100;
      var yscale = screen_h / load_mc_h * 100;
    }
    //FadeIn・拡大しながら表示
    var tw3 = new Tween(load_mc, "_alpha", Regular.easeOut, 0, 100, 1, true);
    var tw4 = new Tween(load_mc, "_xscale", Regular.easeOut, 0, xscale, 1, true);
    var tw5 = new Tween(load_mc, "_yscale", Regular.easeOut, 0, yscale, 1, true);
    tw5.onMotionFinished = function() {
      load_mc.enabled = true;
      load_mc.onRelease = load_mcRels;
      //expand_btnクリックで拡大表示
      expand_btn.onRelease = function() {
        expandStage(load_mc);
        btnVisibility(1);
        shrink_btn._x = Stage.width / 2 + xscale / 100 * load_mc_w / 2 - 50;
        shrink_btn._y = Stage.height / 2 + yscale / 100 * load_mc_h / 2 + 10;
      };
    };
  };
  mcLoader.addListener(oListener);
}

//拡大写真を非表示・サムネイル群再表示
function load_mcRels() {
  Stage["displayState"] = "normal";
  var tw6 = new Tween(load_mc, "_alpha", Regular.easeOut, 100, 0, 1, true);
  thumbnailContainer._visible = true;
  var tw7 = new Tween(thumbnailContainer, "_alpha", Regular.easeOut, 0, 100, 1, true);
  tw7.onMotionFinished = function() {
    load_mc.in_mc.unloadMovie();
    load_mc._xscale = load_mc._yscale = 100;
    load_mc.filters = null;
    mcEnable(0);
    btnVisibility(2);
    delete load_mc.onEnterFrame;
    buttons_mc._visible = false;
  };
}

//全画面表示への切り替え
function expandStage(load_mc) {
  new Tween(load_mc, "_alpha", Regular.easeOut, 20, 100, 0.5, true);
  Stage["displayState"] = "fullScreen";
  load_mc._x = Stage.width / 2;
  load_mc._y = Stage.height / 2;
  load_mc.filters = [glow];
  load_mc.enabled = false;
  load_mc.onEnterFrame = expandPic;
  shrink_btn.onRelease = load_mcRels;
}

//送り、戻りボタンの操作
buttons_mc.f_btn.onRelease = function() {
  if (picNo++ > pNum - 1) {
    picNo = 1;
  }
  if (Stage["displayState"] == "normal") {
    load_mc._xscale = load_mc._yscale = 100;
    loadPic(picNo);
  } else {
    loadImg(picNo);
  }
};
buttons_mc.b_btn.onRelease = function() {
  if (picNo-- < 2) {
    picNo = pNum;
  }
  if (Stage["displayState"] == "normal") {
    load_mc._xscale = load_mc._yscale = 100;
    loadPic(picNo);
  } else {
    loadImg(picNo);
  }
};

//全画面表示における切り替え写真のロード・表示
function loadImg(picNo) {
  var mcLoader:MovieClipLoader = new MovieClipLoader();
  jpg = "img/p" + picNo + ".jpg";
  mcLoader.loadClip(jpg,load_mc.in_mc);
  var oListener:Object = new Object();
  oListener.onLoadInit = function() {
    var tw8 = new Tween(load_mc, "_alpha", Regular.easeOut, 0, 100, 1, true);
  };
  mcLoader.addListener(oListener);
}

//マウスホイールの動きで拡大・縮小スピードを設定
var wheelScrl = new Object();
var speed = 0;
wheelScrl.onMouseWheel = function(d) {
  speed += d;
};
Mouse.addListener(wheelScrl);

//マウスロールに応じて拡大・縮小
function expandPic() {
  this._xscale -= speed;
  this._yscale -= speed;
  speed *= 0.8;
  if (this._xscale > 100) {
    this._xscale = this._yscale = 100;
  }
  if (this._xscale < 20) {
    this._xscale = this._yscale = 20;
  }
  shrink_btn._x = Stage.width / 2 + this._width / 2 - 50;
  shrink_btn._y = Stage.height / 2 + this._height / 2 + 10;
  buttons_mc._x = Stage.width / 2 + this._width / 2 - 130;
  buttons_mc._y = Stage.height / 2 + this._height / 2 + 10;
}

//拡大・縮小ボタンの表示・非表示切り替え
function btnVisibility(vNo) {
  if (vNo == 0) {
    expand_btn._visible = true;
    shrink_btn._visible = false;
  } else if (vNo == 1) {
    expand_btn._visible = false;
    shrink_btn._visible = true;
  } else {
    expand_btn._visible = shrink_btn._visible = false;
  }
}

//サムネイルのボタン操作有効・無効の切り替え
function mcEnable(bNum) {
  for (i = 1; i < pNum + 1; i++) {
    if (bNum == 0) {
      thumbnailContainer["thumb" + i].enabled = true;
    } else {
      thumbnailContainer["thumb" + i].enabled = false;
    }
  }
}

スクリプトの若干の説明

//写真表示領域に収まるように倍率を決める var wh_ratio = load_mc_w / load_mc_h; if (wh_ratio >= screen_w / screen_h) { var xscale = screen_w / load_mc_w * 100; var yscale = screen_w / load_mc_w * 100; } else { var xscale = screen_h / load_mc_h * 100; var yscale = screen_h / load_mc_h * 100; }
　写真が表示領域（screen）に収まるように、縦が収まらない場合は高さがいっぱいになるように、横が収まらない場合は幅がいっぱいになるように倍率を決める

//マウスホイールの動きで拡大・縮小スピードを設定 var wheelScrl = new Object(); var speed = 0; wheelScrl.onMouseWheel = function(d) { speed += d; }; Mouse.addListener(wheelScrl);
　マウスホイールの動きの量(d)をリスニングし、それに応じてspeedを　//マウスロールに応じて拡大・縮小 function expandPic()関数に渡す

HOME　　　お勉強総リスト

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。