Home         Back

 

 

 

Saivaneri Web Tutor

Chapter 3

Okay guys,

We have known some basics, created a site, asked many to visit it, But lastly you find it is not as good as the neighborhood  website…O no! you want it to be better than that…

What to do?............. 

You need to pep up your site with lots of JPGs, GIFs, lots of SWFs, lots of DHTML, Java scripts, Java Applets, MP3s, AUs, etc…etc…. 

Appalled? Well, it is not as hard as you think. They are the multimedia content files or tricky codes behind the browser to pep up the show. 

Graphic File Types

JPEG   =Joint Photo Experts Group – a compressed file format good for pics.

GIF     =Graphic Image Files – a compressed animation file

PNG    =Portable Network Graphics – another compressed image file

AVI,ICO,BMP,WMF,TIFF,TARGA….. so like this a lots of image formats are there..

if you want to convert them from one format to another, you can use many converter software

or photographic applications like

Adobe Photo Shop

Paint Shop Pro

Corel Draw

bulletBMP (Windows and OS/2)   The native bitmap format for the Microsoft Windows environment. A picture made from a series of small dots, and supports images up to 24 bits.
bulletTIFF   Tagged Image File Format. A high-resolution, tag-based file format. Used for the universal interchange of digital graphics.
bulletTGA   Truevision Targa Graphics Adaptor file format. Supports 1- to 32-bit images and professional features like an alpha (mask) channel, gamma settings, and a built-in thumbnail image.
bulletRAS   Raster format. Lightly compressed, and supports up to 36-bit images.
bulletEPS   Encapsulated PostScript file format. An extension of the Post Graphic file format that nables PostScript graphics files to be incorporated into other documents.
bulletPNG   The Portable Network Graphics format is an alternative to GIF that supports transparency for graphics containing thousands or millions of colors. However, some Web browsers cannot display PNG graphics without a special plug-in.
bulletWMF   Microsoft Windows Metafile format. Supports bitmapped, vector, and Encapsulated PostScript (EPS) data.

When you add a graphic other than a GIF or JPEG to a page and then save it, Microsoft FrontPage automatically converts the graphic to a GIF if it has 8 bits of color or less, or to a JPEG if it has more than 8 bits of color. 

Sound File Types

Wave, Midi, MP3, Ogg Vorbis, WMA, Au (audio) –mostly you know about this already.

Video File Types

DAT, Mpeg, DivX (latest) etc.. 

Vector Graphics

Shock Wave Flash (SWFs) – they brought life to the Web. As they are vector based, they can be zommed in and out with out loss of image quality, more safer for Intellectual Property (no more copy) , more color options, more dynamism, small file size etc..

We need Shock wave plugins in the browser to view this files. But IE 5 Netscape 6 and above have inbuilt this. 

DHTML

Dynamic HTML provides us to create some animation capability to the static HTML to improve the show.. like Menus, Swirling Text effects etc.. 

Java scripts/Java Applets/Java Servlets

They are running inside the browser source code as a script or outside the browser as a *.Jar Java Resource file) or *.Class file. You need Java Virtual Machine supported browser. IE4 and above. Java scripts and applets run on the client side. While servlets run on the server side only. Java Virtual Machine is a simple interpreter running in the background to ‘translate’ the java codes that you add in the HTML source of your web page. But, any interpreted language is slow also. Thus, JVM helps cross the platform barrier. You write code once, it can run anywhere, on any machine from a IBM PC to Apple MAC to a CRAY super computer –(still all machines should have installed JVM). 

You don’t know much about this? What to do? how to use them?

1000s of FREE Java scripts are available on the Internet!. Select them to use it!

Just type Java script in any Search Engine. You will get thousands of links. Here is the samples..

www.Dynamicdrive.com

www.evrsoft.com 

How to create animated GIF’s?

The flashy advt. animations you watch on yahoo or any other web site is really attractive isn’t it?. It is called banners/buttons/spacers. Banners are just like real life banners to propagate some message/advt. Buttons are clickable, colorful objects. Spacers are just alignment technic, so that the web site looks cool, smooth, more flushed. 

GIF’s are made up of series of images. Like a cartoonist draws series of images and run it 15 frames or more per second to show animated effect, you have to draw these series of images to fulfill your need. You need to have animator software to do it. That does the job better. What are those? 

Animation shop pro v3.0      -comes with Paint Shop Pro –Best!

Ulead Gif Animator              - www.ulead.com 

Practical -1

Considering you already have Animation shop Pro, we will go and edit this GIF.*

*If you don’t have it, don’t worry, I can send you a COMPLETE WEB AUTHORING KIT  on 2 CDs for just Rs.500. (Packing charges extra).
In which I will be putting all the tools you need to create a flashy web site!.

 

 

 

 this gif is a very basic one. I allow you to edit it on animator pro. Open it, and see that this gif is now broken into 3 frames. Each frame shows different states of the GIF.

1st Frame Alagu Lakshmi enterprises

2nd Frame Karungal Jalli Blockskalukku..

3.rd Frame The company address. 

So on the web site, the browser displays the 3 frames one after, so you get a dynamic advt. You can use animation technics to realize your dreams like a hand clicking, a man writing.. etc.. 

See the Gif below, a man is moving his pen forever! This gives the writing effect. 

GIF Titbits

bullet

            Gif standards also vary. GIF1, GIF2,GIF3 etc. So some software may not understand some GIFs. So don’t worry- try the GIF in another animator

bullet

            More colors, more effects - more bytes, file gets big

bullet

            A 56kbps modem will download a 4 KB gif image faster, 20KB gif much slower

bullet

            So keep file size at the most 12KB

bullet

            To optimize file size, reduce frames, reduce moving ‘parts’

bullet

            In the above image, the pen only moves, other parts of picture remains static, so less file size

bullet

            16 color good for images, 3 color best for texts

bullet

            Frame delay on each frame improves readability. Give 100 ms to 600 ms depending on text content

bullet

            Effects also increase file size. Use it sparingly

bullet

            Aspect ratio – while resizing a picture if you want no distortion in image, keep aspect ratio.

bullet

            Anti alias – this avoids the jagged ends along any pixmaps. Used mostly for texts

bullet

            FPS –frames per second

bullet

            Water mark – a transparent mark on the image so that nobody misuses your image

bullet

            I can go on like this but, use the help in Animator PRO to know more – it is really in depth or mail me.

 

 

Sound
Okay we have seen hoe to create animation files. If you still can’t no problem, just go to many FREE web sites, they give you 1000s of FREE animated images to you. 

Type:- FREE animated GIFs in any search engine to get 1000s of links.             =Google is best in searching! 

Sound creation is easy!. We all are good in making Din!. Just pick the mike and speak up!. Okay now in windows you can save this as a wav file. But then windows sound recorder gives you just 1 minutes to speak. More than that you have to use some really cool sound software. What are those? 

Audio grabber

Audio catalyst

Cool Edit pro

FREE MP3 

For our class, we will always take a best software, and go deep into it. Sparingly you may require other software also, since all the features may not be available under one roof. 

In audio grabber you can choose line–in option to record your voice for more than a minute. Also you may like to compress the bulgy wave to *.mp3 files. Audio grabber does it.


Practical -2

Okay now we want our html page should play this music. From chapter 1 you may have learned how to add audio to the html file. Just it takes lot of time to load. Use this sparingly. If your web page takes more than 20 seconds to load on the client machine, they may not like to visit again!. REMEMBER people from different walks of life visit your site. Some may browse your site from a Café (slow) some may browse from Home (little fast) some may do it from Office (restrictions). So add audio if you MUST!. Keep the index.htm page as simple as possible, try majick on inside pages.

 <embed src="your_audio_file.wav" autostart="true" hidden="true" loop="0">
<bgsound src=
" your_audio_file.wav" loop="infinite">

 Those are the tags to embed sound in a html file. It autostarts the application (say winamp) and plays  infinite or loop as many times you wish.

Remember to change source –(src) as per your file, (give the absolute URL of your file).

(URL – Uniform Resource Locator – the absolute path to your file sample:- http://saivaneri.org/Boy1.htm)

Practical 3

Now insert a video file by this tag

<embed src=" your_video_file.avi" autostart="true" width="200" height="200"">

avi = audio video inderleave files are played by windows media player

IE 5 and above have the capacity to play it on the browser itself, without starting any external program.

This saves memory, time. You can also use many other formats like *.mpeg, *.dat, *.divX  etc..

Shockwave

bullet

            To create a shock wave animation, you need to have macromedia flash software.

bullet

            Or you should have Flax v2, or Swish v3

bullet

            Creating flash animation is not as easy as a gif file, but you can learn it with little effort.

bullet

            Or for effortless learning, download the Flax and Swish, they are really COOL!

bullet

            Swish has more than 300 effects – no need to tinker Flash much – just insert the effects

bullet

            Flax has more than 150 effects on text only. Again just add your text.

bullet

            In Flash also, the animations are based on frames, but here everything takes place on vector scale

bullet

            So your graphics’ look will not be altered while you resize it

bullet

            Vector means the image on the screen is represented by mathematical formula not the actual bit map

bullet

            Where as other BMP, GIF, JPG files are scalar file, they are denoted by their bit maps

bullet

            I will recommend you to use Flax and Swish they save a lot of time on shock wave

bullet

            And they compel you to learn flash, the other way around.

bullet

 

Here is a sample  http://www.saivaneri.org/Advert.htm

 

The RmKV Flash animation has got the zoom in, zoom out, play, resume, stop, show all facilities. These things are not available on a GIF. By zooming in you are not losing the image quality. Also Intellectual Property Rights (IPR) are better here, as no one can simply right click and save the animation. One can also lock the file so that even tricky people can not open it.

 

 

*If you don’t have it, don’t worry, I can send you a COMPLETE WEB AUTHORING KIT  on 2 CDs for just Rs.500. (Packing charges extra). In which I will be putting all the tools you need to create a flashy web site!.

 

 

 

 

 Practical 4

Now we will see how to insert a Shock wave flash animation

<embed src="" autostart="true" width="200" height="200"">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#3,0,0,0" width="32" height="32">
    <param name=
"src" value="flash-file.swf">
    <embed src=
"flash-file.swf" pluginspage="http://www.macromedia.com/shockwave/download/" type="application/x-shockwave-flash" width="32" height="32">
    </embed>
  </object>

 

            CAUTION! IE and Netscape differ in showing the shock wave file. So always use the above tags to insert any shockwave flash (*.swf) file, if you use front page active x to modify the height, width of a swf file, Netscape is going to show it weirdy! So always alter the height width in the above tags only..

 Here, you are embedding the object as an active x control. Active x means to actively execute the file from there itself, on the browser itself. Class id refers to the certified class id pertaining to the file. Code base will download the code to execute the said file, if the browser doesn’t have the plugin downloaded already. So this download is a one time affair. Param name  is the file path. Type is the MIME type declaration for the file. (Confused, don’t worry, simply save the sample http://www.saivaneri.org/Advert.htm file, and see how the source code is defining it.  

To learn faster, reading the source code is really important. Whenever you see a better site, try to analyse how they did it by reading the source code. Do not duplicate it simply, add your creative ideas. Also, acknowledge the Original Author. 

TIPS

Use Advanced Gif Compressor tool to compress the gif animations. Results in faster loading of your page/image on the browser.

FOR FULL CHAPTER PLEASE CLICK HERE

next chapter