それで、私はHTML / Flashハイブリッドインタラクティブマップの締め切りに間に合いました、そしてそれはどこにも完成に近づいていません。私はそれぞれの問題の解決に近づき続けていますが、さらに多くのバグを発見するだけです。あなたが作品を見るとき、それらのほとんどは非常に明白です。少なくとも大きなバグを潰したいので、どんな提案にもとても感謝しています。助けてください!
基本的に、私は2つの方法でツールチップを使用しています。[0]
従来のFlashベースのonMouseMove(正常に動作)と[1]
、HTMLリストからFlashムービーのポイントをターゲットにする方法です。ツールチップは正常に表示されますが、TweenLiteを介してマップを移動およびスケーリングするため、間違った場所にあります。onMouseOver / onMouseOutイベントにもバグがあり、onMouseOverが再びonMouseOutを起動し、_alphaが0のときにツールチップが表示されたままになります。
作品へのリンク:http://muralapts.com/test/neighborhood.php
----大きな問題#1: HTML onMouseOverが再びonMouseOutを起動し、ツールチップを効果的に「オンに戻し」ます。ツールチップが消えないときは本当にバグが多いです。エラーがないため、onMouseOverが2回起動している理由がわかりません。Flashの問題ではなく、HTMLの問題のようです。
----大きな問題#2:親クリップがTweenLiteで拡大縮小および移動されたため、ページの左側にあるHTMLリストからトリガーされたツールチップが間違った場所に表示されます。ツールチップは_rootにアタッチされていますが、いくつかのコンテナクリップ(以下に指定されていないパス)内のドットを「ターゲット」にしています。次のようなツールチップの位置を取得しようとしています。
Tooltip._x = ( dot._x + parentClip._x ) * parentClip._xscale/100;
Tooltip._y = ( dot._y + parentClip._y ) * parentClip._yscale/100;
インタラクティブマップの詳細:
XMLコンテンツは、HTMLおよびFlashマップデータ(ID、名前、リンク、宣伝文句、カテゴリ番号[アート、ショッピングなど] 、リスト番号 [カテゴリ内の番号])を動的に生成します。Magic Parserを使用して、Flashが使用しているのと同じXMLファイルからHTML出力をレンダリングします。
HTML / Javascriptは、外部インターフェイスを介してカスタムAS2マップコンポーネントと通信します
マップ最初に140%にズームインし、TweenLiteを使用して特定のポイントに移動します
FlashムービーのドットのonRollOverは、場所の名前でツールチップを表示し、ドットの色を変更します
ズームイン/ズームアウトボタンは、親クリップを_xscale + _yscaleに設定し、TweenLiteonUpdateで記録します
HTMLのリストのonMouseOverは、マップデータ付きのツールチップを示していますが、マップがTWEENLITEでズームおよび移動されているため、間違った場所に表示されます。TweenLite onUpdateを使用して、親クリップのスケール+配置値を記録します。
HTMLからドットの色を変更するとonMouseOverが機能し、onMouseOutは「スティッキー」になります(ドットは黒のままです)
XMLコード: (1つのカテゴリとリストを表示します。他にもたくさんあります)
<category title="Arts & Entertainment">
<loc id="artsWest_mc" name="Arts West" website="http://www.artswest.org/" cat="0" num="0">
<content><![CDATA[The Junction's thriving community playhouse & art gallery.]]></content>
</loc>
</category>
HTMLコード:
<script type="text/javascript"><!--
function showTooltip(btnID,catNum,listNum) {
thisMovie("map").showTooltip(btnID,catNum,listNum);
}
function removeTip(btnID, catNum, isExternal) {
thisMovie("map").removeTip(btnID, catNum, true);
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName]
} else {
return document[movieName]
}
}
//--></script>
<a onMouseOver="showTooltip( btnID, categoryNum, listingNum )" onMouseOut="removeTip()">Arts West</a>;
フラッシュコード:
public function showTooltip( bt:MovieClip, catNum:Number, listNum:Number ){ //MOVES MAP & SHOWS TOOLTIP
TweenLite.to(map_mc, 1, {_x:destX, _y:destY, ease:'easeOutQuad',
onUpdate: trickTip,
onUpdateParams: [bt, contentArr[catNum].childNodes[listNum].attributes.name]
});
}
public function trickTip( btnID:MovieClip, btnName:String ){ //CALLED FROM EXTERNAL INTERFACE
theTip.theText.text = btnName;
theTip._x = ((btnID._x + btnID._parent._x) * (map_mc._xscale/100)) - (theTip._width *.75);
theTip._y = ((btnID._y + btnID._parent._y) * (map_mc._yscale/100)) + 20;
TweenLite.to(theTip, .01, {_alpha:99, overwrite:1});
}
public function removeTip( bt:MovieClip, catNum:Number ){
TweenLite.to(theTip, .01, {_alpha:0, overwrite:1});
}