Multimedia Lab Manual

MULTIMEDIA LAB (15CS23P)

RJS POLYTECHNIC, BANGALORE-34.

2015 CURRICULLUM

Page 1


2015 CURRICULLUM

MULTIMEDIA LAB MANUAL COURSE CODE: 15CS23P

FOR 2nd Sem CS & E (2017-18)

BY Mr. G.VELUMANI SYSTEM ANALYST COMPUTER SCIENCE & ENGINEERING RJS POLYTECHNIC BANGALORE-34.


Page 2


2015 CURRICULLUM

List of Graded Exercises UNIT – I I Using suitable Photo Editing Software, perform the following exercises:

1. Design a Visiting Card containing at least one graphic and text information. 2. You are given a picture of a garden as background. Extract the image of a butterfly from another picture and organize it on the background. 3. Given a picture, make three copies of this picture. On one of these pictures, adjust the brightness and contrast, contrast, so that that it gives an elegant elegant look. On the the second second picture, picture, change change it to grayscale and the third is the original one. 4. Convert the given image to a pencil sketch. 5. Mask the background image given through your name. 6. Import two pictures, one that of sea and another of clouds. Morph, Merge and Overlap the images.

UNIT – II II Using suitable animation software, solve the following projects:

7. Shape Distortion: Create a square and gradually convert it into a circle. 8. Spotlight: Create a text on one layer; format the text with suitable size, color and style. With the help of another layer, position a spotlight on the text and move the spotlight from left to right. 9. Virtual Drumbeat: Draw a circle to represent a drum and edit as required on one layer. Insert another layer, draw suitable drum sticks and position them appropriately. Give visual effects. Also provide audio effect by selecting the sound item from Flash library Sounds.fla, so as to integrate audio and video clips. 10. Simulation of a Raindrop: In the first layer, draw a raindrop that falls on the ground. Show the splash effect, when it touches the ground on another layer. 11.Sunset: Create a suitable background with clouds and mountains on one layer. Draw the Sun on another layer. On the third layer draw birds. Provide animation to show the birds flying across the Sun that keeps fading. 12.Stickman Walk: Draw a walking track on one layer. On another layer draw a stickman, with animation show the man walking over the track from left to right.


Page 3


2015 CURRICULLUM

Scheme of Evaluation for End Exam SN

1 2 3 4

Content

Max. Marks

Writing steps one each from Unit I and Unit -II Testing the psychomotor skills (Quickness in choosing appropriate tools and performing) of Unit I and Unit II to achieve the task Application of Final effects Viva voce Total Note: 1. Candidate shall submit Lab Record for the Examination. 2. Student should be allowed to execute directly even if she / he unable to write the procedure 3. In case of change in experiment or no write up, marks will not be awarded for writing procedure/steps.

05+05=10 10+10=20 05+05=10 10 50

Resource requirements for Multimedia Multimedia Lab

(for an intake of 60 Students [3 Batches] ) Hardware Requirement: Requirement: Sl. No. 1 2 3

4

Equipment

PC systems (latest configurations configurations with speakers) Laser Printers Networking (Structured) (Structured) with CAT CAT 6e / wireless 24 Port switches / Wireless Router I/O Boxes for networking(as required) Broad Band Connection

Quantit y 20 03 03

01

Software Requirement: FOSS Photo Editor/Animation Editor/Animation Tools/any other Note: Students: Computers ratio in the Lab should be strictly 1:1 for a batch of twenty Students.


Page 4


2015 CURRICULLUM

INTRODUCTION TO MULTIMEDIA Definition of Multimedia As the name implies, multimedia is the integration of multiple forms of media. This includes text, graphics, audio, video, etc. OR Multimedia is content is content that uses a combination of different content different content forms such as text, audio, images, animations, video and interactive interactive content. OR Integration of animation, audio, graphics, text, and full-motion video through computer hardware and software for education, entertainment, or training. The Stage The stage is the large white rectangle in the center of Flash's workspace, it is like a virtual canvas. In these we can draw the pictures, display text, and make objects move across the screen. Any graphics placed in this area are visible to the audience watching Flash when it plays. You can define the properties of your Stage, such as its size and color, or change the zoom.

The Tools Panels The Tools Panel enables you to create graphics and text (via the "Line tool" and the "Text tool"), to edit graphics (via the "Eraser tool" and the "Paint Bucket tool"), and to simply select graphics (via the "Selection tool", the " Sub select tool", and the "Lasso tool"). The two view tools ("Hand tool" and "Zoom tool") enable you to change your view of the Stage. The colors setting ("Stroke Color" and "Fill Color") gives you control over the color of objects drawn. Selection tool (V): - As the name suggests this tool is used to select objects in the stage with the single click. You can select any objects to change its positions, change colors, resize and lot of other change. Sub select tool (A): Use this tool to reshape a motion path of an animation. It is also used to adjust the length / angle of straight as well as adjusting shapes / curves.


Page 5


2015 CURRICULLUM

The Lasso tool (L): This tool allows you to draw around the shape, selecting everything contained in the shape you draw. In the default mode, you can draw a freeform lasso around the object you want to select. You can also choose the Polygon mode for defining the selected area with a series of straight-line segments. DRAWING TOOLS

1.) Pen tool (P): The Pen tool is the only tool in the Flash toolbox that doesn't resemble a tool from everyday life. Although the tool symbol looks a lot like an ordinary pen it works quite a bit b it different. The purpose of the Pen tool is to allow you to draw precise paths as straight lines or smooth, flowing curves. There are two methods for drawing with the Pen tool: a) Click to create points on straight line segments b) Click and drag to create points points on curved line line segments. 2.) Line Tool (N): The Line tool draws perfectly straight lines in any direction you drag your mouse. You can also create your own line style for specific types of dashed, dotted or artistic lines. 3.) Pencil Tool (Y): The Pencil tool ( Y) is used to draw freeform lines by dragging the cursor along the Stage. It can be set to draw straight lines and smooth curves. 4.) Color Tool: After you draw a shape in flash you can color it by using different coloring tools. There are lots of coloring tools available in flash they include brush tool, ink bottle & paint bucket tool. There are two modes in color. a) Fill color: It fills the desired color selected for your object. b) Stroke color: It tells about the outline of an object or boundary color. 5.) Ink Bottle Tool (S): The Ink Bottle tool lets you change the stroke color, line width, and style of lines or shape outlines. Using the Ink Bottle tool, rather than selecting individual lines and objects, makes it easier to change the stroke attributes of multiple objects at one time. 6.) Paint Bucket Tool (K): The Paint Bucket tool fills enclosed areas with color. It can both fill empty areas and change the color of already already painted areas. areas. You can paint with solid colors, gradient fills, and bitmap fills. You can also use the Paint Bucket tool to adjust the size, direction, and center of gradient and bitmap fills. 7.) Eraser Tool (E): The Erase tool works similar to a classic eraser. Simply select the tool and drag on the Stage to erase things. You can double click the Eraser tool to delete everything on the stage. RJS POLYTECHNIC, BANGALORE-34.

Page 6


2015 CURRICULLUM

8.) The Transformation Tool: Often you may feel to transform the size of an object to rotate, resize, scaling it. For all those purpose the transformation tool comes to play. There are two types of transform tool a) Free transform tool (Q): The Free Transform tool allows you to select an object on the Stage and then interactively change its size or rotate it freely. b) Gradient transform tool (F): By using this tool you can adjust the size, rotation, width, or center.

9.) Eye Dropper Tool (I): You can use the Eye Dropper tool to copy fill and stroke attributes from objects. To use the Eyedropper tool: a) Select the Eye Dropper tool and click the object whose attributes you want to copy. (When you click a stroke, the tool automatically changes to the Ink Bottle tool. When you click a filled area, the tool automatically changes to the Paint Bucket tool) b) Click the object that you want want to apply the new new attributes to. to. Timeline The Timeline contains the sequence of individual images that make up an animation. The Timeline consists of layers, frames, and scenes that make up a Flash document. Layers appear on the left side of the Timeline and frames contained in each layer appear as multiple cells in a row to the right of the layer. Layers Layers are like transparent sheets stacked on top of one. one . Each layer can contain frames with different images that appear on the Stage. You can draw and edit objects on the current active layer without affecting objects on another layer. To create a new layer, click the New Layer button at the bottom of the Timeline. - To rename a layer, double-click its name. - To delete a layer, click on it to select the layer you want to delete, then click the Delete button at the bottom of the Timeline. Frames A keyframe is a frame in which you define a change in an animation or include frame actions to modify a movie. You can arrange keyframes in the Timeline to edit the sequence of events in a movie.


Page 7


2015 CURRICULLUM

ADOBE PHOTOSHOP ADOBE PHOTOSHOP (CS3) (CREATIVE SUIT 3) Adobe Photoshop is a raster a raster graphics editor developed and published by Adobe by Adobe Systems for macOS macOS and Windows. Windows. Photoshop was created in 1988 by Thomas and John Knoll. This new version offers the most flexible and creative set of tools for a print media, line media and digital photography. CS3 improves on features from previous versions of Photoshop and introduces new tools. One of the most significant is the streamlined interface which allows increased performance, speed, and efficiency. Photoshop Tools The different tools used in photoshop are as follows

1.) Marquee Tool: The marquee tools let you select rectangles, ellipses, and 1-pixel rows and columns. Select a marquee tool: Rectangular Marquee: Shift key). Elliptical Marquee: key).

Makes a rectangular selection (or a square, when used with the Makes an elliptical selection (or a circle, when used with the Shift

Single Row or Single Column Marquee: Defines the border as a 1-pixel-wide row or column.

2.) Move Tool: The move tool allows you to move a selection or entire layer by dragging it with your mouse or using your keyboard arrows keys. The move tool is located at the top right of the Photoshop the Photoshop Toolbox. When Toolbox. When the move tool is selected, click and drag anywhere in the image. 3.) Lasso Tool: The Lasso tool is useful for drawing freeform segments of a selection border. Polygonal Lasso Tool: The Polygonal Lasso tool is useful for drawing straight-edged segments of a selection border.

4.) Hand Tool: To navigate around an image, select the hand tool from the tools panel and drag to scroll the contents of the image.


Page 8


2015 CURRICULLUM

5.) Magic Wand Tool: It Makes a selection based on selected color. The tool simply works by you clicking in the area you want selecting. 6.) Zoom Tool: It is used to zoom in and zoom out of an image. 7.) Crop Tool: The Crop tool allows you to select an area of an image and discard everything outside this area. 8.) Slice Tool: The Slice tool allows you to divide an image into smaller sections which fit together like a jigsaw (but with straight edges). Sliced images are commonly used for web design work. 9.) Healing Brush: The Healing Brush tool allows you to fix image imperfections such as scratches, blemishes, etc. 10) Clone Stamp Tool: Photoshop's clone stamp tool allows you to duplicate part of an image. This process involves setting a sampling point in the image which will be used as a reference to create a new cloned area. 11) Eraser Tool: The eraser is basically a brush which erases pixels as you drag it across the image. Pixels are erased to transparency, or the background color if the layer is locked. 12) Gradient Tool: The gradient tool can be used to draw linear, radial, angular, reflected or diamond gradients. 13) Blur Tool: It is used to Blur an image. 14) Text Tool: This tool allows text to be typed. 15) Line Tool: The Line Tool creates line, shapes and paths (shape outlines). 16) Custom Shape Tool: This tool is used to draw custom shapes. 17) Notes Tool: The Notes Tool allows you to attach to image your notes. 18) Eye Dropper Tool: The Eyedropper tool is used to sample a color from an image to use this color further.


Page 9


2015 CURRICULLUM

UNIT - I ADOBE PHOTOSHOP 7.0


Page 10


2015 CURRICULLUM

1. Design a Visiting Card containing at least one graphic and text information. Step 1: Open Adobe Photoshop 7.0-> file-> new-> Enter height 200 and width 400 for the visiting card. Step 2: Select the rectangle tool in the tool bar and draw on the half of the work area-> area -> color it. Step 3: Repeat the same for remaining half-> use different colors to color. Step 4: Copy any picture of your choice and place it on the work area-> Resize it using transform tool. Step 5: Select the text tool and type text of your choice. Step 6: Apply the text font size, color and style of your choice.

OUTPUT


Page 11


2015 CURRICULLUM

2. You are given a picture of a garden as background. Extract the image of a butterfly from another picture and organize it on the background. Step 1: Open Adobe Photoshop 7.0→ file→ new→ Enter height 10 and width 10 Step 2: Copy any picture of a garden and place it on the work area->resize it using transform tool. Step 3: Copy the picture of a butterfly and extract the picture using lasso tool and place that butterfly on the work area (Garden). (Garden).

OUTPUT


Page 12


2015 CURRICULLUM

3. Given a picture, make three copies of this picture. On one of these pictures, adjust the brightness and contrast, so that it gives an elegant look. On the second picture, change it to grayscale and the third is the original one. Step 1: Open Adobe Photoshop 7.0→ make 3 copies of the image file and import all the 3 images into it. Step 2: Go to image 1 in the image menu bar, click on adjustments contrast→ increase or decrease.

→select

brightness or

Step 3: Go to image 2, in the image menu→click on mode →select grayscale. Step 4: Keep image 3 as original. Step 5: Go to file→ new→ give height=10 and width=10 (inches) Step 6: Copy all the 3 images into it. OUTPUT


Page 13


2015 CURRICULLUM

4. Convert the given image to a pencil sketch. Step 1: Open Adobe Photoshop 7.0 → Go to File pencil sketch → Click ok.

→ Open → Select

appropriate image for

Step 2: Duplicate the background image by right on the background (Ctrl + J) → Duplicate layer. Step 3: Desaturate the duplicate layer (Shift + Ctrl + U) Desaturate.

→ Go

to image → Adjustments →

Step 4: Duplicate the Desaturated Layer and Invert that layer (Ctrl + I) Adjustments → Invert.

→ Go

to image →

Step 5: Change the Blend mode to Color Dodge. Step 6: Apply the Gaussian Blur Filter → Go to Filter → Blur → Gaussian Blur (control the amount of blurring using the Radius slider along the bottom of the dialog box) → Click ok. Step 7: Merge the layers (Ctrl + E)

→ Go

to layer → Merge down.

Step 8: Go to File→ Save as Filename.jpg


Page 14


2015 CURRICULLUM OUTPUT

Original picture

Pencil Sketch RJS POLYTECHNIC, BANGALORE-34.

Page 15


2015 CURRICULLUM

5. Mask the background image given through your name. Step 1: Open Adobe Photoshop 7.0→ File → New → Enter Height=3 and Width=10 (Inches) (Inches) → Click Ok. Step 2: Go to File → Open → Select any appropriate image → Click Open. Step 3: Select Horizontal Type Mask Tool (Text tool) in the tool bar the image → Choose appropriate font style and font size for the text.

→ Type

your name in

Step 4: Select move tool in the tool bar → Go to edit → Copy → Paste the copied text in the new document. Step 5: Press Ctrl + T to resize the text. Step 6: Go to File→ Save as Filename.jpg

OUTPUT


Page 16


2015 CURRICULLUM

6. Import two pictures, one that of sea and another of clouds. Morph, Merge and Overlap the images. Step 1: Open Adobe Photoshop 7.0→ File → Open → Select Sea and Cloud images → Click Open. Step 2: Select the cloud image → Go to Filter image as your wish and then click ok.

→ Liquify

(Shift + Ctrl + X)

→ Morph

the

Step 3: Go to File→ New → Enter Height and Width=10 (Inches) → Click Ok. Step 4: Select Rectangular Marquee Tool in the tool box → Select a part of the cloud image and then by using move tool→ Drag the selected part to the new document. Step 5: Follow the same step i.e. Step 4 for the sea image also. Step 6: After dragging both the images into new document on Merge down (Ctrl + E)

→ Go

to Layer menu

→ Click

Step 7: Go to File→ Save as Filename.jpg


Page 17


2015 CURRICULLUM OUTPUT


Page 18


2015 CURRICULLUM

UNIT - II MACROMEDIA FLASH 8.0


Page 19


2015 CURRICULLUM

7. Shape Distortion: Create a square and gradually convert it into a circle. Step 1: Go to Macromedia Flash 8, click on flash document click ok. Step 2: Select the square tool on the stage / workspace color it. Step 3: Click on 40th frame in the timeline, insert keyframe by pressing (F6). Step 4: Select the last frame that is 40th frame draw a circle from tool bar so that it will cover the square completely and color with different color. Step 5: Again, right click on the last frame, go to actions in properties, change the tween to motion. Step 6: Again, right click on the last before frame that is 39 th frame go to actions in properties change tween to motion. Step 7: Press Ctrl + Enter to test the movie.


Page 20


2015 CURRICULLUM

OUTPUT


Page 21


2015 CURRICULLUM

8. Spotlight: Create a text on one layer, format the text with suitable size, color and style. With the help of another layer, position a spotlight on the text and move the spotlight from left to right. Step 1: Go to Macromedia Flash 8, click on flash document, change the background color if required → click ok Step 2: Rename layer 1 as text by double clicking the layer. Step 3: Using Text tool → Type any text as you required. Step 4: Go to 50th timeline of text layer

→ Insert keyframe (F6)

Step 5: Insert a new layer, rename it as Spotlight. Step 6: Using Oval tool, cover the 1 st letter of your text and then convert it into symbol (F8). Step 7: Go to 50th timeline of Spotlight layer → Insert keyframe (F6). Step 8: Insert a new layer, rename it as mask. Step 9: Go to 50th timeline of mask layer → Insert keyframe (F6). Step 10: Using selection tool, bring the oval shape to the right side of the stage. Step 11: Right click on Spotlight layer → Create motion tween and again right click on same layer → click on mask. Step 12: Press Ctrl + Enter to test the movie.


Page 22


2015 CURRICULLUM

OUTPUT


Page 23


2015 CURRICULLUM

9. Virtual Drumbeat: Draw a circle to represent a drum and edit as required on one layer. Insert another layer, draw suitable drum sticks and position them appropriately. Give visual effects. Also provide audio effect by selecting the sound item from Flash library Sounds.fla, so as to integrate audio and video clips. Step 1: Go to macromedia flash 8, click on flash document→click ok. Step 2: Double click on layer one and rename it as drum. Step 3: Using oval tool draw a drum. Step 4: Go to 20th frame and insert key frame (F6) Step 5: Create another layer and rename it as stick. Step 6: Using the line tool, draw stick for the drum and convert it into symbol (F8). Step 7: To move stick up and down i.e. beating, set the position in between the 1st to 20th frame and insert key frame (F6) in i n the timeline. Step 8: Repeat the step 6 and 7 to create another stick. Step 9: Press Ctrl + Enter to test the movie.


Page 24


2015 CURRICULLUM

OUTPUT


Page 25


2015 CURRICULLUM

Simulation of a Raindrop: In the first layer, draw a raindrop that 10. falls on the ground. Show the splash effect, when it touches the ground on another layer. Step 1: Go to macromedia flash 8, click on flash document→click ok. Step 2: Go to File→ Import→ Import to stage (Ctrl + R) → Select the appropriate rain drop image → import to the stage. Step 3: Click on rain drop → convert it into symbol (F8). Step 4: Go to timeline selection tool.

→ Insert

keyframe at 5 and bring rain drop slightly down using

Step 5: Go to 10th frame → insert keyframe. Step 6: Repeat Step 4 & 5 until raindrop reaches down down to the stage. Step 7: Finally, right click on raindrop → Go to timeline effects Explode. This will change the current layer name as Explode 1.

→ Effects → Select

Step 8: Press Ctrl + Enter to test the movie.

OUTPUT


Page 26



2015 CURRICULLUM

Page 27


2015 CURRICULLUM

Sunset: Create a suitable background with clouds and mountains on 11. one layer. Draw the Sun on another layer. On the third layer draw birds. Provide animation to show the birds flying across the Sun that keeps fading. Step 1: Go to macromedia flash 8, click on flash document→click ok. Step 2: Double click on one layer and rename it as sun Step 3: Using oval tool, draw sun. Step 4: Select the sun and convert it into symbol (F8) and then go to 50th frame and insert key frame (F6) Step 5: By using free transform tool resize the sun and set the position. Step 7: Insert a new layer and rename it as mountain. Step 8: Using pencil or line tool, draw mountain. Step 9: Go to 50th frame and insert key frame on mountain layer. Step 10: Insert a new layer and rename it as cloud. Step 11: Using pencil or brush tool, draw cloud. Step 12: Go to 50th frame and insert key frame on cloud layer. Step 13: Insert a new layer and rename it as birds. Step 14: Draw the birds using pencil or brush tool, select all the birds by holding shift key and insert key frame for birds layer at intervals of 5. Step 15: Press Ctrl + Enter to test the movie.


Page 28


2015 CURRICULLUM

OUTPUT


Page 29


2015 CURRICULLUM

12. Stickman Walk: Draw a walking track on one layer. On another layer draw a stickman, with animation show the man walking over the track from left to right. Step 1: Go to macromedia flash 8, click on flash document→click ok. Step 2: Rename layer 1 as track, draw the track and convert it into symbol (F8). Step 3: Insert another layer rename it as stickman. Step 4: Draw stickman and convert it into symbol and insert keyframe on stickman layer and insert frame(F5) on track layer. Step 5: Delete the stickman and repeat the step 4 by changing the position of stickman and insert keyframe with the interval of 5. 5. Step 6: Repeat the same steps 5 to 6 times and press Ctrl + Enter to test the movie.


Page 30


2015 CURRICULLUM

OUTPUT


Page 31


2015 CURRICULLUM

MULTIMEDIA LAB VIVA QUESTIONS 1. What is multimedia? Multimedia is content is content that uses a combination of different content different content forms such as text, audio, images, animations, video and interactive interactive content. Ex: An image, A graphical icon, A movie clip. 2. What are its applications? applications? A multimedia message makes the user to understand the message user friendly. So multimedia Concepts are used to create motion pictures like Mpeg, Jpeg, png etc. otion Picture Experts Group. MPEG: Moving Picture Experts Group / M otion JPEG: Joint Photographic Experts Group. GIF: Graphics Interchange Format. PNG: Portable Network Graphics. PDF: Portable Document Format. TIF: Tagged Image File. 3.

Software’s used in Multimedia?

Photoshop, Flash, Max, Autodesk Maya, ZBrsuh etc. 4. What are the applications applications of flash multimedia software. Using flash, we can create story board consisting of 2D graphical images speech bubble. We can also create motion for the objects of the flash, so that it looks like a movie. 5. Industrial applications of flash. Television industry for creating advertisements, magazines and media. 6. Name some tools of flash software Selection, sub selection, free transform, gradient, line, lasso, pen t ool, text, oval, rectangle, pencil, brush, paint bucket etc. 7. Name the version of flash software you are using in your lab Macromedia Flash Professional 8.0


Page 32


2015 CURRICULLUM

8. What is a frame A movie or a picture inserted in a single work area for a single timeline is called a frame 9. What is a keyframe Method of locking a frame in a predefined timeline unit is called keyframe 10.Which 10.Which is the shortcut key used to add keyframes F6 11.What 11.What is a photoshop It is an application software used to edit the photographs for some interactive applications. 12.Which 12.Which version of software you are using in your lab Adobe Photoshop 7.0 13.Name 13.Name few tools which we used in photoshop software There are tools like move tool, lasso tool, magic wand, crop, Blur tool, brush tool, eraser, paint bucket, pen tool etc. 14.Industrial 14.Industrial applications of photoshop Photoshop software application is found in Photographer, Newspaper Agencies, Web Designer, Graphics Designer, Advertiser etc. 15.What 15.What is the shortcut key used to zoom in and zoom out for an imported picture to work area? Ctrl+ (zoom in) Ctrl- (zoom out) 16.Which 16.Which is the tool used to cut an object from an image Lasso, Polygonal lasso, Magnetic lasso tool.


Page 33


2015 CURRICULLUM

REFERENCES 1.

Practical Photoshop® CS6, Level 1 by Barbara Zukin Heiman, Donald Laird, Corrine Haverinen, Windsor Green, & Marilyn P. Kelly Practical Photoshop.

2.

Project Flash MX by Nat Gertler, Thomson Delmar Learning Publication.

3.

Comdex Multimedia and Web Design Course Kit, DreamTech, Vikas Gupta, ISBN 13:788177229196

4.

http://www.coursestuff.co.uk/DESI1182/docs/Flash%20tutorials.pdf

5.

http://w3.id.tue.nl/fileadmin/id/objects/E- telier/Phidgets/Software/ telier/Phidgets/Software/Flash/fl8_tutorials.pdf Flash/fl8_tutorials.pdf

6.

http://design.tutsplus.com/articles/50-great-photoshop-tutorials-for-clever-begi http://design.tutsplus.com/articles /50-great-photoshop-tutorials-for-clever-beginners-nners-- psd-785


Page 34

Multimedia Lab Manual

Recommend Documents