You are previewing HTML5 for Flash Developers.
O'Reilly logo
HTML5 for Flash Developers

Book Description

This is the definitive tutorial on an essential skill for today’s Flash developers. Carefully structured, it helps you to make the transition to HTML5 painless by drawing on your existing Flash abilities wherever possible.

  • Discover and utilize the wide range of technologies available in the HTML5 stack

  • Develop HTML5 applications with external libraries and frameworks

  • Prepare and integrate external HTML5 compliant media assets into your projects

  • In Detail

    As the support for HTML5 within modern web browsers grows, the appeal of HTML5 development, especially for Flash developers, is at an all-time high. From 3D interactive multi-user content to high definition video streaming, HTML5 can deliver it all, to almost all modern web browsers, desktops, and mobile platforms.

    HTML5 for Flash Developers is a practical, targeted guide for developers with previous experience in developing applications in Flash who would like to add HTML5 development to their skill set. By understanding key aspects that make HTML5 development different from Flash you will be able to integrate your current skill set into the HTML5 development paradigm.

    Starting with identifying the key technologies that make up the HTML5 development stack and how they are utilized to create HTML5 content, HTML5 for Flash Developers will cover the traditional HTML5 application development flow chapter by chapter, while covering many other common tools that are regularly used in HTML5 today.

    In addition to understanding and writing dependency-free HTML5 code, you will also learn how to build your HTML5 applications on top of popular libraries and frameworks such as jQuery and CreateJS. This book covers how to prepare all of your content and media for integration into your HTML5 application using applications such as the Miro Video Converter or Adobe Photoshop. You will learn ways to not only continue to use Adobe Flash in your HTML5 application content preparation flow, but also how to port your existing Flash content right over to HTML5.

    Once you understand what it takes to build HTML5 content, you will finish up by learning how to debug, optimize, and prepare your content for release on the Web.

    Table of Contents

    1. HTML5 for Flash Developers
      1. Table of Contents
      2. HTML5 for Flash Developers
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.packtpub.com
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Why HTML5?
        1. Understanding HTML5
          1. What is HTML5?
          2. HTML standards
          3. HTML syntax
          4. HTML elements
          5. Bringing in the style
          6. Passing it over to JavaScript
          7. What is JavaScript?
          8. JavaScript in action
        2. Why bother learning HTML5?
          1. Write once, deploy everywhere
          2. Exciting new features
            1. canvas – 2D drawing API
            2. Media playback
            3. Offline storage
            4. Document editing
            5. Drag-and-drop
            6. Geolocation
            7. File API
          3. Mobile accessibility
          4. Flash Player on Mobile
          5. Build on your existing skillset
          6. ECMAScript
        3. Avoiding the initial road blocks
          1. Stage versus DOM
          2. Positioning assets in the DOM
          3. Dealing with media elements
          4. Securing your code
          5. Browser and platform compatibility
        4. Summary
      9. 2. Preparing for the Battle
        1. Preparing the asset
          1. Images
            1. JPEG
            2. PNG
            3. GIF
          2. Audio
            1. The audio element
          3. Video
            1. Video codecs
            2. Video containers
              1. MP4
              2. WebM
            3. Video encoding software
              1. Miro Video Converter
              2. Adobe Media Encoder
              3. Handbrake
              4. FFMPEG
            4. The video element
        2. Debugging and output methods
          1. Google Chrome
          2. Firebug for Firefox
          3. Safari
          4. Opera
          5. Internet Explorer
        3. Syntax differences
          1. Variables
            1. Variable type conversion
          2. Conditions and loops
          3. Functions
          4. Objects
          5. DOM events
            1. Mouse events
        4. Example JavaScript in action
        5. Timing JavaScript execution
        6. Summary
      10. 3. Scalability, Limitations, and Effects
        1. HTML5 limitations
        2. Object manipulation with CSS3
          1. box-shadow
          2. text-shadow
          3. border-radius
          4. Fonts
            1. Acceptable font formats
            2. External font libraries
          5. Opacity
          6. RGB and RGBA coloring
          7. Element transforms
            1. Translate
            2. Rotate
            3. Scale
            4. Skew
            5. Matrix
            6. 3D transforms
          8. Transitions
          9. Browser compatibility
        3. Frame rate
          1. Developing for mobile
          2. Responsive layouts
          3. CSS Media Queries
        4. Audio and video playback control
          1. Preloading
          2. Autoplay
          3. Looping
          4. Sound effects
          5. Media playback manipulation
        5. Reading local files with the File API
        6. Web Workers
        7. WebSockets
        8. The Canvas element
        9. Stage3D versus WebGL
        10. Summary
      11. 4. Building Robust Applications with HTML5
        1. Writing object-oriented JavaScript
          1. Class syntax
            1. Functions
            2. Variable scope
            3. Public and private variables and functions
              1. Local or private variables
              2. Public variables
              3. Private functions
              4. Public functions
            4. Prototype
            5. Instance types
            6. Object literals
            7. Constructors
          2. Inheritance
          3. Listing object properties
        2. Making OOP in JavaScript easier
        3. JavaScript events
          1. Keyboard and mouse events
          2. Touch events
          3. Custom events
          4. Event bubbling
        4. Putting it all together
        5. Summary
      12. 5. Code Once, Release Everywhere
        1. Covering all your bases
        2. CreateJS
          1. EaselJS
          2. TweenJS
          3. PreloadJS
          4. SoundJS
          5. CreateJS Toolkit
            1. Setting up the Toolkit
            2. Publishing your assets
            3. Reviewing the CreateJS Toolkit output
        3. Modernizr
          1. Using Modernizr
            1. Understanding Polyfills
            2. Modernizr.load()
          2. What Modernizr can detect
        4. CSS media queries
        5. Summary
      13. 6. HTML5 Frameworks and Libraries
        1. How frameworks and libraries can make your life easier?
          1. What can I do with JavaScript frameworks and libraries?
          2. Finding the right library or framework for your project
        2. jQuery
          1. Putting jQuery into action
          2. Selecting elements with jQuery
          3. Controlling CSS via jQuery
            1. CSS animations
          4. Requesting external data with jQuery Ajax
          5. jQuery Mobile
        3. HTML5 Boilerplate
        4. Bootstrap
          1. Bootstrap add-ons
            1. StyleBootstrap.info
            2. Font Awesome
            3. bootstrap-wysihtml5
        5. Hammer.js
        6. GreenSock Animation Platform
        7. Three.js
        8. Compiling JavaScript
          1. Google's V8 Engine
          2. Node.js
          3. Node Package Manager
          4. Hosting a public Node.js server
        9. Summary
      14. 7. Choosing How You Develop
        1. Replacing the Flash development environment
        2. Requirements of HTML5 development environments
          1. Asset and file management
          2. Code highlighting
          3. Code completion
          4. Creating and manipulating assets
            1. Adobe Edge Animate
          5. Coding environments
            1. Adobe Dreamweaver CS6
              1. Audio and video embedding
              2. Adobe Edge support
              3. PhoneGap and jQuery Mobile support
              4. Fluid Grid Layout and HiDPI support
            2. Aptana
            3. Brackets

              1. Inline editing
              2. Live Preview
              3. Plugins
              4. Contributing
            4. Sublime Text
        3. Execution and testing
          1. Web browser developer consoles
            1. Network analysis
            2. Timeline profiling
          2. Stats.js
        4. Summary
      15. 8. Exporting to HTML5
        1. Google Swiffy
          1. How does Swiffy work?
          2. Examining Swiffy-generated code
          3. Finding Swiffy's limits
        2. Generating sprite sheets in Flash Professional CS6
        3. Jangaroo
        4. Haxe
        5. Google Dart
        6. Summary
      16. 9. Avoiding the Roadblocks
        1. The Jet Pack game
          1. Building the game in Flash
          2. Converting game assets
          3. Converting ActionScript classes
        2. Dealing with audio and playback
        3. Rewriting AS3 code that can't be directly converted
        4. Mobile platform support
        5. Summary
      17. 10. Preparing for Release
        1. Targeting supported web browsers
        2. Client-side tests
          1. Browser Nightly builds
          2. WebRTC
        3. WebGL support
          1. WebGL on mobile browsers
        4. Allowing users to find your work
          1. The HTML5 History API
        5. Premade testing and benchmark solutions
          1. Google's web development toolset
          2. YSlow website grading
        6. Code minimizing and obfuscation
        7. External dependencies
        8. Making deployment easy
          1. Creating tasks with Grunt
          2. Deploying content with Git
        9. Summary
      18. Index