unit-v multimedia applications learning objectives to learn about symbols and instancesto learn...

UNIT-VUNIT-VMULTIMEDIA APPLICATIONSMULTIMEDIA APPLICATIONS

Learning objectivesLearning objectives

•• To learn about symbols and instancesTo learn about symbols and instances

•• To learn how to use Flash Action scripting To learn how to use Flash Action scripting for creating Interactive movies.for creating Interactive movies.

•• Creating a Preloader in Flash.Creating a Preloader in Flash.

•• Adding Preloader to an existing movie.Adding Preloader to an existing movie.

•• Creating simple Flash web sitesCreating simple Flash web sites

•• Creating simple animations using Creating simple animations using HTML/DHTML/JavaScriptHTML/DHTML/JavaScript

A symbol is a graphic, button, or movie clip that you create once and then can reuse throughout your movie or in other movies.

An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be very different from its symbol in color, size, and function. Editing the symbol updates all of its instances. But editing an instance of a symbol updates only that instance.

Use graphic symbols for static images and to create reusable pieces of animation that are tied to the Timeline of the main movie. Graphic symbols operate in sync with the Timeline of the main movie. Interactive controls and sounds won't work in a graphic Symbol’s animation sequence.

Symbols and InstancesSymbols and Instances

Use button symbols to create interactive buttons in the movie that respond to mouse clicks or rollovers or other actions. You define the graphics associated with various button states, and then assign actions to a button instance.


Use movie clip symbols to create reusable pieces of animation. Movie clips have their own multiframe Timeline that plays independent of the main movie's Timeline—think of them as mini-movies inside a main movie that can contain interactive controls, sounds, and even other movie clip instances. You can also place movie clip instances inside the Timeline of a button symbol to create animated buttons. To create a new empty symbol: Make sure that nothing is selected on the Stage and do one of the following:Choose Insert > New SymbolClick the New Symbol button at the bottom left of the Library window.Choose New Symbol from the Library Options menu in the upper right corner of the Library window.

Symbols and InstancesSymbols and InstancesTo create a new instance of a symbol: Select a layer in the Timeline.Flash can place instances only in keyframes, always on the current layer. If you don't select a keyframe, the instance will be added to the first keyframe to the left of the current frame.Choose Window > Library to open the library.Drag the symbol from the library to the Stage.If you created an instance of a graphic symbol, choose Insert > Frame to add the number of frames that will contain the graphic symbol. To Create Buttons in Flash:Choose Edit > Deselect All to ensure that nothing is selected on the Stage.Choose Insert > New Symbol, or press Control+F8 To create the button, you convert the button frames to keyframes.In the Symbol Properties dialog box, enter a name for the new button symbol, and for Behavior choose Button.

Symbols and InstancesSymbols and InstancesTo Create Buttons in Flash:Choose Edit > Deselect All to ensure that nothing is selected on the Stage.Choose Insert > New Symbol, or press Control+F8 To create the button, you convert the button frames to keyframes.In the Symbol Properties dialog box, enter a name for the new button symbol, and for Behavior choose Button.

Flash switches to symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit. The first frame, Up, is a blank keyframe.

Symbols and InstancesSymbols and InstancesTo Create Buttons in Flash:Choose Edit > Deselect All to ensure that nothing is selected on the Stage.Choose Insert > New Symbol, or press Control+F8 To create the button, you convert the button frames to keyframes.In the Symbol Properties dialog box, enter a name for the new button symbol, and for Behavior choose Button.

Flash switches to symbol-editing mode. The Timeline header changes to display four consecutive frames labeled Up, Over, Down, and Hit. The first frame, Up, is a blank keyframe. To create the Up state button image, use the drawing tools, import a graphic, or place an instance of another symbol on the Stage.You can use a graphic or movie clip symbol in a button, but you cannot use another button in a button. Use a movie clip symbol if you want the button to be animated.Click the second frame, labeled Over, and choose Insert > Keyframe.


Flash inserts a keyframe that duplicates the contents of the Up frame.

• Change the button image for the Over state.

• Repeat steps 5 and 6 for the Down frame and the Hit frame.

Symbols and InstancesSymbols and InstancesThe Hit frame is not visible on the Stage, but it defines the area of the button that responds when clicked. Make sure that the graphic for the Hit frame is a solid area large enough to encompass all the graphic elements of the Up, Down, and Over frames. It can also be larger than the visible button. If you do not specify a Hit frame, the image for the Up state is used as the Hit frame.

You can create a disjoint rollover by placing the Hit frame in a different location than the other button frames.

• To assign a sound to a state of the button, select that state's frame in the Timeline, choose Modify > Frame to display the Frame panel, and then click the Sound tab in the Frame panel.

• When you've finished, choose Edit > Edit Movie. Drag the button symbol out of the Library window to create an instance of it in the movie.

Creating Interactive MoviesCreating Interactive Movies

You create interactive movies by setting up actions—sets of instructions written in Action Script that run when a specific event occurs. The events that can trigger an action are either the play head reaching a frame, or the user clicking a button or pressing keys on the keyboard.

Action Script is an object-oriented programming language. Objects in Action Script can contain data or they can be graphically represented on the Stage as movie clips.Using the Action’s Panel:

The Actions panel lets you create and edit actions for an object or frame using two different editing modes. You can select prewritten actions from the Toolbox list, drag and drop actions, and use buttons to delete or rearrange actions. In Normal Mode you can write actions using parameter (argument) fields that prompt you for the correct arguments. In Expert Mode you can write and edit actions directly in a text box, much like writing script with a text editor.

Creating Interactive MoviesCreating Interactive MoviesThe Actions panel lets you create and edit actions for an object or frame using two different editing modes. You can select prewritten actions from the Toolbox list, drag and drop actions, and use buttons to delete or rearrange actions. In Normal Mode you can write actions using parameter (argument) fields that prompt you for the correct arguments. In Expert Mode you can write and edit actions directly in a text box, much like writing script with a text editor.

Normal mode

Creating Interactive MoviesCreating Interactive Movies

Expert mode

Expert Mode lets advanced ActionScript users edit their scripts with a text editor, as they would JavaScript or VBScript. Expert Mode differs from Normal Mode in these ways: Selecting an item in the Add pop-up menu or Toolbox list inserts the item in the text-editing area at the pointer's position.No parameter text boxes appear.In the button panel, only the Add (+) button works.The Up and Down Arrow buttons remain inactive.

Creating Interactive MoviesCreating Interactive MoviesTo assigning an action to a button or a movie clipSelect a button or movie clip instance and choose Window > Actions.If the selection is not a button instance, a movie clip instance, or a frame, or if the selection includes multiple objects, the Actions panel will be dimmed.In the Toolbox list on the left side of the panel, click the Basic Actions category to display the basic actions.To assign an action, do one of the following:>Double-click an action in the Basics Actions category.>Drag an action from theBasic Actions category on the left to the Actions list on the right side of the panel.>Click the Add (+) button and choose an action from the pop-up menu.>Use the keyboard shortcut.If you selected a movie clip, Flash automatically inserts the On Clip Event action and the action you selected in the Actions list. If you selected a button, Flash automatically inserts the On Mouse Event code to trigger any selected action.

Creating Interactive MoviesCreating Interactive MoviesTo assigning an action to a button or a movie clip

Creating Interactive MoviesCreating Interactive MoviesBasic and Frequently used ActionScript commands:

Goto statement: To move from one scene to another or from one frame to another frame, Goto statement is used.Example: On (press) {Goto and play (5);}

(Or) on (press) {Goto and stop (1);}

We cannot have Goto statement alone in the script. It is always clubbed with Play or Stop statement.

Play & StopExample: Like this, we can have script

On (press) {Play ( );} On (release){Stop ( );}And not like this:On (press) {Goto;}

Creating a Flash basic Creating a Flash basic PreloaderPreloader

Normally before a browser can render a graphic, text, or other element to the screen, the entire file must be downloaded from the web, Thus if a slow connection exists somewhere between the end user and the server, content loads very slowly because the file has to be fully downloaded before it can be viewed. Therefore, as soon as the data associated with frame 1 is downloaded, it can be played, even if the remainder of the file is not downloaded.

Flash movies always stream.

preloaders provide a means of presenting something on-screen during the time required for downloading. They can also be used to indicate the amount of remaining download time. Preloaders are simply a set of frames in the beginning of a normal movie file that loops or plays while the reminder of the movie file is downloaded. Setting up a basic preloader requires three things.


1. Begin by opening a Flash and starting a new movie

2. In the movie, add a layer, named Actions/Label, to the time line. This layer will be used for the labels and actions you will add. Rename the other layer content.

3. Using the F5 function key (Insert frame), extend the blank frames of the two layers out to frame 10.

4. Right-Click in frame 10 of the ‘Content’ layer and select Add Keyframe.

5. One of the requirements for using a preloader is to have a need for a preloader. Thus, you will insert a bitmap graphic and a sound clip into frame 10. This should provide enough file size to your movie to be able to see the preloader work on you r local machine.

6. Import a sound file big enough in the format .wav or .aif . Also import a bitmap image big enough. (Note that preloaders you create may be undetectable if you test them from your local machine using the basic Test Movie option. But if you use the ‘Bandwidth Profiler’ option with the ‘Show Streaming’ option you may see the work of a preloader.)


7. When you inserted the bitmap image, it should have automatically been added to frame 10 of layer ‘Content’. Right-Click on frame 10 and select Panels>Sound from the context menu.

8. In the Sound panel, assign the music clip to the frame. Set the Sync drop-down of the music clip to Start, and the Loop field to 999.

9. Before you move on, add a label to frame 10 of the ‘Content’ layer. Right-Click in frame 10 and select Panels>Frame. Type ‘Start’ into the Label field in the Frame panel.

Creating a Flash basic Creating a Flash basic PreloaderPreloader10. Right-Click in frame 1 of the Labels/Actions layer and select

Panels>Frame from the context menu.11. In the Frame panel, enter ‘Preloader’ into the Label field.12. Insert a keyframe in frame 9 and in frame 10 of the Labels/Actions layer.13. Right-Click in frame 9 and select Actions from the context menu.14. Using the Actions panel, add a Go To action to the frame. Set the Label

drop-down to the Preloader label. Make sure you select the Go To and Play checkbox. If you do not, the preloader will not work.

15. Now you must create the movie clip that will play while the content in the rest of the movie will be loading. Use Insert>New Symbol to create a new movie clip symbol named ‘Loading’.

16. In the mew symbol, add some text that says ‘Loading’ that is of generous point size (20 points or larger).

17. Create a short animation in the symbol’s timeline. You can make the text flash on or off, or anything else you want to do while the content is loading. The movie clip will be inserted so that it continually repeats while the preload function is occurring. Once you are finished, click on the ‘Scene 1’ link in the Edit Path to switch back to the main movie timeline.


18. In the main timeline, open the library and insert the Loading movie clip into frame 1 of the ‘Content’ layer.


19. Right-Click on frame 1 of the ‘Content’ layer and select Actions from the context menu.

20. In the Actions panel, insert an ‘ifFrameLoaded’ action from the Actions group in the Toolbox list. Enter 10 in the number field.

21. Insert a Go To action inside the ‘ifFrameLoaded’ action. Assign the Type drop-down list to Frame Label and the Frame drop-down to ‘Start’. Make sure the ‘Go To’ and ‘Play’ checkbox is not selected.

22. Select ‘Test Movie’ from the control menu. Depending on the speed of your computer, you may or may not see the ‘Loading’ movie clip.


23. To really see what the end user will detect, while still in ‘Test Movie’, select 28.8 from the ‘Debug’ menu and ‘Bandwidth Profiler’ from the ‘View’ menu.

24. Select Show Streaming from the Control menu. Doing this will limit playback to the data rate defined in the modem settings. Now you can see that the preloader is doing its job.

Creating a Simple Flash Creating a Simple Flash WebsiteWebsite

Example:

1. First, open new flash file. Set width and height to 800 and 600 respectively from the ‘movie properties’ dialog box (right click on the stage and select ‘movie properties’) Frame rate should be 24. 2. Insert background picture. Here I have inserted a background picture as below (which is a JPEG image imported from the other drives.

3. Lock layer with background picture and add new layer.

4. On new layer, add text for links. Every link separately.

5. Convert all links to buttons. (F8)


Example:

6. Add new layer.7. Draw black square and convert it to Movie Clip with "window" name. Also, set instance name on “window” (An additional image has been imported just to fill page) 8. Double click on black square to go in to

Movie Clip "window".

9. Select black square again and convert it again to Movie Clip by pressing F8

10. Select black square again and set alpha on 30% (Window>Panel>Effect)


Example:

11. Expand layer to frame 35 by pressing F6

12. On first frame transform square like this (i.e. select modify>transform>scale) i.e. shrink it height wise (zero width)

13. Set motion tween on layer


Example:

14. Add new layer and on 35 th frame add text and picture for link #1

15. Add one more layer for actions. On 35 th frame create blank keyframe and in action script window write stop(); script.


Example:

16. Select 1 st frame of action layer and name it to “link 01”.

17. Select all frames and layers on stage:


Example:

18. Copy all frames:

19. Select 36 th frame for all layers and do Paste:


Example:

20. On 36 th frame on action layer, change Frame name to “link 02”

21. On 70 th frame and second layer change content for 2 nd link:


Example:

22. Repeat steps 16. – 20. for other links (link 03, link 04 or how much links you want). For 3 links at all you should have:

23. One more time repeat steps 16. – 20. but this time set Frame name (step 19) to “stop”


Example:

24. In “stop” section delete all from 2 nd layer (layer with content for pages)

25. Drag 106 th frame from layer where is background and drop it on last frame.


Example:26. Make motion tween on stop section.

27. On 140 th frame on action layer add this code:stop();if (_root.link == "link01") {gotoAndPlay ("link01");}if (_root.link == "link02") {gotoAndPlay ("link02");}if (_root.link == "link03") {gotoAndPlay ("link03");}


Example:28. Go back to root (click on outside area to return to the main screen) Select

first link text: “HOME”

29. Add script in actionscript window:on (release){_root.window.gotoAndPlay("stop");link = "link01";}30. Do the same for all other links just change number of link (for 2 nd link is link=”link02”;)on (release){_root.window.gotoAndPlay("stop");link = "link02";} on (release){_root.window.gotoAndPlay("stop");link = "link03";}


Example:31. On root on 2 nd layer add just one line in actionscript window:

32. Press Ctrl+Enter to see the resultant movie.

Creating Simple animations Creating Simple animations using HTML/DHTML/JavaScriptusing HTML/DHTML/JavaScript

Ex: 1 - The following example cycles between the colors used for the time mentioned in milliseconds.


Ex: 2 - The following example is a simple animation using two images. As the mouse is moved over the image it changes to a

different image (here it is the same image where the second image is positioned forward)


Ex: 3 - The following example is a simple animation involving forward movement. This automatically retraces its path after a certain time.


Ex: 4 - The following example is a simple animation involving forward movement at every click of a user.


Ex: 5 - The following example is a simple rollover animation. If you roll over the image it changes into a new image and when you roll

back it changes itself to the previous image.


Ex: 6 - The following example is a simple scrolling text animation. The text scrolls inside a text box as soon as the page is loaded.

THANK YOUTHANK YOU

unit-v multimedia applications learning objectives to learn about symbols and instancesto learn...

Documents

new symbol button

new button symbol

symbol updates

instancesa symbol

button instance

use button symbols

button frames

new instance