Re­plac­ing Flash with HTML5 and CSS3

Even though Flash can en­able an­i­mated and in­ter­ac­tive con­tent on web­sites, it does have a num­ber of draw­backs. The slow loading of Web pages and the in­abil­ity of Flash con­tent to search bots makes it nec­es­sary to re­place Flash with other tools.

OpenSource For You - - CONTENTS -

M ak­ing a page in­ter­ac­tive is an im­por­tant part of Web de­sign­ing. Many web­sites have to play mul­ti­me­dia clips, dis­play at­trac­tive an­i­mated pic­tures, col­lect data from visi­tors ‘ac­tively’ and, ul­ti­mately, the cre­ators of many Web pages want these to be­come use­ful ‘Web apps’.

A few years ago, the only way to achieve these goals was us­ing by Adobe Flash. Files cre­ated with Flash can be ex­ported to an­i­mated GIF (used since the early days of the WWW), video and SWF (Shock Wave Flash) file for­mats. SWF files can act as nor­mal pro­grams. Hence, Flash be­came a favourite tool of Web de­sign­ers.

Ac­tu­ally, the rea­son for the growth of Flash was that HTML did not have built-in sup­port for mul­ti­me­dia (ex­cept im­age files) and an­i­ma­tion. But now, with the ar­rival of HTML5, it is pos­si­ble to han­dle mul­ti­me­dia con­tent with the na­tive HTML code. Yet, many peo­ple still use out­dated Flash-based tech­niques. But why should one stick to pro­pri­etary, out-dated tech­nol­ogy when there’s an open source al­ter­na­tive that is sim­ple and pow­er­ful?

By go­ing over some com­par­isons and ex­am­ples, let us try to learn the tech­niques to play mul­ti­me­dia files, to create an­i­ma­tions, and to write at­trac­tive Web ap­pli­ca­tions us­ing HTML5 and CSS3 with a touch of JavaScript.

Why Flash should be re­placed

If you think your work should be uni­ver­sally ac­ces­si­ble, you have to for­get Flash and come to HTML5. Ta­ble 1 will give you a clearer pic­ture.

Me­dia play­back us­ing HTML5

Be­fore the ar­rival of HTML5, a Web de­signer had to em­bed an ex­ter­nal/third-party me­dia player into the Web page in or­der to play an au­dio or video clip. But for­tu­nately, HTML5 comes with built-in

<video> and <au­dio> tags. In­sert­ing me­dia clips us­ing these tags is very sim­ple, just like in­sert­ing im­age files us­ing <img>.

Ta­ble 2 com­pares the out­dated play­back tech­niques with the HTML5 me­dia play­back fea­ture.

<video> El­e­ment <video> is one of the lat­est tags in HTML, de­fined in HTML5. This el­e­ment makes it pos­si­ble to in­clude video files re­gard­less of the browser and plug-ins. Adding video files by us­ing this tag is sim­ple and uni­ver­sally ac­cepted (ex­cept in the case of out­dated Web browsers). The syn­tax is some­thing like what fol­lows: <video AT­TRIBUTES> <source src="SOURCE1" type="TYPE1"> <source src="SOURCE2" type="TYPE2"> … ER­ROR MES­SAGE </video>

Nor­mally, the at­tributes are width, height and con­trols. But­tons like Play and Stop are only vis­i­ble when the Con­trols at­tribute is given. The syn­tax shows that mul­ti­ple sources can be added. But that doesn’t mean mul­ti­ple video clips can be added. Sources will be dif­fer­ent copies of the same video clip with dif­fer­ent file for­mats. For ex­am­ple, you up­load the Ogg, MP4 and WebM ver­sions of a sin­gle video clip, so the browser can choose a sup­ported for­mat.

Now let us look at an ex­am­ple: <video width="420px" height="240px" con­trols> <source src="file.ogg" type="video/ogg"> <source src="file.webm" type="video/webm"> <source src="file.mp4" type="video/mp4"> Your browser doesn’t sup­port HTML5 video. </video>

The code is self-ex­plana­tory and in the con­text of the syn­tax, you get ev­ery­thing. Now let us cus­tomise it.

Auto play and Loop The code dis­cussed ear­lier gives us an in­te­grated me­dia player in the Web page. But ad­ver­tise­ments and an­i­mated ban­ners should have no con­trols (play, pause, etc). They must play au­to­mat­i­cally and loop for­ever. We can change the <video> el­e­ment as shown be­low by giv­ing just two at­tributes. Also note that the con­trols at­tribute is re­moved. <video width="420px" height="240px" au­to­play loop> <source src="file.ogg" type="video/ogg"> <source src="file.webm" type="video/webm"> <source src="file.mp4" type="video/mp4"> Your browser doesn’t sup­port HTML5 video. </video>

Ex­ter­nal con­trols We can con­trol the play­back us­ing ex­ter­nal but­tons and JavaScript. Con­sider the fol­low­ing ex­am­ple: <!DOCTYPE HTML> <html> <head>

<meta charser="utf-8"/> <script> func­tion play_vid() { vid = doc­u­ment.getEle­men­tById("vid");;

} </script> </head> <body> <video width="420px" height="240px" id="vid"> <source src="file.ogg" type="video/ogg"> <source src="file.webm" type="video/webm"> <source src="file.mp4" type="video/mp4">

Your browser doesn't sup­port HTML5 video. </video> <br/> <but­ton id="bt­n_­play" onclick="play_vid()">Play</ but­ton>

</body> </html>

It is self-ex­plana­tory for those who know JavaScript. For those who don’t, the ex­pla­na­tion is as fol­lows. We cre­ated a video el­e­ment with no con­trols and set its ID as vid. A but­ton is cre­ated and its onclick event is mapped to the JS func­tion play_vid, which means the func­tion play_vid will be ex­e­cuted when the but­ton is pressed. The JS func­tion just cre­ates a vari­able vid, stores the vid el­e­ment to it and calls it play method. The video plays. Other con­trols like pause and stop are left to you. Make use of the men­tioned ref­er­ences.

<au­dio> El­e­ment <au­dio> is al­most sim­i­lar to <video>. A no­table dif­fer­ence is that you don’t have to give the width and height. Here is an ex­am­ple: <au­dio con­trols> <source src="file.ogg" type="au­dio/ogg"> <source src="file.mp3" type="au­dio/mpeg"> Your browser doesn’t sup­port HTML5 au­dio. </au­dio>

An­i­ma­tion us­ing CSS3

Cre­at­ing an­i­ma­tions us­ing CSS3 is in­ter­est­ing. The best part is that any HTML el­e­ment can be an­i­mated – para­graphs, im­ages or but­tons; ba­si­cally, any­thing you would like to can be an­i­mated. Stan­dard SVG (vec­tor) im­ages can also be an­i­mated us­ing CSS3. Some mer­its of CSS3 an­i­ma­tion are: ƒ An­i­ma­tions are ren­dered in the user’s de­vice. The down­load­ing of large-sized an­i­mated files can be avoided. This de­creases the de­lays dur­ing page loading. ƒ Be­ing ren­dered in the user’s de­vice, an­i­ma­tions will be suit­able for the res­o­lu­tion of that de­vice. ƒ Does not need the in­stal­la­tion of any ad­di­tional plug-ins. Like any other stylesheet item, CSS3 an­i­ma­tions can also be de­fined in­side the HTML file or in­cluded in an ex­ter­nal stylesheet file. We will go through some ex­am­ples to learn more about CSS3 an­i­ma­tion. Since the HTML part is small, we will merge both HTML and CSS el­e­ments in a sin­gle HTML file. Once you get the ba­sics of an­i­ma­tion, you can cut and paste the stylesheet part to an ex­ter­nal CSS file.


The tech­nique is sim­ple. We can use the same class= or id= method to as­sign an­i­mated styles to ob­jects. In the def­i­ni­tions of the style, we should ap­ply an­i­ma­tion: an­i­m_defn;, where an­i­m_defn is de­fined out­side the style as @keyframes an­i­m_defn. The body of @keyframes con­tains the de­tails (i.e., keyframe de­scrip­tions) about the an­i­ma­tion. The fol­low­ing ex­am­ples will make things clear.

Method 1: The from-to method This is the sim­plest way to an­i­mate things. You give the com­mands from {INI­TIAL STYLE OF THE OB­JECT} and to {FI­NAL STYLE OF THE OB­JECT}. STYLE can be any style code that you give in nor­mal CSS. To learn the ba­sics, we use colour: here.

Con­sider this ex­am­ple: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <ti­tle>CSS3 An­i­ma­tion</ti­tle> <style> .style_anim {


an­i­ma­tion: an­i­m_kf 5s; @keyframes an­i­m_kf { from {color:black;} to {color:green;}

} </style> </head> <body>

<h1 class="style_anim">Hello</h1> </body> </html>

When the page is loaded in a Web browser, a head­ing-like text Hello changes its colour from black to green within five sec­onds. Some browsers won’t sup­port the above code. Be­fore go­ing into that is­sue, let us ex­plore this piece of code.

The body con­tains only one el­e­ment with an <h1> tag. It is the text Hello. We as­sign a style style_anim to it. Its def­i­ni­tion is given in the head. The style con­tains a line be­gin­ning with an­i­ma­tion: which points to the @keyframes rule of the an­i­ma­tion. The fol­low­ing el­e­ment is the du­ra­tion of the an­i­ma­tion—in this case, five sec­onds. The @keyframes rule con­tains the ini­tial and fi­nal states of the style, given af­ter from: and to:. The from style has black as its colour and the to style has green. It means our text Hello should be black at the be­gin­ning of the an­i­ma­tion clip and green at the end of the an­i­ma­tion. How very sim­ple!

Some older browsers do not sup­port the above code. All the lat­est browsers sup­port CSS an­i­ma­tion, but we have to con­sider those that use older browsers also. The prob­lem

can be solved eas­ily. For each Web browser/ren­derin­gengine, you give ad­di­tional an­i­ma­tion: line and @keyframes rule with a suit­able pre­fix. The pre­fix is -moz- for Mozilla Fire­fox, -we­bkit- for We­bkit-based browsers such as Chrome, Chromium and Ap­ple Sa­fari, and -o- for Opera. Let us look at the change more closely: <style> .style_anim {

} an­i­ma­tion: an­i­m_kf 5s; -moz-an­i­ma­tion: an­i­m_kf 5s; -we­bkit-an­i­ma­tion: an­i­m_kf 5s; -o-an­i­ma­tion: an­i­m_kf 5s; @keyframes an­i­m_kf {

} @-moz-keyframes an­i­m_kf {

} from {color:black;} to {color:green;} from {color:black;} to {color:green;} @-we­bkit-keyframes an­i­m_kf {

} from {color:black;} to {color:green;} @-o-keyframes an­i­m_kf { from {color:black;} to {color:green;}

} </style>

This is just a copy-paste job. Once ev­ery­body has the lat­est browsers, we can col­lapse to the stan­dard el­e­ments, for­get­ting these pre­fixes.

Method 2: Defin­ing many keyframes The above ex­am­ple had only two keyframes—ini­tial and fi­nal. To in­clude more than two key­words, we can use the per­cent­age of com­ple­tion:




More tips Now let us learn some cus­tomi­sa­tions tips. To achieve cus­tomi­sa­tion, we must in­clude .

To make the an­i­ma­tion play for­ever, ap­ply the prop­erty in­fi­nite. It is at­tached to the an­i­ma­tion: line, like the play­back du­ra­tion.

To set some de­lay be­fore the an­i­ma­tion, use an­i­ma­tion­de­lay. To set the num­ber of times the an­i­ma­tion is re­peated, use an­i­ma­tion-it­er­a­tion-count.

Here is an ex­am­ple code:

} 25% {STYLE_25} … 100% {STYLE_100}

An an­i­ma­tion is the grad­ual change from 0 per cent to 100 per cent. So our first ex­am­ple with from-to can be rewrit­ten as fol­lows: @keyframes an­i­m_kf { 0% {color:black;} 100% {color:green;}

In­clud­ing more keyframes, we can write as fol­lows: @keyframes an­i­m_kf { 0% {color:black;} 25% {color:red;} 50% {color:green;} 75% {color:blue;} 100% {color:#ff00ff;} .style_anim { an­i­ma­tion: an­i­m_kf 5s in­fi­nite; an­i­ma­tion-de­lay: 3s;

Com­bin­ing CSS3 with JavaScript Com­bin­ing CSS3 an­i­ma­tions with JavaScript is very sim­ple. For ex­am­ple, we add a Re­v­erse but­ton to the HTML body as we did in our video play­back ex­am­ple: <body> <h1 class="style_anim" id="h1_hello">Hello</h1> <but­ton onclick="play_re­verse()">Re­v­erse</but­ton> </body>

Also note that we have given an ID to the h1 el­e­ment Hello and the an­i­ma­tion is made in­fi­nite by giv­ing in­fi­nite at the end

of an­i­ma­tion: line. Check the script be­low: <script> func­tion play_re­verse() { hello = doc­u­ment.getEle­men­tById("h1_hello");­i­ma­tionDirec­tion="re­v­erse";

} </script>

Press the but­ton while the an­i­ma­tion plays for­ward. It runs back­ward!

In­ter­ac­tive pages

A vast range of new el­e­ments is de­fined in HTML5, which helps us to create in­ter­ac­tive forms, re­plac­ing Flash. Some of the new in­put type form el­e­ments are: ƒ colour ƒ date ƒ email ƒ time ƒ url As a ba­sic step to­wards web ap­pli­ca­tion de­vel­op­ing, let us create a small in­ter­ac­tive page. It sim­ply plays a CSS3 an­i­ma­tion, but the user can en­ter some pa­ram­e­ters. The code is self-ex­plana­tory, so let us jump into it di­rectly: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <ti­tle>CSS3 An­i­ma­tion</ti­tle> <script> func­tion change_­color() {

} </script> <style> .style_anim {


} hello = doc­u­ment.getEle­men­tById("hello"); inColor = doc­u­ment.getEle­men­tById("inColor"); = inColor.value; font-size: 26pt; an­i­ma­tion: an­i­m_kf 5s in­fi­nite; @keyframes an­i­m_kf { from {trans­form:ro­tate(0deg);} to {trans­form:ro­tate(360deg);}

</style> </head> <body> <ta­ble height="250px"><tr><td>

<div class="style_anim" id="hello">Hello</div> </td></tr></ta­ble> <in­put type="color" id="inColor" on­change="change_ color()">

</body> </html>

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.