Simulating image map functionality with flash?

Dev Shed Forums Sponsor:

February 1st, 2004, 06:15 PM

Dust

Contributing User

Join Date: Aug 2003

Location: Edmonton, AB

Posts: 77

Time spent in forums: < 1 sec
Reputation Power: 6

Simulating image map functionality with flash?

Hi guys

I have a web application where I create an image using php and GD. This image is currently returned to another PHP page as an image map. The user can then click on the image map to drill down to another 'zoomed in' image map, and so on.

This would be so much easier to do if I could do it in flash.

So here is the meat of my question.

I need to load a single image from a www URL, as well as probably a second file describing the hot spots on this image, and the possibly (Depending on what is drilled down to) a URL to load in a seperate IFRAME on the same page.

Is this possible in flash even, and if so, where should I look? I've spent almost a week looking for a way to do this with no luck.

Thanks guys!

Chris

February 2nd, 2004, 08:13 PM

Tann San

Gotta get to the next screen..

Join Date: Nov 2003

Location: Legion of Dynamic Discord

Posts: 4,715

Folding Points: 11109 Folding Title: Novice Folder

Time spent in forums: 3 Weeks 1 Day 11 h 50 m 46 sec
Reputation Power: 580

Hi, you could load the image in as a jpeg during runtime. That's done with loadMovie("mypic.jpg", 1);. Now you can do that inside a movie clip and use the co-ordinates in there for hot spot reference. You can use loadVars to load your hotspot data. I'm guessing that's 2d co-ords along with the url. Within the movie you loaded the image, the image will be positioned at _x=0 & _y=0. So now all you have to do is create a blank clip on top of the image using your hotspot data:

Code:

blankCan = _root.createEmptyMovieClip("blankCanvas", 1);
imageHol = blankCan.createEmptyMovieClip("imageHolder", 1);
///////////
// Now load the image
//
imageHol.loadMovie("fullImage.jpg", 1);
/////////
// Deal with loading your hotspot co-ords
//
loadVars("...........");
// DIY :¬)
/////////
// Now create some buttons using the hotspot data
// We'll assume you loaded it into an array of objects.
// Each object has 5 values - x, y, width, height and url
//
for(var i = 0; i < spotArray.length; i++)
   {
         newSpot = blankCan.createEmptyMovieClip("spot"+i, i+2);
         newSpot._x = spotArray[i].x;
         newSpot._y = spotArray[i].y;
         newSpot._width = spotArray[i].width;
         newSpot._height = spotArray[i].height;
         // Set up the button like behaviour
         newSpot.onRelease = function()
            {
                 getURL(spotArray[i].url, "_blank");
             }
   }

This can be cleaned up considerably as it is just a quick guide to one possible way of solving your problem.

__________________
-Tann

-Vote for your favorite ActionScript editor here.

February 6th, 2004, 04:08 PM

Dust

Contributing User

Join Date: Aug 2003

Location: Edmonton, AB

Posts: 77

Time spent in forums: < 1 sec
Reputation Power: 6

lol.. I'm sure I'm doing something wrong.. but I can't even get the fullImage.jpg to display... silly me

February 6th, 2004, 04:41 PM

Dust

Contributing User

Join Date: Aug 2003

Location: Edmonton, AB

Posts: 77

Time spent in forums: < 1 sec
Reputation Power: 6

This is the code I'm using...

Code:

_root.createEmptyMovieClip("oCanvas", 1);
oCanvas.createEmptyMovieClip("oImageMap", 1);


//Now load the image
_root.oCanvas.oImageMap.loadMovie("c:\\image.png", 1);

And it does absolutly nothing.

Also what kinda sux is that if I try to do something like

object_Idontexist.dosomething("hello")

It doesn't throw an error. Shouldn't I get an 'object does not exist error' or something like that... its making debuging SOOOO difficult.. and I only have three lines of code! lmao

I think I'm going back to c++.. lmao

Please someone help me out

February 6th, 2004, 04:51 PM

Dust

Contributing User

Join Date: Aug 2003

Location: Edmonton, AB

Posts: 77

Time spent in forums: < 1 sec
Reputation Power: 6

ooooooohh

Flash doesn't support PNGs...

and yet, when I load a PNG I don't get an error, and spend an hour debuging my three lines of code feeling like an idiot

sonofagun!!

There's got to be a way to get more error messages!!

February 6th, 2004, 04:52 PM

Tann San

Gotta get to the next screen..

Join Date: Nov 2003

Location: Legion of Dynamic Discord

Posts: 4,715

Time spent in forums: 3 Weeks 1 Day 11 h 50 m 46 sec
Reputation Power: 580

Hi, I think that was my bad and yours...

Code:

_root.createEmptyMovieClip("oCanvas", 1);
oCanvas.createEmptyMovieClip("oImageMap", 1);


//Now load the image
_root.oCanvas.oImageMap.loadMovie("c:\image.jpg");

I said there should be a level number with loadMovie, well I was wrong..at least with this particular usage. Also you were loading c:\\image.png. I dont think that's a valid path (in win) and I dont think you can load png files dynamically. Maybe you can but I was like 99% sure you couldnt.

February 6th, 2004, 05:13 PM

Dust

Contributing User

Join Date: Aug 2003

Location: Edmonton, AB

Posts: 77

Time spent in forums: < 1 sec
Reputation Power: 6

Thanks Tann!

Well, there is no level number with load movie, but there is a method (for post VS get) which is not needed for what I am doing, but it works.

I have to use c:\\filename.jpg because the \ is the escape character, and it escapes the first letter of the filename otherwise.. so \\ turns into a single \

And yeah, when I got rid of the png and instead used jpeg, it was fine

While I solved most of the problems I caused myself (lol) I've still got one strange one left...

Even though I've done the code just like you said, the onRelease event never get triggered.. no matter how hard I click! lol

Code:

createEmptyMovieClip("oCanvas", 1);
oCanvas.createEmptyMovieClip("oImageMap", 1);

//Now load the image
oCanvas.oImageMap.loadMovie("c:\\starmap.jpg", 1);

 oCanvas.createEmptyMovieClip("oHotSpot0", 2);
 oCanvas.oHotSpot0._x = 50;
 oCanvas.oHotSpot0._y = 45;
 oCanvas.oHotSpot0._width = 30;
 oCanvas.oHotSpot0._height = 30;

 // Set up the button like behaviour
 trace (oCanvas.oHotSpot0);
 trace (oCanvas.oHotSpot0.onRelease);
 oCanvas.oHotSpot0.onRelease = function()
 {
   	 trace("on the hotspot");
 }
trace (oCanvas.oHotSpot0.onRelease);

The trace (oCanvas.oHotSpot0.onRelease); statement proves the callback function is attached to the event, but for whatever reason it is never called.. no mater what even I try and use. Any idea what would be wrong here?

Last edited by Dust : February 6th, 2004 at 05:23 PM.

February 7th, 2004, 06:13 AM

Tann San

Gotta get to the next screen..

Join Date: Nov 2003

Location: Legion of Dynamic Discord

Posts: 4,715

Time spent in forums: 3 Weeks 1 Day 11 h 50 m 46 sec
Reputation Power: 580

Hi, trying to stretch a clip wont work here. you need to give it some content to make it the size you want. The easiest way is to draw an invisible box inside it:

Code:

can = _root.createEmptyMovieClip("oCanvas", 1);
img = can.createEmptyMovieClip("oImageMap", 1);
//Now load the image
img.loadMovie("desk.jpg");
hotty = can.createEmptyMovieClip("oHotSpot0", 2);
hotty.beginFill(0x000000, 0);
hotty.moveTo(0, 0);
hotty.lineTo(100, 0);
hotty.lineTo(100, 100);
hotty.lineTo(0, 100);
hotty.lineTo(0, 0);
// Set up the button like behaviour
trace(hotty);
trace(hotty.onRelease);
hotty.onRelease = function() {
	trace("on the hotspot");
};
trace(hotty.onRelease);

You could use something like:

hotty.lineTo(img._width, 0);

but you must then add an extra check to wait for the image to fully load before trying to judge it's dimensions. LoadMovie doesnt work instantly although to us it might appear so. If you use the above line in place of the others above...i.e use the height and width in the relevant places you will see that the size remains at 0. This is talked about elsewhere in the forum already with a few methods of how to deal with it. This is only really important if the images have different sizes. If your using a single size for all images then just use static values as I have.

February 7th, 2004, 01:20 PM

Dust

Contributing User

Join Date: Aug 2003

Location: Edmonton, AB

Posts: 77

Time spent in forums: < 1 sec
Reputation Power: 6

YES!!!

Tann thank you for the patience you should.. this is perfect! Thank you.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: