MOUSE FOLLOWER (USING NESTED SPRITES AND THE TELL TARGET 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. Assumed Knowledge: Some familiarity with the Tell Target action and paths, and nested Sprites. Note: This follower is more complicated to build than the one using the Transform action; but is a great exercise for understanding nested Sprites. 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 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 Tell Target action to one of the nested Sprites controls the position of the follower on the stage. 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. 16. Add a Move Effect for this Sprite at frame 0 and change the setting for the X Position to Move Left by, and enter a value that is a little greater than the width of your movie; for example, if your movie is 800px wide, you would enter 804. The follower Sprite should move roughly 10 pixels per frame so that if the width of your movie is 800 pixels then a duration of 80 frames should work. Check your effect to see that the square passes the edge of the stage (outside the boundaries of your rectangle). 17. Convert this Sprite into a Sprite, name this Sprite LEFT_RIGHT, and put a Stop action at frame 0 of this Sprite’s timeline. 18. Return to the main timeline and add a Move effect the same duration as the Move effect you just created, changing the Position’s Y setting to Move UP by and enter the same value you entered for your other Move effect. Check to see that your sprite moves up past the top of the rectangle 19. Convert this Sprite to a Sprite, name it UP_DOWN, and put a Stop action at Frame 0 of this Sprite‘s timeline. Adding the Actions 20. Return to the FOLLOWER Sprite’s timeline. Select the UP button and add the following action. On (Roll Over) Tell Target /UP_DOWN, Goto Frame Next, uncheck the Play box 21. Copy and Paste a second instance of this button. 22. For the first button, add the Place effect at frame 0 and the Remove effect at frame 1. For the second button, add the Place effect at frame 1. 23. Select the DOWN button and add the following action: On (Roll Over) Tell Target /UP_DOWN, Goto Frame Previous, uncheck the Play box. Repeat steps 21 and 22 for the two DOWN buttons. 24. Select the LEFT button and add the following action. On (Roll Over) Tell Target /UP_DOWN/LEFT_RIGHT Goto Frame Next, uncheck the Play box. Repeat steps 21 and 22 for the two LEFT buttons. 25. Select the RIGHT button and add the following action. On (Roll Over) Tell Target /UP_DOWN/LEFT_RIGHT Goto Frame Previous, and uncheck the Play box. Put a Place effect for this button at frame 0. Repeat steps 21 and 22 for the two RIGHT buttons. 26. 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. 27. 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.