17 Replies Latest reply on Sep 29, 2007 11:12 AM by lenrique21

# Relative movement

Maths is not my strong point. I have an image in a scrollpane I'm drawing a line on. My client wants a scaled full view of the line over the image. So I have a loader with the image scaled in it above and to the right of the scrollpane. The coordinates of the Scrollpane are x=37, y=286, w=772, h=400. The coordinates of the loader are x=544, y=15, w=260, h=206. I need to draw the line relative to the full sized line, the code for which is below, but I'm not sure how to handle the percentages. The scrollpane doesn't display the full image but only a portion of it. The average dimensions of the images are w1300xh1030. Is there any way of creating an accurate preview over this loader image, or should I just get a preview to pop-up somewhere once I manage to create a jpeg of the merged original image and the full-sized line?

This project is already into extra time so quick solutions would be most appreciated.

Thank you very much.

• ###### 1. Re: Relative movement
Hi --

I'm not exactly sure I can answer your question but I'll give it a shot, as
math is one of my strong points.

If the width of your scrollpane is 772 and the height of it is 400 then you
have a ratio of 7/4 (1.75) while your image size is typically 1300x1030
which is a ratio of 13/10 (1.3). The first thing I would do is set the
aspect ration of your scroller to one more inline with your images.

I'm not sure exactly what you are doing with the line and the size of the
image. Where does the user draw the line? To determine what percentage of
the image the user has drawn on you would calculate the
position of the mouse when the line draw stops relative to the position of
the left and right edge of the image.

If the loader is at (544,15) and the image is 1300x1030 then the image
extends from 544,15 to 1844,1045 right? If the user draws to point
(pointX,pointY) then the calculation for the percentages are as follows:

XPCT = (pointX-544)/1300
YPCT = (pointY-15)/1030

You can substitute (1300) for the image width and (1030) for the image
height if you are able to determine the image size at load time.

Rich

"Beatie3" <webforumsuser@macromedia.com> wrote in message
news:fcpu71\$58t\$1@forums.macromedia.com...
> Maths is not my strong point. I have an image in a scrollpane I'm drawing
> a
> line on. My client wants a scaled full view of the line over the image.
> So I
> have a loader with the image scaled in it above and to the right of the
> scrollpane. The coordinates of the Scrollpane are x=37, y=286, w=772,
> h=400.
> The coordinates of the loader are x=544, y=15, w=260, h=206. I need to
> draw
> the line relative to the full sized line, the code for which is below, but
> I'm
> not sure how to handle the percentages. The scrollpane doesn't display
> the
> full image but only a portion of it. The average dimensions of the images
> are
> w1300xh1030. Is there any way of creating an accurate preview over this
> image, or should I just get a preview to pop-up somewhere once I manage to
> create a jpeg of the merged original image and the full-sized line?
>
> This project is already into extra time so quick solutions would be most
> appreciated.
>
> Thank you very much.
>
>
>
> /////////////////////////////////////
> //This is all the Drawing the line code
> /////////////////////////////////////
>
> public function mouseDownHandler(evt:MouseEvent):void {
> // for (var i:int=0; i < numChildren; i++) {
> // trace("Found child: " + getChildAt(i).name);
> // }
> if (mouseX >37 && mouseX<792 && mouseY>285&& mouseY<670) {
> startX = mouseX;
> startY = mouseY;
> var dot:Sprite;
> dot = new Sprite();
> dot.name = "dotStart";
> dot.graphics.beginFill(0x00FF00);
> dot.graphics.drawCircle(mouseX, mouseY, 5);
> dot.graphics.endFill();
> dot = new Sprite();
> dot.name = "dotEnd";
> dot.graphics.beginFill(0x00FF00);
> dot.graphics.drawCircle(mouseX, mouseY, 5);
> dot.graphics.endFill();
> }
> }
> public function enterFrameHandler(evt:Event):void {
> if (mouseX >37 && mouseX<792 && mouseY>285&& mouseY<670) {
> sprite1.getChildByName("dotEnd").x=(mouseX-startX);
> sprite1.graphics.clear();
> sprite1.graphics.lineStyle(3, 0x0000FF);
> sprite1.graphics.moveTo(startX, startY);
> sprite1.graphics.lineTo(mouseX, startY);
> var lineLength:Number = new Number;
> lineLength = Number(startX - mouseX);
> this.pixel_tf.restrict = "0-9";
> this.pixel_tf.text = Number(lineLength).toString();
> }
> }
> public function mouseUpHandler(evt:MouseEvent):void {
> if (mouseX >37 && mouseX<792 && mouseY>285&& mouseY<670) {
> sprite1.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
> sprite1.removeChild(sprite1.getChildByName("dotStart"));
> sprite1.removeChild(sprite1.getChildByName("dotEnd"));
> sprite1.graphics.clear();
> sprite1.graphics.lineStyle(strokeWidth_ns.value,
> strokeColor_cb.selectedItem.data, 1);
> sprite1.graphics.moveTo(startX, startY);
> sprite1.graphics.lineTo(mouseX, startY);
> trace(this.parent)
> var line = sprite1.graphics;
> trace("Line variable created.");
> //holder_sp.draw(line);
> //image.draw(line);
> }
> }
>

• ###### 2. Relative movement
Fabulous, Rich, thank you very much. The exact image size is calculated when the bitmapdata object is created with this code:

var image:Bitmap = Bitmap(holder_sp.content);
var imageData:BitmapData=new BitmapData(image.width,image.height,false,0xcccccc);
imageData.draw(image,image.transform.matrix);

(Of course I'm having trouble with that too but ...) The line is a scale bar that's being drawn over an uploaded image from a microscope. The students calculate the length the scale bar has to be in pixels and then they draw the right number of pixels onto the image and download it with the scale bar drawn on. The clients - the people in microscopy - want the students to deal with unscaled images, but they want them to see the scale bar on the full image to judge its aesthetics. The image loads into the scrollpane and a scaled version with approximately the correct aspect ration loads into the loader. I'm assuming the students will always need to scroll the big image all the way to the bottom left corner as the scale bar has to go in the bottom right corner of the image. My project files are here. It's set to run an a virtual server at http://localhost/main.html.

Thank you very much for your help.
Beatie :D
• ###### 3. Re: Relative movement
Can I ask a quick question? Just a quick check.
Last time I looked at it, the line you were drawing was external to the scrollpane and the full size image. This meant that if the line was drawn and then the image was moved in the scroll pane, the line remains stationary but the image moves below it.
Is this the required behaviour or do you want to line fixed relative to the image as soon as it is drawn - so it will scroll too? If that is the case, it may actually make things a lot easier (at least I believe it will).
• ###### 4. Re: Relative movement
Absolutely! That's what I wanted it to do in the first place, draw directly on the image so they could just download, but I've had all sorts of problems making that happen, mostly because of the class file situation. It would be great if you had some ideas about how that could be achieved.
:D
• ###### 5. Re: Relative movement
OK. I'll take a look now. If you can't draw directly on the image (I've never tried) then its probably best to have it inside a container clip and just add another child clip to that (so its on top in the depth order - however as3 does it... I'm still learning) and use that as the drawing target. Then you take your bitmap snapshot of the container clip. How you do that inside a scrollpane I'm not sure yet... but I'll give it a shot.

• ###### 6. Re: Relative movement
OK. I was able to make it draw on the content inside a scrollpane. I just did this separately as a test case. I'll put it up somewhere soon for you to download so you can take a look at it.

Once the image is loaded into the scrollpane, I just added it as a child to a new 'holder' movieclip, then added another child to that to serve as the drawing layer. Then I set the scrollpane's source to point to the new 'holder' movieclip. This may not be the best way to do it.. I think the content could just be loaded into a MovieClip first and then set to the source property of an empty scrollpane...I dunno. Either way it works as is.

Then I can draw inside the scrollpane. Perhaps with this approach you can also just duplicate the movieclip (does that work in as3 so that it includes the child clips?) and display a scaled down version of the whole thing rather than loading it twice and trying to mirror the drawing activity. If this works you would just need to update on each change of the line drawing.

I haven't tried to integrate this approach into your code... I thought I'd let you have a go at that. Maybe if you strike problems I can take another look at that later. Meanwhile I'll post a download link in a few minutes. Just need to find somewhere to upload it.
Stand by I'll post a link soon.
• ###### 8. Re: Relative movement
Mythic as ever, GWD, thank you very much. The real problem with this part of it all is that I'm trying to get the variables from loading.as - namely the actual images loaded through that script - to be recognised by the drawing script in main.as. This referencing of .as files is very tricky and it's the thing that is making everything else really really hard. I've tried merging the code into the main.as file with no joy. I've imported, I've used the supposedly magic m:*=parent.this; I've moved everything from one class file to the other and shifted all the drawing code into loading.as, and still the little ******* won't work. It's a great idea to draw directly to the image and then preview the movieclip. I like it, I like it a lot, but I's at a loss as to how to get my files talking to one another.
Thank you very much for your sterling effort.
:D
• ###### 9. Re: Relative movement
OK. I'll take a look now. I tend to break things out like that and get them working in isolation whenever I'm trying something new. And as3 is new to me too. I think I probably could have used a sprite instead of a movieclip there.

I'll see what I can do with your code now. But lunch will interrupt me very soon so I'm guessing it will be a couple of hours before I reply.
• ###### 10. Re: Relative movement
LOL, that's lovely, thank you, but no rush. I came home and worked on it, but it's getting towards bedtime for me. I totally agree the separating it out is a good way to test concepts. My problem is all the concepts are good but there's something goofy about the context. I still like the movieclip. Sprites are sooooo AS3. I can get my head around loading an mc with the mouse up, but I'm not as familiar with the sprites.

Thank you, Mr Myth!
:D
• ###### 11. Re: Relative movement
Well, I hope I haven't made too much of a mess of it.

(the page has been updated).
I haven't really done much with bitmapData even in as2...so that parts a little grey.. and the mouseup/mousedown handling isn't perfect because you can mousedown inside the check area and mouseup outside and get more dots than you should have... I'll take a look at that tomorrow if you haven't fixed it.

Others here are far more as3 savvy than I am so may offer better advice. I'm way more comfortable with as2 too, but I want to start using as3 more. Even if its scary.
• ###### 12. Re: Relative movement
Seriously, GWD, you ever find yourself in Sydney, I owe you dinner That is huge. I now get the passing the references bit. I was trying to do it via parameters in the init function and making a dogs breakfast of it. The spriteListen function really clears things up for me. Thank you so much ! I'm now going to use the JPGEncoder to pass the data to a byte array for download. When I've got that working I'll take a look at those green dots. For the time being I've at least made it so the clearPixels function deletes any extra green dots that are lying around; just added:

sprite1.removeChild(sprite1.getChildByName("dotStart"));
sprite1.removeChild(sprite1.getChildByName("dotEnd"));

Thank you again. I'll post it all up once it's fully functional. It's really been a group effort.
• ###### 13. Re: Relative movement
Here it is! Here is the mostly finished scale bar tool that's been driving me insane and leading me to drive you all insane. It works. It needs a little tweaking and a "Please wait" sign for when the image is downloading, but it's basically all there.

I originally built this in AS 2.0 in about 40 hours, but the loss of image quality led me to rebuild it in AS3, which has been quite a trip.

Thank you all very much,
:D
• ###### 14. Relative movement
Lol, I left Sydney last year and brought my family to live in the French countryside with a dream to do freelancing work from home. I might end up back in Sydney one day, but there's no need to feel you owe me (although its a generous offer, thanks!). All you need do is be grateful - and you have been (most people say thanks but some don't).

In general people help out here (well I do anyway- and I think others do) to share their knowledge and gain respect from others, and also to learn:sometimes troubleshooting others issues is the best way to learn.

I think its a challenge learning a new language (variant) like as3 and implementing/combining changing 3rd party classes for what is a reasonably advanced project all at once like you're doing. But I think you're close to being done. If you're going to be using as3 in other projects over time I'd encourage you to come back to this one in say 3 months and see how quick you can do a rewrite. You'll probably be surprised how easy you find it.

Look forward to seeing the results.
cheers,
GWD
• ###### 15. Re: Relative movement
Its working great! But I still see a little glitch with the mouse handling and the dots and sometimes the line doesn't show up in the 'key' image at the top right after a new one is drawn. I'll take another look later today and see if I can figure out that part.
The jpeg exporting works well.
• ###### 16. Relative movement
Well dinner for the whole family then, GWD, if you find yourself back down here one day. Sounds like a great sort of seachange though. I had a day off to celebrate it working. I'm tidying it up today. If I get those bugs out I'll post a final version and the link for its public appearance.

Now I only have to battle their server settings, but that's O.K. knowing that they won't be my fault.
Thanks again,
:D
• ###### 17. Re: Relative movement

why don`t you try

http://www.flashden.net?ref=luke

check it out!! Great files for 0.5 U\$S!!!