1

因此,我在 HTML/Flash 混合交互式地图的最后期限前开始着手处理,但它还远未完成。我不断接近解决每个问题,只是发现更多的错误。当您查看作品时,它们中的大多数都非常明显。我想至少消除大错误,所以我非常感谢任何建议。请帮忙!

基本上,我以两种方式使用工具提示:[0]通常基于 Flash 的 onMouseMove(工作正常),以及[1]非常规地从 HTML 列表中定位 Flash 电影中的一个点。工具提示很好,但由于地图通过 TweenLite 移动和缩放而出现在错误的位置。onMouseOver/onMouseOut 事件也存在错误,其中 onMouseOver 再次触发 onMouseOut,当它的 _alpha 为 0 时,工具提示仍然可见。

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

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

----大问题 #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 并使用 TweenLite onUpdate 录制

  • HTML 中列表的 onMouseOver 显示带有地图数据的工具提示,但位置错误,因为地图已使用 TWEENLITE 进行缩放和移动。使用 TweenLite onUpdate 记录父剪辑的比例 + 放置值。

  • 从 HTML 更改点的颜色在鼠标上起作用,在鼠标输出上是“粘性的”(点保持黑色)

XML CODE:(显示一个类别+列表,还有很多)

 <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

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

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

我希望,这不太清楚...

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

好吧,希望这会有所帮助...

问候

back2dos

于 2009-07-09T12:52:22.953 回答
0

关于大问题 #2:

我觉得我有点理解localToGlobal,但它正在为远离地图的每个点记录一个xy

父地图剪辑为 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]。诚然,我的代码变得复杂了。我尝试向 Tooltip 传递我用来移动地图的相同“destX”值,但这不起作用——可能是因为我传递的是相对于地图本身的值,而 Tooltip 位于_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 模型上放置了一个工具提示,并且我遇到了鼠标悬停问题,即工具提示在鼠标移出时重复。我在 Flash 中 100% 执行此操作,所以我知道这不是 HTML 问题。

无论如何,在谷歌搜索中找到了这个,我想我会让你知道它也发生在我身上,而且我不使用 HTML。

于 2010-01-22T22:17:24.727 回答