Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Creating Hotspots in Flash 1

Status
Not open for further replies.

ha1ls45

Programmer
Feb 20, 2005
105
US
Hi everyone,
I have a picture of about 6 people all standing in a croud on different layers in Photoshop. I am trying to bring this into flash and have each person as a different button, but have the m still in the shape of their body. I tried to copy one person and paste it into a layer in flash, but it will also paste a big white box around them. How do I get rid of this?

Otherwise, is there a way I can paste the whole picture into flash and designate 'hotspots' in flash on each body? I don't see a pen, magic wand, or slicing tool in Flash???

Thanks,
Ha1ls45
 
In particular... I have this picture located here:


When you roll-over each person, I would like each of their bodies to brighten up so that you can see their real picture. Then when you click on them, I would like you to be brought to their bio.

Does anyone have any advice as to how to do this?

Thanks,
Ha1ls45
 
If you want to import an image from PS into Flash that isn't square shaped. e.g., has some transparency you have to save each image as a .png file. The downside of this is a huge file size. Alternatively, you could try this: paint each person with a brush ( on a separate layer), and apply mask (by right-clicking and choosing "mask") this will reveal whatever section of the image you want.
 
I used this effect here:
No png files were used - they're all jpgs. I have the main greyscale image, then for each person I have the slice that contains their image in colour. It doesn't matter if people overlap, because you're colouring only one person in each slice anyway. For the hotspot, I drew a shape over each person and when the hotspot is moused over, I fade in the slice containing the colourized person.

frozenpeas
--
Micfo.com Affiliate Program
 
Frozenpeas,
This is EXACTLY what I am looking to do! That looks awesome! Okay, so I can start with my darker image....then create a 'slice' in photoshop with that person in color? Do I import this into Flash or can I just copy and paste the .jpg in? It seems like when I paste it in - it pastes in a square even though my object is selected around the edges of the body - not the actual shape that I want in there. Then, how do I make a 'hotspot' on the exact edges of the body?

I also love the tip that pops up with the name. You did an excellent job.

Do you happen to have an example .fla that you could send me perhaps?

Thanks!!
Ha1ls45
 
I am in the middle of a move so the source files are on my other computer in a box at the moment.

You need to import the jpg into Flash, then convert it to a movie clip. You aren't importing the shape of the body... you are importing a rectangular graphic that contains the coloured person. When you mouse over one of my characters, a square graphic is being faded in. But since only the character is colourized, you don't noticed the rest of graphic (which is square) doing anything.

For the hotspot, like I said, you just draw the shape over the body. Then you convert that to a movie clip or even a button symbol. The hotspot is invisible, and you control the coloured pieces with some ActionScript.

Experiment a little and see what you come up with.

frozenpeas
--
Micfo.com Affiliate Program
 
Okay! I am going to give it a shot. Your details help a ton! Thanks again! :)

Ha1ls45
 
Okay, I have created 6 different .jpg's that I would like to have load in when I rollover a hotspot.

I am now just confused on how to create these hotspots. I have gotten as far as creating green square buttons that will show up when I rollover them. How can I make these invisible and when you roll over them, make my other .jpg fade in instead?

This is what it looks like now...

You'll have to forgive me, I am very new to flash!!

Thanks,
Ha1ls45
 
Where are you at with the brightened image of the person? This should be imported into your stage, converted to a movie clip, and then given an alpha value of 0. Mousing over the hotspots will change those alpha values (to 100).

frozenpeas
--
Micfo.com Affiliate Program
 
Okay, I had to take a couple of days off. Right now, I have imported the colored pictures onto the stage in the right locations. I have also made the invisible buttons actually invisible by moving the key frame just to the hit frame.

Now I cannot figure out how to add the action script to change the colored picture mc's alpha back to 100%. I clicked on the button and the + sign to try to find "onmouseevent", but I cannot find it. Does anyone know where this event is?
 
This is what I am using and it doesn't seem to work. I am putting it in the action script of the invisible button and my colored image is a mc called john_mc

Code:
on (rollOver) {
	this[john_mc]._alpha = 100;
}
 
HA! This worked....

Code:
on (rollOver) {
	john_mc._alpha = 100;
}
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top