Replacing Flash with HTML5 and CSS3
Even though Flash can enable animated and interactive content on websites, it does have a number of drawbacks. The slow loading of Web pages and the inability of Flash content to search bots makes it necessary to replace Flash with other tools.
M aking a page interactive is an important part of Web designing. Many websites have to play multimedia clips, display attractive animated pictures, collect data from visitors ‘actively’ and, ultimately, the creators of many Web pages want these to become useful ‘Web apps’.
A few years ago, the only way to achieve these goals was using by Adobe Flash. Files created with Flash can be exported to animated GIF (used since the early days of the WWW), video and SWF (Shock Wave Flash) file formats. SWF files can act as normal programs. Hence, Flash became a favourite tool of Web designers.
Actually, the reason for the growth of Flash was that HTML did not have built-in support for multimedia (except image files) and animation. But now, with the arrival of HTML5, it is possible to handle multimedia content with the native HTML code. Yet, many people still use outdated Flash-based techniques. But why should one stick to proprietary, out-dated technology when there’s an open source alternative that is simple and powerful?
By going over some comparisons and examples, let us try to learn the techniques to play multimedia files, to create animations, and to write attractive Web applications using HTML5 and CSS3 with a touch of JavaScript.
Why Flash should be replaced
If you think your work should be universally accessible, you have to forget Flash and come to HTML5. Table 1 will give you a clearer picture.
Media playback using HTML5
Before the arrival of HTML5, a Web designer had to embed an external/third-party media player into the Web page in order to play an audio or video clip. But fortunately, HTML5 comes with built-in
<video> and <audio> tags. Inserting media clips using these tags is very simple, just like inserting image files using <img>.
Table 2 compares the outdated playback techniques with the HTML5 media playback feature.
<video> Element <video> is one of the latest tags in HTML, defined in HTML5. This element makes it possible to include video files regardless of the browser and plug-ins. Adding video files by using this tag is simple and universally accepted (except in the case of outdated Web browsers). The syntax is something like what follows: <video ATTRIBUTES> <source src="SOURCE1" type="TYPE1"> <source src="SOURCE2" type="TYPE2"> … ERROR MESSAGE </video>
Normally, the attributes are width, height and controls. Buttons like Play and Stop are only visible when the Controls attribute is given. The syntax shows that multiple sources can be added. But that doesn’t mean multiple video clips can be added. Sources will be different copies of the same video clip with different file formats. For example, you upload the Ogg, MP4 and WebM versions of a single video clip, so the browser can choose a supported format.
Now let us look at an example: <video width="420px" height="240px" controls> <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 support HTML5 video. </video>
The code is self-explanatory and in the context of the syntax, you get everything. Now let us customise it.
Auto play and Loop The code discussed earlier gives us an integrated media player in the Web page. But advertisements and animated banners should have no controls (play, pause, etc). They must play automatically and loop forever. We can change the <video> element as shown below by giving just two attributes. Also note that the controls attribute is removed. <video width="420px" height="240px" autoplay 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 support HTML5 video. </video>
External controls We can control the playback using external buttons and JavaScript. Consider the following example: <!DOCTYPE HTML> <html> <head>
<meta charser="utf-8"/> <script> function play_vid() { vid = document.getElementById("vid"); vid.play();
} </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 support HTML5 video. </video> <br/> <button id="btn_play" onclick="play_vid()">Play</ button>
</body> </html>
It is self-explanatory for those who know JavaScript. For those who don’t, the explanation is as follows. We created a video element with no controls and set its ID as vid. A button is created and its onclick event is mapped to the JS function play_vid, which means the function play_vid will be executed when the button is pressed. The JS function just creates a variable vid, stores the vid element to it and calls it play method. The video plays. Other controls like pause and stop are left to you. Make use of the mentioned references.
<audio> Element <audio> is almost similar to <video>. A notable difference is that you don’t have to give the width and height. Here is an example: <audio controls> <source src="file.ogg" type="audio/ogg"> <source src="file.mp3" type="audio/mpeg"> Your browser doesn’t support HTML5 audio. </audio>
Animation using CSS3
Creating animations using CSS3 is interesting. The best part is that any HTML element can be animated – paragraphs, images or buttons; basically, anything you would like to can be animated. Standard SVG (vector) images can also be animated using CSS3. Some merits of CSS3 animation are: Animations are rendered in the user’s device. The downloading of large-sized animated files can be avoided. This decreases the delays during page loading. Being rendered in the user’s device, animations will be suitable for the resolution of that device. Does not need the installation of any additional plug-ins. Like any other stylesheet item, CSS3 animations can also be defined inside the HTML file or included in an external stylesheet file. We will go through some examples to learn more about CSS3 animation. Since the HTML part is small, we will merge both HTML and CSS elements in a single HTML file. Once you get the basics of animation, you can cut and paste the stylesheet part to an external CSS file.
Technique
The technique is simple. We can use the same class= or id= method to assign animated styles to objects. In the definitions of the style, we should apply animation: anim_defn;, where anim_defn is defined outside the style as @keyframes anim_defn. The body of @keyframes contains the details (i.e., keyframe descriptions) about the animation. The following examples will make things clear.
Method 1: The from-to method This is the simplest way to animate things. You give the commands from {INITIAL STYLE OF THE OBJECT} and to {FINAL STYLE OF THE OBJECT}. STYLE can be any style code that you give in normal CSS. To learn the basics, we use colour: here.
Consider this example: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>CSS3 Animation</title> <style> .style_anim {
}
animation: anim_kf 5s; @keyframes anim_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 heading-like text Hello changes its colour from black to green within five seconds. Some browsers won’t support the above code. Before going into that issue, let us explore this piece of code.
The body contains only one element with an <h1> tag. It is the text Hello. We assign a style style_anim to it. Its definition is given in the head. The style contains a line beginning with animation: which points to the @keyframes rule of the animation. The following element is the duration of the animation—in this case, five seconds. The @keyframes rule contains the initial and final states of the style, given after 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 beginning of the animation clip and green at the end of the animation. How very simple!
Some older browsers do not support the above code. All the latest browsers support CSS animation, but we have to consider those that use older browsers also. The problem
can be solved easily. For each Web browser/renderingengine, you give additional animation: line and @keyframes rule with a suitable prefix. The prefix is -moz- for Mozilla Firefox, -webkit- for Webkit-based browsers such as Chrome, Chromium and Apple Safari, and -o- for Opera. Let us look at the change more closely: <style> .style_anim {
} animation: anim_kf 5s; -moz-animation: anim_kf 5s; -webkit-animation: anim_kf 5s; -o-animation: anim_kf 5s; @keyframes anim_kf {
} @-moz-keyframes anim_kf {
} from {color:black;} to {color:green;} from {color:black;} to {color:green;} @-webkit-keyframes anim_kf {
} from {color:black;} to {color:green;} @-o-keyframes anim_kf { from {color:black;} to {color:green;}
} </style>
This is just a copy-paste job. Once everybody has the latest browsers, we can collapse to the standard elements, forgetting these prefixes.
Method 2: Defining many keyframes The above example had only two keyframes—initial and final. To include more than two keywords, we can use the percentage of completion:
}
}
}
More tips Now let us learn some customisations tips. To achieve customisation, we must include .
To make the animation play forever, apply the property infinite. It is attached to the animation: line, like the playback duration.
To set some delay before the animation, use animationdelay. To set the number of times the animation is repeated, use animation-iteration-count.
Here is an example code:
} 25% {STYLE_25} … 100% {STYLE_100}
An animation is the gradual change from 0 per cent to 100 per cent. So our first example with from-to can be rewritten as follows: @keyframes anim_kf { 0% {color:black;} 100% {color:green;}
Including more keyframes, we can write as follows: @keyframes anim_kf { 0% {color:black;} 25% {color:red;} 50% {color:green;} 75% {color:blue;} 100% {color:#ff00ff;} .style_anim { animation: anim_kf 5s infinite; animation-delay: 3s;
Combining CSS3 with JavaScript Combining CSS3 animations with JavaScript is very simple. For example, we add a Reverse button to the HTML body as we did in our video playback example: <body> <h1 class="style_anim" id="h1_hello">Hello</h1> <button onclick="play_reverse()">Reverse</button> </body>
Also note that we have given an ID to the h1 element Hello and the animation is made infinite by giving infinite at the end
of animation: line. Check the script below: <script> function play_reverse() { hello = document.getElementById("h1_hello"); hello.style.animationDirection="reverse";
} </script>
Press the button while the animation plays forward. It runs backward!
Interactive pages
A vast range of new elements is defined in HTML5, which helps us to create interactive forms, replacing Flash. Some of the new input type form elements are: colour date email time url As a basic step towards web application developing, let us create a small interactive page. It simply plays a CSS3 animation, but the user can enter some parameters. The code is self-explanatory, so let us jump into it directly: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>CSS3 Animation</title> <script> function change_color() {
} </script> <style> .style_anim {
}
} hello = document.getElementById("hello"); inColor = document.getElementById("inColor"); hello.style.color = inColor.value; font-size: 26pt; animation: anim_kf 5s infinite; @keyframes anim_kf { from {transform:rotate(0deg);} to {transform:rotate(360deg);}
</style> </head> <body> <table height="250px"><tr><td>
<div class="style_anim" id="hello">Hello</div> </td></tr></table> <input type="color" id="inColor" onchange="change_ color()">
</body> </html>