卡在交互式地图上

Question

所以，我正在抓紧时间制作 HTML/Flash 混合交互式地图，但它还远没有完成。 我不断地接近解决每个问题，却发现了更多的错误。 当你看作品时，其中大多数都是非常明显的。 我想至少消除大错误，所以我非常感谢任何建议。 请帮忙！

基本上，我以两种方式使用工具提示：[0] 传统上基于 Flash 的 onMouseMove（工作正常），以及 [1] 非常规地瞄准 Flash 影片中的某个点来自 HTML 列表。 工具提示显示正常，但由于地图移动和移动而位于错误的位置。 通过 TweenLite 进行缩放。 onMouseOver/onMouseOut 事件也存在错误，其中 onMouseOver 再次触发 onMouseOut，使工具提示在 _alpha 应该为 0 时可见。

链接到作品： http://muralapts.com/test/neighborhood.php

---- 大问题#1： HTML onMouseOver 再次触发onMouseOut，有效地“重新打开”我的工具提示。 当工具提示不会消失时，看起来真的很糟糕。 没有错误，因此我无法弄清楚为什么 onMouseOver 会触发两次。 似乎是 HTML 问题，而不是 Flash 问题。

---- 大问题#2：由于父剪辑被缩放和缩放，从页面左侧的 HTML 列表触发的工具提示显示在错误的位置。 与 TweenLite 一起移动。 工具提示附加到 _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 并在更新时使用 TweenLite 进行记录

• HTML 列表中的 onMouseOver 显示带有地图数据的工具提示，但在错误的位置，因为地图已被缩放和放大。 与 TWENLITE 一起感动。 使用 TweenLite onUpdate 记录父剪辑的比例 + 位置值。

• 从 HTML 更改点的颜色适用于 MouseOver，在 MouseOut 上“粘性”（点保持黑色）

  从

XML 代码：（显示一个类别+列表，还有更多）

 <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>; 

FLASH 代码：

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});
 }

Answer 1

使用 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

一个快速的 hacky 修复可能是，延迟工具提示隐藏：

• 先决条件是，您始终将活动对象存储在某个变量中，例如 activeID ...
• 当您获得 mouseOut 时，然后设置超时...也许 100-200 msecs ...（创建一个将从 JS 调用的额外函数，该函数基本上执行 setTimeOut(removeTip, 100, bt, catNum)）
• 然后，由于某些未知的错误，将发送 mouseOver之后...如果 mouseOver 重新请求已经处于活动状态的对象，请忽略它...
• 在超时提供的暂停之后，工具提示将被隐藏...
• 确保删除该对象 ID，否则，如果不激活中间的另一个对象，您将无法两次激活同一个对象的工具提示...所以将 activeID = null 放入removeTip

我希望，这更不太清楚...

嗯调用showTooltip 中的trickTip onUpdate 对我来说似乎很奇怪...我认为你应该真正清理它...有一个函数，它既是补间的更新函数，又是从外部接口调用的，真的很混乱。 ..最好现在改变它，虽然你知道它的作用...

好吧，希望这有帮助...

greetz

back2dos

Answer 2

关于大问题#2：

我觉得我有点理解localToGlobal，但它正在记录x和y 对于远离地图的每个点。

父地图剪辑为 760 x 916 像素（屏蔽 @ 400 x 600），但是我的代码输出记录每个点的“localToGlobal”x 值在 800 到 1600 之间 - 远离舞台。

在 Flash 影片中的 OnMouseOver 中，每个 dot._x 都记录在 100 到 300 之间，父剪辑位于左上角的 0,0...那么 877 来自哪里？ 是否考虑到我正在动态设置父剪辑的 _x/_y 动画并增加 _xscale/_yscale （最初为140）？

_xscale/_yscale 如何影响 localToGlobal x 坐标？

我在启动点的位置添加了建议的代码（同时循环遍历 XML 层次结构） – 有 2 个循环，一个循环用于每个 XML 类别 [i] 和列表 [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;
 }

Answer 3

嘿，不太确定您对工具提示的问题，但是我在不同的应用程序上使用相同的概念。 我在一些增强现实 3D 模型上放置了工具提示，但遇到了鼠标悬停问题，即鼠标移开时工具提示会重复。 我 100% 在 flash 中执行此操作，因此我知道这不是 HTML 问题。

不管怎样，在谷歌搜索中发现了这个，我想让你知道这也发生在我身上，而且我不使用 HTML。