13 Replies Latest reply: Feb 9, 2013 10:17 AM by Ned Murphy RSS

    Custom Cursors with rollovers.

    mentalcase129 Community Member

      So I know how to make a custom Cursor in flash Pro CS5 but if I want that custom cursor to change to something else of my own design when it's over specific objects how would I go about doing that?

        • 1. Re: Custom Cursors with rollovers.
          Ned Murphy CommunityMVP

          Your cutomer cursor could be a movieclip with multiple frames wherein interaction with the different objects command the custom cursor to change frames.

           

          You would need to have some code in place to detect the "over" status (either a rollover listener or a continuously monitored hit test approach could work).

          • 2. Re: Custom Cursors with rollovers.
            mentalcase129 Community Member

            I actually figured out a way to do it using a combination of commands from the snippets and it worked quite well...more or less the same set up as you described here I think.  But I did run into one odd glitch though.  I've got two buttons that prompt two different cursor icons when rolled over.  They are both still functional and the rollover cursors still turn on and off as they're supposed to...but if I click on one of the buttons(litterally just the one, the other one is fine) it leaves behind and imprint of the rollover cursor.  If I click that button 3 times, then 3 copies of the rollover image will be left behind on the screen and will stay there until I rerender and start again.  The navigation of the whole site still works as it's supposed to and the cursor switches back and forth as it should, it's just this odd glitch.  Both buttons and cursor rollovers are set up exactly the same way but only one of them prompts the glitch.  Any thoughts what might be causing that.

            • 3. Re: Custom Cursors with rollovers.
              Ned Murphy CommunityMVP

              No idea.  What code are you using for the button that is giving you the problem?

              • 4. Re: Custom Cursors with rollovers.
                mentalcase129 Community Member

                The button has a click event to go to the previous frame.  Then it also has mouse over and mouse out events to switch the custom cursor on and off.  I basically added an over event and then put the custom cursor code into it's action space...same thing with the out event to turn it off.

                • 5. Re: Custom Cursors with rollovers.
                  mentalcase129 Community Member

                  Here's the error message I'm receiving.  These error messages don't appear when I initially render the project, only when I click on the button that causes the image of the cursor to get left behind.

                   

                  ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.

                      at flash.display::DisplayObjectContainer/removeChild()

                      at website2_fla::PictureRBG_14/fl_MouseOutHandler_2()

                   

                   

                  Does this mean anything to anybody?

                  • 6. Re: Custom Cursors with rollovers.
                    Ned Murphy CommunityMVP

                    Somewhere in your code you are trying to call the removeChild() method when that child is no longer a child, assuming it once was.

                     

                    This can often happen when you have some repeating/looping code that re-executes when it should not.

                     

                    One way to overcome the problem is to stop the removeChild() execution.  Another possible solution is to put a consitional on the removeChild() execution that tests if the child is a child before trying to remove it.

                    • 7. Re: Custom Cursors with rollovers.
                      mentalcase129 Community Member

                      I'm not sure I know how to put a consitional on the removeChild() execustion.

                       

                      The remove child is there so that the custom cursor will disseappear when the mouse is not over the specified object.

                      • 8. Re: Custom Cursors with rollovers.
                        mentalcase129 Community Member

                        Oh sorry...you mean conditional...I still don't know how to do that though lol.

                        • 9. Re: Custom Cursors with rollovers.
                          Ned Murphy CommunityMVP

                          My bad... I type in the dark too often and don't catch my own mistargetings of keys.

                           

                          If you show the code involved with the removeChild aspect of your design I (or someone) might be able to help you with it.

                          • 10. Re: Custom Cursors with rollovers.
                            mentalcase129 Community Member

                            So here's the code for both both buttons and their rollover actions.  Like I said it works fine for one but not the other.  The forward button is fine, but when the back button is clicked it leaves behind a stamp of the rollover cursor.

                             

                            /* Mouse Over Event

                            Mousing over the symbol instance executes a function in which you can add your own custom code.

                             

                             

                            Instructions:

                            1. Add your custom code on a new line after the line that says "// Start your custom code" below.

                               The code will execute when the symbol instance is moused over.

                            */

                             

                             

                            backbtn.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler_2);

                             

                             

                            function fl_MouseOverHandler_2(event:MouseEvent):void

                             

                             

                            {

                            parent.addChild(backphoto);

                             

                             

                            backphoto.addEventListener(Event.ENTER_FRAME, fl_CustomMouseCursor_2);

                             

                             

                            function fl_CustomMouseCursor_2(event:Event)

                            {

                                      backphoto.x = stage.mouseX;

                                      backphoto.y = stage.mouseY;

                            }

                            Mouse.hide();

                            }

                             

                             

                            /* Mouse Out Event

                            Mousing out of the symbol instance executes a function in which you can add your own custom code.

                             

                             

                            Instructions:

                            1. Add your custom code on a new line after the line that says "// Start your custom code" below.

                               The code will execute when the symbol instance is moused out of.

                            */

                             

                             

                            backbtn.addEventListener(MouseEvent.MOUSE_OUT, fl_MouseOutHandler_2);

                             

                             

                            function fl_MouseOutHandler_2(event:MouseEvent):void

                            {

                            parent.removeChild(backphoto);

                            Mouse.show();

                             

                             

                            }

                            /* Mouse Over Event

                            Mousing over the symbol instance executes a function in which you can add your own custom code.

                             

                             

                            Instructions:

                            1. Add your custom code on a new line after the line that says "// Start your custom code" below.

                               The code will execute when the symbol instance is moused over.

                            */

                             

                             

                            Forwardbtn.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler);

                             

                             

                            function fl_MouseOverHandler(event:MouseEvent):void

                            {stage.addChild(nextphoto);

                            nextphoto.mouseEnabled = false;

                            nextphoto.addEventListener(Event.ENTER_FRAME, fl_CustomMouseCursor);

                             

                             

                            function fl_CustomMouseCursor(event:Event)

                            {

                                      nextphoto.x = stage.mouseX;

                                      nextphoto.y = stage.mouseY;

                            }

                            Mouse.hide();

                            }

                             

                             

                            /* Mouse Out Event

                            Mousing out of the symbol instance executes a function in which you can add your own custom code.

                             

                             

                            Instructions:

                            1. Add your custom code on a new line after the line that says "// Start your custom code" below.

                               The code will execute when the symbol instance is moused out of.

                            */

                             

                             

                            Forwardbtn.addEventListener(MouseEvent.MOUSE_OUT, fl_MouseOutHandler);

                             

                             

                            function fl_MouseOutHandler(event:MouseEvent):void

                            {

                            stage.removeChild(nextphoto);

                            Mouse.show();

                             

                             

                            }

                            • 11. Re: Custom Cursors with rollovers.
                              Ned Murphy CommunityMVP

                              I notice you have some functions nested in other functions - that's asking for problems.  Move them out on their own.

                               

                              Why do you use "parent" for one child and "stage" for the other?

                              • 12. Re: Custom Cursors with rollovers.
                                mentalcase129 Community Member

                                This was largely put together with snippets.  The 'parent' and 'stage' came from that.  Which one should it be? 

                                Can you give me an example of a function nested in another?  In theory I think I know what you mean but I've stared at this so much now it's all looking the same to me haha.

                                • 13. Re: Custom Cursors with rollovers.
                                  Ned Murphy CommunityMVP

                                  You said one works and one doesn't so if I had to make a logical choice...

                                   

                                  As far as an exmple of a function nested in another, look at your code for a couple.  Anytime you define a function within another function you are nesting.  Don't do that.