Skip navigation
andersonOllie
andersonOllie Calculating status...
Currently Being Moderated

Mouseover highlight not aligned to shape

Feb 15, 2012 2:33 AM

Hi guys,

 

I'm sure i'm missing something painfully obvious (i hope anyway) but it's driving me mad.

I have 3 buttons (on this example), each has a mouseover so the button will highlight once the mouse enters the shape. This all works, however the mouseover area seems to be aligned half OFF of the shape.

EG the shape will highlight when hovering off of the shape on one side, and from half way accross the shape on the other.

 

Here are some grabs and the general code i have.

 

 

Hover Help 1.jpgHover Help 2.jpg

for(var x = 1; x < 4; x++)

{

 

 

                var currentBut = eval("but"+x);

 

 

                currentBut.onMouseMove = function(){

 

 

                                 if(this._xmouse > 0 && this._xmouse < this._width && this._ymouse > 0 && this._ymouse < this._height){

 

 

                                                this.gotoAndStop(2);

                                }

 

                                else

                                {

 

                                                this.gotoAndStop(1);

                                }

                };

}

 

 

 

[edit] - CS4 - Action Script 2

 

Thanks guys!

1266 Views   17 Replies   Latest reply: andersonOllie, Mar 6, 2012 1:10 AM
 
Replies
  • kglad
    62,113 posts
    Jul 21, 2002
    Currently Being Moderated
    1. kglad,
    Feb 15, 2012 7:47 AM   in reply to andersonOllie
    Report

    check your button's hit frame.  its contents are mis-aligned.

     
    |
    Mark as:
  • andersonOllie
    Currently Being Moderated
    2. andersonOllie,
    Feb 16, 2012 1:02 AM   in reply to kglad
    Report

    Hi kglad,

    Thanks for the reply.

    How do i do that? I'm fairly new to most of this.

     

    Thanks,

     

    Ollie

     
    |
    Mark as:
  • kglad
    62,113 posts
    Jul 21, 2002
    Currently Being Moderated
    3. kglad,
    Feb 16, 2012 6:26 AM   in reply to andersonOllie
    Report

    i re-read your message and it looks like you're using movieclip buttons and you're using code that would only work correctly if you movieclip graphics were aligned at the upper left of the movieclip's center-stage (that plus-sign on the movieclip's timeline).  your movieclip graphics are off-center.

     

    you could remedy by re-aligning your graphics or using the following code:

     

    for(var x = 1; x < 4; x++)

    {

                    var currentBut = eval("but"+x);

                    currentBut.onMouseMove = function(){

                                     if(this.hitTest(_xmouse,_ymouse)){

                                                    this.gotoAndStop(2);

                                    }

                                    else

                                    {

                                                    this.gotoAndStop(1);

                                    }

                    };

    }

     
    |
    Mark as:
  • andersonOllie
    Currently Being Moderated
    4. andersonOllie,
    Feb 17, 2012 1:11 AM   in reply to kglad
    Report

    Thanks kglad, brilliant!

    All fine now, although the hover area seems to be a rectangle (over diamonds), not a major issue though, and i can investigate that myself!

     

    Thanks!

     
    |
    Mark as:
  • andersonOllie
    Currently Being Moderated
    5. andersonOllie,
    Feb 17, 2012 1:29 AM   in reply to kglad
    Report

    In fact no, that looks pretty intense if what i've found so far is true.

    Do you know of a 'quick fix' for this, or should i start a new thread for creating a diamond hitarea for a vector image (currently rectangle hit area).

     

    No worries if not, thanks again!

     
    |
    Mark as:
  • kglad
    62,113 posts
    Jul 21, 2002
    Currently Being Moderated
    6. kglad,
    Feb 17, 2012 6:56 AM   in reply to andersonOllie
    Report

    you must be using a bitmap for your movieclip button and that bitmap must not have a transparent background.  to remedy, use a bitmap with a transparent background or convert your bitmap to a vector (modify/bitmap/trace bitmap).

     
    |
    Mark as:
  • andersonOllie
    Currently Being Moderated
    7. andersonOllie,
    Feb 20, 2012 1:14 AM   in reply to kglad
    Report

    Hi kglad,

    As far as i know they are all vectors (imported from Adobe Illustrator), they should also have transparent backgrounds.

    I tried the method you suggested but the 'trace' etc are greyed out and unclickable.

     

    Here is a grab from bringing the images in, showing the settings i've used to do so -

    Bitmap Help.jpg

    As before; if you don't know a quick fix for this i'm more than happy to start a new thread.

     

    Thanks!

     
    |
    Mark as:
  • kglad
    62,113 posts
    Jul 21, 2002
    Currently Being Moderated
    8. kglad,
    Feb 20, 2012 7:46 AM   in reply to andersonOllie
    Report

    in flash, create one diamond shape, that matches your movieclips' shape, using an alpha=0.  right click the shape, click convert to object, assign it a name (eg, mc), select movieclip and click ok.  that transparent movieclip will be in your library.

     

    drag that transparent movieclip from the library to your stage and place it over your first movieclip and assign it a name (in the properties panel), mc1.  likewise for the next two transparent movieclips (naming them mc2 and mc3) being placed over your 2nd and 3rd movieclips.

     

    you can then remove your previous code and use:

     

    var tl:MovieClip=this;

     

    for(var i = 1; i < 4; i++){

    tl["mc"+i].ivar=i;

     

    tl["mc"+i].onRollOver=function(){

    tl["but"+this.ivar].gotoAndStop(2):

    }

    tl["mc"+i].onRollOut=function(){

    tl["but"+this.ivar].gotoAndStop(1):

    }

     

    }

     
    |
    Mark as:
  • andersonOllie
    Currently Being Moderated
    9. andersonOllie,
    Feb 21, 2012 3:10 AM   in reply to kglad
    Report

    Hi kglad,

    That looks like just what i need, and very clearly described thank you!

    I've done all that you've said and all has gone smoothly, however nothing happens when i hover the shapes and i have this error -

     

    Syntax error. tl["but"+this.ivar].gotoAndStop(2):

    Syntax error.    tl["but"+this.ivar].gotoAndStop(1):

    Unexpected '}' encountered

     

    (Just to make sure i've mentioned it i am using AS2)

    Also i presume that i should edit the clear diamond shape to change colour once hovered, as the shapes did before?

     
    |
    Mark as:
  • kglad
    62,113 posts
    Jul 21, 2002
    Currently Being Moderated
    10. kglad,
    Feb 21, 2012 7:17 AM   in reply to andersonOllie
    Report

    replace the two  full colons ( : ) with semi-colons ( ; )

     

    and no, you don't need to add a hover state the the transparent buttons.  you're still using the hover frame of your movieclips.

     
    |
    Mark as:
  • andersonOllie
    Currently Being Moderated
    11. andersonOllie,
    Feb 22, 2012 6:09 AM   in reply to kglad
    Report

    Fantastic kglad, all works perfectly!

     

    Brilliantly helpful, thanks!

     
    |
    Mark as:
  • kglad
    62,113 posts
    Jul 21, 2002
    Currently Being Moderated
    12. kglad,
    Feb 22, 2012 6:56 AM   in reply to andersonOllie
    Report

    you're welcome.

     
    |
    Mark as:
  • andersonOllie
    Currently Being Moderated
    13. andersonOllie,
    Feb 27, 2012 2:47 AM   in reply to kglad
    Report

    Hi kglad,

    If you're not sick of me by now i have one final problem to overcome. (More than happy to start a new topic if that'd be better).

     

    The Flash works perfectly, no problems, however i am using them on Powerpoint slides in a program called Articulate (a simple program to house things like this as a whole media object on a website etc).

    The only issue with this is that i need to add links on top of each page, which link to other slides in the presentation. So not hyperlinks in the Flash code, slide-hyperlinks in Powerpoint.

     

    The Flash code should be enough to make the shapes have hover states, but not be a 'button', if that makes any sense? The hyperlink shapes i add on afterwards in Powerpoint should be the clickable areas with the cursor turning to a hand, but the Flash code by itself should just have a hover state with the cursor staying as an arrow.

     

    Does that make sense?

     

    Again, im more than happy to open this up to the community if it's a hassle!

     
    |
    Mark as:
  • kglad
    62,113 posts
    Jul 21, 2002
    Currently Being Moderated
    14. kglad,
    Feb 27, 2012 6:31 AM   in reply to andersonOllie
    Report

    copy and paste your message into a new topic.

     
    |
    Mark as:
  • andersonOllie
    Currently Being Moderated
    15. andersonOllie,
    Mar 1, 2012 2:45 AM   in reply to kglad
    Report

    Here's the new topic kglad

     

    http://forums.adobe.com/message/4236848#4236848

     
    |
    Mark as:
  • kglad
    62,113 posts
    Jul 21, 2002
    Currently Being Moderated
    16. kglad,
    Mar 1, 2012 7:01 AM   in reply to andersonOllie
    Report

    neds already answering that thread and it's generally rude for someone else to jump into that conversation.

     
    |
    Mark as:
  • andersonOllie
    Currently Being Moderated
    17. andersonOllie,
    Mar 6, 2012 1:10 AM   in reply to kglad
    Report

    Thanks for the info kglad, didn't know there were protocols within the forum.

     

    I think Ned is stuck for an answer though, so if you have any ideas feel free to PM me if posting may be considered rude.

     

     

    Thanks!

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points