chimanaco blog » JavaScript

jQuery イメージスライダーNivo Slider で画像ごとに停止時間を変える

chimanaco — Wed, 28 Dec 2011 00:38:15 +0000

Nivo Slider は多彩なトランジションを繰り出すスライドショーを簡単に作ることができる高性能 jQuery イメージスライダー。jQuery プラグイン版は無料で使うことができます。

使用方法は下記を参考にしてもらえば好いと想います。
Nivo Sliderの使い方とサンプル | jQueryプラグイン集

トランジションのタイプは、img タグの data-transition 属性でトランジション名を指定することで画像ごとに簡単に変更できるのですが、例えば文字を読ませたい場合に少し長めに止めておきたい、といったように画像毎に停止時間を指定できる機能はデフォルトでは現在(2012/12/27)のところないようです。探してみたところ以下のページでやり方が紹介されていました。
Can I get different pauseTime’s for different slides? / Nivo Slider jQuery Plugin / Discussion Area – Nivo Slider Support

以下のコードを nivoRun function の中のカスタムトランジションに関するコードの後に入れます。圧縮前の jquery.nivo.slider.js (v2.7.1) で言うと 614 行目あたりかな。

if(vars.currentImage.attr('data-timing')){
    settings.pauseTime = vars.currentImage.attr('data-timing');
    window.clearInterval(timer);
    timer = '';
    if(timer == '' && !settings.manualAdvance){
    timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
    }
}

default の pauseTime が 3000 として、以下のように記述すると、3、4枚目の画像で pauseTime が1500と半分になり、5枚目の画像ではまた3000に戻ります。data-timing 属性を持っている時のみ上記のコードは適用されるので、何も指定しない場合は最後に指定した pauseTime が適用されます。

今回は pauseTime を弄っていますが、お望みとあらば同様の方法で slices でも boxCols でも画像毎に指定できるようにカスタムできます。

SWFObject+ExternalInterfaceでのGoogle Analytics設定

chimanaco — Sat, 22 Nov 2008 10:22:57 +0000

FlashとJavaSrciptの連携をするにはExternalInterfaceを使うと便利です。過去記事で面倒なやり方をエントリーしましたが今後はこちらのやり方で行こうと想います。

先日「Google Analytics」がFlashコンテンツのアクセス解析に対応しましたが、こちらのやり方は後でやってみるとして、とりあえずExternalInterfaceを使ってJavaSrciptと連携しGoogle Analyticsを使えるようにしてみます。

こんな感じです。

参考にさせて頂いたページ

以下、上記のサイト様のマネマネです。
まず、ExternalInterfaceを使ってJavaSrciptと連携します。htmlの設定はこんな感じ。

1.SWFObjectを使ってFlashを表示させる部分をexternal**というdivで囲みます。
2.SWFObjectの第2引数をexternal**とします。
3.allowScriptAccessをalwaysに設定。

external**というidにするのがポイントのようです。Flashの設定は以下のようになります。(img1をクリックするとimg1用のページIDを送信)

import flash.external.ExternalInterface;
import flash.events.MouseEvent;
img1.addEventListener(MouseEvent.CLICK,clickTest)

function clickTest(event:MouseEvent)：void {
      ExternalInterface.call("pageTracker._trackPageview", "/flash/img1/");
    }

まず最初にexternalクラスのExternalInterfaceをimportして、callメソッドでJavaScript関数を呼び出します。call(“pageTracker._trackPageview”,”ページID”);という形式です。

さらにより使いやすくするためにpageTracker._trackPageviewを呼び出すためのクラスを作ります（ExGA.as）

package{
  import flash.external.*
  public class ExGA{

    public static function tracker(pageID):void{
      ExternalInterface.call("pageTracker._trackPageview",pageID)
    }
  }
}

このクラスを使ってできたサンプルがこんな感じです。（ドキュメントクラスMain.as）

package {
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;

	//Google Analytics
	import ExGA;

	public class Main extends MovieClip
	{

		//コンストラクタ
		public function Main():void {
			init();
		}

		public function init():void
		{
			//トラッキングに使うページID設定
			var page1:String = "/flash/433/";
			var page2:String = "/flash/peopot/";

			//イベントリスナー登録
			img1.addEventListener(MouseEvent.CLICK, clickTrack(page1));
			img2.addEventListener(MouseEvent.CLICK, clickTrack(page2));
		}

		public function clickTrack(pageID:String):Function
		{
			return function(event:MouseEvent):void
			{
				ExGA.tracker(pageID)
				//TextFieldにページIDを表示
				textArea.text = pageID;
			}
		}
	}
}

MouseEvent.CLICKで実行するclickTrackハンドラに引数を持たせ、その引数をExGAクラスのstatic関数trackに送って、MouseEventをもつハンドラ関数を定義しています。これによりクリックした画像により個別のページIDを持たせることができます。

サンプルデータ(36KB)

Flash JavaScript Integration Kitを使ってFlashからJavaScriptを操作する

chimanaco — Wed, 03 Sep 2008 08:02:26 +0000

今回やりたいことは、
ボタンを押すと別ウィンドウでFlashのスペシャルサイト表示。
開いたスペシャルサイトから元のページを操作（ページ遷移、focusを当て前面に出す）。
個人的には同じウィンドウで全て遷移して欲しいところですが、これでやってみたいと想います。

サンプル

参考にさせて頂いたページ

1. Flash / JavaScript Integration Kitから最新版をダウンロードしておきます。

2. 1は一寸置いといて下準備。index.htmlからspecial.htmlを別ウィンドウで開く設定をします。
～部分に以下を記述。

続いて～内該当する箇所に以下のような記述をします。

ウィンドウを開く

これで別ウィンドウを開く準備ができました。続いて別ウィンドウで開くspecial.htmlの設定をします。

ActionScriptからJavaScriptを操作する設定をします。まずhtml側。
installationフォルダ内のJavaScriptFlashGateway.js、JavaScriptFlashGateway.swfを今回使用するフォルダに移動。
HTMLにFlashProxyのインスタンスを生成するJavaScriptを記述します。
※xxxの部分は任意です。

body内にswfを表示するJavaScriptを記述。

さらに元ウィンドウをページ遷移させ、focusを当てるJavaScriptを記述。

続いてFlash側。"source/flash/actionscript" 内のライブラリファイルをクラスパスが通る場所に置いて、importします。さらに、JavaScriptProxyクラスのインスタンスを作成します。

import com.macromedia.javascript.JavaScriptProxy;
var proxy:JavaScriptProxy = new JavaScriptProxy();

ここで「"com.macromedia.javascript.JavaScriptProxy"がロードされませんでした。」というエラーが出て暫く足踏みしたのですが、参考にさせて頂いたFlash / JavaScript Integration Kit – blog.burnercrew.comの、

Windows 版の Flash は asファイルが BOM つきの UTF-8 で保存されてないとダメらしい。
JavaScriptProxy.as と JavaScriptSerializer.as を Flash で一度開いてから保存しなおすことによって解決。

を発見してひと安心。仰る通りにして解決。
続いてJavaScriptの関数を呼び出す以下の記述をします。

proxy.call("javaScriptMethodName", "arg1", new Object());

俺の場合、html側の記述で関数名がGoWin()、引数にURLを取る設定になっています。
Flash側ではボタンを2つ作り、btn_01、btn_02と名前をつけてそれぞれ押すとその設定が入るようにしています。
ソースは以下のようになりました。

import com.macromedia.javascript.JavaScriptProxy;
var proxy:JavaScriptProxy = new JavaScriptProxy();

//インスタンス宣言
var btn_01:Button;
var btn_02:Button;

//変数宣言
var pageNum:Number;

//ブロードキャスター用オブジェクト
var objCast:Object = new Object();

//カスタムブロードキャスター初期化
AsBroadcaster.initialize(objCast);

//リスナー用オブジェクト
var objListener:Object = new Object();

//objListenerをobjCastのイベントリスナーに登録
objCast.addListener(objListener);

//関数定義
objListener.eventComplete = function():Void  {
	switch (pageNum) {
		case 1 :
			page = "page1.html";
			break;
		case 2 :
			page = "page2.html";
			break;
	}
	trace(pageNum);
	proxy.call("GoWin",page,new Object());
};

btn_01.onRelease = function() {
	pageNum = 1;
	objCast.broadcastMessage("eventComplete");
};

btn_02.onRelease = function() {
	pageNum = 2;
	objCast.broadcastMessage("eventComplete");
};

参考にさせて頂いたページも結構前の記事だったので、今はもっと好い方法があるのかもしれませんね。