Practical file

On
multimedia

Submitted To Submitted by
Ms. Sunaina Rathee Rinku Malik

Assistant professor M.Sc – 1st(C.S)

(Deptt. Comp. Sc.) Roll no: 242566003

All India Jat Heroes’ Memorial College, Rohtak

 TABLE OF CONTENTS
S.no PROGRAMS Page Signature
no.
1 How to create shape tweening in
macromedia flash 8 with example.

2 How to create motion tweening with

example.

3 How to perform morphing in animation with

example.

4 How to create onion skinning in animation

with example.

5 How to create text animation in

macromedia flash with example.

6 How to create animation using masking

motion with example.

7 How to add sound to an animation.

8 Write names of five recording software.

9 Write down image file formats.

10 Write ten image editing software’s.

11 How to create raster graphics and vector

graphics with example

12 How to create outline font and Bitmap font.

 Practical-1
How to create shape Tweening in macromedia flash 8 with example

 Shape tweening
Shape Tweening is one of the animating features of Flash. In shape
tweeting, the shape of an object can be changed to another by using
shape tweens which fills the middle frames by using some kind of
algorithm and gives the effect of changing one figure to another in a
pleasant looking way.

It also works fine for other changes like color, scale, position, etc.
Shape tweens work only for editable shapes, not for graphic symbols
so do not use any graphic symbol. A minimum of two frames is
needed for applying shape tweens, one for the first image or shape and
the last frame for keeping the shape to which conversion of the first
shape will happen. Using show tweening we can animate more than
just object in the series of frames.
In Adobe Flash, a shape tween creates smooth transitions between two
shapes over a series of frames, effectively morphing one shape into
another. It works by interpolating the lines and fills of the shapes,
rather than entire symbols or objects.
Here's how to create a shape tween:
1. Create Keyframes: Draw a shape in the first frame (keyframe) of a
layer and then draw a different shape in a later keyframe on the same
layer.
2. Select Frames: Choose a frame between the two keyframes.
3. Insert Shape Tween: Select "Insert > Shape Tween" from the Flash
menu or right-click and select "Create Shape Tween".
4. Preview: Press Enter or the Play button to preview the animation .
Step for creating shape tweening :-

Step 1 - Draw an object

 We draw an oval with a thick border with the oval tool and set the

background.
 Then we centre the oval in the stage. To do so, use the Align panel (Window-

>Align, or hit Ctrl-K)

o Check to stage and click on the Align icons until you get it right

Step 2 - Insert a new blank keyframe

Select about frame 20 and hit F7 or right-click on frame 20 and
select Insert Blank Keyframe. Do not use "Insert Frame" / "Insert
Keyframe" (F6))
F7 will insert an empty new Keyframe
Step 3 - Add a new object to the new keyframe
In this frame, draw a new object, i.e. we inserted a Polystar, also in
object mode.
 Select the Polystar tool (It sits below the rectangle tool, and you must hold
down the mouse to get at it)
Then, in the properties panel, select from the Options pull-menu: Star and
Number of sides = 9
 Then, draw it by dragging out the mouse
Step 4 - Change its shape and align it with the oval and the stage
Then make it a bit "oval" and adjust it more or less to the size of the oval
 Change the width (in the Properties panel or with the Free Transform tool)
 Align with the oval: To see the oval at the same you can click on the "Edit multiple
frames" icon in the Timeline control bar and drag the onion skin marker on top of the
timeline all to the left
 To achieve a perfect centring, use the Align panel.

Step 5 - Change colours of the polystar

 Firstly, untick the "Edit multiple frames" icon!!
 Then you can change the colours of the stroke and the fill
Step 6 - Morph
 Right-click on an empty frame between the two keyframes and select Create
Shape Tween
Alternatively, you also could click into an empty frame and select Shape
Tween in the insert menu at the top
Step 7 - Repeat the other way round
 Insert a new empty keyframe around frame 40
 Copy the picture from frame 1 (select it and hit CTRL-C in frame 1)
 Paste-in-place it to the empty keyframe (CTRL-SHIFT-V)
 Add the shape tween as above
Test.
 Move around the play head
 Menu Control->Test Movie
If the animation is too fast, drag the keyframes to the right
 Click on the keyframe first. You should see a cursor with a rectangle
 Only then you can drag.
Example:-
 PRACTICAL – 2
How to create motion tweening with example

Step 1: Run the Flash application. After loading, the below window will appear.

Step 2: Click on ActionScript 3.0.

 Step 3: Following screen will appear.

Step 4: Draw a circle on the first frame using circle tool from
the toolbar on left side.
 Step 5: Now take the mouse pointer on the first frame and
right-click, a list will appear, click on Create Motion Tween.

Step 6: A dialog box will appear asking for changing the shape to a
symbol, click OK.
Step 7: Now the frames from 1 to 24 are being highlighted as flash is
making animation on 24 frames per second and after applying motion
tween it reaches to 24th frame.

Step 8: Now select the box using selection tool or pressing v

on the keyboard and drag it to any side. It will show a motion
path after placing it to any position.
Step 9: Click on the play button below the timeline to see the motion
 Practical-3
How to perform morphing in animation with example

 Morphing animations, where everything is in constant

transformation, evolving and shifting into something unexpected. In
this comprehensive guide, you'll find answers to all your questions
about morphing animations: what they are, their origins, the main
types, some fascinating examples, how to create them, when to use
them, how they compare to other animation techniques, and the best
tools available for the job.

 Morphing animation is a technique where a subject, object, or shape

is smoothly transformed from one form to another, creating a
seamless transition that highlights a moment of change. Think of
those jaw-dropping moments in sci-fi and horror films, like a
creature morphing into a human

Example of modern morphing: -

 Steps for image processing:-

Step 1: Importing libraries

Like image warping, the first step is to import the libraries. We are going to
import open-cv. The code is as follows:

Step 2: Image Paths and Resizing

Now, we need to select two or more images we want to morph. These images
need to have similar dimensions, so that the transition would appear smooth.
Hence, we would resize the images. Here, '(x,x)' is the dimension of the
image.

Step 3: Image Blending

Now, we create a 'for' loop which will run for many steps, where each step is a
step in the process of morphing. Now, we calculate the percentage to control
the blending inside the for loop.
Here, 'add Weighted' function helps in blending the source image and
destination image using the percentage difference between the source image
and destination image. In simple words, as the source images vanishes, the
destination images become clearer. The morphed images get displayed
continuously until the for loop ends which is called the display of Morph
Sequence.

Step 4: Closing the window

This is final step to close the windows when 0 is pressed.
Now let's see the how to do simple morphing using
Python Open CV package:

#import libraries
import cv2

#images paths in source and destination

source = "C:/Users/rinku/Desktop/boy 1.png"
destination = "C:/Users/rinku/Desktop/boy 2.png"

#reading images and resizing it

image_source = cv2.imread(source)
image_source = cv2.resize(image_source, (500, 500))

image_destination = cv2.imread(destination)
image_destination = cv2.resize(image_destination, (500, 500))

#morphing in 100 steps

for i in range(100):
percentage = float(i / 200)
print(percentage)
imgAdd = cv2.addWeighted(image_source, 1 - percentage, image_destination,
percentage, 0)
cv2.imshow("Morphed", imgAdd)
cv2.waitKey(200)

#waiting till 0 is pressed

cv2.waitKey(0)
#closing all windows
cv2.destroyAllWindows()
 PRACTICAL- 4
How to create onion skinning in animation with example

 ONION SKINNING: -

Onion skinning is a technique from 2D computer graphics that

allows animators to see adjacent frames at once. That way, the
animator can make decisions or edits based on how the previous
frames are drawn. This feature comes in handy when you are
creating even a simple sketching of a storyboard and allows you
to create animations like a pro!

How to Use Onion Skinning in Animation Desk

Turn on the Onion Skin feature in the settings or check the
lightbulb on the bottom-left toolbar.
means Onion Skin feature is on.
means Onion Skin feature is off.

Three Onion Skin Ranges are available for you to choose

depending on how you want your frames to show:
 The previous one frame and the next one frame.

 The previous two frames.

 The next two frames.

How to create onion skinning:

1.Enable Onion Skinning:

Most animation software (like Photoshop, Scratch, Toon Squid,
Procreate, etc.) has a dedicated onion skinning feature that you
can enable through a button, menu, or setting.

2.Adjust Settings:
You can typically control the number of frames to display, the opacity
of the onion skin frames, and whether to show previous or future
frames.

3.Draw Frames:
As you draw your animation, you'll see the onion skin frames overlaid,
allowing you to guide your drawing based on previous and future
positions.

4.In-betweens:
Use the onion skin to draw in-between frames, ensuring smooth
transitions between key poses.

5.Maintain Consistency:
Onion skinning helps you maintain consistent character poses, movements, and
visual elements across the animation
 EXAMPLE

A person running on a road but with the help of onion

skinning you can see the person forward and backward
step
 PRACTICAL- 5
How to create text animation in macromedia flash with example

 Animate Text in Adobe Flash

If you're new to Adobe Flash you may want to start by creating simple
animations. There's no better place to start than by animating text! Iain
Anderson takes you through the basics in this tutorial.
If you need to create an animation in Flash, there are a few techniques
that can make great work fast. While I discuss many of these in
my recent Flash tutorials here, I thought I'd call out one of them here as
it's so simple, yet so useful.

1.Adding some text

First, create a new document and use the Text tool to add some text to
the canvas. I'll make a fairly short word to keep it simple here. You
may need to make the text bigger than the normal maximum of 96pt, so
type a higher value in if you need to.

Hello there!
2.Breaking it apart
Select the text, then choose Modify > Break Apart or press Command-
B. This turns the text box into several separate text boxes, one for each
letter. (If we chose to Break Apart again, we'd convert it into outlines,
but we don't want to do that this time.)

After a single Break Apart, each letter stands alone.

3.Distribute to Layers
To encourage good Flash habits, a very handy command is Distribute
to Layers. Since it's easiest to animate when you have one object per
layer and each object is a symbol, we can start by pushing each of these
objects to its own layer. Choose Modify > Timeline > Distribute to
Layers, or press Command-Shift-D.

Here are all the letters, each on its own layer.

4.Converting to Symbols
Great! Each letter has been placed onto a new layer and named for that
character. Let's convert each letter into a symbol so we can animate
them efficiently. Select the first letter, then press F8. (Note that if
causes your Mac to play music, you can press Fn-F8, or switch the
priority of function keys in the Keyboard pane of System Preferences.)
Name each symbol as 01, 02, 03 etc. followed by the appropriate letter,
for example: 01-H, 02-e, 03-l, and so on. This means that you'll have a
symbol for each letter, and you'll know which one is which if you want
to change them later. I've used Movie Clip as the type, but it's not
critical.

Convert to Symbol for each letter.

5.Time to work
Select a range of frames in a vertical line, as far down the timeline as
you want your animation to last, covering all your letters. Press F5 to
Insert Frames, and we have something to work with.

Just before pressing F5, these frames should be selected.

6.Fixing the end points
Select another range of frames across all your layers, about 70% of the
way along the timeline, and press F6 to create some keyframes. This
will stop the animation.

If you only keyframe at the end, the animation never rests.

7.Changing the start

Move the playhead to the start of the movie. Select each letter in turn,
move it away from the start point by pressing Shift-Up or Shift-Down a
few times, then use Properties to set the Color Effect to Alpha at 0%.

Move them around, make them invisible at the start.

8.Making it move
Select a vertical range of frames somewhere between the first two sets
of keyframes, then right-click and choose Create Classic Tween. Now
you'll see the letters all fade and move it at the same time.

All moving at once.

9.Offsetting it all
You can make the motion more natural by offsetting the start and/or
end keyframes of each of these letters. The easiest way to do this is to
hold the Command key and drag each letter's first and second
keyframes just a little way along the timeline.

And now they're all done.

Conclusion-
And that's about it. The same technique can be used for any word,
animating any parameter, to produce original, effective, text-based
motion graphics in Flash. Enjoy! And remember: if you get stuck,
we've got a whole series of Flash video tutorials ready to help.
 PRACTICAL – 6
How to create animation using masking motion with example

Masking:-

Masking is one of the important features of flash, it can be

defined as placing one layer over another so to animate the
second layer with the help of the first one. This technique is
mainly used in animating text and objects. When objects on both
the layers overlap, only that part are visible in animation. Motion
tweening or shape tweening can be used with masking for
animation.
Steps to create animation using Masking

Step 1: Open Adobe Flash.

Step 2: Now take a circle and draw on stage.

Step 3: Now use the selection tool to select the circle and then right-
click on it, a drop-down list will appear now click on the convert to
symbol.

Step 4: Next screen will appear, choose the graphic type and click OK.
Step 5: Now click on any frame and right-click on it, a list will appear
to click on Insert Keyframe.

Step 6: Now again choose a frame between two keyframes and right-
click on it, a drop-down list will appear now click on create classic
tween.
Step 7: Now move the circle to the other side by dragging it.

Step 8: Now create a new layer and name it as Mask.

Step 9: On the mask layer create a rectangle using the rectangle tool.
Step 10: Now choose the mask layer and right-click on it, a drop-
down list will appear, click on Mask.

Step 11: Masking is applied to the layers and nothing is visible on the
screen as the effect will be seen when both layers will overlap.
Step 12: Click on the run button and see the masking animation.
 PRACTICAL – 7
How to add sound to animation

1. Select the slide that contains the animation effect to which you want
to add a sound.

2. On the Animations tab, in the Advanced Animation group,

select Animation Pane.

3. Select the effect in the Animation pane, select the drop-down arrow
to the right of the effect, and then select Effect Options.

4.On the Effect tab, under Enhancements, select the drop-down

arrow in the Sound list, and then do one of the following:
 To add a sound from the list, select a sound.

 To add a sound from a file, select Other Sound..., and then locate

the sound file that you want to use.

 PRACTICAL- 8
Write name of five recording software

 Audacity.
 GarageBand.
 Audition.
 Voice Record Pro.
 Sound Forge Audio Studio.
 Reaper.
 Practical - 9
Write down image file formats

 JPEG (or JPG) - Joint Photographic Experts Group

 PNG - Portable Network Graphics.
 GIF - Graphics Interchange Format.
 TIFF - Tagged Image File.
 PSD - Photoshop Document.
 PDF - Portable Document Format.
 EPS - Encapsulated Postscript.
 AI - Adobe Illustrator Document
 PRACTICAL – 10
Write an image editing software

 Canva
 Adobe Lightroom
 Snapseed
 Pixlr
 Capture One
 DxO PhotoLab
 Affinity Photo
 Gimp
 Fotor
 Adobe photoshoot
 PRACTICAL -11
How to create raster graphics and vector graphics with example

EXAMPLE-
Steps to create raster graphics in Photoshop: -

1. Start with a new canvas or open an existing image:

Choose your desired dimensions and background colour.

2. Add layers:
Photoshop allows you to work with multiple layers, enabling you
to create complex designs and easily edit different elements.

3. Use drawing tools:

Utilize the brush, pencil, paint bucket, or other tools to create
shapes, lines, and colours on your layers.

4. Apply gradients and effects:

Enhance your artwork with gradients, filters, and other effects to
add depth and visual appeal, according to LinkedIn.

5. Save in a raster format:

Choose a raster file format like JPEG, PNG, or GIF to preserve
the pixel-based nature of your image.
 Steps to create vector graphics in Photoshop: -

1. Open your image.

Import the image you want to vectorize into Photoshop.

2. Select the part of the image you want to vectorize.

Choose the section you want to vectorize with an appropriate
selection tool. If you want to select a rectangular area, use the
Rectangular Marquee tool. If you want everything of a
particular color, use the Magic Wand tool. If you just want to
vectorize the subject of the image, Use the Select Subject
command.

3. Add a Threshold layer.

To convert your selection into a single-color image, add a new
Threshold layer using the Layers panel, and select Create New
Fill or Adjustment layer. You choose the threshold with the
slider, and all pixels lighter than that tone become white, while
all pixels darker become black.

4. Select Tonal Areas with the Colour Range Command.

Use the Color Range command to make a selection that
includes all pixels that share a similar colour. You’ll want to
select all of the white or black in your image depending on
which part you’d like to vectorize. Go to Select › Colour Range.
Use the Eyedropper tool to select either the white or black area.
5.Convert your selection into a path.
Right-click inside your selection and choose Make Work Path
to set a tolerance value for your path. A tolerance value
determines how much your path should stick to the contours of
the selection. The higher the tolerance value, the more precisely
the path will match the selection.

6.Create a solid colour layer.

Go to the Layers panel and create a new Fill layer or
Adjustment layer. Choose Solid Colour from the menu. This
new layer defines the shape of the vector on top of the
Threshold layer. It can be any colour you like.

7.Save the Vector Image as an SVG file.

Right-click on the layer, select Export As, and choose SVG file.
You now have a vector file.
 Practical -12
How to create outline font and bitmap fund

To create outline font –

1. Open your image.
Import the image you want to vectorize into Photoshop.
2. Select the part of the image you want to vectorize.
Choose the section you want to vectorize with an appropriate selection tool. If
you want to select a rectangular area, use the Rectangular Marquee tool. If you
want everything of a particular color, use the Magic Wand tool. If you just want
to vectorize the subject of the image, Use the Select Subject command.
3. Add a Threshold layer.
To convert your selection into a single-color image, add a new Threshold layer
using the Layers panel, and select Create New Fill or Adjustment layer. You
choose the threshold with the slider, and all pixels lighter than that tone become
white, while all pixels darker become black.
4. Select Tonal Areas with the Color Range Command.
Use the Color Range command to make a selection that includes all pixels that
share a similar color. You’ll want to select all the white or black in your image
depending on which part you’d like to vectorize. Go to Select › Color Range.
Use the Eyedropper tool to select either the white or black area.
5. Convert your selection into a path.
Right-click inside your selection and choose Make Work Path to set a tolerance
value for your path. A tolerance value determines how much your path should
stick to the contours of the selection. The higher the tolerance value, the more
precisely the path will match the selection.
6. Create a solid color layer.
Go to the Layers panel and create a new Fill layer or Adjustment layer. Choose
Solid Color from the menu. This new layer defines the shape of the vector on
top of the Threshold layer. It can be any color you like.
7. Save the Vector Image as an SVG file.
Right-click on the layer, select Export As, and choose SVG file. You now have
a vector file.
To create bitmap font –

1. Choose a Bitmap Font Editor:

 BMFont: A popular choice for creating bitmap fonts, especially for game
development. It's available for Windows and can process various font
formats like TTF.

2. Prepare Your Font:

 If you're using an existing font, you'll typically load it as a TTF file into the

bitmap font editor.

 You can also create custom glyphs by drawing them in a graphics editor

and importing them into the bitmap font editor.

3. Generate the Bitmap Font Files:

 Glyph Images:

The editor will generate a .png image containing all the glyphs arranged in
a specific manner, often as a "sprite sheet".
 Font Descriptor:

A .fnt or XML file that describes the location, size, and other properties of
each glyph within the .png image.
Load and Use the Bitmap Font:
 Rendering Engine: You'll need to use a rendering engine like PIXIJS,
Phaser, or a similar library to display text using the bitmap font.
 Load the Files: Load the .png image and the .fnt (or XML) file into the
rendering engine.
 Create Text Objects: Use the rendering engine's API to create bitmap
text objects that display the text using your newly created bitmap font.