Creating a Sprite

This is a step-by-step tutorial for creating a Sprite. This tutorial illustrates some of the features seen in the "first.swi" file in the Samples Menu.

A Sprite is a Movie within a Movie. Perhaps the greatest advantage of using Sprites in your Movies is that their Timeline runs independently of the main Movie's Timeline, as you will see in the 'pop-up' Sprite you will be creating. Another advantage of using Sprites in your Movies is that you can easily reuse them throughout your Movie, saving time and with only a slight increase to the file size of the Movie.

1. Open "myfirst.swi"

2. Check that Scene 2 appears in the Scene row on the Timeline Panel. If Scene 2 does not appear in the 'Timeline Panel', select Scene 2 from the Outline Panel

3. Select the Rectangle/Square Tool from the Toolbox. Create a rectangle approximately 1/2 the height and width of the stage. From the Transform Panel, change the Height to 420 and the Width to 220, and center on the stage

4. From the Shape Panel select the solid line and change the line's width from 1 to 2. Change the line's color to a dark green. Select a solid fill in a light gray

The Layout Panel should look something like this:



5. From the Modify Menu, select Convert | Convert to Sprite. A Sprite icon will appear in the Timeline. Select the Sprite Panel and type pop-up in the Name edit box. Leave the Background color unchanged and uncheck the Loop box

6.    Select the Outline Panel and click on the plus (+) symbol next to the pop-up Sprite to access the Sprite's 'Object' Tree

Note: In this view, only the rectangle you have just created is visible in the 'Layout' Panel, and in the 'Timeline' Panel only the 'pop-up' Sprite and the rectangle within this Sprite are present. Also note that the Stop Action marker in Frame 10 is not visible. This is because the Sprite Object has its own Timeline. You can toggle this view at anytime by clicking on the plus (+) or minus (-) symbol in the 'Sprite Object' tree

7. With the pop-up Sprite selected, press the 'Insert Text' button. From the Text Panel, change this text to the letter X, change the font size to 20, and change the color to a dark green

8. Drag the X Text Object over to the top-right corner of the rectangle

The Layout Panel should look something like this:

The 'pop-up' Sprite Object's Timeline should look like this:



9. Select the Rectangle/Square from the Timeline Panel. Click on Frame 1 and press the 'Add Effect' button, select Fade In from the Menu. From the 'Fade In Settings' dialog box, change the Effect's duration value from 10 to 3 Frames, and press the 'Close' button to accept the new value

10. Select the Shape Panel and, in the Name edit box, change the word "rectangle" to "window"

11. Select the X Object row from the 'Timeline' Panel and click on Frame 4. Press the 'Add Effect' button, and select Place from the Menu. Press the 'Close' button in the 'Place Settings' dialog box to accept the default settings

12. From the Insert Menu, select Content. In the 'Open' dialog box, from the 'Files of Type' drop-down Menu, select Plain Text (*.txt) and select "first.txt" from the Samples folder

13. From the Text Panel, change the font size to 11, and the paragraph alignment to left. Check the 'Has Name' box, then highlight and delete the text in the edit box to the right of Has Name and type "link 1" into the edit box

14. On the Timeline Panel, click on Frame 4 in the link 1 Object row, press the 'Add Effect' button and select Place from the Menu

15. Click on Frame 4 in the pop-up Sprite Object row. The 'Add Effect' button will change to an 'Add Action' button. Press the 'Add Action' button and select Stop from the Menu

16. Press the 'Play Scene' button on the Control Toolbar. You should see your 'window' fade in quickly, and the 'X' and your imported text will show. This will continue looping during preview. Press the 'Stop Movie' button on the Control Toolbar

17. Select the 'Shape Object' window from the Timeline Panel and click on Frame 6. Press the 'Add Effect' button, and select Fade Out from the Menu. In the 'Fade Out Settings' dialog box change the Effect's duration value from 10 Frames to 3. Press Close to accept the new value

18. Select the X Text Object from the Timeline Panel and click on Frame 6 in the in the X Object row. Press the 'Add Effect' button and select Remove from the Menu

19. Select the link 1 Text Object from the Timeline Panel and click on Frame 6 in the in the link 1 Object row. Press the 'Add Effect' button and select Remove from the Menu

20. Select the X Text Object from the Timeline Panel, then select the Actions Panel. From the 'Actions' Panel, press the 'Add Event' button, and select On Press from the Menu

21. Press the 'Add Action' button and select Go to Frame from the Menu. In the 'Frame Number' edit box, change the Frame from 0 to 6. Leave the 'Play' box checked. The new value will automatically be accepted

22.    On the 'Timeline' Panel, click on Frame 9 in the pop-up Sprite row. Press the 'Add Action' button and select Stop from the Menu

23. Click on Frame 0 in the pop-up Sprite row. Press the 'Add Action' button and select Stop from the Menu. This action will hide the Sprite until it is called for by a future Tell Target Action you will apply in the next tutorial

The pop-up Sprite's Timeline should look like this:

24. To preview this Sprite from within the Sprite's Timeline, you will need to be in Preview Frame mode. Press the 'Preview Frame' button on the Control Toolbar. Click on Frame 0 and drag the Play Head right across the Timeline to preview the animation, or use the arrow controls on the 'Control' Toolbar either side of the 'Preview Frame' button

Advancing one Frame should show the window object starting the fade in. Advancing to Frame 3 will show the link 1 text object and the X object appear, and at Frame 6 the window object should start to fade out as the link 1 Text Object and X object disappear

Grouping a Sprite

1. The pop-up Sprite should be in the top row of the Outline Panel. All other objects in this Scene belong to your Menu and should appear from the second row and down in the Outline Panel. Select the object in the second row of the Outline Panel, press and hold the Shift key and select the rectangle shape on the bottom row. As pressing and holding the Shift key allows you to select multiple objects, these two objects and the objects in the rows between them should all be highlighted.

The Outline Panel should look something like this:

2. With these objects selected, from the Modify Menu select Group | Group as a Sprite. This will create a Sprite Object consisting of every object in your menu.

Note: If a number of objects are selected and you select Convert | Convert to Sprite from the Modify Menu, you will create a separate Sprite for each object selected

3. Select the Sprite Panel and type the word "menu" in the Name edit box. Uncheck the 'Loop' box

This Sprite will be controlled from the Movie's main Timeline, and our purpose for grouping and converting this Menu into a Sprite is twofold. Firstly, it will allow you to have this Menu fade in (rather than suddenly appearing after your intro/splash page) as a Sprite, so that you need only apply the Fade In Effect to the Sprite Object rather than applying this Effect to each object within it. Secondly, This Sprite can be quickly copied and pasted and used later on in the Movie

4. Select Scene 2 from the top row of 'Timeline' Panel and select the Menu Sprite Object. Select frame 1 and press the 'Add Effect' button, select Fade In from the Menu, and press Close to accept the default settings

5. Press the 'Play Movie' button on the Control Toolbar. Your Menu will fade in after your introduction and the Movie will stop. The pop-up Sprite will not show (we will use this Sprite later). Press the 'Stop Movie' button on the Control Toolbar

6. Save your Movie


You are ready to continue with the Adding Interactivity to your Movie tutorial.







[Previous] [Main] [Next]