MM Practical FILE

8/3/2019 MM Practical FILE

1/42

EXPERIMENT # 1

INTRODUCTION TO FLASH

AIM:To introduce about Flash, Flash player, stage & timeline & itsapplications.

THEORY:

Flash provides everything you need to create and deliver rich webcontent and powerful applications. Whether youre designing motiongraphic or building data-driven applications, Flash has the toolnecessary to produce great results and deliver the best userexperience across multiple platform and devices. Flash movies aregraphics and animated for web sites. They consist primarily of vectorgraphics, but they can also contain imported bitmap graphics andsounds. Flash movies can incorporate interactivity to permit input fromviewers, and can create nonlinear movies that can interact with otherweb applications. Web designers use flash to create navigationcontrols, animated logos, long form animation with synchronizedsound, and even complete sensory-rich web sites. Flash movies arecompact, vector graphic, so they download rapidly and scale to theviewer screen. You have probably watched and interact with Flash

movie on many web sites, including Disney, The Simpsons, and Coca-Cola. Millions of web user have received the Flash player with theircomputers, browsers, or system software; other has downloaded itfrom the Macromedia web site. The flash player resides on the localcomputer, where it plays back movies in the browsers or as stand-alone applications. Viewing a Flash movie on the Flash player is similarto viewing videotape on a VCR. The Flash player is the device used todisplay the movies you create in Flash authoring application.

About Flash

Flash is an authoring tool that allows you to create anything froma simple animation to a complex interactive web application, such asan online store. You can make your Flash applications media rich byadding pictures, sound, and video. Flash include many features thatmake it powerful but easy to use, such as drag-and-drop user interfacecomponents, built-in behaviors that add Action Script to yourdocument, and special effects that you can add to objects.


2/42

When you author in Flash you work in Flash document, a file that,when saved, has the file extension .fla. When you are ready to deployyour Flash content, you publish it, creating a file with the extension.swl. The Flash player runs the SWF file.

About the Flash Player

Macromedia Flash player, which runs the applications that youcreate, installs by default along with Flash. The flash player ensuresthat all SWF content is viewable and available consistently and acrossthe broadest range of platforms, browsers and devices. Themacromedia flash player is distributed with products from every majorpartner, including Microsoft, Apple, Netscape, AOL and Opera, to bringrich content and applications immediately to over 516 million people

worldwide

Specifically, we will complete these tasks using FLASH:

Change Flash movie properties.

Import, create, and modify media that appear in your movie.

Add sound to a button.

Use the stage and Timeline to assembly the movie.

Create motion-tweening and shape-tweening animations.

Use action to add interactivity and streamline authoring. Test the movie for download performance.

Publish the movie for Web playback.

The Flash workflow

As we work in Flash, you create a movie by drawing or importingartwork, arranging it on the Stage, and animating it with the Timeline.You make the movie interactive by using actions to make the movierespond to events in specified ways. When the movie is complete, youexport it as a Flash player movie to be viewed with a self-containedFlash player included within the movie itself.

You can play a Flash movie in the following ways:

In Internet browsers, such as Netscape Navigator and MicrosoftInternet Explorer, that is equipped with the Flash player.


3/42

With the Flash ActiveX control in Microsoft office, MicrosoftInternet Explorer for Windows, and other ActiveX hostenvironments.

In the Flash player, a stand-alone application similar in operationto the Flash player plug-in.

As a stand-alone projector, a movie file that can be playedwithout the Flash player software.

The Flash work environment

When creating and editing movies, you typically work with thesekey features:

The stage, the rectangular area where the movie plays. The Timeline, where graphics are animated over time.

Symbols, the reusable media assets of a movie.

The Library window, where symbols are organized.

The Movie Explorer, which gives an overview of a movie andits structure.

Floating, dock able panels, which enable you to modifyvarious elements in the movie and configure the Flashauthoring environment to best, suit your workflow.

The Stage and the Timeline

Like films, Flash movies divide lengths of time into frames. Thestage is where you compose the content for individual frames in themovie, drawing artwork on it directly or arranging imported artwork.

Using the Timeline

The timeline organizes and controls a movies content over timein layers and frames. The major components of the timeline are layers,frames, and play head. Layers in a movie are listed in a column on theleft side of Timeline. Frames contained in each layer appear in a row tothe right of layer name. The Timeline header at the top of the Timelineindicates frame numbers. The play head indicates the current framedisplay on the Stage.


4/42

The Timeline status display at bottom of the timeline indicates thecurrent frame number, the current frame rate, and the elapsed time tothe current frame

When an animation is played, the actual frame rate is displayed;this may differ from the movie frame rate if the computer cant displaythe animation quickly enough.

You can change the way frames are displayed, and displaythumbnails of frame content in the Timeline. The timeline shows wherethere is animation in a movie, including frame-by-frame animation,tweened animation and motion path. Controls in the layer section ofthe Timeline let you hide or show, lock, unlock, or display layer contentas outlines. You an insert delete and move frames in the Timeline.yoycan drag frames on the same layer or different layer.

EXPERIMENT # 2


5/42

INTRODUCTION TO TOOLS IN FLASH

AIM: To introduce the tools section, view section , colours section andtheir modifiers.

THEORY: The tools in macromedia flash

Using the tool box

The tools in the toolbox let you draw, paint , select and modifyartwork and change the view of the Stage. The toolbox is divided intofour sections :

The tools section contains drawing ,painting and selection tools. The view section contains tools for zooming and panning in the

application window. The colours section contains modifiers and stroke for fill colours. The options section displays modifiers for the selected tool which

affect the tools painting or editing operations.

1. Using the arrow tool

The arrow tool allows you to select entire objects by clickingan object to enclose the object within a rectangular sectionmarquee

To select a stroke, fill , group , instance or text block:Select the arrow tool and click the object .

To select connected lines: Select the arrow tool anddouble click one of the lines.

To select a filled shape and its stroked outline: Selectthe arrow tool and double-click the fill.

To select objects within a rectangular area: Select thearrow tool and drag a marquee around the object or objectsthat you want to select. Instances, groups, and type blocksmust be completely enclosed to be selected.


6/42

2. Painting with the brush tool

The brush tool draws like strokes , as if you were painting. Itlets you create special effects, including calligraphic effects. Onmost pressure-sensitive tablets, you can vary the width of thebrush stroke by varying pressure on the stylus. You can use an

imported bitmap gill as a fill when painting with brush tool.

To paint with the brush tool :

Select the brush tool.

Select the fill colour.

Click the brush mode modifier and choose a painting mode:

Paint Normal paints over lines and fills on the same

layer. Paint Behind paints in blank areas of the stage on the

same layer,

leaving lines and fills unaffected.

Paint Selection applies a new fill to the selection whenyou select a fill in the fill modifier or the fill panel.

Paint Fill paints fills and empty areas leaving linesunaffected.

Paint Inside paints the fill in which you start a brush

stroke and never paints lines. If you start painting in anempty area, the fill doesnt affect any existing filledareas.

Choose a brush size, brush shape and paint colour from thebrush tool modifiers.

If a pressure sensitive tablet is attached to your computer,you can select the Pressure modifier to vary the width ofyour brush strokes by varying the width of your stylus.

Drag on the stage. Shift-drag to constrain brush strokes to

horizontal and vertical directions.

3. Erasing

Erasing with the Eraser tool removes strokes and fills. Youcan quickly erase everything on the Stage, erase individual strokesegments or filled areas, or erase by dragging. You can customizethe eraser tool to erase only strokes, only filled areas, or only a


7/42

single filled area. The eraser tool can be either round or squareand it can have any of the five sizes.

To quickly delete everything on the Stage: Doubleclick the eraser tool.

To remove stroke segments or filled areas:

Select the eraser tool and then click the faucetmodifier.

Click the stroke segment or filled area that you wantto delete.

To erase by dragging:

Select the eraser tool. Click the eraser mode modifier and choose an erasing

mode: Erase Normal erases strokes and fills on the same

layer.

Erase Fill erases only fills; strokes are not affected.

Erase Lines erases only strokes ; fills are notaffected.

Erase Inside erases only the fill on which you beginthe eraser stroke. If you begin erasing from anempty point, nothing will be erased. Strokes are

unaffected by the eraser in this mode. Erase Selected Fills erases only the currently

selected fills and does not affect strokes , selectedor not.

Click the Eraser Shape modifier ad choose an erasershape and size. Make sure that the faucet modifier is notselected .

Drag on the Stage.

4. Using the eye dropper tool

You can use the eye dropper tool yo copy fill and strokeattributes from one object and immediately apply them toanother object. The eyedropper tool also lets you sample theimage in the bitmap to use as a fill.


8/42


9/42

To use the Ink Bottle tool:

Select the Ink Bottle tool.

Choose a stroke colour. Choose line style and line width from the stroke panel.

Click an object on the Stage to apply the strokemodifications.

7. Using the lasso tool

To select objects by drawing either a freehand or a straight-edged selection area , you can use the lasso tool and its polygonmode modifier. When using the lasso tool, you can switchbetween the freedom and straight-edged selection modes.

To select objects by drawing a freehand selection area: Endthe loop approximately where you started or let flashautomatically close the loop with a straight line.

8. Drawing straight lines, ovals and rectangles

Use the Line, Oval and Rectangle tools to create these basic

geometric shapes. The Oval and Rectangle tools create strokedand filled shapes. You can use the Rectangle tool to createrectangles with square or rounded corners.

To draw a straight line, oval or rectangle :

Select the Line, Oval or Rectangle tool.

Select stroke and fill attributes.

For the Rectangle tool, specify rounded corners by clicking

the Round Rectangle modifier and entering a cornerradius value. A value of zero creates square corner.

Drag on the Stage. If you are using the Rectangle tool,press the Up and Down arrows while dragging to adjustthe radius of rounded corners.

For the Oval and Rectangle tools, Shift-drag to constrainthe shapes to circles and squares.

For the Line tool, Shift-drag to constrain lines to multiplesof 45.


10/42

9. Using the Paint bucket tool

The Paint Bucket tool fills enclosed areas with colour. It can

both fill empty areas and change the colour of already paintedareas. You can paint with solid colours, gradient fills and bitmapfills.

To use the Paint Bucket tool to fill an area:

Select the Paint Bucket tool.

Chose the fill colour and style . Click the Gap Size modifiers and choose a gap size

option:

Choose Dont Close Gaps if you want to close gapsmanually before filling the shape.

Closing gaps manually can be faster for complexdrawings.

Choose a Close option to have Flash fill a shape thathas gaps.

10. Using the Pen tool

To draw precise paths as straight .lines or smooth flowingcurves, you can use the Pen tool. You can create straight orcurved line segments and adjust the angle and length of straightsegments and the slope of the curved segments. When you drawwith Pen tool, you click to create points on straight linesegments and click and drag to create points on curved line

segments. You can adjust straight and curved segments byadjusting points on the line. You can convert curves to straightlines and the reverse. You can also display points on lines thatyou create with other Flash drawing tools, such as the Pencil,Brush, Line , Oval or Rectangle tool to adjust those lines.

11. Drawing with the Pencil tool


11/42

To draw lines and shapes you use the Pencil tool, in muchthe same way that you would use a real pencil to draw. To applysmoothing or straightening to the lines and shapes as you draw,you select a drawing mode for the Pencil tool.

To draw with the Pencil tool:

Select the Pencil tool. Select a stroke colour, line weight and style Choose a drawing mode under Options in the toolbox:

Choose Straighten to draw straight lines andconvert approximations of triangles, ovals, circles,rectangles and squares into these commongeometric shapes.

Choose Smooth to draw smooth curved lines.

Choose Ink to draw freehand lines with nomodification applied.

Drag on the Stage to draw with the Pencil tool. Shift-dragto constrain lines to vertical or horizontal directions.

12. Creating text

To place text blocks on the Stage, you use the Text tool. Youcan place type on a single line that expands as you type or in afixed-width block that wraps words automatically. Flash displaysa round handle at the upper right corner of text blocks that

extend and a square handle for text blocks with a defined width.

Flash displays a square handle at the bottom right corner ofeditable text boxes, indicating that you can size the text boxvertically or horizontally according to the amount of text to becreated.

straighten smooth ink

Extending text block


12/42


13/42

EXPERIMENT # 3

INTRODUCTION TO LAYERS IN FLASH

AIM:To introduce with the background layers, the additional layer,guided layers, how to create them as well as how to hide them.

THEORY:

Layers are like transparent sheets of acetate stacked on the topof each other. When you create a new Flash movie, it contains onelayer. You can add more layers to organize the artwork, animation andother elements in your movie. You can draw and edit objects on onelayer without affecting objects on the other layer.

The number of layers you can create is limited only by yourcomputers memory, and layers do not increase the file size. You canhide layers, lock layers or display layer content as outlines. You can

also change the order of layers.

You can use special guided layers to make drawing and editingeasier, and mask layers to help you create sophisticated effects.

It is a good idea to use separate layers for sound files, actions,frame labels and frame comments. This helps you find your thingswhen you need to edit them.

About layers in Animation

Each scene in a Flash movie can consist of umber of layers. Youuse layers to organize the components of your animation sequence. Ifyou want to tween, each must be on a different layer. Typically,background layer contains static artwork while additional layerscontain separate animated objects. Layers appear as rows.


14/42

Objects on layer displayed as

Creating Layers

When you create a layer, it appears above the selected layer. Anewly added layer becomes the active layer.

To create layer do one of the following:

1. Click Add Layer button from bottom of timeline.2. Choose Insert Layer.3. Right-Click on layer name and choose Insert Layer.

Viewing layers

As you work, you may want to show or hide layers. A red X next toa layers name indicates that the layers hidden. Hidden layers are

preserved when a movie is published. However, you cannot edit thehidden layers. To help you distinguish which layer objects belong to,you can display all objects as colored outlines. You can change thecolor of the outline.

To show or hide a layer, do one of the following

1. Click in the eye column. Click it again to show the layer2. Click the eye icon to hide all the layers. Click it again to

show all the layers.3. Drag through the Eye column to show or hide layers.4. Alt-click in the Eye column to the right of a layers name to

hide all the layers. Click it again to show all the layers.

To view the content of a layer as outline, do one of thefollowing

1. Click in the outline column to the right of the layers nameto display all objects as outline.

Active layer

Locked layer

Hidden layer


15/42

2. Click the outline icon to display objects on all layers asoutlines.

3. Alt-click in the Outline column to the right of a layers nameto display objects on all other layers as outlines.

To change a layers outline color

1. Double-click the layers icon OR Right-click the layer nameand choose properties.

2. In the layer properties dialog box, click the outline color andselect new color.

3. Click Ok.

To change layer height in the Timeline

1. Double-click the layers icon OR Right-click the layer name

and choose properties.2. In the layer properties dialog box, choose an option LayerHeight and click ok.

To change the number of layers displayed in theTimeline

Drag the bar that separates the Timeline from the Stagearea.

Using guide layers

For help when you are drawing, you can use guide layers. You canmake any layer a guide layers. Guide layers are indicated by a guideicon to the left of the layer name. Guide layers do not appear in apublished Flash player movie.

You can also create a motion guide layer to control the movementof objects in a motion tweened animation.


16/42

EXPERIMENT # 4

INTRODUCTION TO EFFECTS IN FLASH

AIM:To introduce with the various effects like brightness, tint, alpha,advanced & how to use the effects panel to change an instance.

THEORY:

Changing the color & transparency of an instance

Each instance of a symbol can have its own color effect. To setcolor & transparency options for instances, you use the Effect panel,which is docked with the Instance panel. Settings on the Effect panelalso affect bitmaps placed within symbols.

When you change the color &transparency for an instance in aspecific frame, Flash makes the change as soon as it displays thatframe. To make gradual color changes, you must tween the color

change. When tweening color, you enter different effect settings instarting & ending key frames of an instance, & then tween the settingsto make the instances colors shift over time.

To change the color & transparency of an instance:

Select the instance on the Stage & choose Window> Panels >Effect.You can also Alt-double click (Windows) or Option-double-click

(Macintosh) the instance on the stage to bring the Instancepanel forward, & then click the Effect tab.

Choose one of the following options in the Effect panel:

Brightness adjusts the relative lightness or darkness of theimage, measured on the scale from black(-100%) towhite(100%).

Tint colors the instance with the same hue. Use the Tint

slider at the top of the panel to set the tint percentage,


17/42

from transparent(1%) to completely saturated(100%).TOselect a color, enter red, green, & blue values in therespective text boxes or drag the component sliders; or usethe Color Picker.

Alpha adjusts the transparency, of the instance.

Advanced separately adjusts the red, green, blue, &

transparency values o an instance. This is most useful whenyou want to create & animate subtle color effects on objectssuch as bitmaps. The control on the left let you reduce thecolor or transparency values by a specified percentage. Thecontrols on the right let you reduce or increase the color ortransparency values by a constant value.

The current red, green, blue, &alpha values are multiplied bythe percentage values, & then added to the constant valuesin the right column, producing the new color values. For

example, if the current red value is 100, setting the leftslider to 50% & the right slider to 100 produces a new redvalue of 150 ((100* .5) +100=150).Any changes you make update automatically on the Stage.

You can also change color using the Action Script ColorObject.


18/42

EXPERIMENT # 5

ANIMATION AND TWEENING IN FLASH

AIM:To give the basic idea of the frame by frame animation, tweenedanimation & various types of tweening like shape tweening like shapetweening, motion tweening.

THEORY:

Creating animation overview

You create animation by changing the content of successiveframes. You can make an object move across the stage, increases ordecrease its size, rotate, change color, fade in or out, or change shape.Changes can occur independently of, or in concert with, other changes.For example, you can make an object rotate and fade in as it movesacross the Stage.

There are two methods for creating an animation sequence inFlash:Frame-by-frame animation and tweened animation:

In frame-by-frame animation you create the image in everyframe. In tweened animation, you create starting and endingframes and let Flash create the frames in between. Flash variesthe objects size, rotation, color, or other attributes evenly

between the starting and ending frames to create theappearance of movement.

Tweened animation is an effective way to create movementand changes over time while minimizing file size. In tweenedanimation, Flash stores only the values for the changesbetween frames. In frame-by-frame animation, Flash stores thevalues for each complete frame.

Tweening Shapes


19/42

By tweening shapes, you can create an effect similar to morphing,making one shape appear to change into another shape over time.Flash can also tween the location, size, and color of shapes.

Tweening one shape at a time usually yields the best results. Ifyou tween multiple shapes at one time, all the shapes must be on the

same layer.Flash cannot tween the shape of groups, symbols, text blocks, or

bitmap images. Use Modify Break Apart to apply shape tweening tothese elements. To control more complex or improbable shapechanges, use shape hints, which control how parts of the original shapemove into the new shape.

To tween a shape

1. Click a layer name to make it the current layer and select anempty key frame where you want the animation to start.2. Create the image for the first frame of the sequence. Use any

of the drawing tools to create a shape.3. Create a second key frame the desired number of frames after

the first frame.4. Create the image for the last frame of the sequence.5. Choose Window Panels Frame.6. For Tweening, select Shape.7. Click and drag the arrow next to the Easing value or enter a

value to adjust the rate of change between tweened frames:a. To begin the shape tween gradually and accelerate the

tween toward the end of the animation, drag the sliderdown or enter a value between -1 and -100.

b. To begin the shape tween rapidly and decelerate thetween toward the end of the animation, drag the slider upor enter a positive value between 1 and 100.

c. By default, the rate of change between tweened frames isconstant. Easing creates a more natural appearance of

transformation by gradually adjusting the rate of change.8. Choose an option for Blend:

Distributive creates an animation in which theintermediate shapes are smoother and more irregular.

Angular creates an animation that preserves apparentcorners and straight lines in the intermediate shapes.

Motion Tweening


20/42

To tween the changes in properties of instance, groups, and type,you use motion tweening. Flash can tween position, size, rotation, andskew of instance, groups, and type. Additionally, flash can tween thecolor of instances and type, creating gradual color shifts or making aninstance fade in or out. To tween the color of groups or type, you mustmake them into symbols.

If you change the number of frames between the two key frames, ormove the group or symbol in either key frame, flash automaticallytweens the frames again.

You can create a motion tween using one of two methods:

Create the starting and ending key frames for the animation anduse the Motion Tweening option in the Frame Properties panel.

Create the first key frame for the animation, and then chooseInsert Create Motion tween and move the object to the new

location on the Stage. Flash automatically creates the ending keyframe.

When tweening position, you can make the object move along anonlinear path.The bees second, third, and fourth frames result from tweening thefirst and last key frames.

To create a motion tween using the Motion Tweeningoption

1. Click a layer name to make it the current layer, and select anempty key frame in the payer where you want the animationto start.

2. Create an instance, group, or text block on the Stage, or dragan instance of a symbol from the Library window. To motiontween an object you have drawn, you must convert it to asymbol.

3. Create a second keyframe where you want the animation to

end.4. Do one of the following to modify the instance, group, or text

block in the ending frame:

Move the item to a new position

Modify the items size, rotation, skew.

Modify the items color (instance or text block only).

To tween the color of elements other than instances or textblocks, use shape tweening.

5. Choose window panels frame.


21/42

6. For Tweening, select Motion.7. If you modified the size of the item in step4, select scale to

tween the size of the selected item.8. Click and drag the arrow next to the easing value or enter a

value or enter a value to adjust the rate of change betweentweened frames:

To begin the motion tween slowly and accelerate the tweentoward the end of the animation, drag the slider up or entera value -1 and -100.

To begin the motion tween rapidly and decelerate thetween toward the end of the animation, drag the sliderdown or enter a positive value between 1 and 100.

By default, rate of change between tweened frames isconstant. Easing creates a more natural appearance ofacceleration or deceleration by gradually adjusting the rate

of change.9. To rotate the selected item while tweening, choose an optionfrom rotate menu:

Choose none (the default setting) to apply no rotation.

Choose Auto to rotate the object once in the directionrequiring the least motion.

Choose clockwise(CW) or counterclockwise(CCW) to rotatethe object as indicated, then enter a number to specify thenumber of rotations

NOTE: The rotation is in addition to any rotation you appliedto the ending frame in step 4.10.If you are using a motion path select orient path to orient the

baseline of the tweened element to the motion path.11. Select synchronization to ensure that the instance loop

properly in the main movie. Use the synchronize command ifthe number of frames in the animation sequence inside thesymbol is not even multiple of the number of frames graphicinstance occupies I the movie.

12. If you are using a motion path, select snap to attach the

tweened element to the motion path by its registration point.


22/42

EXPERIMENT # 6

TWEENING MOTION ALONG A PATH

AIM:To give the basic idea about the guide layer concept & how anobject is guided along a particular path by tweening motion along apath.

THEORY:

Motion guide layers let you draw paths along which tweenedinstances, groups, or text blocks can be animated. You can linkmultiple layers to a motion guide layer to have multiple objects followthe same path. A normal layer that is linked to a motion guide layer

becomes a guided layer.

To create a motion path for tweened animation

1. Create a motion-tweened animation sequence as described inTweening instances, groups, and type.

If you select Orient to Path, the baseline of the tweenedelement will orient to the motion path. If you select Snap,the registration point of the tweened element will snap to

the motion path.2. Do one of the following:

Select the layer containing the animation and choose InsertMotion Guide.

Right-click (Windows) or Control-Panel (Macintosh) the layercontaining the animation and choose Add Motion Guidefrom the context menu.

Flash creates a new layer above the selected layer with a motionguide icon to the left of the layer name.


23/42

3. Use the Pen, Pencil, Line, Circle, Rectangle, or Brush tool todraw the desired path.

4. Snap the center to the beginning of the line in the first frame,and to the end of the line in the last frame.

5. To hide the motion guide layer and the line so that only theobjects movement is visible while you work, click in the Eye

column on the motion guide layer. The group or symbol follows the motion path when you

play the animation.

EXPERIMENT # 7

INTRODUCTION TO BUTTONS IN FLASH

AIM:To introduce with the UP, OVER, DOWN & HIT stages of button.

THEORY:

Buttons let viewers interact with flash movies. For example, thenext button in this movie changes the stage by advancing the playhead to the next scene. To create a button, you create image for theUP, OVER and DOWN stages of the button. Generally, these images are

slight variation of one image. In addition, you can also specify the areathat triggers the button interaction, called the hit state, when thepointer clicks or rolls over a button; Flash player displays theappropriate image.

Creating a Button

1) Click on the 1st frame & draw a circle with red circle on to thestage.

2) Select that circle. Insert => Convert to symbol

Name => Circle

Behaviour => Button Click => O.K.

3) Double click the circle.

UP OVER DOWN HIT


24/42

These four frames appear.

Corresponding to OVER frame

1) Click on OVER frame.2) Insert = Blank key frame.3) Draw one SQUARE (with green color).

Corresponding to DOWN frame

1) Click on DOWN frame.2) Insert = Blank keyframe.3) Draw one rectangle with red colour

Then click on HIT frame.4) Then click on Scene 1.5) Control = Test movie.


25/42

EXPERIMENT # 8

INTRODUCTION TO HTML TAGS

AIM:To give basic idea of using HTML tags for the various types ofindenting, how to add backgrounds, tables, frames to plain text.

THEORY:

HTML (Hyper Text Markup Language) is used to create webpages. HTML is also known as HTML document. Using HTML tags, wecan create headings, lists, bulleted lists; insert pictures, changebackgrounds, tables, frames etc. The browser interprets the HTML tags& using these tags we can format the plain text to a HTML document.While writing the code, we have to use opening & closing tag.


26/42

e.g. ....

/ represents the closing of tags.

Working with HTML tags

1. Heading tags It begins with Ends withHeading can be put in different size from H1 to H6, withalignment.Eg.

2. Bold Text positioned between these tags will be displayed in bold.

3. Italic Text positioned between these tags will be displayed in italicfont on your HTML page.

4. Underline Text positioned between these tags will be displayedunderlined on your HTML page

5. Subscript By this text appears in subscript form.

6. Superscript By this text appears in superscript form.

7. tagThis tag adds a horizontal line.

8. tagThis tag is used to write address.

9. This displays line, through the text written after the tag.

10. Type Writer This is use to type typewriter font.

11. This usually emphasis on text, preferably italic fonts12.

This is used to give borders around the text.13.

This is used for pre-formatting.14.

This is to break the line & come to new line.15. Working with background

a. Adding the background color:


27/42

We can add the background color by

b. Adding background pictureWe can add the background picture by

16. Creating List:

a. Ordered List

Ordered list can be created by putting tag.List can be created by putting tag for each itemWindows XPWindows7

It may happen that you need to start the list from a newnumber, say n, thenFormat of ordered list can be changed as

b. Unordered List

For creating bulleted list, unordered list are used.e.g.

c. Definition List

Definition list includesi. Definition Termii. Definition Description

e.g.Windows7

Operating SystemMS word 2010Word Processor

17. Adding Images This add image to document

18. Adding background soundWe can also add sound to our document


28/42

19. Tag

Text included with this tag moves continuously from right toleft.TEXT

20. Tag

It is used to give spacing.

EXPERIMENT # 9

CREATION OF HTML WEBSITE

AIM:To demonstrate that how to create a website using HTML tags[The scope of this experiment is limited to a simplest example of

image view]

CODE:

Multimedia File

Multimedia File


29/42

Click on the thumbnails for the full view.


30/42

SCREENSHOTS


31/42


32/42

OUTPUT


33/42

EXPERIMENT # 11

TO CREATE AN ANIMATION SHOWING SUNRISE

THEORY:

The Sunrise animation has many elements changing their look.When the sun rises, the things turn from dark to bright and morecolorful. Also, the stars disappear as the sun moves up. The skychanges color from black to light blue. It is also observed that Sunchanges color from Red to bright yellow. All this happenssimultaneously and gradually.

For such an animation, the various animated elements need to bekeep in separate layers. The various required elements/layers are

a. Groundb. Sunc. Starsd. Sky

These elements are animated separately in their layers using thefollowing steps.

1. Create a new blank document.2. Go to Insert->Layer. This inserts a new layer. Perform this step

thrice. Thus we get four layers in the timeline.3. Rename the lowest layer as Sky, and draw a rectangle on it in

Black color.4. Rename the next layer as Stars, and put some white dots on this

layer to represent stars.5. Rename the third layer as Sun, and draw an Orange circle on it to

represent the Sun.

6. Rename the Uppermost layer as Ground, and draw a Dark greenrectangle in the lower quarter of the screen in this layer torepresent ground.

7. Select frame 60 for all the layers and select Insert->Keyframe.8. Select frame 60 for layer Sky, and change the color of the

rectangle to light blue.9. Select frame 60 for layer Stars, and change the Alpha

component value in the Color Mixer window to 0%.10.Select frame 60 for layer Sun, and move the Sun to final position

up in the sky.


34/42

11. Select frame 60 for layer Ground, and change the color of theground to a lighter green from Color Mixer.

12. Select frame 1 for all layers and choose Shape Tween from theProperties Window.

13. Select Control->Test Movie to test the animation.

OUTPUT


35/42

EXPERIMENT # 12

TO CREATE AN ANIMATION SHOWING SUNSET

THEORY:

When the sun sets, the various changing elements are the Sun,the ground, the sky, and the stars. The Stars appear, the Sun sinksgradually changing from bright yellow to red. The ground too becomesdark, as the light source drowns.

For this animation, naturally four changing elements/layers arerequired. They are:

a. Groundb. Sunc. Starsd. Sky

Steps:

1. Create a new blank document.2. Go to Insert->Layer. This inserts a new layer. Perform this

step thrice. Thus we get four layers in the timeline.

3. Rename the lowest layer as Sky, and draw a rectangle on it inLight Blue color.

4. Rename the next layer as Stars, and put some white dots onthis layer to represent stars.

5. Rename the third layer as Sun, and draw a Yellow circle on itto represent the Sun.

6. Rename the Uppermost layer as Ground, and draw a Lightgreen rectangle in the lower quarter of the screen in this layerto represent ground.

7. Select frame 60 for all the layers and select Insert->Keyframe8. Select frame 60 for layer Sky, and change the color of therectangle to Black.

9. Select frame 1 for layer Stars, and change the Alphacomponent value in the Color Mixer window to 0%.

10. Select frame 60 for layer Sun, and move the Sun to finalposition behind the rectangle representing the ground.

11. Select frame 60 for layer Ground, and change the color ofthe ground to a darker green from Color Mixer.


36/42

12. Select frame 1 for all layers and choose Shape Tween fromthe Properties Window.

13. Select Control->Test Movie to test the animation.

OUTPUT


37/42

EXPERIMENT # 13

TO CREATE AN ANIMATION SHOWINGBOUNCING BALL

THEORY:

Bouncing ball is an interesting activity. When a boy carries withhim a bouncing ball and walks along the road, there are two ways ofseeing the event. One is by looking at it from the static frame, and theother is from the moving frame. It will become easier if we assume amoving frame.

This allows us to work on just a few elements which area. The boys limbsb. The ballc. The road

Steps

1. Create a new blank document.2. Go to Insert->Layer. This inserts a new layer. Perform this step

7 times. Thus we get 8 layers in the timeline.

3. Rename the lowest layer as Ground, and draw a rectangle toshow the ground.

4. Rename the next layer as Static Body, and draw the static partof the body as a stick figure in the left.

5. Select the frame 70 and select Insert -> Frame6. Rename the next layer as Leg 1, and draw a leg in one of the

forward or backward positions.7. Select frame 35, go to Insert -> Keyframe.8. Next select Insert -> Create Motion Tween.

9. Select the Leg in frame 35, and rotate it to keep it in the newposition.

10. Repeat steps 6 9 for the next layer, naming it Leg 2, andgiving it the other position.

11. Select Layers Leg 1 and Leg 2, and copy all the frames.Paste them from frame 36 of the layers to make a total of 70frames in each layer.

12. Rename the next layer as Hand Back, draw a hand behindthe back of the stick figure, and select Insert -> Frame in the

frame 70 of the layer.


38/42

13. Rename the next layer as Hand Front, and draw a hand infront. This hand will push the ball downwards.

14. Select frame 12 in Layer Hand Front, and move the front endof the Hand downwards to show the hand pushing the balldownwards.

15. Select frame 24 in the same layer and bring the hand back

to the position as it was in frame 1. Also, at frame 35, selectInsert -> Frame.

16. Select frame 1, and choose Shape Tween from the PropertiesWindow. Repeat this for frame 12.

17. Select frames 1 to 35, copy the frames and paste the framesat frame 36.

18. Rename the next layer as Milestone, and draw a milestoneon extreme right on the road.

19. Select frame 70 in this layer, and select Insert -> Keyframe.

IN this keyframe, move the Milestone to extreme left, andselect Insert -> Create Motion Tween for frame 70 and frame 1.20. Rename the next layer as Ball, and draw a ball near the

boys hand. Select frame 35 and select Insert -> Keyframe.21. Select frame 17, and select Insert -> Keyframe, and move

the ball to the ground.22. Select frame 1, and choose Shape Tween from Properties

Window. Repeat this for frame 17.23. Select frames 1 to 35, copy them and paste the frames at

frame 36.

24. Move the Layer Ground to the top.25. Select Control->Test Movie to test the animation


39/42

OUTPUT


40/42

EXPERIMENT # 14

TO DEVELOP A WEBSITE USING HTML

CODE:

NIEC Homepage

Nothern India Engineering College

Home |Admissions |Courses |Placement

Northern India Engineering College is an engineering collegein Delhi, India and established in 2003. It is affiliated with GGSIPUwith a campus spread over 8 acres (32,000 m2). NIEC is locatedin Shastri Park, Delhi. The college has been established and isbeing managed by Babu Banarasi Das Educational Society, underthe chairmanship of Dr. Akhilesh Das, Secretary and MP (RajyaSabha) and former Mayor of Lucknow. Overview


41/42

The mission of the College has been derived out of thememories of Late Babu Banarasi Das, "The Inspiring Soul", todevelop young budding minds in service of the Nation and of thePlanet. In the Chain of Technical & Professional Educational

Institutes participant to Babu Banarasi Das Group of EducationalInstitutions, Northern India Engineering College, New Delhi is thelatest addition, which is equipped and positioned to emerge as aWorld-Class Technical Institute of excellence in Northern India,incommensurate to the vision conceived by the Management.

Northern India Engineering College, New Delhi has emerged

out of the vision to serve the cause of education in Northern Indiawith the same level of commitment as the other Colleges of theGroup such as:> Babu Banarasi Das National Institute of Technology &Management, Lucknow> Northern India Engineering College, Lucknow> Uttar Pradesh Dental College & Research Centre, Lucknow> Babu Banarasi Das International Institute of Technology &Management, Lucknow


42/42

OUTPUT

MM Practical FILE

Documents