HTML 5 vs. Flash - HTML 5 Multimedia Design

Chapter 3 HTML 5 Multimedia Design

3.1 Layout

3.3.2 HTML 5 vs. Flash

The big advantage with HTML 5 is no more need third party plug-in like Flash or Adobe, QuickTime for multimedia. The Flash is multimedia platform this application shows audio, video, animation on the web pages or browsers. Apple has given its full support to HTML5.

iPhones and iPod do not support flash and with HTML5 it will show video on the web page without third party plug-in . The video element in HTML5 is perfect for basic video players, but Flash and Silverlight are much more suitable for advanced video feature like streaming, caption, interactive features and various video effects. Html5 is leading in mobile world as compared to flash, If we see in the mobile world adobe has launched his flash player for mobile devices also but adobe announced recently that he will no more launching flash player for mobile devices.

Because the reason is company cannot afford the large resources needed to maintain development of flash player for mobile devices. Video player of html5 has greatly influenced adobe market.

YouTube version of html5 is also available which tells us that how much popularity it is getting nowadays. Html5 needs no download , it is supported by all latest browsers so no need to install every new update of flash player. So the scope of html5 is great in future as it is continuously adding features to it. As we know html5 is still under development and new features are adding to it with time. But we cannot forget about the power of flash player, it has great text animation support, dynamic content and good flexibility. HTML 5 can also handle animation, zoom on the Webpages.

27 3.3.3 Video Demo

Video Demo A: Simple video player Demo description:

I have created Simple Video Player which user can play, mute video and maximize screen. It is very easy and useful functions to use in browsers. Using video control like play, pause , mute unmute we can control that video.

Video Demo B: Basic Video Demo description:

I wanted to create simple HTML 5 Video Player Example. This is combination of HTML 5 &

JavaScript functions. For users there is having a video playlist option to choose any video and also create play, pause, mute, unmute.

Function:

This sample shows how to use the HTML 5 <Video> tag to implement a simple Video player.

</video>

Below is The sample shows how one can play/pause and mute/unmute the Video using built-in controls or programmatically.

3.4 Image

3.4.1 HTML 5 Image

In HTML 5, the <img> tag defines an image.The <img> tag has two required attributes: src and alt. In HTML 5, we may use the img tag to display images in a web page. These images are then

called by the browser when the web page is loaded. The image is not “embedded” in the page, but is linked to it. Note that the more images yoy have on your page, the longer it will take to load the page, as more requests have to be made by the browser.And most important thing is Browser Support ,The <img> tag is supported in all major browsers like

Mozilla,Chrome,Safari,Opera etc.

How Is the img Tag Used in HTML 5 Documents? Here is a simple example:

The following describes the allowable img tag attributes:

Table 3.6 When Do You Use the img Tag in HTML 5 Attribute Value

Alt text This defines a short description of the image

Height Pixels % This defines how tall the image is. This can either be a number or percent.

ismap ismap This defines the image as a “server side image map” – many links over certain parts of the image

src URL This is the url path to the image

usemap #mapname This defines the image as a client-side image map – use this with map and area tags to define the clickable areas.

width Pixels % This defines how wide the image is. This can be either a number or percent.

The <img> tag defines an image in an HTML page. The images are not technically inserted into an HTML page; images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. The <img> tag has two required attributes: src and alt. The <img> tag also supports the Event Attributes in HTML5^.The <img> tag also supports the Global Attributes in HTML5.

29 3.4.2 Image Demos

Image Demo A: Full Screen Image Slider Demo description:

I create animated full screen background image slideshow .for this I use HTML 5, JavaScript, CSS functions to create simple animated full screen background slideshow. There is having four Backgrounds for options for user to choose any image between them.

Image Demo B: Image Theater Demo description:

I create Image Theater which we can use in browsers & mobile .There is have two options to use this theater we can click number or arrow keys to different images in theater.

Image Demo C: Image slideshow Demo description:

I try to create simple HTML 5 slideshow which we can use on Browsers & Mobile .But this demo only works with some Browsers.

Function:

We can use arrow keys to see next image slides.

30 Image Demo D: Mini Slideshow

Demo description:

I create a simple and beautiful slideshow gallery that can be easily integrated in web site .The idea is to have a container with slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

Function:

The main HTML structure will consist of the main slideshow wrapper that

contains a container for the full view image (msg_wrapper) and one for the thumbnails (msg_thumbs).

Image Demo E: Photo desk Demo description:

The idea about this demo is to have some photos on a surface that can be dragged and dropped, stacked and deleted. For example, if we drag a picture, it get’s “picked up” first, making it appear a little bit bigger, since it would be closer to us. Dropping it results in the picture being

“thrown back” to the table, in a random rotation. Clicking to see the next one then, makes the previous one being thrown back to the surface. When using the shuffle function, the photos get rotated and spread over the desk randomly. The rotation did not work well with Internet Explore.

Image Demo F: Photo stack Demo description:

The idea about this demo is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most images behind the entire stack. I use jQuery and CSS3 properties for the rotated image effect.

31 Image Demo G: Rotating Billboard

Demo description:

I use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea about this demo is to make one set of image slices disappear while another one the other ad appears. I decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just like in a rotating billboard system.

Function:

HTML 5:

We have quite a lot of markup for the image slices – it has 22 slices for each ad:

Ex:

For these images, 22 slices each slice 35 pixels wide of a 770 pixel wide and 340 pixel high images were made. The billboard will be an absolute positioned div with the billboard image.

Since the image has some transparent spotlights, I want to lay it over the ad container.

To position the element in the center of the page, I set the left value to 50% and the left margin negatively to half of the width of the element.

The container for the ads will have the same style like the billboard, except the background-image. I do that, because need to position the containing elements at the same place like the billboard. I don’t want to place the ads inside of the billboard because we need the billboard to be on top of them. So, I do this trick and create another element with the same positioning:

The slices of the ad images will be 35 pixels wide. The slices of the second ad will have the same width, but initially need to set it to 0. Also need to set the left margin of the second slices to 18 pixels since I want to create the rotating effect

By positioning the elements one more pixel to the left than they are actually wide, I create a little gap between them. Now, the left margin has a value of 18 pixels because it is half of a slice plus

its gap. I set this because want the slices to appear or disappear from their center and not just from the side. If simply set the width of a slice to 0 pixels the image will not seem to be rotating.

JavaScript:

I now create a function for rotating the slices. The function will make the first ad slices disappear by making their width 0 pixels. To achieve the rotating effect, I add a left margin of 18 pixels.While the first ad slices disappear I make the others appear by removing the left margin of 18 pixels that I initially set in the CSS and giving them a width of 35 pixels.

Image Demo H: Rotating slideshow Demo description:

I use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. Also use with some CSS3.

Function:

HTML 5 :

The main container element is the #slideShowContainer div, which holds the #slideShow div and the previous / next links turned into arrows with CSS. The slides are defined as LI elements inside of an unordered list. The width of the images is set to 100%. This way they will scale according to the width of the #slideShow div.

Figure 3.3 Rotating Slideshow

CSS:

Although the #slideShow div is set to a width of 490px, its full size is actually 510px. This 20px difference scales down the slide images, which are reduced from their normal size of 480px down to 460px. In the next step, I used a jQuery animation to zoom in the slideshow to its full size. This way, even at full zoom, the images are actually at their regular size and there is no loss of quality

JQuery:

Although most modern browsers support CSS3 rotation, it is still rather tedious to work with the various vendor-specific properties. Luckily, there are plugins available that handle the cross-browser for us. I chose the jQuery rotate plugin, as it also integrates perfectly with the animate() and css() methods of the library, which means we can easily animate the rotation of elements. As you will see in a moment, I am using this in custom rotateContainer event, which rotates the #slideShow div.

I am using jQuery’s .support object to test whether the visitor’s browser supports CSS3 transformations. I am only going to display the rotation in browsers with transformation support, like the newer versions of Firefox, Chrome, Safari and Opera, while falling back to a plain fade in/out version of the slideshow in the rest.

Internet Explorer does provide a solution for rotating elements via its proprietary filter syntax, but it can’t handle the technique I am using for this slideshow. So, in effect, you are going to see a working slideshow in any browser, but only enjoy the fancy version in those that have support for it.

showNext and showPrevious are what I am using to control the slideshow. These in turn execute the rotate Container event, and pass the direction and degrees as parameters.

Javascript:

In this case, I also define the same showNext and showPrevious events, but here they just fade in / out the images, without starting a rotation.

The updateZindex() function is important, as otherwise the slides would be displayed in reverse order. This function loops through the elements in the order they currently are, and assigns a z-index property, so they are displayed correctly.

As the images are positioned absolutely, the last image will be shown on top. This is why I force them in the correct order by assigning z-indexes

updateZindex() ;

3.5 Drag And Drop

Drag and Drop is User Interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.

HTML 5 came up with new feature called a Drag and Drop API . HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

3.5.1 Drag And Drop Events

There are number of events which are fired during various stages of the drag and drop operation.

These events are listed below:

Table 3.7 Drag and Drop Events

Events Description

dragstart Fires when the user starts dragging of the

object

dragenter Fired when the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default.

dragover This event is fired as the mouse is moved over

an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the drag enter event.

dragleave This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highlighting or insertion markers used for drop feedback.

drag Fires every time the mouse is moved while the

object is being dragged.

drop The drop event is fired on the element where

the drop was occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location.

dragend Fires when the user releases the mouse button while dragging an object

Note: Note that only drag events are fired, mouse events such as mousemove are not fired during a drag operation.

36 3.5.2 Drag and Drop Demos

Drag and Drop Demo A: Keep Surrounding Clean

Demo description:

Here comes another cool feature of HTML5, DRAG and DROP. Through this, you can drag any element and drop it to the desired location. And I also create animated background with this drag and drop stuff. If I set this attribute to true, then the element can be dragged.

Function:

HTML 5 :

Here is an HTML 5 function for drag and drop

To make actual use of this feature, Have to learn about certain events Table 3.8 HTML 5 function for drag and drop

ondragstart This event is fired when user starts dragging a draggable object

ondrop Fires on the target object when the mouse button is released during a drag-and-drop operation.

ondragenter Occurs when the user click-drags an object on the page over and into a valid drop target

ondragover This event fires continuously while the user click-drags an object over a valid drop target.

37 Drag and Drop Demo B: Image Vampire Demo description:

I create application for giving some funny touches to an image. I use jQuery and query UI for dragging and resizing little bling elements like mustaches and glasses With PHP the image and the bling elements will get merged and the end result can be viewed.

Function:

HTML 5 :

The markup is pretty simple: I have a main container with the objects sidebar, the main image and the tools area:

</div>

The objects sidebar contains all the drag gable elements and the tools area show a list of all the used elements. In each item I use a slider to allow the rotation of the respective element. I also provide a delete icon to remove the element which is in Red Cross symbol.

Javascript :

The element images that are dropped onto the main image will be stored in the following object:

"images": [ {"id" : "obj_0" ,"src" : "background.png", "width" : "640", "height" : "480"}]]

Every time I drop a new image insert it into the “images” array.The images are resizable and draggable.

The background div, where the main image is inserted is droppable. Each time I drop an element into this container I add it to the data object if it is not there already. The most important parameters added are the width, height, top and left. The last two are calculated based on the difference between the absolute top or left of the container and the drag gable object.

If the element was already in the data object, meaning that the user keeps dragging it around, I just update the new top and left in the data object. I also set a new z-index to the dropped element, so that the last one dropped always stays on top. Besides adding to the object I also add a new element to the tools sidebar, where I will be able to rotate the corresponding image and also delete it from the container. When removing an element from the container, I want to remove it from the sidebar, from the data object and also add it again to the elements list.

PHP :

What I doing here is getting all the info for each image dropped into the main container, and merging it with the background image. If there was a rotation then I need to make sure I recalculate the top and left, since the PHP image rotate function is not that friendly and it scales down the image after rotation

Chapter 4 Simulation & Game Design

4.1 HTML 5 Canvas

The HTML5 <canvas> is another interesting feature. This can be used for rendering graphs, game graphics, or other visual images. The canvas element is part of HTML5 and allows for

在文檔中 HTML5多媒體設計之研究 (頁 25-0)