chimanaco blog » JavaScript http://blog.chimanaco.net ちまなこです。 Crazy about Something! Fri, 23 Jul 2010 09:17:59 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 SWFObject+ExternalInterfaceでのGoogle Analytics設定 http://blog.chimanaco.net/archives/20081122192257.php http://blog.chimanaco.net/archives/20081122192257.php#comments Sat, 22 Nov 2008 10:22:57 +0000 chimanaco http://www.chimanaco.net/wordpress/?p=17 FlashとJavaSrciptの連携をするにはExternalInterfaceを使うと便利です。過去記事で面倒なやり方をエントリーしましたが今後はこちらのやり方で行こうと想います。

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

こんな感じです。



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

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

[XHTML]

[/XHTML]

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

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

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

function clickTest(event:MouseEvent)：void {
ExternalInterface.call(“pageTracker._trackPageview”, “/flash/img1/”);
}
[/AS3]

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

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

[AS3]
package{
import flash.external.*
public class ExGA{

public static function tracker(pageID):void{
ExternalInterface.call(“pageTracker._trackPageview”,pageID)
}
}
}
[/AS3]

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

[AS3]
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;
}
}
}
}
[/AS3]

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

サンプルデータ(36KB)

]]> http://blog.chimanaco.net/archives/20081122192257.php/feed 1 Flash JavaScript Integration Kitを使ってFlashからJavaScriptを操作する http://blog.chimanaco.net/archives/20080903170226.php http://blog.chimanaco.net/archives/20080903170226.php#comments Wed, 03 Sep 2008 08:02:26 +0000 chimanaco http://www.chimanaco.net/wordpress/?p=10 今回やりたいことは、
ボタンを押すと別ウィンドウでFlashのスペシャルサイト表示。
開いたスペシャルサイトから元のページを操作（ページ遷移、focusを当て前面に出す）。
個人的には同じウィンドウで全て遷移して欲しいところですが、これでやってみたいと想います。

サンプル

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

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

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

[JavaScript]

[/JavaScript]

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

[XHTML]
ウィンドウを開く
[/XHTML]

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

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

[JavaScript]


[/JavaScript]

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

[JavaScript]

[/JavaScript]

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

[JavaScript]

[/JavaScript]

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

[AS3]
import com.macromedia.javascript.JavaScriptProxy;
var proxy:JavaScriptProxy = new JavaScriptProxy();
[/AS3]

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

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

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

[AS3]
proxy.call(“javaScriptMethodName”, “arg1″, new Object());
[/AS3]

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

[AS3]
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”);
};
[/AS3]

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

]]> http://blog.chimanaco.net/archives/20080903170226.php/feed 0