WebBuilder101 - Making the web happen!
Need Web Dev software? Here is the place to
Flash Point
TUTORIAL INFO
Version: 2.0
Level: Intermediate
DOWNLOAD
ZIP           SWI



MOUSE FOLLOWER (USING THE TRANSFORM ACTION)

This is a step-by-step tutorial for creating a mouse follower that can be used with a cross hair or animated follower in SWiSH.

How it Works
This mouse follower consists of giant invisible buttons covering all but a very small area of the stage. If you look at the image below, the outlined rectangle indicates the stage, and the four triangular shapes are the buttons.

In the center of these buttons, is a very small square area that was created by cutting off the corners of the triangles where they would meet (see the detail image below). The buttons are contained in a Sprite, with a cross hair or animation placed in its center. Whenever your mouse moves over a button, a Transform action will move the Sprite in the direction your mouse is moving.

Making the Buttons

1. Create a giant square (about twice the width of your stage) and rotate 45°.

2. Select the shape tool and remove the top anchor to create a triangle.

3. Create a second square about 10 X 10 pixels and center it on the stage (this will serve as a guide for positioning and reshaping your triangle and can be deleted later).

4. Place your triangle so that the bottom corner is in the center of the square.

5. With the triangle selected, select the Shape tool and add two anchors to the triangle where it meets the corners of the square.

6. Remove the bottom anchor from the triangle.

7. Convert your edited shape into a Button.

Test your Button. Note that when you mouse over your Button, it will respond to the areas that have been removed from your original square. For the mouse follower to work, you must change the shape of you Button’s Hit State to match that of your Button’s other states.

8. Select the ‘Rectangle’ from the Button’s Up State and Copy the shape.

9. Select the Button’s Hit State and Paste this shape into it. You should have two shapes in the Button’s Hit State, the “rectangle” shape you pasted, and the Hit Rectangle shape. Delete the Hit Rectangle and test your button again. This time the mouse should only react to the area that your Button covers.

10. Copy your Button (making sure that none of the button’s states is selected) and Paste 3 more copies of the button, and then rotate one 90°, one 180°, and one 270°. You may want to change the colors of two of these buttons so that you can arrange them more easily.

11. Arrange your Buttons around the square.

12. Name your Buttons. To keep it simple, name the one on the top UP, the one on the bottom DOWN, the one on the left LEFT, etc.

13. Select all of your objects, group as a Sprite, and name the Sprite FOLLOWER.

14. Return to the main timeline and create a Rectangle that is the same dimensions as your movie, leave the line, select no fill, and center. This will help you when aligning and checking the position of the follower; you can delete this later.

15. Place your Sprite so that the small square in the center is just outside the bottom right corner of the stage.

Adding the Actions

16. Return to the FOLLOWER Sprite’s timeline. Select the UP button and add the following action. On (Roll Over) Transform Y- and enter the value 10 in the edit box.

17. Copy and Paste a second instance of this button.

18. For the first UP button, add the Place effect at frame 0 and the Remove effect at frame 1. For the second UP button, add the Place effect at frame 1.

19. Select the DOWN button and add the following action. On (Roll Over) Transform Y+ and enter the value 10 in the edit box. Repeat steps 17 and 18 for the two DOWN buttons.

20. Select the LEFT button and add the following action. On (Roll Over) Transform X- and enter the value 10 in the edit box. Repeat steps 17 and 18 for the two LEFT buttons.

21. Select the RIGHT button and add the following action. On (Roll Over) Transform X+ and enter the value 10 in the edit box. Put a Place effect for this button at frame 0. Repeat steps 17 and 18 for the two RIGHT buttons.

22. Make sure this Sprite is set to Loop, and test. The Sprite should follow you mouse around the stage.

Adding the Follower

You need to add your follower or cross hair to the FOLLOWER Sprite.

23. An animated follower should be contained within a Sprite and placed in the center of this Sprite. It is probably a good idea to create the animated Sprite in a separate .swi and then Paste it into the FOLLOWER Sprite where you can then resize as needed.

For a cross hair, just zoom out; create a line that spans the width of your buttons and center. Copy and Paste a second instance of the line and rotate to 90°.

You are almost done. You need to hide your buttons. You can either remove the shapes from the UP, OVER, and DOWN States of your buttons, leaving only the Hit State shape; or change the Alpha value for the Place effect for each of these buttons to 100% Transparent. Finally, remove the rectangle and square you created earlier as guides.

.

 

More Resources
Beginner Tutorials
Intermediate Tutorials
Advanced Tutorials
Examples [external link]
Built In Tutorials [external link]
Using SWiSH With Other Programs [external link]

Suggested Reading

Beginning Active Server Pages 3.0
JavaScript Bible
Red Hat Linux
Dreamweaver 3.0
HTML Bible



Download WB101 Wallpaper
• Web Builder 101 Wallpaper Get it!.
• Find out how to create your own Wallpaper Teach me!.
Sign up for our Newsletters
• Web Building Sign me Up!.
• Net Alert! Sign me Up!.
Need Help?
• Contact Support Click here.
• E-mail the Webmaster Click Here.
• Search Tips Click Here.

Webbuilder101.com © 1998 - 2003 Copyright and Terms of Use
Send mail to: webmaster@webbuilder101.com

» About » Support

» FAQ » What's New » MyLog

Web Builder 101 Web Builder 101 - Making the Web Happen Web Builder 101 - Making the Web Happen
.