HTML5 for Flash Developers电子书

HTML5 for Flash Developers

Table of Contents

HTML5 for Flash Developers

Credits

About the Author

About the Reviewers

www.packtpub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Why HTML5?

Understanding HTML5

What is HTML5?

HTML standards

HTML syntax

HTML elements

Bringing in the style

Passing it over to JavaScript

What is JavaScript?

JavaScript in action

Why bother learning HTML5?

Write once, deploy everywhere

Exciting new features

canvas – 2D drawing API

Media playback

Offline storage

Document editing

Drag-and-drop

Geolocation

File API

Mobile accessibility

Flash Player on Mobile

Build on your existing skillset

ECMAScript

Avoiding the initial road blocks

Stage versus DOM

Positioning assets in the DOM

Dealing with media elements

Securing your code

Browser and platform compatibility

Summary

2. Preparing for the Battle

Preparing the asset

Images

JPEG

PNG

GIF

Audio

The audio element

Video

Video codecs

Video containers

MP4

WebM

Video encoding software

Miro Video Converter

Adobe Media Encoder

Handbrake

FFMPEG

The video element

Debugging and output methods

Google Chrome

Firebug for Firefox

Safari

Opera

Internet Explorer

Syntax differences

Variables

Variable type conversion

Conditions and loops

Functions

Objects

DOM events

Mouse events

Example JavaScript in action

Timing JavaScript execution

Summary

3. Scalability, Limitations, and Effects

HTML5 limitations

Object manipulation with CSS3

box-shadow

text-shadow

border-radius

Fonts

Acceptable font formats

External font libraries

Opacity

RGB and RGBA coloring

Element transforms

Translate

Rotate

Scale

Skew

Matrix

3D transforms

Transitions

Browser compatibility

Frame rate

Developing for mobile

Responsive layouts

CSS Media Queries

Audio and video playback control

Preloading

Autoplay

Looping

Sound effects

Media playback manipulation

Reading local files with the File API

Web Workers

WebSockets

The Canvas element

Stage3D versus WebGL

Summary

4. Building Robust Applications with HTML5

Writing object-oriented JavaScript

Class syntax

Functions

Variable scope

Public and private variables and functions

Local or private variables

Public variables

Private functions

Public functions

Prototype

Instance types

Object literals

Constructors

Inheritance

Listing object properties

Making OOP in JavaScript easier

JavaScript events

Keyboard and mouse events

Touch events

Custom events

Event bubbling

Putting it all together

Summary

5. Code Once, Release Everywhere

Covering all your bases

CreateJS

EaselJS

TweenJS

PreloadJS

SoundJS

CreateJS Toolkit

Setting up the Toolkit

Publishing your assets

Reviewing the CreateJS Toolkit output

Modernizr

Using Modernizr

Understanding Polyfills

Modernizr.load()

What Modernizr can detect

CSS media queries

Summary

6. HTML5 Frameworks and Libraries

How frameworks and libraries can make your life easier?

What can I do with JavaScript frameworks and libraries?

Finding the right library or framework for your project

jQuery

Putting jQuery into action

Selecting elements with jQuery

Controlling CSS via jQuery

CSS animations

Requesting external data with jQuery Ajax

jQuery Mobile

HTML5 Boilerplate

Bootstrap

Bootstrap add-ons

StyleBootstrap.info

Font Awesome

bootstrap-wysihtml5

Hammer.js

GreenSock Animation Platform

Three.js

Compiling JavaScript

Google's V8 Engine

Node.js

Node Package Manager

Hosting a public Node.js server

Summary

7. Choosing How You Develop

Replacing the Flash development environment

Requirements of HTML5 development environments

Asset and file management

Code highlighting

Code completion

Creating and manipulating assets

Adobe Edge Animate

Coding environments

Adobe Dreamweaver CS6

Audio and video embedding

Adobe Edge support

PhoneGap and jQuery Mobile support

Fluid Grid Layout and HiDPI support

Aptana

Brackets


Inline editing

Live Preview

Plugins

Contributing

Sublime Text

Execution and testing

Web browser developer consoles

Network analysis

Timeline profiling

Stats.js

Summary

8. Exporting to HTML5

Google Swiffy

How does Swiffy work?

Examining Swiffy-generated code

Finding Swiffy's limits

Generating sprite sheets in Flash Professional CS6

Jangaroo

Haxe

Google Dart

Summary

9. Avoiding the Roadblocks

The Jet Pack game

Building the game in Flash

Converting game assets

Converting ActionScript classes

Dealing with audio and playback

Rewriting AS3 code that can't be directly converted

Mobile platform support

Summary

10. Preparing for Release

Targeting supported web browsers

Client-side tests

Browser Nightly builds

WebRTC

WebGL support

WebGL on mobile browsers

Allowing users to find your work

The HTML5 History API

Premade testing and benchmark solutions

Google's web development toolset

YSlow website grading

Code minimizing and obfuscation

External dependencies

Making deployment easy

Creating tasks with Grunt

Deploying content with Git

Summary

Index