Importing and Working with Images and Vector Graphics
Top  Previous  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 File | Samples | Tutorials 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 insertimage '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:

Tute2_1  

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:

   Tute2_2
   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 back '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

tute2_1a

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 '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 section. 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:

   Tute2_3

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:

Tute2_4  


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

14. With the "Left_Image" selected, press the back 'Send to Back' button from the Toolbar, and then press the forward '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 '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 back 'Send to Back' button

18. In the Timeline Panel in the LeftIImage row, click on Frame 70. Press the addeffect '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, and press Close to accept these changes.

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 addeffect 'Add Effect' button and select Move from the Menu. Display the 'Move settings' by double clicking on any 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 addeffect '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 addeffect '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 fpview 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. Click on Frame 105 in the Left_Image row. Press the addeffect 'Add Effect' button and select Fade Out from the Menu. Display the 'Fade settings' by double clicking on any frame of the the effect in the timeline. Change the duration of this effect from 10 to 5 frames. Go in to the Motion settings (press "More Options >>" if you cannot see this tab), and change the X Scale option to "Resize to Scale" and leave the value set at 0%. Change the 'X Position' setting to "Move to X" and enter a value of "350". Press Close to accept these changes.

28. Right-Click on the Fade Out effect at Frame 105 for the Left_Image row, and select Copy Effect from the menu. Right-Click on Frame 106 for the Center_Image row and select Paste Effect. Right-Click on Frame 106 for the Right_Image row, and select Paste Effect.

29. Click on Frame 105 of any row in the Timeline and press the fpview 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

30. Save your Movie


Vector Graphics

1. Press the newcontent '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' dialog box press the "Select All" button at the bottom-left, check the 'Animated Sprite' checkbox and uncheck the 'Masked' checkbox as well as the "Include background rectangle" checkbox and press Import. Note that the composite image is within a Sprite, and that the Sprite has been named "logo"

tute30

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

Note: If the Sprite is shown in a different location other than the center of the stage, you can center it by doing the following: Open the Transform panel; Make sure that the Anchor point of the sprite is set to 'Center'; Change the X and Y settings to X=350, Y=225.

3. After importing the logo.swf as a Sprite, it will be expanded in the Outline panel. To close this Sprite (and exit its timeline), either click on the (+) next to the name of the Sprite in the Outline panel, or click on the "Scene_1" button at the top-left of the Timeline panel (marked with a folder icon to the left of it).

4. Click at Frame 110 on the Timeline in the row for logo. Press the addeffect '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

5. Click at Frame 120 on the Timeline in the row for the logo. Press the addeffect '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

6. Press the playmovie Play Movie button to preview your Movie. After your message has played and your images have finished moving, 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 stopmovie Stop button. For the remainder of the tutorial, ensure that the 'Stop playing at end of movie' check box is checked
 
7. Press the playmovie Play Movie button to preview your Movie. This time your Movie will play through once. Press the stopmovie 'Stop' button  

8.Save your Movie  

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