FORUMS: list search recent posts

Changing a button's clickable area?

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Andrew Lapointe
Changing a button's clickable area?
on Aug 23, 2010 at 1:41:27 am

Good day gentlemen,



I am trying to make a brain anatomy game in flash CS3 and I am having some difficulty getting the buttons to respect certain proportions. Allow me to elaborate.



I start with a picture like this one:

[IMG]http://i38.tinypic.com/2a9dv7n.jpg[/IMG]

http://tinypic.com/m/beu5uq/2



And then I bring it into photoshop and make a different layer for each different structure (in the screenshot I only did it for one structure but you get the point)



[IMG]http://i37.tinypic.com/s2fpq9.jpg[/IMG]

http://tinypic.com/m/beu5xy/2



Now what I would like to do is import my .psd file into flash and make every layer a different button. But I don't know of a way to view layers of a .psd file in flash. But here's the bigger problem. As you can see, it makes the "clickable" area for the button a rectangle shape.



[IMG]http://i36.tinypic.com/x52mar.jpg[/IMG]

http://tinypic.com/m/beu621/2



Whereas I would like for it to be the shape of the specific structure. If the clickable area is a rectangle then there is an overlap onto other structures which is not at all ideal. Especially when I get into smaller structures. What I want is for the button to be exactly like the layer in photoshop. Does anyone know how to accomplish this?

Or has anyone made a button that does not have a square as a clickable area....it's seems ridiculously simple but I can't find anything to change it.

THanks to anyone for responses.


Return to posts index

Mike Smith
Re: Changing a button's clickable area?
on Aug 23, 2010 at 3:49:04 pm

you've tried the hit frame approach without success ...?
http://www.awdsf.com/courseware/flash/flash5_buttons.htm
http://www.echoecho.com/flashbuttons01.htm


Return to posts index

demetri tashie
Re: Changing a button's clickable area?
on Aug 23, 2010 at 5:30:25 pm

hi andrew-
i can offer a way to do what i believe you want.
i'll assume you are using transparent layers in your photoshop document...

first, import the photoshop layered file (as a .psd),
and make sure you import it with these settings:
convert layers to : Flash Layers
and also check off:
Place layers at original position.

now all your areas are on separate layers.

highlight one layer. it WILL have the rectangular bounding box.
with this highlighted, go to Modify->Bitmap->Trace Bitmap
this changes it to a bitmap. them turn that bitmap into your movieclip symbol to use as a 'button' ( don't turn it into a "button" symbol )

if you highlight that symbol on the stage, it will still show a bounding box, but it's hit area will only be the opaque area of the layer. this can then have its alpha reduced to 0 if you want to make it an invisible button, for a whole slew of good mapping effects

note: tracing it as a bitmap is not 100% perfect. there are often remnant 'dots' representing the transparent area. if your layer was a solid color area, one trick is to click on the colored area and move it away from the rest. it should leave behind the trace/stray pixels. then you can turn that solid area into a movieclip symbol.

hope that helps.


Return to posts index


Andrew Lapointe
Re: Changing a button's clickable area?
on Aug 23, 2010 at 7:33:59 pm

I really want to thank Mike Smith for responding. Here is the part I have a hard time with. Your instructions were clear and nicely stated. But from what you are telling me there is no way for the imported layers to take on the shape they had in Photoshop?


Here is the link to the video:

http://www.screencast.com/users/canadian_hockey1/folders/Jing/media/1ac7b63...

this is getting rather frustrating because it so simple. Again I want to thank everyone and anyone for responding. It's going to be a rather stupid error that's causing this.


If you wish to try it yourself, I've uploaded the .psd file on rapidshare here

http://rapidshare.com/files/414702909/figure_20_week_1.psd

I can't see where I'm going wrong here


Return to posts index

demetri tashie
Re: Changing a button's clickable area?
on Aug 23, 2010 at 8:00:17 pm

you didn't seem to follow the instructions. here is a fla with your PSD imported, and worked on as i described.
for illustrations sake, i made the initial alpha .3, on rollover it goes to full alpha, and on rollout it goes back to.3
that should illustrate the point rather well.

note also that in your example you are using BUTTON symbols, not MOVIECLIP symbols as pointed out.
if you must use button symbol for a button, you still must first Modify->Bitmap->Trace Bitmap for this to work.

here is a working file, 1021_lobes.fla.zip
for you to look at and disect.
here is the SWF to look at. note that the 'button' in position was done as a movieclip symbol ( this one is at initial alpha .3 ) and the one out of position is done as a button symbol. when this one is rolled over, it turns red. either way, you CAN import a photoshop layer to use in this manner. it just takes that one more step....

posted swf:
demetri-media.com/FlashTalker/lobes.swf

hope that is clearer now and helps out.


Return to posts index

Andrew Lapointe
Re: Changing a button's clickable area?
on Sep 10, 2010 at 6:46:53 pm

First I want to apologize for the long time it took for me to reply, I was in the mixed of moving out for school. I tried downloading your .flv file but the file must be corrupt or something as you can see here:

http://hotfile.com/dl/68433230/69acc8a/fla_file_wont_open.swf.html
OR
http://reels.creativecow.net/film/10623

But yes this is exactly what I'm trying to do demetri. Thanks again for all of your help. If anyone posts a video on how to do this I'll gladly give them 10 bucks through paypal (you'll need a paypal account). Because I really want to be better at this.

Andrew


Return to posts index


Andrew Lapointe
Re: Changing a button's clickable area?
on Sep 10, 2010 at 6:48:57 pm

*.fla file not .flv


Return to posts index

demetri tashie
Re: Changing a button's clickable area?
on Sep 10, 2010 at 6:57:33 pm

what version of flash are you using to open this .fla ? CS4 or CS3 ?


Return to posts index


Andrew Lapointe
Re: Changing a button's clickable area?
on Sep 10, 2010 at 7:37:22 pm

My apologies, it seems that the video I uploaded was not of very high quality. This should be much, much better

CreativeCow Link
http://f1.creativecow.net/1076/fla-file-wont-open?uploaded=file

YouTube Link is uploading and will be ready in 25 minutes


Return to posts index


demetri tashie
Re: Changing a button's clickable area?
on Sep 10, 2010 at 7:41:26 pm

don't bother with youtube video. the reason you can't open it is becaus eit is a CS4 file, which CS3 can not open.

i am making a demo movie if that will help you...


Return to posts index

Andrew Lapointe
Re: Changing a button's clickable area?
on Sep 10, 2010 at 7:42:14 pm

I am using CS3, does that make a difference? I will try on my friend's computer tomorrow when I see him. Thanks again Demetri

Here is the YouTube video. It uploaded alot faster than I thought it would






Return to posts index

demetri tashie
Re: Changing a button's clickable area?
on Sep 11, 2010 at 1:29:18 pm

yes, as i said, it does make a difference. CS3 will not open that CS4 file.

here is the promised tutorial on doing this:
http://demetri-media.com/FlashTalker/importPhotoshop/photoImport.swf

it is not a video, but more like a power-point slide show. therre are 21 slides which will walk you through the whole process. let me know if this helps.

ps: remember that i amusing movieclip symbols for my 'buttons', rather than button symbols. if you do choose to use a button symbol instead, rememebr to duplicate the UP state for also the OVER and the HIT state, and you will not have code it, so you can omit slide #19


Return to posts index


Andrew Lapointe
Re: Changing a button's clickable area?
on Sep 14, 2010 at 9:37:28 pm

Hi Demetri,

WOW!! that's awesome, I loved that slide. Just for future viewers of this post, I really wanted to drive the point home (the goal of this forum is education and discussion right). So I created a step-by-step HD video of how to do it. It's not the best, but reading how to do something and seeing how to do it are 2 very different things. Here is the link to the YouTube video







So that I can hold up my end of the deal, is there a way to donate to you or CreativeCow. It may not be much. But as a med student I don't have the time to take flash courses, so this is indeed very inexpensive tuition if you will. I have on other thing I would like to do if you are interested. I've done it in ActionScript 2.0 but I'm having a hard time in ActionScript 3.0. Would you be interested?


Return to posts index

Grant Omohundro
Re: Changing a button's clickable area?
on Oct 14, 2014 at 11:22:43 pm

This was VERY helpful man. Thank you for the awesome help!!


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 CreativeCOW.net All Rights Reserved
[TOP]