Elklog

例えば、オープニングのFLASHがあって、

そのオープニングが再生されたらトップページのFLASHに遷移するサイトがあるとします。

で、それらのオープニングとトップページのFLASHは同じswfだとします。

トップページからメニューボタンをクリックして中のコンテンツに行き、

またトップページに戻ってきた時、

オープニングをとばしてトップページに遷移したい。

このような場合、

中のコンテンツもFLASHで作成していれば全く問題ないのですが、

HTMLで作る場合、やっかいな事になります。

そんな時の為のサンプルです。

まず、トップページに戻る際にパラメータを渡します

中のコンテンツ(パラメータを送る側)内にある、

トップページへのリンクを以下のように記述します。

index.html?count=1

次に、トップページ(パラメータを受け取る側)に、

以下のjavascriptを記述します。

if (swfobject.getQueryParamValue("count")) { flashvars.name1 = swfobject.getQueryParamValue("count"); }

最後に、FLASH内に以下のASを記述します。

var result_str:String = "";
var flashVars:Object = loaderInfo.parameters;
for (var name_str:String in flashVars) {
…
}

例えば”count=1″の時２フレーム目にとばしたい場合は、

var result_str:String = "";
var flashVars:Object = loaderInfo.parameters;
for (var name_str:String in flashVars) {
　if (flashVars[name_str] == 1) {
　　gotoAndPlay(2);
　}
}

となります。

ダウンロード

Google MapsのAPIでFLASH版もありますが、練習でGoogle MapsぽいFLASHを作ってみました。

ポイントはドラッグ時の動きとマウスホイールのイベント。

——————————————————————————–

///////変数定義
var xOffset:Number;
var yOffset:Number;

///////イベント処理
thumb_mc.addEventListener(MouseEvent.MOUSE_DOWN, xMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, xMouseUp);

///////イベントハンドラ定義
//マウスドラッグ
function xMouseDown(evt:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_MOVE, xMouseMove);
xOffset = mouseX - thumb_mc.x;
yOffset = mouseY - thumb_mc.y;
}
function xMouseUp(evt:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, xMouseMove);
}
function xMouseMove(evt:MouseEvent):void {
thumb_mc.x = mouseX - xOffset;
thumb_mc.y = mouseY - yOffset;
xScopeDef();
}

——————————————————————————–

MOUSE_MOVEイベントでmouseX，mouseYの値に合わせてthumb_mcを動かします。

——————————————————————————–

///////イベント処理
stage.addEventListener(MouseEvent.MOUSE_WHEEL, xMouseWheel);

///////イベントハンドラ定義
//マウスホイール
function xMouseWheel(evt:MouseEvent):void{
if (evt.delta > 0) {
Tweener.addTween(thumb_mc,{transtion:”easeOutExpo”,scaleX: 1,scaleY: 1,delay:0,time:1});
}
if (evt.delta < 0) {
thumb_mc.scaleX = 0.7;
thumb_mc.scaleY = 0.7;
}
}

——————————————————————————–

デフォルトでthumb_mcのscaleX,scaleYをそれぞれ0.7にし、マウスホイールを奥に回した時(deltaプロパティの値が正の場合)scaleX,scaleYにそれぞれ1を代入します。

ダウンロード

仕事で使う機会があったのでメモ。

更新や汎用性も考え、XMLに画像の情報を。

通常通りXMLを読み込んで、nodeのlength分だけfor分で繰り返し処理。

ポイントはfor分の中身。

———————————————————————–

for (var i:uint = imageNum; i >= 1; i–) {
var thumbLoader:Loader = new Loader();
thumbLoader.load(new URLRequest(i + “.jpg”));
addChild(thumbLoader);
thumbLoader.scaleX = 0.2;
thumbLoader.scaleY = 0.2;
thumbX += 100;
if (thumbX > stage.stageWidth) {
thumbX = 100;
thumbY += 64;
}
thumbLoader.x = thumbX - 100;
thumbLoader.y = thumbY;
}

———————————————————————–

各画像をサムネイル化してクリック後に何かしらのイベントを追加できるように。

thumbLoaderのscaleX,scaleYにそれぞれ0.2を代入。

———————————————————————–

var thumbX:uint = 0;
var thumbY:uint = 0;

———————————————————————–

for分の直前で定義してある変数thumbXとthumbYはそれぞれ

(thumbX)100,200,300,100,200,300…

(thumbY)0,0,0,64,64,64,128,128,128…

と変化し、

———————————————————————–

thumbLoader.x = thumbX - 100;
thumbLoader.y = thumbY;

———————————————————————–

と代入する事で各画像の座標が”0,0″,”100,0″,”200,0″,”000,64″,”100,64″,”200,64″,”0,128″,”100,128″…

となる。

ダウンロード

これにブラウザをリサイズした時のイベントも加えたヴァージョンを後日アップします。