EXERCISE 1

AIM:
This exercise can be solved using the following functions: Selection Tools, Copy, Cut,
Paste, Move Tool, Paste Into

PROCEDURE FOR PASTE:

1. Save the pictures maths.jpg ,Einstein.jpg and wall.jpg to your student folder. See the chapter
Steal a picture from the net if you're unsure of how to do it.
2. Open the picture maths.jpg in Photoshop. Use the rectangular selection tool to select the
square painting, and copy it.
3. Open the picture wall.jpg in Photoshop (without closing maths.jpg). Paste the square picture
onto the wall. Once you've pasted it there, use the Move Tool to place the painting near the right-
hand edge of the wall.
4. Use the elliptical selection tool to select the round painting in the picture pictures.jpg. Cut it
out.
5. Paste the round painting into the picture wall.jpg. Use the Move Tool to place it near the left-
hand edge of the wall.

OUTPUT(PASTE):

Copy the pictures in maths.jpg and paste them into wall.jpg.

PROCEDURE FOR PASTE INTO:

1. Save the pictures framethis1.jpg. and emptyframes.jpg to your folder.
2. Open the pictures you just saved in Photoshop.
3. Use a fitting Selection Tool to copy a picture from one of the framethis-pictures. When you've
copied it, Select the empty space inside one of the borders in the picture emptyframes.jpg. Use
the function Paste Into to paste the picture you just copied into the frame.
4. Use the Move Tool to move the picture around inside the border until it fits.
5. Repeat until all the empty frames are filled.
OUTPUT (PASTE INTO)

Copy the pictures in framethis1. Use the function Paste Into to get them into the empty frames.
 EXERCISE 2

AIM:
This exercise can be solved using the following functions: Lasso- and Polygonal Lasso
Selection Tools, Copy, Paste Into, Move Tool, Zoom Tool, Transform,Opacity

PROCEDURE FOR Lasso- and Polygonal Lasso Selection Tools, Zoom Tool:
1. Save the pictures dog.jpg and doghouse.jpg to your folder.
2. Open the pictures in PhotoShop.
3. Use the Lasso- or Polygonal Lasso Selection Tools to select the dog. Be careful around the
edges. You will probably have to use the Zoom Tool. Read more about how to effectively use
these selection tools in the Tools chapter in the compendium.
4. When you've Selected the dog, copy it.
5. Use the Polygonal Lasso Tool to create a selection in the opening of the doghouse. Use Paste
Into to put the dog in there. Move the dog around with the Move Tool. Use Transform Scale to
shrink the dog a bit. Read more about how to do this in the chapter Transform in the
compendium.

OUTPUT1:

Use the Lasso- or Polygonal Lasso Tool to Select and copy the dog. Paste the dog into
the doghouse..

PROCEDURE FOR Transform, Opacity:

1. Save the pictures ghost.jpg and ghostcastle.jpg to your folder.
2. Open the pictures in Photoshop.
3. Use a Selection Tool to Select the ghost. Copy it. Paste at least ten copies of the ghost into the
ghostcastle picture. Feel free to use Paste Into if you like. Use the Move Tool to place each ghost
where you want it.
4. Use the Transform functions to change the way each ghost looks.
5. Give each ghost's layer an Opacity that's less than 100%.
OUTPUT2:

Copy the ghost and paste at least ten copies of it into the castle picture. Use the Transform
function on each ghost, and give the layer of each ghost a different Opacity.
 EXERCISE 3

AIM:

This exercise can be solved using the following functions: Quick Select Tool (or Magic Wand
Tool), Invert Selection

PROCEDURE:
1. Save the picuresguitar.jpg and flowerback.jpg to your folder.
2. Open the pictures in Photoshop.
3. We're going to select the guitar. The fastest way to do that is here is to select the black area
around the guitar and then invert the selection -- to turn it inside out, so that the guitar ends up
being selected while the black area becomes deselected.
If you're using Photoshop CS3, try using the Quick Select tool to Select the black area around the
guitar. Read about how the Quick Select Tool works in the Tools chapter in the compendium.
If you're using Photoshop 7, use the Magic Wand Tool to Select the black area around the guitar.
We weren't supposed to have to use Photoshop 7 when I started writing this course so I never
mentioned Magic Wand Tool in the compendium, but it's fairly easy to use: click on the Magic
Wand Tool in the Tool Box (it's in the same button as the Quick Select Tool, look it up in the
chapter Tools in the compendium for a picture that shows you where it is). Once you've clicked
on the Magic Wand Tool, make sure the value for Tolerance is more than 0 up in the
Alternatives Bar -- somewhere around 20-30 would be good. Now click once on the black area
around the guitar and you'll see that everything but the guitar becomes Selected (look at the
edges of the picture and you'll see the selection bordering them; everything black has been
selected, but not the guitar.)
4. Regardless of how you Selected the black area, now it's time to Invert the selection. Do that.
Read about how in the Selection Tools Basics and Fancy Tricks section in the Tools chapter in
the compendium.
5. Once you've inverted the selection everything that wasn't selected before (the guitar) should be
selected, and everything that was (the black) should be deselected. Now you see how Invert
works, it can be very handy! Now copy the guitar.
6. Paste the guitar into the flowerback picture.

OUTPUT:

Use the Selection Tool Quick Select to select the black area around the guitar. When you've
selected all of it, Invert the selection. Now you can copy the guitar! Paste it onto the flowery
background.
 EXERCISE 4

AIM:
This exercise can be solved using the following functions: Paint Bucket Tool, Color Picker,
Brush Tool

PROCEDURE:
1. Save the picture colorize.psdto your folder.
2. Open the picture in Photoshop. It's in .psd-format because it consists of several layers.
3. Use the Paint Buchet Tool to color each part of the picture. Make sure to pick the right layer
before you start coloring it! Read about how to pick a color under Color Picker and Eye Dropper
Tool in the Tools chapter.
4. The layer "ansikte" (meaning "face") is empty. Use the Brush Tool to paint a face in it.

OUTPUT:

Use the Paint Bucket Tool to color the picture. Make sure to pick the right layer before you use
the tool.
 EXERCISE 5

AIM:
This exercise can be solved using the following functions: Layers AND Eraser Tool

PROCEDURE:
1. Save the pictures mars.jpg to your folder.
2. Create new picthre that is about 500 pixels wide, 400 pixels high, and has a resolution of 72
pixels/inch. We're going to create a fancy space background here. Use the Paint Bucket Tool to
fill the Background layer with the color you want the space to have. Use the Brush Tool to paint
the stars and stuff.
3. Open the pictures you just saved. Use the Elliptical Selection Tool to select a planet (be
careful around the edges). Copy it, and paste it onto your space background. Do this for each of
the three planets.
4. Imagine that the sun (out of picture) shines on the three planets from the right. The goal here is
to create shadows on the planets. You do this by using the Eraser Tool, preferably with a big,
soft brush set on a low Opacity. Read more about the Eraser Tool in the Tools chapter in the
compendium.
Since this exercise can get a little tricky you'd be wise to make a couple of security copies of the
layers you don't want to risk messing up. Read on how to quickly copy an entire layer under
Layers in the compendium.
When you're done your picture should look something like this:
 EXERCISE 6

AIM:
This exercise can be solved using the following functions: Text Tool, Transform Tool

PROCEDURE(TEXT):
1. Save the picture dialogue.jpg to your folder.
2. Open the picture in Photoshop. What are the men talking about? You decide! Use the Text
Tool to type their dialogue into the speech bubbles. Use different fonts, sizes and colors where
needed. Read how under Text Tool in the Tools chapter.
Add more bubbles if you want to by Selecting a bubble, copy it, and paste it. Use the Transform
function and the Move Tool to make it look like you want it.

OUTPUT(TEXT):

Use the Text Tool to add text to the speech bubbles. Give the text different looks depending on
what they're saying. Feel free to add more bubbles if you need it.

PROCEDURE(TRANSFORM):
1. Save the picture transform.psdto your folder.
2. Open the picture in Photoshop.
3. The picture consists of eight layers: seven things and one background. Your task here is to
move the things around and use the Transform function to put them where you think they should
be, and make them look the way you want.
4. Put the diver out in the water. Use the Eraser Tool set on a medium Opacity to make him look
like part of him is below the water's surface.
OUTPUT (TRANSFORM)

Use the function Transform to change sizes, places and rotations of all the things in this picture.
 EXERCISE 7

AIM:
This exercise can be solved using the following functions: Selection Tools, Selection Types,
Color Balance

PROCEDURE:
1. Save the picture color.jpg to your folder and open it in Photoshop.
2. Use a Selection Tool to carefully select the iris and pupil of an eye on the girl to the left (that's
the "inside" of the eye, the ring of color and the black dot).
3. Now set the Selection Type to Add To Selection and select the other eye as well. Read more
on Selection Types under Selection Tools: Basics and Fancy Tricks in the Tools chapter.
4. Use the Color Balance function to change the color of the girl's eyes. When you're done, turn
off the selection by Deselecting it.
5. Repeat this procedure with everything in the picture. Use different Selection Types on your
selection where it fits. When you use Color Balance, try switching between Shadows, Midtones
and Highlights. This will give you some very different results.

OUTPUT:

Use the Selection Tools to Select different parts of the picture. Colorize the parts using the Color
Balance function.
 EXERCISE 8

AIM:
This exercise can be solved using the following functions: Crop and Canvas Size

PROCEDURE (CROP):
1. Save the pictures crop1.jpg, crop2.jpg and crop3.jpg to your folder. Open them in Photoshop.
2. Use the Crop Tool on the three pictures to cut them the way you think they'll look the best.

OUTPUT (CROP):

Use the Crop Tool to cut your pictures down to size.

 EXERCISE 9

AIM:
This exercise can be solved using the following functions: Clone Stamp Tool, Smudge Tool

PROCEDURE:
1. Save the picture scratches.jpg to your folder and open it in Photoshop.
2. As you can see the picture has a lot of scratches on it. That's not good. Try to remove them by
using the Clone Stamp Tool on them. Read more about this odd but useful tool in the Tools
chapter. Try to make the picture look as "undamaged" as possible. A few tips here:
• Use small brushes, not much larger than the scratch you're trying to repair.
• Switch source often (the area you Alt-click on).
• Feel free to use the Smudge Tool to smoothen out whatever sharp edges and lines that might
pop up around your fixes. Remember to use small brushes here too, and keep it fairly weak, or
things may come out looking a bit strange.

OUTPUT:

Use the Clone Stamp Tool to fix up scratchy photos and pictures with similar blemishes.
 EXERCISE 10

Filters effect individual pixels

Filters
While filters are not really required for the lab, theycan be used to increase your artistic
ability. Filtersgenerally are applied to pixel-based images that are already in Photoshop. First,
select the region that youwant the filter to effect. Then choose the filter typefrom the Filter menu.
Be careful. There are hundredsto pick from. Also, filters are performed directly on the image and
not in a layer. Thus you cannot edit itlater like a layer. There is a history of action duringthe
current editing session so you can "undo" actionsbut it is not a layer.
Finally, you will want to save the edited image as agif or jpg. This is best done with
"Save for Web.." command in the File menu. This action will flattenthe layers if you have any
and export it to the file typeyou pick. It does not destroy your layers in theoriginalpsd file. Thus
you get the output file and still have your source file for later editing (it alwayshappens, you will
want to edit it again later when youweb site changes).
The Photo Filter command mimics the technique of putting a colored filter in front of the
camera lens to adjust the color balance and color temperature of the light transmitted through the
lens and exposing the film. The Photo Filter command also lets you choose a color preset to
apply a hue adjustment to an image. If you want to apply a custom color adjustment, the Photo
Filter command lets you specify a color using the Adobe Color Picker.
AIM: This exercise can be solved using the following functions: Filters

PROCEDURE:
1. Do one of the following:
Choose Filter > Adjustments > Photo Filter.
Choose Layer > New Adjustment Layer > Photo Filter. Click OK in the New Layer
dialog box.
2. To choose the filter color, do one of the following in the Photo Filter dialog box:
Warming Filter (85) and Cooling Filter (80)Color conversion filters that tune the white
balance in an image. If an image was photographed at a lower color temperature of light
(yellowish), the Cooling Filter (80) makes the image colors bluer to compensate for thelower
color temperature of the ambient light. Conversely, if the photo was taken at a higher color
temperature of light (bluish), the Warming Filter (85) makes the image colors warmer to
compensate for the higher color temperature of the ambient light.

Warming Filter (81) and Cooling Filter (82)Light balancing filters for minor adjustments in
the color quality of an image. The Warming Filter (81) makes the image warmer (yellower) and
the Cooling Filter (82) makes the image cooler (bluer).

Individual Colors Apply a hue adjustment to the image depending on the color preset you
choose. Your choice of color depends on how you're using the Photo Filter command. If your
photo has a color cast, you can choose a complement color to neutralize the color cast. You can
also apply colors for special color effects or enhancements. For example, the Underwater color
simulates the greenish-blue color cast caused when photographing underwater.
O Select the Filter option, and choose a preset from the Filter menu.
O Select the Color option, click the color square, and use the Adobe Color Picker to specify the
color of a custom color filter.
Make sure Preview is selected to view the results of using a color filter.
If you don’t want the image darkened by adding the color filter, be sure that the Preserve
Luminosity option is selected.
3. To adjust the amount of color applied to the image, use the Density slider or enter a percentage
in the Density text box. A higher Density applies a stronger color adjustment.
4.Click OK.
OUTPUT:
 EXERCISE 11

MOTION TWEENING

AIM:
To perform motion tweening operation using flash.
PROCEDURE:
Step1: Draw a hexagon using tools in a new flash document.
Step2: Click the 40th frame and press F6 key.
Step3: Drag the circle using move tool a place wherever you want.
Step4: Click on the time frame between 1 to 40 and Right‐Click and select create
Motion tween.
Step5: Press Ctrl+Enter to view the output.
 EXERCISE 12

SHAPE TWEENING
AIM:
To change and object shape using a shape tweening concept.
PROCEDURE:
Step1: Draw any shapes using tools.
Step2: Click 40 in the time frame and press F6.
Step3: Change tween to shape in properties and press Delete key.
Step4: Now delete the shape.
Step5: Draw a new shape by using corresponding tool wherever you want.

OUTPUT:
 EXERCISE 13

PROCEDURE TO SIMULATE MOVEMENT OF A CLOUD.

1. Go to start- macromedia- click on flash document

2. create a blue background in layer 1

3. Now insert a layer 2 and draw the clouds in this layer.

4. in order to create the clouds, go to tool bar and select pencil option, draw the cloud in
layer2

5. fill the colour to the cloud, right click on it- choose convert to symbol option- give the
name as cloud

6. select the movie clip option and click ok.

7. Go to filter->click on the + symbol->select glow to apply glowing effect-> select the

colour to white

8. underglow and adjust the blur x/blur y values.

9. give the appropriate blur effect to the cloud.

10. go to frames, insert key frame on both the layer, create the motion tween on 2nd layer
and move the clouds

11. finally go to control->click on test movies

OUTPUT:
 EXERCISE 14

PROCEDURE TO DISPLAY THE BACKGROUND GIVEN (FILENAME:

GARDEN.JPG) THROUGH YOUR NAME USING MASK.

1. Go to start->macromedia-> click on flash document

2. Go to file->import->open external library-> select a background image

Click open.

3. The selected image will be stored in your library. Open library and drag the image on the
work area by selecting the image.

4. go to view->zoom out->resize the picture such that it should fit the work area.

5.insertlayer2.choose the text tool from the toolbar and type your name.

6.Select the text to change its font size and colour of your choice. place the text on the left of the
workarea.
7.Right click on the 70thkeyframe of layer 2 and insert a keyframe. move the text to the right
side of the workarea->right click on the 69thframe of layer 2-> choose create motiontween.

8.right click on layer 2 choose the option mask.

9.Go to control->test movie to see the animation.

OUTPUT
 EXERCISE 15

PROCEDURE TO CREATE AN ANIMATION TO INDICATE A BALL

BOUNCING ON STEPS

1. Go to start- macromedia- click on flash document

2. select the line tool and draw the steps. colour it using the paint bucket tool

3. Select the circle from the tool bar and create a circle on the work area.

4. Now fill the colour to the circle using the paint bucket tool from the tool bar.

5. Go to frames right click on the first frame and choose insert key frame. slightly

move the ball. Repeat the same procedure by adding new key frames to show the

ball change the shape of the ball slightly when it touches the surface.

6. In order to change the shape use the free transform tool.

7. Go to control and click on test movies .you will observe the ball bouncing on steps.

OUTPUT
 EXERCISE 16

PROCEDURE TO IMPLEMENT FADE IN, FADE OUT, ZOOM IN AND ZOOM OUT

FADE IN, FADE OUT

1. In a new layer draw any vector object, say a circle. Convert the object into a graphic
symbol (select the object and click F8) and name it, say 'g_circle'.

2. Insert Keyframe (F6) in the 20th frame and create a Motion Tween from frame 1 to 20.

3. Click the 10th frame on the timeline and insert a Keyframe (F6).

4. Click the 'g_circle' instance displayed in the 10th frame and give it an Alpha value of
40% (for Flash MX and above, In the properties window select Alpha from the Color
Panel and reduce the value from 100% to 40%).

5. Save your work and test the Movie (Ctrl + Enter). That's it your, fade-in/fade-out cool
effect is ready!

ZOOMING EFFECT

1. In a new layer draw any vector object, say a circle. Convert this object into a graphic
symbol (select the object and click F8) and name it, say 'g_circle'.

2. Insert Keyframe (F6) in the 10th frame. Now go back to frame 1 and click on the
circle object. Reduce its size to about 25% of its original size (use the Info panel or
free transform tool).

3. Now go to frame 10 and click on the circle object. Reduce its Alpha value from 100%
to 20% in the Color Panel of the properties window.

4. Now right click on frame 1 and select 'Create Motion Tween' (A blue arrow will be
displayed in the time line between frames 1 & 10 - this shows that the motion tween
was created successfully).

5. Save your work and test the Movie (Ctrl + Enter). That's it, your cool zooming effect
is ready!
 EXERCISE 17

PROCEDURE TO CREATE AN ANIMATION TO REPRESENT THE GROWING

MOON.

1. Open flash 8 software -> click on flash document->go to windows->properties

->select the properties tool-> choose the Background to black.
2. Go to fill color under tool bar-> select the white color.
3. Select the oval tool in order to draw the moon. u will get a white circle.
4. Select the oval tool in order to draw the moon. u will get a white circle.
5. Select the white circle on the worksheet using the selection tool->right click-
>convert to symbol->select movie clip->give suitable name eg: moon->click ok.
6. Go to filter->click on the + symbol->select glow to apply glowing effect-> select the
colorto white under glow and adjust the blur x/blur y values.
7. Click on the + symbol again and chose blur-> again adjust the blur x/blur y values.
8. Place the moon where ever you want on the work area.double click on layer 1 and
rename as MOON.
9. Insert another layer->rename it as Animation.
10. Select the fill color to black-> select oval tool and draw a circle on the moon to cover
the moon->select the newly added circle-> right click->convert to symbol->movie
clip-> name it as Animation.
11. Go to filter-> select + symbol->give the glow and blur effect as did for moon.
12. Select the 150th frame in moon layer->right click->insert key frame.
repeat the same for Animation layer.
13. Click on the 149th keyframe of animation layer ->right click->press create motion->
select the animation movie clip and move slowly across the moon.
14. Finally go to control->test movie-> u will get a growing moon as the output.

OUTPUT:
 EXERCISE 18

PROCEDURE TO IMPLEMENT RIPPLE EFFECT

1. Carry out the zooming effect steps.

2. Copy frames 1 to 10 -> To do this click frame 1, press Shift key and click frame 10
(the frames will be heighlighted), now press Ctrl+Alt+C to copy the frames.

3. Add a new layer, click the 4th frame on the timeline and paste the copied frames (press
Ctrl+Alt+V).

4. Add another new layer, click the 8th frame on the timeline and paste the copied frames
(press Ctrl+Alt+V).

5. Repeat the above step leaving 4 frames more than the previous layer for as many layers
as desired.

6. Save your work and test the Movie (Ctrl + Enter). That's it, your cool ripple effect is
ready!
 EXERCISE 19

PROCEDURE TO IMPLEMENT SPARKLING GLASS EFFECT

1. Import the Background Image

Open a new file. Go to File >New. Select Flash Document. Click OK.
Go to Modify > Document to give a file size of 180px by 400px. This is the same size as
the Bitmap picture we have. Select the Bitmap pictures which you want to put as
background and bring it to the Flash Library by clicking on Select File > Import to
Libraryfrom the Menu Bar. Go to Window > Library, You can see the picture in the
Library panel. Drag the picture named Bitmap to the Stage. Select the picture by clicking
on it. This will be your first layer, name it background.
Now you have to create 7 movie clips. You have to have basic knowledge in FLASH MX
to do this. As you know movie clips work independently, and you can use them whenever
required.

2. Create a Rotating Star Movie Clip

Create a new layer. Name it sparkle.

Go to Insert > New Symbol. The 'Create New symbol' screen will appear. Name this
movie clip ' star_mc'. Click OK. You will be directed inside the movie clip. Now select
the PolyStar Tool. To select the Polystartool , first go to the Rectangle tool and select it
in the drop down menu as seen below.

Go to the Properties window. Go to Options. A screen called Tool Settings will appear.

Enter these values and click OK:

Style: Star
 Number of sides: 4.
Star Point Size: 0.10.

Now draw the Star (without a stroke color). Make the star into a movie clip entitled
star_mc. Now double click on it. On frame 1 you will see your star. Go to
Properties>Tween. Select Motion from the drop down Menu. Name it as star_in_mc. Go
to frame 10. Press F6 to insert a new keyframe. Select the star and go to Modify
>Transform > Rotate CW. Repeat Modify>Transform>Rotate CW thrice. Your rotating
Star movie Clip is ready. You will see it in the Library Window also. This movie clip
star_mc will not be there in the sparkle layer but stored in the Library, we will
use it later.
3. Create a movie clip with a small opaque circle that increases in size and becomes
almost transparent.
Draw a circle with Oval Tool, choose the fill color as white and make it 2px by 2px.
Select it. Go to Modify>Convert to Symbol from the Menu Bar. A dialog Box named
Create New Symbol will appear. Give the name as shade_mc. Select Movie Clip. Click
on OK. double click on it. You will be inside the Movie clip and in your first frame you
will see the dot. Select it. Go to Modify>Convert to Symbol from the Menu Bar. A dialog
Box named Create New Symbol will appear. Give the name as shade_in_mc. Go to
Frame5. Press F6 to insert keyframe. Go to Properties>Tween. Select Motion from the
drop down Menu. Go to Frame 10. Press F6 to insert keyframe. Now go to Frame 5.
Select your movie clip. Increase the size to 14.3px by 14.3px. Go to Frame 1. Select the
dot. Go to Properties. Select Color as Alpha in the drop down menu and give 100%. Go
to Frame 5. Select the dot. Go to Properties. Select Color as Alpha in the drop down
menu and give 10%. Go to Frame 10. Select the dot. Go to Properties. Select Color as
Alpha in the drop down menu and give 5%. This movie clip shade_mc will not be there
in the sparkle layer but stored in the Library, we will use it later.
4. Create another movie clip with a star which becomes smaller at a slower rate than
our 1st star movie clip.
Go to Main Scene. Go to Insert > New Symbol. The Create New symbol screen will
appear. We will name your first movie clip as star_mc. You will be directed inside the
movie clip. Now go to PolyStar Tool. To go to polystartool , first go to rectangle tool and
select it in the drop down menu. Go to Properties window. Go to Options. A screen called
Tool Settings will appear. Select Style, in the drop down menu as Star. Select Number of
sides 4. Select Star Point Size as 0.10. Click on OK. Give color as white.
Now draw the Star. Give the size to 23px by 23px. Select the edge and delete them.
Choose the star and make it a Movie Clip. Name it star_s_mc. Now double click on it. On
frame 1 you will see your star. Go to frame 10. Press F6 to insert a new keyframe. Go to
Properties>Tween. Select Motion from the drop down Menu. Go to Frame20. Press F6 to
insert keyframe. Go to Properties>Tween. Select Motion from the drop down Menu. Now
go to frame 10. Select your movie clip. Go to Properties. Give the size to 9px by 9px.
This movie clip star_s_mc will not be there in the sparkle layer but stored in the Library,
we will use it later.
5. Create the sparkle movie clip by combining the movie clips created above and place
it where required.
You have already created 6 movie clips. Now we will create the last main movie clip. Go
to Insert>New Symbol. The Create New symbol screen will appear. We will name your
main movie clip as sparkle_mc. You will be directed inside the movie clip. Drag in here
 these 3 movie clips :star_mc, shade_mc , star_s_mc because when they are combined
they will give the sparkle effect, and adjust them properly in the middle. Now go to your
main scene. Go to layer sparkle. Drag the Main movie Clip sparkle_mc wherever you
want the Sparkling Glass Effect to be seen. You can use it on a diamond ring, a golden
jewelry or on sparkling text also.

6. Save your file as sparkle.fla. Press on Ctrl+Enter to see the Sparkling Glass Effect. This
will create automatically sparkle.swf file.
 EXERCISE 20

Step 1: Create New Flash Document

In Adobe Flash, select "Flash File (Actionscript 3.0)" from the "Create New" menu. Switch the
workspace layout by clicking on the drop-down menu box in the upper left of the top menu bar
and selecting "Designer." Change the size and color of the document by adjusting the settings in
the "Properties" Panel.

Step 2:Create Layers

From the timeline panel, click the "New Layer" button until you have three layers. Double-click

on each layer to rename it. Starting from the bottom, name the layers: Actions, Thumbnails, and

Pictures.

Step 3: Import Pictures

Import your pictures by going to File, Import, Import to Library. Browse the pictures you want to

import. You can select multiple pictures by holding down the Control key and clicking multiple

images. Once you've selected your images, click "Open." You'll see the imported images in the

Library panel.

Step 4: Create the Thumbnail Menu

With the Thumbnails layer selected in the timeline, drag one of the imported images onto the

document. In Properties, click on the chain-link icon to unconstrain the width and height values.

Then, resize them both to 100. Position the image at the bottom left of the document. Repeat this

process for the remaining images so that they are in a row at the bottom of the document.

Step 5: Convert the Menu to Buttons

Select the first image and hit the F8 key on the keyboard. Change the name to "btn1," change the

type to "button," and click OK. In the Properties panel, change the instance name to "button1."

Select the next image from the menu and repeat the process, naming it "btn2" and "button2."
Continue the process for each menu items
 Step 6: Create a Photo Display

From the timeline, select the first frame of the Pictures layer. In Properties, change the name of

this frame to "pic1." Drag the image corresponding with the first menu item onto the stage.

Resize it in the Properties panel, remembering to click on the chain-link icon to reconstrain the

width and height values. Move the image to the center of the document above the menu.

Step 7: Insert Frame

In the timeline, right-click (or command click on a Mac) on the second frame of the Thumbnails

layer and select "Insert Frame."

 Step 8: Add the Remaining Images

Right-click on the second frame of the Pictures layer and select "Insert BLANK keyframe." In
Properties, change the name of this frame to "pic2." Now drag the next image onto the document,

resizing and centering it above the menu. Repeat this process for the remaining images,

incrementing the frame names each time.

Step 9: Write the Actionscript

In the timeline, select the first frame of the Actions layer and hit F9 to bring up the Actions

panel. On the first line, type the stop function to stop the pages from cycling through. Hit Enter.

On the next line, write a script that assigns a function to "button1." Call this function

"showpic1," and hit Enter to skip a line to write a script for button2, calling the function

"showpic2." Repeat for the remaining buttons.

'stop();
button1.addEventListener(MouseEvent.CLICK,showpic1);

button2.addEventListener(MouseEvent.CLICK,showpic2);

button3.addEventListener(MouseEvent.CLICK,showpic3);

Step 10: Write the Functions

Step 10. [Write the functions]

When you are finished, hit Enter to

skip a line and create the "showpic1" function, telling the animation to go to the "pic1" frame

and stop. Hit Enter to skip to the next line and type the "showpic2" function, telling the

animation to go to the "pic2" frame and stop. Repeat this process for the rest of the buttons.

'stop();

button1.addEventListener(MouseEvent.CLICK,showpic1);

button2.addEventListener(MouseEvent.CLICK,showpic2);

button3.addEventListener(MouseEvent.CLICK,showpic3);'

function showpic1(Event:MouseEvent):void{
gotoAndStop("pic1");

function showpic2(Event:MouseEvent):void{
gotoAndStop("pic2");
}

function showpic3(Event:MouseEvent):void{

gotoAndStop("pic3");

}''

Step 11: Publish and Upload

Publish the web site by going to File, Publish Settings. Check both the SWF and HTML boxes.

Rename both files and select a location to save. Then click publish, and upload all of the

published files to your web server. To access the flash page, navigate to the HTML file on your

web server.
 EXERCISE 21

Dreamweaver: Add style to web pages with css designer panel.

1. Open the CSS Designer by doing one of the following:

2. Select Window > CSS Designer.
3. Press Shift + F11.
4. In the CSS Designer, click the + icon next to Sources, and select Attach Existing CSS
File.

Attach existing CSS file

5. Do one of the following:

 toClick Browse to browse an external CSS style sheet.
 Type the path to the style sheet in the File/URL box.
6. Click the Preview button to verify that the style sheet applies the styles you want to the
current page.
If the styles applied are not what you expect them to be, click Cancel to remove the style sheet.
The page will revert to its previous appearance.
7. Click OK.
 EXERCISE 22

Design, edit, and preview webpage in single view

Live View uses a chromium-based rendering engine so that your content looks the same in
Dreamweaver as it looks in your favorite web browsers. During development, you can switch
to Live View to quickly preview your page. And, to save time switching between different views
(code and design view), you can edit HTML elements directly within Live View.
Live View refreshes instantly to show the changes on the page.
You can use the following components to edit your page in Live View:
 DOM panel: (Window > DOM) Shows the HTML structure of your document and lets you
copy-paste, duplicate, delete, and rearrange the elements within the view.

 Element Display: Appears above the selected HTML element in Live View. Element Display
lets you associate HTML elements with classes and IDs. Quick Property Inspector: Appears
when you click the Sandwich icon in Element Display or select text. Quick Property Inspector
lets you edit image attributes and format text in Live View. .
 Live View Property Inspector: Appears below the Document window and lets you edit various
HTML and CSS properties in Live View.
 Insert panel: (Window > Insert) Lets you drag elements from the panel directly into Live View.
See Insert elements directly in Live View for more information.
Insert elements directly in Live View
Using the Insert panel, you can directly drag elements into the required position in the document in Live
View. Visual aids in Live View such as Live Guides and DOM icons help you position the dragged
elements with respect to a hovered element.

Live Guides (in green) appear as you hover the mouse over different elements on the page before
dropping the element. These guides indicate the positions where the element can be inserted. They can
appear above, below, left, or to the right of the element that is hovered over.

Above and Below - Appears while hovering over all types of elements/tags, except inline tags. When you
hover the mouse in the first (top) 50% of the element, guides appear above the hovered element. When
you hover the mouse in the last (bottom) 50% of the element, guides appear below the hovered element.

Marquee selection

Marquee selection allows you to easily select a block of text by clicking and dragging inside the
tag in Live View. When you click and drag a block of text in Dreamweaver releases prior to
2014.1, the element used to move as a whole.
Selection and dragging-and-dropping of elements

In Live View, you can move an element by clicking on the tag name and then dragging to the
desired location. When you click on a tag name, a hand cursor icon appears indicating that you
can drag the tag from the point. When you start dragging the tag, guides help you place it in the
precise location.
By clicking on the tag name in Live View, you can select the full contents of that tag in Code
View.
 EXERCISE: 23

Insert multimedia elements to webpages

Aim:

To insert various multimedia element to webpages.

AUDIO:

The <AUDIO> tag is used to include an audio file in a Web page. It provides various attributes
to help you play an audio. The attributes of the tag are described in the following table.

Attribute Value Description

Autoplay Autoplay Specifies that the audio starts playing as soon as it is ready to play.

Specifies that the controls, such as play, pause, and stop, should be
Controls Controls
displayed.

Src url Specifies the URL of an audio file. It can be absolute URL or relative URL.

Specifies that the audio will start playing again, every time it has finished
Loop Loop
playing.

Example:

<AUDIO controls="controls" src="Audio1.mp3">Your browser support this audio format.

</AUDIO>

<VIDEO>

The <VIDEO> tag is used to display a video file on a Web page. It provides various attributes to
help you play a video. The attributes of the <VIDEO> tag are described in the following table.

Attribute Value Description

Autoplay Autoplay Specifies that the video starts playing as soon as it is ready to play.

Specifies that the controls, such as play, pause, and stop, should be
Controls Controls
displayed.
Src url Specifies the URL or location of a video file.

Specifies that the video will start playing again, every time it is finished
Loop Loop
playing.

Height Pixels Specifies the height of a video player in pixels.

Width Pixels Specifies the width of a video player in pixels.

Muted Muted Specifies that the audio of the video file should be muted.

Poster URL Specifies an image to be displayed while the video is downloading.

<VIDEO width="320" height="240" controls="controls" autoplay="autoplay" src="D:\HTML

\Video1.mp4">Your browser support this audio format. </VIDEO>
 EXERCISE : 24

MINI PROJECT

How to Create a Slide Show in Adobe Flash

Step 1

Create New Flash Document

In Adobe Flash, select "Flash File (Actionscript 3.0)" from the "Create New" menu. Switch the

workspace layout by clicking on the drop-down menu box in the upper left of the top menu bar

and selecting "Designer." Change the size and color of the document by adjusting the settings in

the "Properties" Panel.

Step 2

Create Layers
From the timeline panel, click the "New Layer" button until you have three layers. Double-click

on each layer to rename it. Starting from the bottom, name the layers: Actions, Thumbnails, and

Pictures.

Step 3

Import Pictures
Import your pictures by going to File, Import, Import to Library. Browse the pictures you want to

import. You can select multiple pictures by holding down the Control key and clicking multiple

images. Once you've selected your images, click "Open." You'll see the imported images in the

Library panel.

Step 4

Create the Thumbnail Menu

With the Thumbnails layer selected in the timeline, drag one of the imported images onto the

document. In Properties, click on the chain-link icon to unconstrain the width and height values.
Then, resize them both to 100. Position the image at the bottom left of the document. Repeat this

process for the remaining images so that they are in a row at the bottom of the document.

TIP: Adjust the images' alignment in the row by selecting all of them and choosing the desired

options from the Align panel.

Step 5

Convert the Menu to Buttons

Select the first image and hit the F8 key on the keyboard. Change the name to "btn1," change the

type to "button," and click OK. In the Properties panel, change the instance name to "button1."

Select the next image from the menu and repeat the process, naming it "btn2" and "button2."

Continue the process for each menu item.

Step 6

Create a Photo Display

From the timeline, select the first frame of the Pictures layer. In Properties, change the name of

this frame to "pic1." Drag the image corresponding with the first menu item onto the stage.

Resize it in the Properties panel, remembering to click on the chain-link icon to reconstrain the

width and height values. Move the image to the centre of the document above the menu.

Step 7

Insert Frame

In the timeline, right-click (or command click on a Mac) on the second frame of the Thumbnails

layer and select "Insert Frame."

Step 8

Add the Remaining Images

Right-click on the second frame of the Pictures layer and select "Insert BLANK keyframe." In

Properties, change the name of this frame to "pic2." Now drag the next image onto the document,

resizing and centering it above the menu. Repeat this process for the remaining images,

incrementing the frame names each time.

Step 9

Write the Actionscript

In the timeline, select the first frame of the Actions layer and hit F9 to bring up the Actions

panel. On the first line, type the stop function to stop the pages from cycling through. Hit Enter.

On the next line, write a script that assigns a function to "button1." Call this function

"showpic1," and hit Enter to skip a line to write a script for button2, calling the function

"showpic2."

'stop();

button1.addEventListener(MouseEvent.CLICK,showpic1);

button2.addEventListener(MouseEvent.CLICK,showpic2);

button3.addEventListener(MouseEvent.CLICK,showpic3);’

Step 10

Write the Functions

When you are finished, hit Enter to skip a line and create the "showpic1" function, telling the

animation to go to the "pic1" frame and stop. Hit Enter to skip to the next line and type the

"showpic2" function, telling the animation to go to the "pic2" frame and stop.
'stop();
button1.addEventListener(MouseEvent.CLICK,showpic1);

button2.addEventListener(MouseEvent.CLICK,showpic2);

button3.addEventListener(MouseEvent.CLICK,showpic3);'

function showpic1(Event:MouseEvent):void{
gotoAndStop("pic1");

function showpic2(Event:MouseEvent):void{

gotoAndStop("pic2");
}

function showpic3(Event:MouseEvent):void{

gotoAndStop("pic3");

}''

Step 11

Publish and Upload

Publish the web site by going to File, Publish Settings. Check both the SWF and HTML boxes.

Rename both files and select a location to save. Then click publish, and upload all of the

published files to your web server. To access the flash page, navigate to the HTML file on your

web server.