Resizing a buttons clickable area

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?

I really want to thank skarthiks 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/1ac7b639-0272-4f80-9a1 0-91bf1622aa5d
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 really don't see where I'm going wrong. If you require more video/screenshots I will be happy to upload them for everyone

Similar Messages

Hi all, Since I updated to Mavericks I am having trouble with Safari showing all the buttons/clickable options, but they are gray and will not work. Specifically, the Trash Can/Delete and the "Move to" folder button simply do not work. Any ideas?

Hi all, Since I updated to Mavericks I am having trouble with Safari showing all the buttons/clickable options, but they are gray and will not work. Specifically, the Trash Can/Delete and the "Move to" folder button simply do not work. Any ideas?

Please post a screenshot that shows what you mean. Be careful not to include any private information.
Start a reply to this message. Click the camera icon in the toolbar of the editing window and select the image file to upload it. You can also include text in the reply.

Group not resizing correctly when contents are moved programmatically

Hi there,
My apologies in advance if this is a known issue. I searched the forums but I was unable to find a discussion about this topic. The issue we are running into is when we programmatically move the contents of a Group which is in turn enclosed within a Scroller beyond the Scroller's limits the position of the Group within the stage is incorrectly calculated. This will cause mouseEvents in the area beyond the Group's limits to be "ignored" among other problems.
I have created an application to illustrate the problem, we are in 4.1:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
    minWidth="955" minHeight="600"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function onGroupClick(event:MouseEvent):void
                Alert.show("It works");
            private function onButtonClick(event:MouseEvent):void
                rect.x += 500;
                rect.y += 500;
        ]]>
    </fx:Script>
    <s:Scroller
        width="100%" height="100%">
        <s:Group id="myGroup"
            width="100%" height="100%"
            click="onGroupClick(event)">
            <s:Rect id="rect"
                x="0" y="0" width="10" height="10"/>
        </s:Group>
    </s:Scroller>
    <s:Button
        label="Move Rectangle"
        click="onButtonClick(event)"/>
</s:Application>
Steps to reproduce:
Click anywhere in the screen - notice that an alert that reads "It works" shows up.
Click on the "Move Rectangle" button enough times for the coordinates of the Rectangle to exceed the limits of the Scroller, hence producing scroll bars.
Scroll all the way to the right and to the bottom.
Click right next to the right bottom corner - notice that no alert is displayed. The reason is the Group has not resized correctly hence we are actually clicking outside the Group. Resizing your browser window for example will cause the Group to resize and events will again "work". FlexSpy will make things pretty apparent as well.
Any pointers regarding where this bug lives in the source code or suggestions on how to fix this would be greatly appreciated, this issue is causing us a lot of pain.
Thanks in advance!!
~ TheMadPenguin

Thanks for logging this in the bugbase: https://bugs.adobe.com/jira/browse/SDK-29112. The latest comments there say:
Reproduced in 4.0.0, 4.1.0
Confirmed fixed in 4.5.0.19764
A workaround for the 4.0.0 and 4.1.0 release would be to put the click handler on the Scroller instead of the viewport.
Note: This bug seems to be fixed, but the fact that the width/height of the Group doesn't change is still consistent (and correct). Group has a concept of size and content size, scrolling is enabled when the content size is larger than the size (with Group.clipAndEnableScrolling set to true which Scroller sets automatically).
See this spec for more details: http://opensource.adobe.com/wiki/display/flexsdk/Spark+Viewport
Hans has a good article here: http://hansmuller-flex.blogspot.com/
Here's a simple example that demonstrates width does not change:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
     <s:Scroller width="100" height="100">
         <s:Group id="viewport">
             <s:Rect width="100%" height="100%">
                 <s:fill><s:SolidColor color="red" /></s:fill>
             </s:Rect>
             <s:Button id="btn" label="out of view" y="150" click="btn.y += 50" />
         </s:Group>
     </s:Scroller>
</s:Application>
You might expect that this example should have a red background behind the Button, but it does not. That is because width/height of 100% on the Rect is 100% of the width/height of the viewport, not the contentWidth/contentHeight.
One way of getting the behavior where the Rect expands across the whole content size would be to bind to contentHeight:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
     <s:Scroller width="100" height="100">
         <s:Group id="viewport">
             <s:Rect width="100%" height="{viewport.contentHeight}">
                 <s:fill><s:SolidColor color="red" /></s:fill>
             </s:Rect>
             <s:Button id="btn" label="out of view" y="150" click="btn.y += 50" />
         </s:Group>
     </s:Scroller>
</s:Application>
Note: You shouldn't specify or change the size of the viewport Group inside of a Scroller. The Scroller component manages the size of the Group in a specific way and if the Group has a size that conflicts with that then you can get into a bad situation that might cause infinite loops. Notice in my example the viewport Group has no size set on it.
Thanks to SDK QE for the info!
-Heidi

(Please Help) making buttons clickable (layout done in photoshop)

I am a newbie to all of this. I been trying to learn html/css
and I am still learning it but I needed a quick way to get my
website up and running. So, I created my layout in photoshop, I
sliced it and imported it anything dreamweaver. I made the content
area editable. Now I have 10 buttons that needs to be clickable. I
was on my index.html page and use the hotspot tools to try and make
them clickable. Indeed it did on my index page. Was I suppose to
use the hotspot tools or was I suppose to select the image, replace
it and then link it (when I tried that way at first, it messed the
page and had boxes and lines everywhere, like the page was broken
up, I really dont know what I did wrong there)
My problem is that how do I make all 10 pages of my website
buttons clickable without having to go to each page, like the about
page, services page, contact page, etc.... and using the hotspot on
all 10 pages?
Do I have to make it as a template or something?
Here is a picture of the problem...What did I do wrong or how
to fix the problem?
http://i39.tinypic.com/2ltmuzs.jpg

So many problems, so little time. First and most importantly,
I admire your courage to "forge ahead", but you need to start with
the basics (some of the dreamweaver tutorials, template pages, etc.
and learn slowly and methodically.) A well functioning site is far
more important than a graphically pleasing site...
There are many apparent problems based on your jpg, but can't
address any without seeing the code.
Buttons: If they are separate slices, they don't need image
map "hot spots" to link them. Simply select one, and assign a link
to it via the properties window. If you saved your entire "header
graphic" as all one piece, and placed it into your page, that would
be when you would want to assign "hot spots" to each section of the
graphic, but if they are separate pieces, there is no need for the
hot spots.
Templates: Yes, a template is the best way to ensure each
page functions and has the same links as the rest. If you dont have
a template set up, you will need to assign all of your links
separately to each page of your document. To create a template, you
first need to create one good, functioning page, then save as
template. Once a template, you'll need to assign which areas you
want to be editable (usually the "content area"). The advantage of
a template is also that if you need to make a global change to all
of the pages somewhere down the road, the change will automatically
update itself on all pages. After the template is created, create a
"New page from Template".
By the looks of your jpg image, you have a whole host of
other problems with the way the page is set up - if you're using
tables to compile, you aren't using them well. The more complicated
you try to slice up a single table, the likelyhood of problems like
you're showing multiplies exponentially - keep it simple.
Experiment with "nested tables" to see if that helps, but DON"T
OVERDO... If you're using css - do some reading, or try to begin
with one of the Dreamweaver template pages to start, then slowly
modify and test as you go - it's tricky at first.
For that matter, if you don't have any "rollover" effect or
anything else going on in the top area, you may be far better off
saving it as one piece and image mapping the "hot spots" for your
links, and it won't break apart the way you're showing.
Keep trying, but take it slow - take a course or purchase a
tutorial dvd - it is well worth the investment and will save you
countless hours of frustration and "stabbing in the dark"...
Hope that helps - don't be in such a hurry to get your site
"live" - take your time and it will get easier...

Blocking / obstructing clickable area

From the title, you'd probably think I am facing a difficulty where some element is blocking another, such as a non-clickable image being absolute-positioned right over top of a button.
However, it is the opposite: I am wondering if it is possible to intentionally block a clickable area by placing some sort of other element (perhaps a clickable element that does nothing when you click it) over top. How does the stack work when you add elements -- is the last element added the "top" one in the view? And, if so, does its clickable properties take precedence over any clickable items underneath of it?
I'm specificallty trying to set some sort of "non-clickable" invisible blocker overlay on top of a normally-clickable area, in order to prevent clicking it until a certain condition has been met (in this case, I can't simply turn on or off a "clickable" property for that element...)

Did the trick, thanks!
If anybody has a suggestion for how to make an "invisible" button (but one that is technically still there, so technically I am talking about doing a "transparent" button, not one where visible=false), let me know.
Throwing a button higher up over the click area blocked it nicely

Button active area

So I've made my "button group" in photoshop. But I don't want the images in that group to govern the boundaries of the clickable button. Is there a way to map only a part of that group to be clickable?
Thanks!

ptelian wrote:
Can my button highlight be not inluded in the button group?
It could be, but then it would no longer be a button highlight - just a plain graphical layer, always visible. In DVD menus, highlights are attributes of buttons only, so your button subpicture layer must be within a button layer set/group.
It is possible to give the illusion of what you are requesting by using multiple linked menus from buttons that are set to Auto-Activate. But anything more than a few buttons will be a lot of work to set up, and will not work as expected in a software DVD player if you mouse over the button - the user will have to click the button to go to the next menu to see the "highlight".
p.s. : Button rectangles cannot overlap in a menu. If your design is such that this is what you want, you will have to do the workaround I mention above, or abandon your design. Personally, I prefer working within the limitations of the format and would therefore choose the latter. You'll find that most Hollywood DVDs also work within the limitations of the format.
Message was edited by: jbowden

Getting error message in debug "Page contains page items/buttons which are not assigned to a region!"

Hi,
I created a form and when I submit, it goes through but there is no "success" or "failure" message on Apex. I tried debugging it and got this message:
"Page contains page items/buttons which are not assigned to a region!"
I looked at the page definition and it seems like everything is assigned to a region. Much appreciate your help.
Thanks!

For your message, the relevant branch needs "include process success message" to be checked - and a value in success/failure in your process.
Check the submitting & landing page for items not in a region. Under the items section there may be items listed separate to those under specific regions.
It's possible these are related, but not guaranteed.

Button Images are not shown

Dear All,
In one of our test instance, some button images are not shown, whereas some are.
They are shown as grey button.
I searched metalink, according to them patch 1238573 should be installed, which is already installed.
What could be the reason?
Also, is there any way to find out which images are missing?
Regards,
Ashish Shah

Hi
I've seen this happen a few times. The solution is usually to synchronise something called 'the X-Server' with the middle tier. I'm afraid that the technology is over my head, but it does work!
The X-Server controls how images are rendered in the e-Business Suite. Your DBA should know what this is and it's a simple matter of stopping and restrating the X-server.
That should do the trick!
Regards
Tim

[SOLVED]dzen clickable areas

I am using dzen as a status bar in DWM and I want to know how I get the clickable areas to work. I have looked over all the place and I am still confused. Also I am piping conky to dzen.
Any help would be much appreciated.
I solved my problem. It just took reading dzen's documentation some more.
Last edited by xly15 (2012-11-30 21:33:11)

I am using dzen as a status bar in DWM and I want to know how I get the clickable areas to work. I have looked over all the place and I am still confused. Also I am piping conky to dzen.
Any help would be much appreciated.
I solved my problem. It just took reading dzen's documentation some more.
Last edited by xly15 (2012-11-30 21:33:11)

How to remove the buttons which are coming from a report?

Hi All,
I need to remove the buttons from an iview which is a sap transaction. when i execute the report program which uses a ldb (PCH) shows a selection screen having all the buttons.
We have created variants for this.Now i want to remove the buttons which are coming from the report program.how to do this ?
Lakshmi.

Hi,
I think u r mentioning about the addition buttons that appear in the selection screen when using a logical database. for removing these buttons u can use a function module RS_SET_SELSCREEN_STATUS for setting ur own pf-status
do this in "at selection screen output" of the program..
in the tables parameter, u have the option for giving the ok-codes that u want to remove. append all the ok-codes into this table.
for getting the ok-codes u can use "tab" and go the button.. press F1. it will give the ok-code.
Regards,
Anoop

Satellite M70: Control button keys are not working

I currently reformatted my M70 to WinXp Pro Sp2, downloaded all related TOSHIBA drivers and related programs [ie. Toshiba control button driver / program] and system is running normal. However, CONTROL BUTTON keys are not working, was working fine with XP Home edition and Win Media but when I called Toshiba Support they couldn't help me because I had upgraded to Xp Pro. My Question is...Is there a fix or a solution to this issue and where can I download or find this fix.
Thanks
Emm

Hey Folks
Thanks for the advice, however, I did download the control driver and the controls program for the M70 model AND installed them in that order. The Controls Driver installs correctly but unfortunately, when installing the Controls Program, I get a message that the program will not install because it's not the right version for my M70-CL3 [PSM73C]. Not sure what to do here. I would think that everything should work properly seeing as taking the step up to XPPro SP2 isn't that far of a stretch.

My nano ipod fell this very day and the button and - are inserted and as soon as I light my ipod his démare on another menu with "ok to disconect" help me please I have expensive invests for me to pay it.

My nano ipod fell this very day and the button and - are inserted and as soon as I light my ipod his démare on another menu with “ok to disconect” help me please I have expensive invests for me to pay it.

Probably has hardware damage from the fall. Take the iPod Nano to an Apple store or an AASP. Whichever is more convenient for you.

The menu widget doesn't allow me to resize individual buttons!!!

Hi!
Since the latest update to muse, the menu widget just goes nanners!
It does not matter whether I untick 'edit together' and select 'unifor spacing' I still can't seem to resize individual buttons like I used to with muse 5 or 6. Furthermore, the menu widget will start resizing itself like crazy back and forth in any direction even if I slowly drag the vertical size up/down and so on.
What is going on?
I have a client waiting for his website and I can't even use the thing anymore since Jan 22 update (which I just installed today). I'll still work around it as it's not the actual menu I need anyway, just something to overlay over a photoshop bar to link to pages, but it still bothers me a lot that the widget is utterly useless now.
Any ideas?
Muse 7.2, Build 232
Windows 8.1

Hi RimVai!
I repeat, you must build up every button separately and link each button in Hyperlinks to the right Page as you did on video.
Please follow the instructions:
1. At first make only "Home Page".
2. Go to "Master Page".
3. Copy "Home Page" and paste it on "Master Page" by using Paste in Place feature.
4. Drag "Copy Home Page" to the right and you can edit "Copy Home Page" as you want.
5. Add "Copy Home Page" on Plan Mode and change the name of the Page.
6. Link Pages in "Hyperlinks" to the right Pages.
Best Regards
TaikaJim

Are "use small icons" resized 32x32's or are they separate icons altogether

Hi,
I'm creating icons for a Mac application for the first time and I have the following question: When "use small icons" is OFF, a 32x32 icon is displayed. When "use small icons" is ON, are the 32x32's dynamically resized by the OS, or are they separate icons altother? If so, what size icons are they?
I need to know whether or not I need to develop two icons for each toolbar button.
Thanks,
Don

Thanks. Tried it. The size of icons is great but now the part of the screen is missing. For example, he likes going into his music app, yes, it was easier for him to see and select, but once in the app he couldn't see the sides, so he couldn't select song without a double-tap to get it out of zoom. I will see if I can arrange his pages so that all icons show. This is a sort of work around. Larger icons would be a better solution. My husbands illness makes him akin to a person with ALS, so his ipad is his prized possession.

JFrame: resize NO, buttons minimize / maximize YES, HOW???

hi fellows,
i want a JFrame which you can't resize, but when i set the option resizeable to false, the buttons at the top right disappear, except for the "X"
the minimize and maximize buttons are gone :-(
i want these back!!
or is there another way to prevent my frame from being resized?
thx in advance,
SpeciesXX

For me only the maximize button disappears because a maximize of the frame is a resizing of it. The minimize and close buttons are visible and working.
I'm not sure of how to accomplish that a frame shall not be resizable but able to be maximized, or if it's even possible.
//David

Resizing a buttons clickable area

Similar Messages

Maybe you are looking for