|
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
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.. 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.*
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
Sound 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.
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">
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. (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
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.
Practical 4 Now we will see how to insert a Shock wave flash animation
<embed src=""
autostart="true"
width="200"
height="200"">
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. |
