[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6936
  • Last Modified:

Flash drag & scale image - setting initial size & scaling variables

This is regarding previous question: http://www.experts-exchange.com/Software/Photos_Graphics/Web_Graphics/Macromedia_Flash/Q_22408295.html
And basically using this method: http://www.sitepoint.com/article/actionscript-animation-flash

I'm trying to use this solution to pan & zoom a large map graphic - the map graphic is almost twice the size of the Flash stage. I'm using the Loader component to pull in the map graphic.

If I put the loader on stage, it pulls the graphic in, no problem. If I convert the loader to a movie clip, it pulls the graphic in, no problem. BUT as soon as I name either the loader on its own, or the movie clip containing the loader, I no longer see my graphic in the SWF. It looks like my script is making the graphic too small to see or moving it off stage. Here's the code on the main timeline:
target_mc.onPress = function() {this.startDrag();};
target_mc.onRelease = function() {this.stopDrag();};
target_mc.onReleaseOutside = function() {this.stopDrag();}

//IF I COMMENT OUT THE NEXT FOUR LINES, I CAN SEE & DRAG THE MAP GRAPHIC, BUT I CAN'T SCALE IT...
target_mc.targetWidth = target_mc._width;
target_mc.targetHeight = target_mc._height;
target_mc.nullWidth = target_mc.targetWidth;
target_mc.nullHeight = target_mc.targetHeight;

target_mc.onEnterFrame = function() {
      var speed = 5;
      this._width += (this.targetWidth-this._width)/speed;
      this._height += (this.targetHeight-this._height)/speed;
};
stop();

And here's the code on the zoom slider:
slider_handle.onPress = function() {
      this.startDrag(false, 0, 0, 100, 0);
};
slider_handle.onRelease = function() {
      this.stopDrag();
};
slider_handle.onReleaseOutside = function() {
      this.stopDrag();
};
slider_handle.onEnterFrame = function() {
      _root.target_mc.targetWidth = _root.target_mc.nullWidth * ((this._x)/50);
      _root.target_mc.targetHeight = _root.target_mc.nullHeight * ((this._x)/50);
}

Any help would be MUCH appreciated! Thanks
0
slovisa
Asked:
slovisa
  • 3
  • 3
1 Solution
 
rascalpantsCommented:
can you post the source files?

also, before we move onto anything... can check to make sure you have given the movieclips instance names and that the scope used in your code is correct...

rp
0
 
slovisaAuthor Commented:
I've made some changes so that it more closely resembles this solution:
http://www.sitepoint.com/article/actionscript-animation-flash
but it's still not written correctly, or working completely right. (I bumped up some numbers so that I could see the graphic onenterframe, but it's at the loss of a lot of scaling.)

You can download the FLA at
www.silverlinecreative.com/ee/map.zip

It would be nice if you could limit the dragging to the boundaries of the stage, so you can't see "blank" space behind the map, too... It's getting close, though.

Thanks!
0
 
slovisaAuthor Commented:
rascalpants - I see now that the problem is in these two lines:
   _root.target_mc.targetWidth = _root.target_mc.nullWidth * ((this._x)/50);
   _root.target_mc.targetHeight = _root.target_mc.nullHeight * ((this._x)/50);

I don't know why the nullWidth & nullHeight functions are in there; when I take them out it starts making sense to me. You have to take into account the actual size of the target_mc, and the size you want it to be when the slider is at the max/min zoom points. My graphic is ~800x800, so if I want it to zoom in/out by 50% (400px) on a 100 pixel slider, we're looking at:
100(max slider position "this._x")*x(unknown variable)+400(50% of my 800px mc)=1200(target size of mc at max slider position. So... 100x+400=1200 gives us a multiple of 8; changing those lines to:

    _root.target_mc.targetWidth = (this._x)*8+400;
    _root.target_mc.targetHeight = (this._x)*8+400;

Now the scaling works fine - except that you can still drag the MC offscreen and shrink it to the point where you can't get to it any more. If you have any suggestions for that problem, the points are still up for grabs. Otherwise, I'll post a follow-up question for that issue.

Thanks!
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
rascalpantsCommented:
for the scaling issue, you need to place an if/then conditional statement into the onEnterFrame for that part of the code...

basically you only perform the scaling if you are in between two desired numbers...  so 150% and 50%

so maybe something like this:

target_mc.onEnterFrame = function() {
      var speed = 5;
      if( (this._width > (this._width/1.5)) || (this._width < (this._width*1.5)) ){
            this._width += (this.targetWidth-this._width)/speed;
            this._height += (this.targetHeight-this._height)/speed;
      }
};


and for your dragging issue, you should use the properties for the startDrag() method to limit the positions..

here is the params you can use:  startDrag(  target  ,[  lock   ,  left   ,   top   ,   right  ,   bottom ] )

maybe try that...

rp
0
 
slovisaAuthor Commented:
Here's my question about limiting the drag, though - If you drag to the limit, you could then scale the graphic DOWN to reveal an edge anyway...right?
0
 
rascalpantsCommented:
maybe you can have the left, top, right, and bottom properties be dynamic then, based on the scale...  possibly a percentage.

rp
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now