FLASHのお勉強_バナーがスライドして入れ替わるナビゲーションの作成

　広告バナーや、ナビゲーションバーが一定時間間隔で間欠的にスライド移動し、入れ替わるタイプのナビゲーションである。　縦（垂直）方向、横（水平）方向に移動するタイプについて、それぞれを作成することにする。　ここで示す例は、ドロップシッピング（もしも）用のバナーを表示するもので、バナーのクリックによって商品紹介ページに飛ぶタイプのものである。　もちろん、サイト内リンク用にも使用可能である。

SAMPLE（垂直方向移動タイプ）

ステージなどの準備

●192*400、20ｆｐｓのステージを設定
●表示用バナー画像（ここでは192*80、８個）を用意し、swf、htmlと同じフォルダに、imgフォルダを作成し、その中に格納する。
　名前は、p1.jpg,p2.jpg,,,,p8.jpg
　※ここで使用したバナーは、ドロップシッピング「もしも」のサイトで使用されているもので、各バナーには、該当するもしもの検索ページにリンクが貼られている。

スクリプト（as2.0,　_root、FRAME1に記述）

//Tween、easing クラスのインポート
import mx.transitions.Tween;
import mx.transitions.easing.*;
//barの数
var num:Number = 8;
//barの高さ
var bar_h:Number = 80;
//barの表示数
var bar_n:Number = 5;
//移動間隔(ミリ秒)
var lag:Number = 3000;
//移動速度(秒)
var speed:Number = 1;
//バナー移動の指標
var transMode:Boolean = true;

//バナーインスタンスの作成・配置・ボタン機能操作
for (i=1; i<=num; i++) {
  mc = this.createEmptyMovieClip("mc"+i,i);
  mc.createEmptyMovieClip("inner",i);
  mc.inner.loadMovie("img/p"+i+".jpg");
  mc._x = 0;
  mc._y = bar_h*(i-2);
  mc._alpha = 50;
  mc.n = i;
  mc.onRollOver = rollover;
  mc.onRollOut = rollout;
  mc.onRelease = releas;
}
function rollover():Void {
  this._alpha = 100;
  transMode = false;
}
function rollout():Void {
  this._alpha = 50;
  transMode = true;
}
function releas():Void {
  transMode = true;
  url = _root["link"+this.n];
  getURL(url, "_blank");
}

//一定間隔でバナーを移動させる関数
function bar_trans() :Void{
  if (transMode) {
    for (i=1; i<=num; i++) {
      bar_mc = _root["mc"+i];
      bar_mc.y0 = bar_mc._y;
      if (bar_mc.y0>=bar_h*(num-2)) {
        bar_mc._visible = false;
        bar_mc.targety = -bar_h;
      } else {
        bar_mc._visible = true;
        bar_mc.targety = bar_h+bar_mc.y0;
      }
      myTween(bar_mc);
    }
  }
}
ID = setInterval(bar_trans, lag);
function myTween(bar_mc) :Void {
  new Tween(bar_mc, "_y", Regular.easeOut, bar_mc.y0, bar_mc.targety, speed, true);
}

//バナーリンク先
var link1:String ="http://www.hoge.com";
var link2:String ="";
var link3:String ="";
var link4:String ="";
var link5:String ="";
var link6:String ="";
var link7:String ="";
var link8:String ="";

num個のバナーを作成
それぞれに入れ子のMCを作り
そこに画像を読み込む（ボタン操作に呼応させるため）

SAMPLE（水平方向移動タイプ）

ステージなどの準備

●656*110、20ｆｐｓのステージを設定、背景色は任意
●表示用バナー画像（ここでは192*80、８個）を用意し、swf、htmlと同じフォルダに、imgフォルダを作成し、その中に格納する。
　名前は、p1.jpg,p2.jpg,,,,p8.jpg
●移動方向切り替え用の右方向ボタン（リンケージ：fw_btn）と左方向ボタン（リンケージ：bw_btn）を作成し、ライブラリーに置いておく

//Tween、easing クラスのインポート
import mx.transitions.Tween;
import mx.transitions.easing.*;
//barの数
var num:Number = 8;
//barの高さ・幅
var bar_h:Number = 80;
var bar_w:Number = 192;
//barの表示数
var bar_n:Number = 3;
//表示幅
var margin:Number = 20;
//移動間隔(ミリ秒)
var lag:Number = 3000;
//移動速度(秒)
var speed:Number = 1;
//バナー移動、右方向移動の指標
var transMode:Boolean = true;
var forward:Boolean = true;

//バナーインスタンスの作成・配置・ボタン機能操作
for (i=1; i<=num; i++) {
  mc = this.createEmptyMovieClip("mc"+i,i);
  mc.createEmptyMovieClip("inner",i);
  mc.inner.loadMovie("img/p"+i+".jpg");
  mc._x = margin+(bar_w+margin)*(i-2);
  mc._y = 0;
  mc._alpha = 50;
  mc.n = i;
  mc.onRollOver = rollover;
  mc.onRollOut = rollout;
  mc.onRelease = releas;
}
function rollover() {
  this._alpha = 100;
  transMode = false;
}
function rollout() {
  this._alpha = 50;
  transMode = true;
}
function releas():Void {
  transMode = true;
  url = _root["link"+this.n];
  getURL(url, "_blank");
}

//方向ボタンインスタンスの作成、配置、機能付与
this.attachMovie("fw_btn","fw_btn",this.getNextHighestDepth());
this.attachMovie("bw_btn","bw_btn",this.getNextHighestDepth());
fw_btn._x = 400; fw_btn._y = 95;
bw_btn._x = 250; bw_btn._y = 95;
fw_btn.onRelease = function() {
  forward = true;
};
bw_btn.onRelease = function() {
  forward = false;
};

//一定間隔でバナーを移動させる関数
function bar_trans() {
  if (transMode) {
    for (i=1; i<=num; i++) {
      bar_mc = _root["mc"+i];
      bar_mc.x0 = bar_mc._x;
      if (forward) {
        if (bar_mc.x0>(margin+bar_w)*(num-2)) {
          bar_mc._visible = false;
          bar_mc.targetx = -bar_w;
        } else {
          bar_mc._visible = true;
          bar_mc.targetx = bar_mc.x0 + (margin+bar_w);
        }
      } else {
        if (bar_mc.x0 < -bar_w) {
          bar_mc._visible = false;
          bar_mc.targetx = margin + (margin+bar_w)*(num-3);
        } else {
          bar_mc._visible = true;
          bar_mc.targetx = bar_mc.x0 - (margin+bar_w);
        }
      }
      myTween(bar_mc);
    }
  }
}
ID = setInterval(bar_trans, lag);
function myTween(bar_mc) {
  new Tween(bar_mc, "_x", Regular.easeOut, bar_mc.x0, bar_mc.targetx, speed, true);
}

SAMPLE（１バナー毎の切り替え）

ステージなどの準備

●225*225、20ｆｐｓのステージを設定、背景色は任意
●表示用バナー画像（ここでは225*225、6個）を用意し、swf、htmlと同じフォルダに、imgフォルダを作成し、その中に格納する。
　名前は、p1.jpg,p2.jpg,,,,p6.jpg

スクリプト：

import mx.transitions.Tween;
import mx.transitions.easing.*;
//barの数
var num:Number = 6;
//barの高さ・幅
var bar_h:Number = 225;
var bar_w:Number = 225;
//barの表示数
var bar_n:Number = 1;
//表示幅
var margin:Number = 0;
//移動間隔(ミリ秒)
var lag:Number = 3000;
//移動速度(秒)
var speed:Number = 1;

var transMode:Boolean = true;
for (i=1; i<=num; i++) {
  mc = this.createEmptyMovieClip("p"+i, i);
  mc.createEmptyMovieClip("inner",i);
  mc.inner.loadMovie("img/p"+i+".jpg");
  mc._x = margin + (bar_w+margin)*(i-2);
  mc._y = 0;
  mc._alpha = 50;
  mc.n = i;
  mc.onRollOver = rollover;
  mc.onRollOut = rollout;
  mc.onRelease = releas;
}
function rollover() {
  this._alpha = 100;
  transMode = false;
}
function rollout() {
  this._alpha = 50;
  transMode = true;
}
function releas() {
  transMode = true;
  url = _root["link"+this.n];
  getURL(url);
}
function bar_trans() {
  if (transMode) {
    for (i=1; i<=num; i++) {
      bar_mc = _root["p"+i];
      bar_mc.x0 = bar_mc._x;
      if (bar_mc.x0>margin + (margin+bar_w)*(num-3 )) {
        bar_mc._visible = false;
        bar_mc.targetx = - bar_w;
      } else {
        bar_mc._visible = true;
        bar_mc.targetx = margin + bar_w + bar_mc.x0;
      }
      myTween(bar_mc);
    }
  }
}

ID = setInterval(bar_trans, lag);
function myTween(bar_mc) {
new Tween(bar_mc, "_x", Regular.easeOut, bar_mc.x0, bar_mc.targetx, speed, true);
}

var link1:String ="http://www.hoge.com";
var link2:String ="";
var link3:String ="";
var link4:String ="";
var link5:String ="";
var link6:String ="";

HOME　　　お勉強総リスト

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

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

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