SO, I am getting down to the wire on a deadline for an HTML/Flash hybrid interactive map, and it is not anywhere near finished. I keep getting close to solving each problem, only to discover more bugs. Most of them are quite obvious when you look at the work. I would like to at least squash the big bugs, so I am VERY appreciative of any suggestions. PLEASE HELP!
Basically, I am using a Tooltip in two ways: [0] conventionally Flash-based onMouseMove (works fine), and [1] unconventionally targeting a point in the Flash movie from an HTML list. The Tooltip comes up fine, but is in the wrong place due to the Map moving & scaling via TweenLite. There are also bugs with the onMouseOver/onMouseOut events, where the onMouseOver fires again onMouseOut, leaving the Tooltip visible when it should have an _alpha of 0.
Link to the work: http://muralapts.com/test/neighborhood.php
---- BIG ISSUE #1: HTML onMouseOver is firing again onMouseOut, effectively "turning back on" my Tooltip. Really buggy looking when Tooltip won't go away. No errors, therefore I can't figure out why onMouseOver is firing twice. Appears to be an HTML issue, not a Flash issue.
---- BIG ISSUE #2: Tooltip triggered from HTML list on the left of page shows up in the wrong place due to parent clip being scaled & moved with TweenLite. Tooltip is attached to _root, but is "targeting" a dot within several container clips (paths not specified below). I am trying to get the Tooltip position like this:
Tooltip._x = ( dot._x + parentClip._x ) * parentClip._xscale/100;
Tooltip._y = ( dot._y + parentClip._y ) * parentClip._yscale/100;
INTERACTIVE MAP DETAILS:
XML Content dynamically generates HTML and Flash map data (id, name, link, blurb, category number [Arts, Shopping, etc.], list number [number within category] ). Uses Magic Parser to render HTML Output from the same XML file that Flash is using.
HTML/Javascript talks to custom AS2 map component via External Interface
Map Initially zooms in to 140% and moves to a certain point using TweenLite
onRollOver of dots in Flash movie shows Tooltip with place name, changes dot color
Zoom In/Out buttons set parent clip _xscale + _yscale and record with TweenLite onUpdate
onMouseOver of list in HTML shows Tooltip w/ map data but in the WRONG PLACE, since Map has been zoomed & moved with TWEENLITE. Using TweenLite onUpdate to record parent clip's scale + placement values.
Changing color of dot from HTML works onMouseOver, is "sticky" onMouseOut (dots stay black)
XML CODE: (showing one category + listing, there are many more)
<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 CODE:
<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 CODE:
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});
}