HTML5多媒體設計之研究

全文

(1)Thesis. Title: A Study on the Multimedia Design of HTML-5. Professor: Yao -ming Yeh Student: Anupriya S. More. 1.

(2) ABSTRACT HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet. It is the fifth revision of the HTML standard originally created in 1990 and most recently standardized as HTML4 in 1997 and as of August 2012 HTML5 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers etc.). HTML5 is intended to add not only HTML4, but XHTML1 and DOM2HTML (particularly JavaScript) as well. This thesis presents new features of HTML 5 Audio, Video, Canvas, Image etc. This can be used for latest browsers syntax & application. There are a couple of great new approaches that are taking place in the HTML5 description. The advantage of one of the great new improvements in HTML5 is the development of rich media tags like audio and video. Fully programmable with JavaScript, these tags offer incredible ease of use while also offering powerful flexibility through extensive access to media elements through programming. This thesis is good reference to people who want to develop HTML 5 technology applications. These demos demonstrate good HTML 5 development style. It can provide very good reference for who want to develop their own website using HTML 5. I have done some new features of HTML 5 Audio, Video, Canvas, Image, Drag & Drop, Physics simulation & game development. Users can use this Multimedia Demos on iphone mobile devices & computer. I make demos more usable for users. Users can interact with each demo. Keywords: HTML 5, JavaScript, CSS, jQuery , PHP.. 3.

(3) CONTENTS ABSTRACT…………………………………………………………………………………...2 List of Figures & Tables………………………………………………………………………...6. Chapter 1 Introduction……………………………………………………………………..8 1.1 Research Background………………………………………………………………………...8 1.2 Research purpose……………………………………………………………………………10 A. Multimedia Design on HTML5……………………………………………………...10 B. Multimedia includes Audio, Video, Canvas................................................................10 1) Video…………………………………………………………………………………11 2) Audio…………………………………………………………………………………11 3) Canvas………………………………………………………………………………...11. Chapter 2 Survey……………………………………………………………………………12 2.1 HTML 5……………………………………………………………………………………...12 2.1.1 HTML 5 – features……………………………………………………………….……13 2.2 Other Web Technology’s……………………………………………………………………15 2.2.1 CSS………………………………………………………………………..……….......15 2.2.2 javascript…………………………………………………………………………….....16 2.2.3 jQuery…………………..………………………………………………………….......16 2.2.4 PHP…………………………………………………………………………………….17. Chapter 3 HTML 5 Multimedia Design……………………………………………….18 3.1 Layout………………………………………………………………………………………..18 3.2 Audio…………………………………………………………………………………………19. 4.

(4) 3.2.1 HTML 5 Audio…………………………………………………………………….............19 3.2.2 Audio Demos………………………………………………………………………………21 Audio Demo A: Audio sample…………………………………………………………...21 Audio Demo B: Audio color picker Clock………………………………………............22 3.3 Video…………………………………………………………………………………………22 3.3.1 HTML 5 video ……………………………………………………………… ……………22 3.3.2 HTML 5 vs. Flash………………………………………………………………………….25 3.3.3Video Demo………………………………………………………………………………...26 Video Demo A: Simple video player………………………………………………….....26 Video Demo B: Basic Video……………………………..................................................26 3.4 Image………………………………………………………………………………………....26 3.4.1 HTML 5 Image................................................................ …………………………………26 3.4.2 Image Demos………………………………………………………………………………28 Image Demo A: Full Screen Image Slider……………………………………………...28 Image Demo B: Image Theater…………………………………………………………28 Image Demo C: Image slideshow……………………………………… ……………...28 Image Demo D: Mini Slideshow………………………………………………………..29 Image Demo E: Photo desk……………………………………………………………..29 Image Demo F: Photo stack………………………………………….............................29 Image Demo G: Rotating Billboard…………………………………….........................30 Image Demo H: Rotating slideshow……………………………………………………31 3.5 Drag and Drop………………………………………………………………………………..33 3.5.1 Drag and Drop Events…………………………………………….......................................34 3.5.2 Drag and Drop Demos……………………………………………………………………..35 Drag and Drop Demo A: Keep Surrounding Clean…………………………………….35 Drag and Drop Demo B: Image Vampire………………………………………………36. Chapter 4 Simulation and Game Design........................................................................38 4.1 HTML 5 Canvas ……………………………………..……………………………………...38 4.2 Physics Simulation…………………………………………………………………………...38. 5.

(5) Physics Simulation Demo A: Shoot Box………….……………………………………39 Physics Simulation Demo B: Physics Box……………………………………………...39 Physics Simulation Demo C: Physics Adventure…………………………………….....40 4.3 Game…………………………………………………………………………………………41 Game Demo A: English Character Fall ………………………………………..............41 Game Demo B: Water Character Fall…………………………………………..............42 Game Demo C: Fairy Jump ……………………………………………………………43 Game Demo D: Snake Game……………………………………………………...........44. Chapter 5 HTML 4 vs. HTML 5………………………………………………...46 5.1 Comparison between HTML 4 and HTML 5………………………………………………..46 A. Comparison with HTML 4…………………………………………………………..46 5.2 Browsers Comparison………………………………………………………………………..47. Chapter 6 Conclusion………………………………………………………………………53 References………………………………………………………………………………………..55. 6.

(6) List of Figures Figure 1.1 History Timeline……………………………………………………………………...10 Figure 3.1 HTML 5 multimedia design first……………………………………………………..18 Figure 3.2 HTML 5 multimedia design second………………………………………………….19 Figure 3.3 Rotating Slideshow…………………………………………………………………...32 Figure 4.1 Physics Box Part 1…………………………………………………............................39 Figure 4.2 Physics Box Part 2…………………………………………………............................40 Figure 4.3 Fairy Jump Part 1…………………………………………………………..................43 Figure 4.4 Fairy Jump Part 2…………………………………………………………….….........44 Figure 4.5 Snake Game Part 1…………………………………………………………………...45 Figure 4.6 Snake Game Part 2…………………………………………………………………...45. List of Tables Table 2.1 New features……………………………………………………………………….....13 Table 2.2 New Inline Elements………………………………………………………………….14 Table 2.3 Support for Dynamic Pages…………………………………………………………...14 Table 2.4 New form types………………………………………………………………………..15 Table 2.5 New elements and features……………………………………………………...…….15 Table 3.1 Audio on the Web……………………………………………………………………..19. 7.

(7) Table 3.2 All <audio> Attributes………………………………………………………………...20 Table 3.3 Video formats supported Browsers…………………………………………………....24 Table 3.4 HTML5 Video Tags…………………………………………………………………..24 Table 3.5 All <Video> Attributes………………………………………………………………..25 Table 3.6 When Do You Use the img Tag in HTML 5………………………………………….27 Table 3.7 Drag and Drop Events…………………………………………………………………34 Table 3.8 HTML 5 function for drag and drop……………………………………………… ….35 Table 4.1 Canvas Attributes ……………………………………………………………………..38 Table 5.1 Audio Browsers Comparison………………………………………………………….47 Table 5.2 Video Browsers Comparison………………………………………………………….48 Table 5.3 Image Browsers Comparison…………………………………………………………48 Table 5.4 Drag & Drop Browsers Comparison………………………………………………….50 Table 5.5 Physics Simulation Browsers Comparison……………………………………………50 Table 5.6 Game Browsers Comparison……………………………………………………… …51. 8.

(8) Chapter 1 Introductions. 1.1 Research Background HTML (Hypertext Markup Language) is used to create documentation the World Wide Web. It is not a programming language, it is a markup language. It uses markup tags to describe web pages. It have some Tags, HTML markup tags are usually called HTML tags. HTML tags are keywords surrounded by angle brackets like <html>.HTML tags normally come in pairs like <b> and </b>.The first tag in a pair is the start tag , the second tag is the end tag. Start and end tags are also called opening tags and closing tags. So what Browsers like Chrome, Opera, Safari, and Mozilla Firefox, Internet Explorer do with this HTML webpage it read this tags and interact with them and display webpage related to that tags. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. It is a platform independent language that can be used on any platform such as Windows, Linux and so on. To display a document in web it is essential to mark-up the different elements (headings, paragraphs, tables, and so on) of the document with the HTML tags. To view a mark-up document, user has to open the document in a browser.HTML also provides tags to make the document look attractive using graphics, font size and colors. User can make a link to the other document or the different section of the same document by creating Hypertext Links also known as Hyperlinks. Then there have latest version of HTML is HTML 5. HTML or Hypertext Markup Language is a formatting language that programmers and developers use to create documents on the Web. The HTML 5 is slandered for structuring and presenting content on the World Wide Web. It is a family of technologies that includes new HTML tags, CSS3, and some new APIs. It has some new features like Video playback and Drag & Drop which it was not in previous version. The latest edition HTML5 has new features for programmers such as <video>, <audio> and <canvas> elements. It has been also designed which is compatible with older version of HTML. User view a Web page written in HTML in a Web browser such as Internet Explorer, Mozilla Firefox or Google Chrome. The HTML5 language has specific rules that allow placement and format of text, graphics, video and audio on a Web page. Programmers use these programming tags or elements to produce web pages in unique and creative ways. Tags such as <section>, <article>, <header> enable the creator to make a more efficient and intelligent web page. The. 9.

(9) another main advantage with HTML 5 is the multimedia content on web browser like Audio and Video is there is no need to use third party plug-in such as flash , QuickTime. In this thesis I present new features such as Audio, Video, Image, Drag and Drop, and Canvas, And Reference [11][12][13] physics simulation, game demo to add some more extra effect and make it more beautiful and usable for users. I have these demo using with JavaScript, CSS, jQuery framework and PHP another web technology languages. Theses all demo for another web developer to make it more visual and graphic effect on web page application. So from where did the idea of HTML5 came? HTML was introduced in the year 1991. The first version of HTML which is called HTML 2 came in 1994 which added new features of form based file uploads and tables. Then in January 1997, came HTML 3.2. This one was first one to be developed and standardized by World Wide Consortium is W3C. In the same year, in December 1997 HTML 4.0 was introduced. In December 1999, HTML 4.01 was published as a W3C Recommendation. The variations it introduced were the same as introduced by HTML 4.0. Then in CSS 1 and JavaScript was introduced in 1996.and next version of CSS is CSS2 was introduced in 1998.In the year 2000, XHTML 1.0 is extensible Hypertext Markup Language was introduced which had serialization as its major offering. It was latest version of SGML. It too came up with the same versions as HTML 4.0 i.e. Strict, Transitional and Framesets. XHTML was followed by XHTML 1.1., XHTML basic, XHTML-MP, XHTML 1.2 and XHTML 2.0. The W3C indicated that it’s interested in the development of HTML5, the next version of HTML. In the year 2007, W3C formed a working group chartered to work with WHATWG, to develop the specifications of HTML5. It had been estimated that HTML5 will reach W3C Recommendation by late 2012.. 10.

(10) Figure 1.1 History Timeline. 1.2 Research Purposes A. Multimedia Design on HTML 5 HTML5 is an exciting development in the history of rich-media content on the Web, With major media sites such as YouTube, The New York Times, Flicker, The Wall Street Journal, CNN, and Vimeo now offering HTML5 video players, and the Safari, Chrome, Firefox, and Opera web browsers fast adding HTML5 features, it’s time to consider what HTML5 offers in comparison to competing proprietary technologies such as Adobe Flash, Microsoft Silverlight, and Sun’s JavaFX.. B. Multimedia Includes Audio, Video, Canvas Multimedia includes a combination of text, audio, still images, animation, video, and interactivity content forms. HTML 5 is good for Multimedia, because the first focused on multimedia, specifically what HTML5′s video and audio tags provide to users. The second was about how we need to move HTML5 out of the laboratory and start putting it to use in the real world.. 11.

(11) 1) Video HTML5 video is an element introduced in the HTML5 draft specification for the purpose of playing videos or movies on the browsers. Adobe Flash Player is widely used to embed video on web sites such as YouTube, since many web browsers have Adobe's Flash Player pre-installed .HTML5 video is idea by its creators to become the new standard way to show video online, but some video formats like ogg, webm should be supported in the video tag. Element example: <video> <video src="movie.webm" poster="movie.jpg" controls> </video>. 2) Audio One of the most exciting features in HTML5 the <audio> element, enabling native audio playback within the browser. The advantage of this Audio feature is all of the major browsers support it like Chrome, Safari, Opera but soon it will also support Internet Explorer 9. For browsers that don't support audio natively, easily fallback to Flash. 3) Canvas The new canvas element describes a resolution dependent bitmap region in a web page, providing web pro-grammars with a set of functions via a context structure to modify and manipulate its contents. The steps to manipulate are always the same: 1. Define a context element with width and height 2. Obtain a drawing context 3. Modify the canvas region with methods provided by the context. The W3C specifications say the canvas element is "implemented and widely deployed". Although this is true for the element itself, this doesn't count for the types of contexts which can be accessed, namely, the 2D context and the WebGL context, specied by the Khronos Group. Regarding the 2D context, the newest versions of Safari, Opera, Google Chrome and Firefox definitely support the following groups of drawing functions. The new Microsoft Internet Explorer 9 will also support the canvas element such as 2D transformations, Line and fill styles, Gradients, Bezier paths and quadratic curves, Text rendering, Image rendering, Pixel access.. 12.

(12) Chapter 2 Survey. 2.1 HTML 5 This language is for structure & present content for W3 means World Wide Web. This is newer version of HTML (hypertext markup language). HTML originally develop in 1990, But newer version of HTML is still under development. The aims for this language improve support the multimedia which is readable by humans & also understood by computers & devices like web browsers. HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. There is some new rule established for HTML 5 like New features should be based on HTML, CSS, DOM, and JavaScript ,Reduce the need for external plugins like Flash, Better error handling, More markup to replace scripting, HTML5 should be device independent, The development process should be visible to the public. HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers like Chrome, Safari, and Firefox, Opera, and Internet Explorer .Continue to add new HTML5 features to their latest versions.It is single markup language that can be written in HTML OR XHTML syntax. HTML5 adds many new syntactical multimedia features like <video>, <audio>,< canvas> elements . And also include SVG content. These features easier to handle and use multimedia and graphical content for users on the web without having plug-in. Other new elements, like <section>, <article>, <header>, and <nav>, are designed to enrich the semantic content of documents. Some elements and attributes have been removed. That elements, such as <a>, <cite> and <menu> have been changed or standardized. The Web Hypertext Application Technology Working Group (WHATWG) starting to work on the new standard in 2004, when the W3C (World Wide Web consortium) were focusing future developments on XHTML 2.0, & HTML 4.01, it is not updated since 2000. The w3c allowed the XHTML 2.0 working groups decided to expire & not to renew it. The W3C & WHATWG are still working together for HTML 5 development.. 13.

(13) 2.1.1 HTML 5 – Features 1) New Structure Elements HTML 5 has many new elements and attributes. The following list compiles some of them Table 2.1 New features Section. Artical. Aside Hgroup Header. Footer Nav. This defines sections in a document. Such as chapters, headers, footers, or any other sections of the document. We can split website home page into sections for example like introduction, news items, contact information. The <article> tag is supported in all major browsers like safari, chrome, Mozilla Firefox, opera etc. The <article> tag specifies independent, self-contained content such as forum post, newspaper article, blog entry, user comment. The <article> tag is new in HTML5. The <aside> tag defines some content aside from the content it is placed in.The aside content should be related to the surrounding content It represents the heading of a selection. This element used to a group like h1 to h6 elements. The <header> tag specifies an introduction, or a group of navigation elements for a document. The <headers> element can contain headings, subheadings, version information, navigational controls, etc. The <footer> tag defines a footer for a document or section. Footers are typically placed at the bottom of a document. However, this is not required. This tag is new in HTML 5. The <nav> tag defines a section of navigation links. This element represents a section of a page that links to other pages .. Figure. The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.. Time. The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.. Mark. The <mark> tag defines marked text.Use the <mark> tag if we want to highlight parts of text.. 2. New Doctype and Charset HTML 5 is very easy to implement. HTML 5 declaration only need <! doctype html> and that’s all. This is only possible because HTML is no longer a part of SGML. because browsers will know which version of HTML developer is using.. 14. Developer us e this tag.

(14) 3. New Inline Elements Some of the new additions to the inline elements Table 2.2 New Inline Elements <mark>. to indicate content that is marked in some fashion. <time>. to indicate content that is a time or date. <meter>. to indicate content that is a fraction of a known range - such as disk usage. <progress>. to indicate the progress of a task towards completion. 4. Support for Dynamic Pages The basic purpose of developing HTML5 was to help the web developers. Thus many new features have been added to support dynamic pages. Table 2.3 Supports for Dynamic Pages Context menus. Creation and use of context menus within Web pages and applications is supported by HTML5. Async attribute. This will reduce the loading time of the page as it allows asynchronous loading of a page. <details>. The <details> tag specifies additional details that the user can view or hide on demand.. <datagrid>. This is an important addition which will help in dynamically loading content from a database or other dynamic sources. <menu>. This tag helps in building a menu in the webpage. <command>. The <command> tag defines a command (a radio button, a checkbox, or a command button) that the user can invoke.. Href. The href attribute specifies the URL of the page the link goes to.. 15.

(15) 5. New Form Types HTML 5 has added a few more input types which are as follows:Table 2.4 New form types Time Type. Date time, date time-local, date, month, week, time. Number Type. Number , range. Links Type. Email , url. 6. New Elements and Features These are the most interesting features of HTML5 which makes it stand out from its predecessors. The following most exciting elements of HTML5:Table 2.5 New Elements and Features Canvas. The HTML5 canvas element uses JavaScript to draw graphics on a web page. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.. Video. HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.. Audio. HTML5 supports the addition of audio feature to a webpage with the help of the <audio> tag.. Drag & Drop. HTML5 offers the developers the option of using drag and drop feature which will certainly make the website building a lot more easy and fun.. Geolocation. HTML5 Geolocation is used to locate a user's position. The HTML5 Geolocation API is used to get the geographical position of a user.. 2.2 Other Web Technology’s 2.2.1 CSS The Cascading Style Sheets (CSS), it is style sheet language, it also application to style web pages written in two languages in HTML & XHTML. The look & formatting of a document. 16.

(16) written in markup language, but the language can also be applied to any kind of XML documents also include SVG and XUL. CSS is designed to able the separate of document content which is wrriten in HTML or any other smiler markup language like HTML 5 also include layout , fonts and colors. CSS can also allow the same markup page to be presented in different styles for different rendering methods. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified The CSS are maintained by the World Wide Web Consortium (W3C). The CSS is as design tool has increasing its popularity very fast and also important design for website design .Latest version of CSS called CSS 3 is still under development from December 15, 2005. The w3c maintain all latest progress reports of CSS3 .. 2.2.2 JavaScript JavaScript is a prototype-based scripting language .It is a multi-paradigm language, supporting object-oriented and functional programming styles. JavaScript was designed to add interactivity to HTML pages. JavaScript is usually embedded directly into HTML pages. JavaScript is a scripting language. Everyone can use JavaScript without purchasing a license JavaScript is implemented as part of web browsers to provide user interface & dynamic websites. JavaScript has a syntactic similar to Java. JavaScript was not developed at Sun Microsystems, the home of Java. But the two languages are otherwise unrelated and have very different semantics. JavaScript has only three primitive data types’ strings, numbers, Booleans.. 2.2.3 jQuery So what is jQuery, it is a library of JavaScript Functions. Jquery library have some features like HTML element selections, HTML element manipulation, HTML DOM traversal and modification, Utilities, AJAX, JavaScript Effects and animations, HTML event functions, CSS. 17.

(17) manipulation. jQuery is open source JavaScript library that simplifies the interaction between HTML and JavaScript. Jquery is Created by John Resig in 2005, released in January of 2006 . jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. The jQuery framework creates powerful and dynamic web pages and web applications. The query is popular javascript liberary. It provide many useful features to help developers to overcome cross browser issues. It used by over 46% of the 10,000 most visited websites, jQuery is written in the following two ways:. $ (selector) Or $ jQuery(selector). This is more like decoration of jQuery .It is better Interaction Design and Web Development with Simple JavaScript Techniques. 2.2.4 PHP PHP is designed for web development for producing Dynamic Web pages. PHP originally stood for “Personal Home Page,” but as its functionality expanded, it became “PHP: Hypertext Processor” because it takes PHP code as input and produces HTML as output. PHP is a scripting language, and is very similar to C, Java, and Perl. PHP was originally created by Rasmus Lerdorf in 1995. So what PHP do? It allow us to reduce time to create large websites. Create a customized user experience for visitors based on information that you have gathered from them. Allow creation of shopping carts for e-commerce websites. PHP is installed on more than 20 million websites and 1 million web servers.PHP can be avialble on most web servers and on almost. every. operating system and platform without charge . PHP is free software released under the PHP License which is incompatible with the GNU General Public License (GPL) due to restrictions on the usage of the term PHP.. 18.

(18) Chapter 3 HTML 5 Multimedia Design 3.1 Layout This is final layout for demos, below shows layout in figure 3.1 & figure 3.2 . I have split website. home page into sections like introduction, news items, and contact information. For we click on Home section it will show Demos list so for this I use HTML 5 tag, the <li> tag is supported in all major browsers. <li><a href="#wrap">News</a></li>. For About section, if we click on About section it will show Introduction. so for this I use HTML 5 tag, The <li> tag is supported in all major browsers. <li><a href="#about">About</a></li>. For Contact section, if we click on Contact section it will show Contact information, so for this I use HTML 5 tag , The <li> tag is supported in all major browsers . <li><a href="#about">Contact </a></li>. Figure 3.1 HTML 5 multimedia designs first. 19.

(19) Figure 3.2 HTML 5 multimedia designs second.. 3.2 Audio 3.2.1 HTML 5 Audio Until now, there has never been a standard for playing audio on a web page.Today, most audio are played through a plugin like flash. However, not all browsers have the same plugins. HTML5 specifies a standard way to include audio, with the audio element.The audio element can play sound files, or an audio stream.Audio Formats Currently, there are 3 main formats for the audio element: Table 3.1 Audio on the Web Format. IE9. Firefox 3.5. Opera10.5. Chrome 3.0. Safari 3.0. Ogg Vorbis. No. Yes. Yes. Yes. No. MP3. Yes. No. No. Yes. Yes. Wav. No. Yes. Yes. Yes. Yes. 20.

(20) To play an audio file in HTML5, this is all you need: <audio src="song.ogg" controls="controls"> </audio>. The control attribute is for adding play, pause, and volume controls.Insert content between the <audio> and </audio> tags for browsers that do not support the audio element: Example : <audio src="song.ogg" controls="controls"> </audio>. The example above uses an Ogg file, and will work in Firefox, Opera and Chrome.To make the audio work in Internet Explorer and Safari, add an audio file of the type MP3.The audio element allows multiple source elements. Source elements can link to different audio files. The browser will use the first recognized format: Example : <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> </audio>. Table 3.2 all <audio> Attributes Attribute. Value. Description. Autoplay. autoplay. Specifies that the audio will start playing as soon as it is ready.. Controls. controls. Specifies that controls will be displayed, such as a play button. Loop. loop. Specifies that the audio will start playing again (looping) when it reaches the end. Preload. preload. Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.. Src. url. Specifies the URL of the audio to play.. 21.

(21) Play. Play. It play video when user click on it.. Pause. Pause. It stop video when user click on it .. Volume. Volume. User can increase and decrease video volume by clicking on it.. Mute. Mute. User can mute volume of player by clicking on it. Unmute. Unmute. User can unmute volume of player by clicking on it. 3.2.2 Audio Demos Audio Demo A: Audio sample Demo description: I want to create simple HTML 5 Audio Player Example. This is combination of HTML 5 & JavaScript functions. I created mute, unmute, play , pause & users can have options to choose audio playlist on the browsers. Function: This sample shows how to use the HTML 5 <Audio> tag to implement a simple Audio player. <audio id="clip" width="670" style="border: solid 3px black;" controls> </audio>. Below is the sample shows how one can play/pause and mute/unmute the audio using built-in controls or programmatically. <div> <input type=button id="play_button" onClick="PlayVideo()"; value="Play" disabled /> <input type=button id="pause_button" onClick="PauseVideo()"; value="Pause" disabled /> <input type=button id="mute" onClick="Mute()"; value="Mute" /> <input type=button id="unmute" onClick="Unmute()"; value="Unmute" /> </div>. 22.

(22) Audio Demo B: Audio color picker Clock Demo description: This one is cool browser clock with changing background color using color picker and also play audio with it for this I use HTML5, JavaScript and CSS combination. We can move color picker anywhere in browser and choose any color for clock background and clock show current time in which country we have.. 3.3 Video 3.3.1 HTML 5 video The HTML is the markup languge that makes up evry page on the web. And the latest version HTML 5 is allowing website developer to add video to web page like image add on web. For this to work web Browsers developers like Mozilla, Web Kit, Opera etc. have to build the video functionality into their browsers. The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. Playing video in a web page may not seem so special since you can already view video on a web page through plug-ins like Flash Player, QuickTime, Silverlight, and RealPlayer, however this is a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, that’s based on open standards not controlled by one company, and it will work everywhere. A prime example of this is the iPhone and iPad. Apple has decided not to support Flash on their mobile devices, but they do support HTML5 video. Since Flash is currently the most common way video is added to web pages, most web video aside from YouTube who has a special relationship with Apple can’t be viewed on the iPhone or iPad. These devices are very popular, so many web sites are switching to hybrid HTML5/Flash player setups like VideoJS. There are two strategies one can take when providing both Flash and HTML5 Video: 1. We can use HTML 5 video when the browser or device doesn’t support Flash or other video plugins.. 23.

(23) 2. We can use only Flash video when the browsers or device doesn’t support HTML5.. There are positives and negatives to both strategies and VideoJS can do both. Video sites that have invested a lot in their Flash video player and are using advanced functionality will probably choose the first strategy for the time being. This allows them to continue to provide the extra features for most users, while also supporting devices like the iPhone. Sites with more standard video player requirements that are interested in using a technology that will probably become the standard may choose the second strategy. Every site has different needs so there’s no right answer for everyone. Browsers that support HTML5 video have video players built in, including a set of controls like play/pause etc, so we don’t need anything else to play video in them. Browsers also give website developers access to the video functionality through a javascript API. This allows developers to build custom video player controls or other interfaces. HTML5 browsers have a built in player. why we’d need an additional library like VideoJS at all. There are a number of reasons. The first one is Browser Version Compatibility. The browser developers add new functionality to their players, an example of this is when specification changed from autobuffer to preload as the video tag attribute used to preload the video before the user hits play. Older versions of Firefox still use autobuffer, while newer versions require preload The second one is Consistent Design & Controls. Each browser has a different look & and feel to their built-in controls. If you want to present the same controls to every visitor you need an HTML5 Video Player. Video for Everybody is a pure HTML embeds code for HTML5 video, developed by Kroc Kamen. VideoJS is an HTML5 Video Player with three core parts: An embed code or Video for Everybody, a JavaScript library or video.js, and a pure HTML/CSS skin or video-js.css .Using Video for everybody as the embed code means it’s compatible with many devices .The JavaScript library fixes browser & device bugs, and makes sure video is more compatible across different browser versions. The pure HTML5/CSS skin ensures a compatible look between HTML5 browsers. There is another main thing with HTML 5 video is today, most videos are shown through a third party plug-in like flash. However, different browsers may have different plug-ins. To show a video in HTML5, this is all need:. 24.

(24) <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> </video>. The control attribute adds video controls, like play, pause, and volume. Now, there are 3 supported video formats for the <video> element is MP4, WebM, and Ogg :. Table 3.3 Video formats supported Browsers Browsers Internet Explorer 9. MP4. WebM. Ogg. YES. NO. NO. Firefox 4.0. NO. YES. YES. Google Chrome 6. YES. YES. YES. Apple Safari 5. YES. NO. NO. Opera 10.6. NO. YES. YES. There is also having some video tag for HTML 5 video the following table shows it: Table 3.4 HTML5 video Tags Tag <Video> <source> <track>. Description It Defines a video or movie Defines multiple media resources for media elements, such as <video> and <audio> Defines text tracks in mediaplayers. There is also having some Video attribute for HTML 5 video the following table shows it:. 25.

(25) Table 3.5 All <Video> Attributes width and height Loop Autoplay Controls. Autobuffer. poster:. define the dimensions of the playback-window, if not set the browser tries to use the dimensions from the video. sets the video to play in a loop. starts the video immediately. tells the browser to display a set of controls for playback, seeking and volume. Which controls these are and how they look depends on the browser. Automatically start buffering (loading) the video, so it’s first loaded if you start playing. Currently Chrome and Safari ignore this attribute, so the video is being buffered on page load. Here you can supply an image which will be displayed while the movie is not loaded yet. 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.. 26.

(26) 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 id="clip" width="670" style="border: solid 3px black;" controls> </video>. Below is The sample shows how one can play/pause and mute/unmute the Video using built-in controls or programmatically. <input type=button id="play_button" onClick="PlayVideo()"; value="Play" disabled />. 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. 27.

(27) 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: <img alt="Clown with a red nose" class="interior" height="150" src="/images/clown.jpg" width="120">. The following describes the allowable img tag attributes:. Table 3.6 When Do You Use the img Tag in HTML 5 Attribute Alt Height. Value text Pixels %. ismap. ismap. src. URL. usemap. #mapname. width. Pixels %. This defines a short description of the image This defines how tall the image is. This can either be a number or percent. This defines the image as a “server side image map” – many links over certain parts of the image This is the url path to the image This defines the image as a client-side image map – use this with map and area tags to define the clickable areas. 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.. 28.

(28) 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: <img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up"/>. We can use arrow keys to see next image slides. <span class="arrow previous"></span> <span class="arrow next"></span>. 29.

(29) 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.. 30.

(30) 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: <img class="slice_1" src="ads/ad1_slice01.jpg"/>. 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. 31.

(31) 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. <li><img src="img/photos/5.jpg" width="100%" alt="Logo" /></li>. 32.

(32) 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.. 33.

(33) 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.. 34.

(34) 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 dragstart dragenter. dragover. dragleave. drag drop. dragend. Description Fires when the user starts dragging of the object 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. 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. 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. Fires every time the mouse is moved while the object is being dragged. 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. 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.. 35.

(35) 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 <div draggable="true" id="paper" ondragstart="drag_me(this, event)"> <div id="trash-can" ondrop="drop_here(this, event)" ondragenter="return false" ondragover="return false">. 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 This event fires continuously while the user click-drags an object over a valid drop target.. ondragover. 36.

(36) 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 id="content"> <div id="background" class="background"> <img id="obj_0" width="640" height="480" src="background.jpg"/> </div> <div id="tools"> </div> <div id="objects"> <div class="obj_item"> <img id="obj_1" width="50" class="ui-widget-content" src="elements/bowtie.png" alt="el"/> </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.. 37.

(37) 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. 38.

(38) 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 dynamic, scriptable rendering of 2D shapes and bitmap images. The <canvas> tag is supported in all major browsers. Such as Chrome, Opera, Safari, and Mozilla Firefox. The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. So how to create Canvas Element have to Add a canvas element to the HTML5 page. For this have to Specify the id, width, and height of the element: <canvas id="myCanvas" width="200" height="100"></canvas>. HTML 5 canvas tag has some attributes as follows: Table 4.1 Canvas Attributes Attribute. Value. Description. Height. Pixels. Specifies the height of the canvas. Width. Pixels. Specifies the width of the canvas. 4.2 Physics Simulation Using HTML5, the developer or designer can now create the Physics simulation using canvas tag. The HTML 5 Canvas element can handle all different types of physics. Such as Gravity, weight distribution, speed and acceleration. Developer can also create 2D a canvas element. User can use these physics simulation on browsers it is very interesting and useful.. 39.

(39) Physics Simulation Demo A: Shoot Box Demo description: This is simple physics shoot box. In this demo I use HTML 5 canvas element. To create small rectangle box and we can shoot that boxes and separate it like simple physics demo. Function: <canvas id="canvas" width="700" height="500" moz-opaque="true"> </canvas>. Physics Simulation Demo B: Physics Box Demo description: This demo Idea I take from box2djs by Ando Yasushi, It is little physics simulation engine made to run in JavaScript. The physics demos which can interact with by left clicking with the mouse to add new objects in Demo. They use the popular Box2D physics library to JavaScript using <canvas> element for the rendering. Using Box2D JavaScript, they created a flatland-sequel 2D world that obeys Newtonian physics . First figure show original demo from box2djs by Ando Yasushi & second demo I created some new or extra stuff in that original demo to make it more usable and intresting. And I also create main background window bigger than original one .. Figure 4.1 Physics Box Part 1. 40.

(40) Figure 4.2 Physics Box Part 2. Physics Simulation Demo C: Physics Adventure Demo description: HTML5 is growing up faster than anyone could have imagined. Powerful and professional solutions are already being developed even in the gaming world! I make game using Box2D and HTML5′s canvas tag. When we play this game we have to use up & down arrow keys on keyboard to reach goal. Function: Step 1 - Developing the Game. HTML 5 : In HTML 5 I use canvas element to show which id it is & how much height & width it is.. <canvas id="game" width="600" height="400"></canvas>. 41.

(41) 4. 3 Game So what is HTML 5 game? It is basically plug-in free game development for various browsers. For game development in HTML 5 we don’t care about, new semantic tags, Micro data but care a lot about Canvas, Video, Audio, Web sockets. Actually twenty years game development compressed down to two years due to new HTML 5 features. A game that does not require a browser plugin, this type of game is usually implemented fully using HTML 5 and JavaScript. With the new HTML 5 <canvas> tag, creating a 2D game with the same picture quality with a Flash game is now possible. Firefox 3.0+, Google Chrome 3.0+, Apple Safari 3.2+, and Opera 9.6+ should already provide 2D rendering context with all the W3C-standardized basic canvas API. Internet Explorer up to IE 8 has not yet support the <canvas> tag. With the new HTML 5 <audio> tag, playing audio natively in JavaScript-based game is now possible. Firefox 3.5+, Google Chrome 3.0+, Apple Safari 4.0+, and Opera 10.5+ should already provide full support for the <audio> tag. Internet Explorer up to IE 8 has not yet support the <audio> tag. With the new HTML 5 <video> tag, playing video natively in JavaScript-based game is now possible. Firefox 3.5+, Google Chrome 3.0+, Apple Safari 4.0+, and Opera 10.5+ should already provide full support for the <video> tag. Internet Explorer up to IE 8 has not yet support the <video> tag.. Game Demo A: English Character Fall Demo description: This is very intresting HTML 5 chrecter fall game [11], I have make some change in this game is that I increase speed and dropping orbs of this game to make more intresing and improve users typing skills and also change some stuff. We have to press the correct character on the correct time in a totally random order. Each correct press will make the game faster, which makes it harder but we will be able to earn more points.It might help improve our typing skills too.. 42.

(42) Function: Container for the dropping characters that will be created by query <div id="droppingcharcontainer"> </div>. For the English character use <li class="orb">A</li>. Game Demo B: Water Character Fall Demo description: This game originally creates an actual jQuery game [12]. The author came up with the following idea: Characters in water drops falling. We can save them from a splashy death, by pressing the correct character on keyboard. Keeping that in mind, Author created jCharacterfall - A small, addictive jQuery game. After each character save, the game gets harder and the droplets will fall faster. When playing this game over and over, we might even improve our typing skills. This game combines the power of jQuery, jQuery UI, the jQuery Easing plug-in and CSS3. It is more similar like previous demo originally created by other author and we have increased speed of this game to improve users typing skills. HTML 5: For each images in demo use <img> tag <p><img src="images/start.png" alt="" /></p>. 43.

(43) Game Demo C: Fairy Jump Demo description: I design Simple game with HTML5 Canvas [12]. In the original reference demo the goal is to control little angel & jump on the two kinds of platforms - orange which is regular ones and green which is super high jump springboards. The game ends when the angel falls down to the bottom of the screen and gets scores. I have increase main window size and platforms size and number of platforms and color of platforms & many stuff inside demo .Below show figure part 1 is original reference demo and part 2 modified one .. Figure 4.3 Fairy Jump Part 1. 44.