"thumb tacks"

Question

Hello,
I'm working on a flash map and am trying to affix "thumb
tacks" to the map that maintain their relative position no matter
how far in or out the map is zoomed.
I have the zoom and pan functions of the map woked out but
I'm not sure how I should proceed with this part. I am looking for
a nudge in the right direction.
Thanks.
Thanks.

Answer 1

Okay... so what you'll want to do is create a "container"
movieclip that
holds your richMap movieclip. Right-click on the richMap
movieclip and
choose "Convert to Symbol". Give the new symbol an instance
name on
stage of "mapContainer_mc".
I've found the easiest way to set different points on the map
at which
to attach thumbtacks to be to create an invisible "marker"
clip and
position instances of it around the map where I'll want the
thumbtacks
to show up.
So double-click into your mapContainer_mc, create a new
layer, and on
that layer draw a little circle, or something. Convert that
circle to a
movieclip. Select the circle instance on stage, and position
it at your
first point. Let's call it "pointA" for this example. Give it
the
instance name "pointAMarker_mc". Go to the properties panel
and set the
color to Alpha=0. It's invisible! Copy the marker clip on
stage and
place in on another point on your map, then give change the
instance
name to "pointBMarker_mc". Keep doing this for all of the
places you'll
want the thumbtacks to show up.
Now we need buttons that, when pressed, will add thumbtacks
on the
appropriate spots. Go back to the main timeline (click "Scene
1" on top
of the timeline panel), and create a button symbol. Give it
the
instance name "pointA_btn". Copy and paste it and give the
new button
an instance name "pointB_btn". Do that for all the different
buttons
you'll need.
In this example, it's important that you use the same name
for the
beginning of the marker clip in the map and the button
outside the map.
One of your marker clips could have the instance name
"kalamazooMarker_mc", and the corresponding button would have
the
instance name "kalamazoo_btn".
Almost there! Now we just need a symbol to use as the
"thumbtack".
Draw a thumbtack, and convert it to a movieclip symbol.
Delete it from
the stage and right-click it in the library and choose
"Linkage". Check
off "Export for ActionScript" and give it the instance name
"tack".
Then, use code like the below:
// example button for attaching at tack at "Point A"
pointA_btn.onRelease = function() {
attachTack(mapContainer_mc.pointAMarker_mc);
// example to set up all of your buttons to work
// create an array to hold the names of all of the places on
the map
// to which you'll want to attach tacks
// these are the same names you'll use
// in the instance names of your markers and buttons
var tackPointsArray:Array =
["pointA", "pointB", "pointR", "kalamazoo", "timbucktoo"];
for (var p in tackPointsArray) {
theButton = _root[tackPointsArray[p]+"_btn"];
theButton.marker =
mapContainer_mc[tackPointsArray[p]+"Marker_mc"];
theButton.onRelease = function() {
attachTack(this.marker);
// set a variable for the depth at which to attach the tack
// so a new one won't replace one that's already on stage
var theDepth:Number = 40;
// the function to attach the tack to the holder clip
function attachTack(placeToAttach) {
var tackHolder_mc =
mapContainer_mc.createEmptyMovieClip("tackHolder",
theDepth);
tackHolder_mc.attachMovie("tack", "tack"+theDepth, 30,
{_x:placeToAttach._x, _y:placeToAttach._y,
onEnterFrame:reverseScaleF});
theDepth++;
// function to scale a clip in reverse to the main map
background
function reverseScaleF() {
this._xscale = this._yscale=100*100/newScale;
// change your zoom and pan functions to target the
mapContainer_mc
//newX moves the map along the x-axis.
//newY moves the map along the y-axis.
//newScale keeps track of the "zoom" of the map
newX = _root.mapContainer_mc._x;
newY = _root.mapContainer_mc._y;
newScale = 100;
//button pan functions
//panRight button
panRight.onPress = function() {
mapContainer_mc.onEnterFrame = function() {
newX = newX-4;
mapContainer_mc._x = newX;
panRight.onRelease = function() {
delete mapContainer_mc.onEnterFrame;
zoomIn.onPress = function() {
newScale = newScale+10;
_root.mapContainer_mc._xscale = newScale;
_root.mapContainer_mc._yscale = newScale;