1

それで、私は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 &amp; 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 &amp; 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});
 }
4

3 に答える 3

0

位置の問題に使用MovieClip::localToGlobal..。

import flash.geom.Point;

var pt:Point = new Point();
dot.localToGlobal(pt);//dot being the clip with the position you actually need ...
//pt.x and pt.y are the required positions now ...

奇妙なHTMLの振る舞いに関して、私は自分自身をデバッグせずにあなたを大いに助けることはできません...私はこの分野の専門家ではありません... :-D

ツールチップの非表示を遅らせるための簡単な修正方法は次のとおりです。

  • 前提条件は、常にアクティブオブジェクトを何らかの変数に格納することですactiveID
  • mouseOutを取得したら、タイムアウトを設定します...おそらく100〜200ミリ秒...(JSから呼び出される追加の関数を作成します。これは基本的には実行されますsetTimeOut(removeTip, 100, bt, catNum)
  • 次に、いくつかの未知のバグにより、mouseOverが直後に送信されます...とにかくすでにアクティブになっているオブジェクトを再要求するときにmouseOverが来た場合は、無視してください...
  • タイムアウトによって提供された一時停止の後、ツールチップは非表示になります...
  • 必ず、そのオブジェクトIDを削除してください。そうしないと、間に別のオブジェクトをアクティブ化せずに、同じオブジェクトのツールチップを2回アクティブ化できなくなります...したがってactiveID = null、removeTipに入れてください

私は願っています、これはもっと明確ではありません...

ええと、showTooltipからtrickTip onUpdateを呼び出すのは、私には非常に奇妙に思えます...本当にクリーンアップする必要があると思います...トゥイーンの更新関数であり、外部インターフェイスから呼び出される関数を持っていることは、実際には散らかっています...あなたが知っている間、今それを変更する方が良いです、それが何をするのか...

了解しました。これがお役に立てば幸いです...

グリーツ

back2dos

于 2009-07-09T12:52:22.953 に答える
0

ビッグイシュー#2について:

ある程度理解しているような気がしますが、マップからかなり離れたポイントごとにとをlocalToGlobal記録しています。xy

親マップクリップは760x916ピクセル(400 x 600でマスク)ですが、私のコード出力はlocalToGlobal、ステージからかなり離れた800〜1600の各ドットの""x値を記録しています。

FlashムービーのOnMouseOverは、それぞれdot._x100から300の間で記録され、親クリップは左上隅の0,0にあります...では、877はどこから来ているのでしょうか。親クリップの_x/を動的にアニメーション化し、 /を(最初は140に)_y増やしていることを考慮に入れていますか?_xscale_yscale

_xscale/_yscaleはlocalToGlobalx座標にどのように影響しますか?

ドットを開始する(XML階層を同時にループする)推奨コードを追加しました。2つのループがあり、各XMLカテゴリ[i]とリストに1つずつあります[g]。確かに、私のコードは複雑になっています。マップの移動に使用しているのと同じ「destX」値をツールチップに渡そうとしましたが、うまくいきませんでした。おそらく、ツールチップがにあるときにマップ自体に関連する値を渡したためです_root。それはどこでlocalToGlobal役立つはずですか?

 /////* Map.as */////

 private function initMap() {
    // contentArr = XML Array
    for(var i:Number = 0; i < contentArr.length; i++){
       categories = contentArr[i].childNodes;
       numCategories = categories.length;

      for(var g:Number = 0; g < numCategories; g++){

         dotIDs = categories[g].attributes.id;  
         dot = map_mc[dotIDs];
              // link dot movieClips on Stage to each XML listing   

         dot.catNum = i; // category number - Arts [0], Shopping[1], etc.
         dot.listingNum = g; // each indiv. listing number

         pt = new Point(); // New code
         pt = eval('pt_' + i + '_' + g); //Appending cat/list numbers for unique ids
         ptArray.push(pt);
         ptArray['pt_' + i + '_' + g] = {x:dot._x, y:dot._y};
         dot.localToGlobal(ptArray['pt_' + i + '_' + g]);
         }
    }
 }

 // ˘˘being called from externalInterface
 public function showTooltip(bt, catNum, listNum){ 

      var newBT = eval(_root.mapContainer_mc.map_mc + '.' + bt); 
      // so I don't have to use the entire path in HTML
      goto(newBT, catNum, listNum); 
 }
 public function goto(bt, catNum, listNum){ // moves map, calls Tooltip.trickTip()
      destX = 0-(bt._x-(mask_mc._width/3));
      destY = 0-(bt._y-(mask_mc._height/3));

      if(destX < 10-(map_mc._width-mask_mc._width)) destX = 10-(map_mc._width-mask_mc._width);
      if(destY < 10-(map_mc._height-mask_mc._height)) destY = 10-(map_mc._height-mask_mc._height);
      if(destX > 10) destX = 10;
      if(destY > 10) destY = 10;

      TweenLite.to(map_mc, 1, {_x:destX, _y:destY, ease:'easeOutQuad', overwrite:3, 
      onUpdate:trickTip, 
      onUpdateParams:[ bt, 
                       catNum, 
                       listNum, 
     /* theText*/      contentArr[catNum].childNodes[listNum].attributes.name
                       ]
       });
 }

 /////* Tooltip.as */////

 public function trickTip(catNum:Number, listNum:Number, theText:String):Void {

      theTip._x = ptArray['pt_'+catNum+'_'+listNum].x; //Somewhere way off stage
      theTip._y = ptArray['pt_'+catNum+'_'+listNum].y;
 }
于 2009-07-09T23:33:39.293 に答える
0

ツールチップの問題についてはよくわかりませんが、別のアプリケーションで同じ概念を使用しています。一部の拡張現実 3D モデルにツールチップを配置していますが、マウス アウト時にツールチップが複製されるマウス オーバーの問題が発生しています。私はこれを 100% フラッシュで行っているので、HTML の問題ではないことがわかっています。

とにかく、Google検索でこれを見つけて、私にも起こっていることをお知らせしたいと思いました。私はHTMLを使用していません.

于 2010-01-22T22:17:24.727 に答える