MMGD0203 MULTIMEDIA DESIGN Multimedia Authoring Tool Swishmax

MMGD0203 Multimedia Design

MMGD0203 MULTIMEDIA DESIGN

Multimedia Authoring Tool SwishMax

1 MMGD0203 Multimedia Design SwishMax

Introduction

• SWiSH Max is a flash creation tool that is commonly used to create interactive and cross-platform movies, animations, and presentations. • It is developed and distributed by Swishzone.com Pty Ltd, based in Sydney, Australia. • SWiSH Max primarily outputs to the .swf format, which is currently under control of Adobe Systems. • SWiSH Max was designed for the Windows operating system.

2 MMGD0203 Multimedia Design SwishMax

Startup Menu

• This Menu is displayed when SWiSH Max is started. • It allows quick selection of common SWiSH Max tasks. • Disable this Menu from the 'Don't show this again' checkbox.

3 MMGD0203 Multimedia Design SwishMax

User Interface

The SWiSH Max User Interface is made up of the following panes or panels:

• Main Menu • Toolbox • Layout and Script pane • Timeline • Toolbars including the Standard, Insert and Control Toolbars • Panels including the Outline, Transform and Scene Panels among many others • Status Bar • View options.

4 MMGD0203 Multimedia Design SwishMax

User Interface

5 MMGD0203 Multimedia Design SwishMax

Fundamentals

• Flash Movies • Objects • Tools • Effects • Components • Scripting

6 MMGD0203 Multimedia Design SwishMax

Fundamentals – Flash Movies

• A Movie is a sequence of Scenes. • A Movie contains all the Scenes, Objects, Effects, Events, and Actions that comprise the final animation. • Properties of a Movie (including size, Frame Rate and background color) can be edited in the Movie Properties.

7 MMGD0203 Multimedia Design SwishMax

Fundamentals – Flash Movies (cont..)

• A new Movie can be created by pressing the 'New' button on the Standard Toolbar, or by selecting New from the File Menu. • Scenes can be added to a Movie by pressing the 'Insert Scene' button on the Insert Toolbar, or by selecting Scene from the Insert Menu.

8 MMGD0203 Multimedia Design SwishMax

Fundamentals – Flash Movies (cont..)

• Movies can be saved to disk (as a .swi file) by pressing the 'Save' button on the Standard Toolbar, or by selecting Save from the File Menu. • Existing Movies can be read from disk by pressing the 'Open' button on the Standard Toolbar, or by selecting Open from the File Menu. • Movies can be exported in the formats: Shockwave Flash (.swf), video (.avi), Projector EXE (.exe), GIF animation (.gif), PNG file (.png). • Select an export format choice by selecting Export from the File Menu.

9 MMGD0203 Multimedia Design SwishMax

Fundamentals – Scenes

• A Scene is a collection of Objects that are animated over a number of Frames. • When a Scene is complete, all the Objects are removed from the display and the Movie automatically moves to the next Scene. • A new Scene can be created by pressing the 'Insert Scene' button on the Insert Toolbar, or by selecting Scene from the Insert Menu. Objects can be added to the Scene by pressing one of the buttons on the Insert Toolbar, by selecting options from the Insert Menu, or by using one of the drawing tools in the Toolbox on the Layout Panel.

10 MMGD0203 Multimedia Design SwishMax

Fundamentals – Timeline and Frames

• Each Scene is made up of a series of Frames. • The Timeline Panel shows a visual representation of the Frames, with the first Frame at the left and last Frame at the right.

11 MMGD0203 Multimedia Design SwishMax

Fundamentals – Timeline and Frames

• The top row shows the Frame Actions for the Scene. These Actions are executed when the Movie reaches the Frame where the Action is located. Frame Actions always have a duration of one Frame, but it is possible to execute more than one Action in a single Frame.

12 MMGD0203 Multimedia Design SwishMax

Fundamentals – Timeline and Frames

• The rows below the Scene row represent the Objects in the Scene. The rows are displayed in stacking order, with the Object that is in front of all other Objects displayed at the top (just below the Scene row), and the Object that is behind all other Objects displayed at the bottom.

13 MMGD0203 Multimedia Design SwishMax

Fundamentals – Timeline and Frames

• Each Object row shows the Effects that are applied to that Object. Effects may have a duration of one or more Frames, but only one Effect can be applied to an Object at any given Frame.

14 MMGD0203 Multimedia Design SwishMax

Fundamentals – Objects

• SWiSH Max supports two types of Objects within a Scene: – Simple Objects – Complex Objects • A Simple Object is a single indivisible entity and is animated as a single object, unlike Complex Objects, in which the individual shape or objects contained within it are animated separately. • A Complex Object is made up of many component Objects, unlike a Simple Object which is treated as an indivisible Object.

15 MMGD0203 Multimedia Design SwishMax

Fundamentals – Objects

Examples of Object: • Shape Objects • Button Objects • Movie Clip Objects • Text Objects • Group Objects • Sound Object • Embedded Video Object • External Media Object

16 MMGD0203 Multimedia Design SwishMax

Fundamentals – Tools

• Tools are modal commands that determine what SWiSH Max does when you click and drag the mouse on the workspace. • You can select a tool by clicking one of the options in the Toolbox, which is located in the top-left of the Layout Panel. • You can only select one tool at a time.

17 MMGD0203 Multimedia Design SwishMax

Fundamentals – Tools

Tool Description Selection Tool The selection tool is used for selecting entire Objects and transforming graphic objects by moving or reshaping the object. The Selection Tool will transform an Object by moving the shape’s vertices rather than by modifying it’s transformation matrix.

The Selection Tool can apply the following Reshape operations on Shapes: • Select • Drag • Resize • Rotate/Skew

18 MMGD0203 Multimedia Design SwishMax

Fundamentals – Tools

Tool Description Subselection Tool Reshapes graphic Objects by clicking and dragging the vertices the object outline path. When using the Subselection tool the Scale, Resize, Perspective and Rotate/Skew are available.

Transform Tool Transforms graphic Objects by clicking and dragging. This selection tool is used for selecting and transforming Objects by modifying the object’s transformation matrix. Perspective Tool Dragging the handles provided modifies the Perspective of the Object. Modifying the Perspective of an Object moves the Object's corner towards the point the perspective handle is moved to.

19 MMGD0203 Multimedia Design SwishMax

Fundamentals – Tools

Tool Description Fill Transform Transforms an Object's gradient or image fill without transforming the Object. The handles shown depend upon the tool option selected. Motion Path Plots a Motion Path for the selected Object by clicking and dragging. Speed is defined as the rate of movement. Increasing the pixels per second will decrease the number of Frames used while decreasing it's value will increase the number of Frames used.

20 MMGD0203 Multimedia Design SwishMax

Fundamentals – Tools

Tool Description Drawing Tools • Line tool • Pencil tool • Pen tool • Text tool • Ellipse tool • Rectangle tool • Autoshapes Hand Tool Pans around the workspace in the Layout Panel by clicking and dragging Zoom Tool Zooms in/out of the workspace in the Layout Panel using the mouse.

21 MMGD0203 Multimedia Design SwishMax

Fundamentals – Effects

• Effects are animations that change the appearance of an Object over time. You can add, modify and coordinate Effects using the Timeline Panel.

22 MMGD0203 Multimedia Design SwishMax

Fundamentals – Components

• A Component in SWiSH Max is a reusable, packaged module that adds a particular capability to a SWiSH Max movie. • Components can include graphics as well as script code, so they are self-contained building blocks of functionality that you can easily drop into your projects. For example, a component can be a check box, a radio button, a dialog box, a pre-loader, or even something that has no graphics at all such as a timer. • The Components Panel allows the user to add a specific components to their current Movie.

23 MMGD0203 Multimedia Design SwishMax

Fundamentals – Scripting

• SWiSH Max comes with a powerful scripting language. The language commands are defined in the Scripting Reference. • The scripting is similar to Adobe Flash Actionscript, but has SWiSH Max-specific extensions and differences. • The script can be compiled, depending on selected options, to produce script that is compatible with all Flash Players.

24 MMGD0203 Multimedia Design SwishMax

Creating and Managing Movies

• A SWiSH Max document is called a 'Movie'. The document file has a .swi extension (pronounced "SW- eye"). • Select File | New to create a new movie file (.swi), or open an exisitng file. • Multiple movies can be opened and will show on the tabs. Click on a tab to select the active movie.

25 MMGD0203 Multimedia Design SwishMax

Exporting and Publishing

To publish from SWiSH Max it is necessary to export to another file format (in contrast to saving to the .swi document format). SWiSH Max is able to export five file formats.

26 MMGD0203 Multimedia Design SwishMax

Exporting and Publishing

• Flash file format (.swf): The file the Flash player reads. You can also choose to export the HTML page the browser uses to display the SWF movie • Video file format (.avi): A video format which can be played by (for exampl) the Windows Media Player™. • Flash Player Projector (.exe): A stand-alone executable files . • Animated GIF (.gif): A GIF format file which contains a set of images in the specific order of the animation.

27 MMGD0203 Multimedia Design SwishMax

The Workspace and Stage

• The main area of the 'Layout' Panel is the workspace. The area within the workspace that corresponds to the viewable area of your Movie is called the 'stage'.

28 MMGD0203 Multimedia Design SwishMax

Timeline Panel

• The 'Timeline' Panel contains time-based properties for the current Scene. • The Scene is made up of a series of Frames, in the same way that a motion picture is made up of Frames. • The Timeline is a visual representation of the Frames with the first Frame at the left and last Frame at the right.

29 MMGD0203 Multimedia Design SwishMax

Timeline Panel

• The rows below the Scene row represent the objects in the Scene. • The rows are displayed in stacking order, with the object that is in front of all other objects displayed at the top (just below the scene row), and the object that is behind all other objects is displayed at the bottom

30 MMGD0203 Multimedia Design SwishMax

Working with Objects

To draw a Line: • Position the mouse pointer to where you want the line to begin • Press and hold the left mouse button • Drag the mouse pointer to where you want to end the line, and release the mouse

31 MMGD0203 Multimedia Design SwishMax

Working with Objects

To draw a Rectangle: • Press and hold the left mouse button down (or click and release) at the position you wish to draw a corner of the rectangle • Drag the pointer diagonally to adjust the size of the rectangle • Release the mouse button (or click and release) to end the drawing • To draw a square, press and hold the Shift key while dragging.

32 MMGD0203 Multimedia Design SwishMax

Working with Objects

33 MMGD0203 Multimedia Design SwishMax

Working with Objects

To draw an Ellipse: • Press and hold the left mouse button where you wish to position the ellipse • Drag the mouse pointer diagonally to adjusting the size of the ellipse • Release the mouse button to end the drawing • To draw a circle, press and hold the Shift key while drawing with the Ellipse tool

34 MMGD0203 Multimedia Design SwishMax

Working with Objects

35 MMGD0203 Multimedia Design SwishMax

Working with Objects

To draw a Text Object • Select the Text tool • Position the mouse cursor where you wish to place the text • Press the left mouse button to create a new Text object and type to create the text. The new Text Object type (and attributes) will be the same as the previous Text Object. A new Static Text Object will automatically resize itself to contain the text that is typed • Select the text and alter the font size, color, Object type, etc. in the Text Panel • If necessary format the Text Object using Margins and Indents

36 MMGD0203 Multimedia Design SwishMax

Working with Objects

To move an Object on stage: • Select the object using Selection tool. • Click and hold the mouse button and drag the object to new location. • Release the mouse button.

37 MMGD0203 Multimedia Design SwishMax

Working with Objects

To resize an Object: • Select the object using Selection tool. • Drag the handle to the new position and release the mouse.

Note:

• To maintain the aspect ratio of Handle the Object, press and hold Shift key while dragging

38 MMGD0203 Multimedia Design SwishMax

Working with Objects

To rotate an Object: • An Object can be rotated around its Transformation Point using the rotate cursor. • The rotate cursor appears when the mouse pointer is placed just to the outside of the corner handles. • When the cursor appears, press the left mouse button and rotate the object to the desired angle.

Rotate cursor

39 MMGD0203 Multimedia Design SwishMax

Working with Objects

Modify object / text properties • Use the Property Panel to modify object and text properties such as color, font, size, etc… • Select the object or text to open the Property panel.

40 MMGD0203 Multimedia Design SwishMax

Working with Objects

Property panel for object

Stroke Style

Stroke Color

Fill Color

41 MMGD0203 Multimedia Design SwishMax

Working with Objects

Modify object / text properties

Font size Font color

Font name Font style

Alignment

42 MMGD0203 Multimedia Design SwishMax

Imports

• Imports an external file into the current Scene or to the content Library. Multiple files may be selected for importing by holding the Shift or Ctrl key while selecting. • 'Import to Library...' adds the content to the Library as a Resource or Symbol. • 'Import to Stage...' creates an appropriate Object for the content and places it on the Stage (Layout Panel).

43 MMGD0203 Multimedia Design SwishMax

Imports

• Sound – supported file format: – Wave files (*.wav) – MP3 files (*.mp3) – Windows Media Audio (*.wma) – Other audio files (*.au;*.aif;*.aiff;*.snd)

44 MMGD0203 Multimedia Design SwishMax

Imports

• Video – supported file format: – AVI files (*.avi) – Quicktime Video files (*.mov, *.qt) – MPEG video files (*.mpg) – Windows Media Video files (*.wmv, *.asf) – Adobe Flash Video (*.flv)

45 MMGD0203 Multimedia Design SwishMax

Imports

• Images – supported file format: – Windows bitmap (*.bmp; *.dib) – GIF image (*.gif) – JPEG image (*.jpg; *.if, *.jpeg) – PNG image (*.png)

46 MMGD0203 Multimedia Design SwishMax

Imports

• Animation – supported file format: – Animated GIF (*.gif) (imports as a frame sequence) – Flash Animation (*.swf both compressed and uncompressed) – Flash Projector (*.exe) – SWiSH Max Movie (*.swi)

47 MMGD0203 Multimedia Design SwishMax

Working with Effects

• Effects are animations that change the appearance of an Object over time. You can add, modify and coordinate Effects using the Timeline Panel. • Inserts an Effect to the selected Object or selected group of Objects at the current Frame. The Submenu has a list of the available Effects. • Some of the Effects have a further submenu where you can select the basic Effect, or one of the preset Effects you have recently used (saved or loaded).

48 MMGD0203 Multimedia Design SwishMax

Working with Effects

Add an Effect to Any Object • To add an effect to any object, click the object (click the textbox if you want to add an effect to text) and choose the box, Add effect in the top left of the timeline window. • To change the order and length of effects, drag the effect box or the side of the effect box in the timeline window.

49 MMGD0203 Multimedia Design SwishMax

Scripting

• Scripting is used to support Events and Actions. • Script can be viewed and modified via the Script Panel. • All Actions are triggered in response to an Event. Any Scripting Object can have Events associated with it. • When an Event occurs, the Event Handling Routine executes any Actions that are defined for that Event.

50 MMGD0203 Multimedia Design SwishMax

Scripting

• There are two types of Events: – Frame - Frame Events occur when a Scene or Movie Clip reaches a specified Frame. – Button - Button Events occur when the mouse interacts with an Object in a Scene or a defined key is pressed. Adding a Button Event to an Object makes it behave like a button and allows it to respond to the mouse and keyboard.

51 MMGD0203 Multimedia Design SwishMax

Adding Interaction to Movie

When working with many scenes, you need to stop the movie so it will stop until the user click on the button to continue. To stop the movie: • Click on frame in the Timeline. • Click the “Add Script” button and select Movie Control > Stop().

52 MMGD0203 Multimedia Design SwishMax

Adding Interaction to Movie

Button are used to link from one scene to another. You can create your own button using drawing tool or you can import any image as button. To convert object to button: • Select the object. • Right-click > Convert > Convert to Button

53 MMGD0203 Multimedia Design SwishMax

Adding Interaction to Movie

To link the scenes: • Select the button. • Open the Script window and type the following code:

This is the name of the scene that you want to link.

54 MMGD0203 Multimedia Design SwishMax

Export the Movie

Once your movie is complete, you can export your movie to other format (eg: swf, exe, etc…). This allows you to show your Movie without any external program or browser. To export the movie: • Save your work. • Select File > Export > exe (Projector).

55 MMGD0203 Multimedia Design SwishMax

Export the Movie