Importing and Working with Images and Vector Graphics

Previous  Top  Next

This is a step-by-step tutorial on importing and working with bitmap images and vector graphics. This tutorial illustrates some of the features seen in the "first.swi" file in the Samples Menu.

Note:

·	You can import bitmap images in .jpg, .jif, .jpeg, .gif, .png, .bmp, and .dib formats

·	You can import vector graphics in .wmf and .emf formats, or as a static .swf file

Images

1.   Open the Movie you began in the last tutorial "myfirst.swi"

2.   Press the 'Insert Image' button on the Toolbar. From the 'Open' dialog box, select JPEG from the 'Files Types' list, then navigate to the Samples folder within your SWiSHmax application folder, select "first.jpg", and press Open

3.   The image should be displayed in the center of the stage

4.   Select the Shape Panel and edit the name of the image Object to be "Center Image". Select the solid line from the drop-down Menu. Change the width of the line from 1 to 2pt. Press the color swatch next to the 'Line' width selection box to display the color palette. Select a dark green from the palette.

   The 'Shape' Panel should look like this:


5.   Press the 'Properties' button located next to the 'Clipped image' button to display the 'Image Properties' dialog box. Within the 'Image' dialog box, check the 'Recompress JPEG' checkbox and change the value from 84% (the quality of the imported image) to 10%.

   The 'Image Properties' dialog should like like this:

   
   Press OK

6.   From the File Menu, select Test | In Player. The image should display in the center of the stage, in front of the text and appear distorted.

7.   Press the 'Send to Back' button from the Standard Toolbar

8.   Press the Shape (image) 'Properties' button again and change the value of the JPEG quality from 10% to 50%, then Press OK



9.   From the File Menu, select Test | In Player again. This time the image should appear clear and behind the text

10.   Select the "Center Image" Object from the left column of the Timeline, then right-click and select Copy Object from the context Menu. Press the 'Paste' button to paste a second image into your Scene. The copy will appear directly over the original

11.   To help with aligning this image, select the Guides Panel, and check the 'Snap' and 'Show in the Grid' boxes. A Grid will appear in the Layout Panel. Change the horizontal and vertical values of the Grid in both the 'Horiz' and 'Vert' edit boxes to 5

   The 'Layout' Panel should look something like this:

   

12.   Select the Transform Panel to view the image's X and Y placement properties. With the image selected, drag the image over towards the left side of the window, and place the image at X:140 Y:225

   The 'Transform' Panel should look like this:



13. Rename this image object to "Left Image" in the Shape Panel

14. With the "Left Image" selected, press the 'Send to Back' button from the Toolbar, and then press the 'Bring Forward' button. This image should be in the second-from-the-bottom row in the Timeline, just above Center Image.

15. Press the 'Paste' button to create another copy of the image. Drag this one over to the right side of the window and place the image at X: 560, Y: 225

16. Rename this "Right Image" in the Shape Panel

17. Press the 'Send to Back' button

18. In the Timeline Panel in the Left Image row, click on Frame 70. Press the 'Add Effect' button and select Fade | Fade In from the Menu. Open the 'Fade in settings' by double clicking on the last Frame of the Effect in the Timeline. Change this Effect's duration from 10 to 4 Frames. Press OK

19. Right-click on this Effect and select Copy Effect from the context Menu

20. In the Timeline Panel in the Center Image row, right-click on Frame 72 and select Paste Effect

21. In the Timeline Panel in the Right Image row, right-click on Frame 74 and select Paste Effect

22. Preview your Movie in the player by selecting File | Test | In Player. This time you will see the message and then, the images will fade in starting with the left image first and ending with the right image

23. Click on Frame 88 in the Left Image row. Press the 'Add Effect' button and select Move from the Menu. Display the 'Move settings' by double clicking on the last frame of the the effect in the timeline. From the Motion tab select X Position | Move to X and change the value from 0 to 350. Change the Effect's duration from 10 to 5 Frames, and press Close to accept the changes

24. Click on Frame 93 in the Center Image row. Press the 'Add Effect' button and select Move from the Menu. From the Motion tab, in the 'Move settings' dialog box, select X Position | Move to X and change the value from 0 to 560. Change the Effect's duration from 10 to 5 Frames, and press Close to accept these changes

25. Click on Frame 98 in the Right Image row. Press the 'Add Effect' button and select Place from the Menu. Display the 'Place settings' dialog box and Select X Position | Jump to X, change the value from 0 to 140, and press Close to accept the changes

26. Click on Frame 85 of any row in the Timeline and press the Preview Frame button on the Control Toolbar. Drag the Play Head right and then left across the Timeline to preview the animation. "Left Image" should slide over to the center covering "Right Image"; then "Center Image" should slide right to cover "Right Image"; finally, "Right Image" will appear on the left

27. Save your Movie


Vector Graphics

1. Press the 'Insert Content' button from the Toolbar. From the 'Open' dialog box, select Flash Player Movie (*.swf) from the 'Files of Type' Menu . From the Samples Folder, select "logo.swf" and press Open. From the 'Import Frames' dialog box press Select All Frames, check the 'Import as Sprite' checkbox and uncheck the 'Masked' checkbox and press Import. Note that the composite image is within a Sprite, and that the Sprite has been named "logo"



2. The logo Sprite should appear in the center of the stage

3. Click at Frame 110 in the Timeline in the row for logo. Press the 'Add Effect' button, and select Fade | Fade In from the Menu. Change the Effect's duration in the 'Fade In Settings' dialog box from 10 to 4, and from the Motion tab select X Scale | Resize to Scale and type 60 in the % edit box. Leave the 'X=Y' box checked. Press Close to accept the changes

4. Click at Frame 120 in the Timeline in the row for the logo. Press the 'Add Effect' button, and select Fade | Fade Out from the Menu. In the 'Fade Out settings' dialog box, change the Effect's duration from 10 to 3, and press Close

5. Press the Play Movie button to preview your Movie. After your message has played and your images have faded out, the logo should fade in quickly and then fade out quickly. If the 'Stop playing at end of movie' check box in the Movie Panel is not checked, your Movie will continue to loop. Press the Stop button. For the remainder of the tutorial, ensure that the 'Stop playing at end of movie' check box is checked

6.	Press the Play Movie button to preview your Movie. This time your Movie will play through once. Press the 'Stop' button

7.	Save your Movie

You are ready to continue with the Adding Music and Sounds tutorial.