Lynda.com: HTML5 Canvas and WebGL in Flash Professional CC

Pleased to present a new course for Lynda.com: HTML5 Canvas and WebGL in Flash Professional CC!

Create a shared pool of content for a set of related projects—HTML5 video, a WebGL-rendered interactive ad, and an HTML5 Canvas game—using Flash Professional CC.

No longer restricted to only ActionScript and Flash Player, Flash Professional CC offers more publishing possibilities than ever before. Developers can now use Flash to build assets and animation that target platforms such as HTML5 video, Canvas, and WebGL. And adding JavaScript allows for playback on just about any modern desktop or mobile device.

This course focuses on using Flash Professional CC to create a shared pool of content for a set of related projects: an HTML5 video, an interactive ad, and a simple web-based game. Author Joseph Labrecque shows how use Flash’s familiar toolset to build and manage assets that fit into a modern web publishing workflow.

Topics include:

  • Using code snippets and actions
  • Assembling and animating a scene for video
  • Rendering the video
  • Laying out an ad with WebGL and JavaScript
  • Programming a game in HTML5 Canvas

 

Lynda.com: Building Custom HTML5 Video Playback with AngularJS

Pleased to present a new course for Lynda.com: Building Custom HTML5 Video Playback with AngularJS!

Develop a customized responsive video app that performs and appears great in all browsers, using AngularJS and Bootstrap.

HTML video doesn’t require plugins for playback, but the default experience differs drastically across browsers. Using a combination of Bootstrap and AngularJS, you can develop a customized responsive video app that performs and appears great in all browsers—unifying the user experience and allowing custom functionality, such as playlists and full-screen playback.

Join Joseph Labrecque for this start-to-finish course that guides you through every step in the process, from installing the software to employing a variety of foundational AngularJS directives. All you need to bring is the video and the time.

Topics include:

  • Setting up
  • Creating a video element
  • Making the video element responsive
  • Building controls
  • Setting up an AngularJS controller
  • Binding properties
  • Customizing the playback controls and time display
  • Enabling full-screen playback and playlist support
  • Using AngularJS directives and filters

 

PhoneGap Jumpstart

I’ve always found that getting started with PhoneGap if you hadn’t used it before (and sometimes even if you have) to be an exercise in frustration which even when it all goes well… takes some time and dedication. For example…

Here are the steps I take when setting up on a new Windows environment for Android:

  1. download and install Java- add to path [C:\Program Files\Java\jdk1.7.0_45\bin]
  2. add new system var JAVA_HOME [C:\Program Files\Java\jdk1.7.0_51]
  3. download and install ANT – add to path and be sure to RESTART [C:\ANT\bin]
  4. download and install ADT [https://developer.android.com/tools/help/adt.html]
  5. download and update the Android SDK from tools [pray]
  6. create a new Android VM for emulation [pray harder]
  7. add references to Android tools to PATH [C:\Program Files\ADT\sdk\platform-tools;C:\Program Files\ADT\sdk\tools;]
  8. download and install node.js [https://nodejs.org/]
  9. Install PhoneGap via NPM [npm phonegap]
  10. Install Ripple emulator via NPM [npm ripple]
  11. setup new PhoneGap project
  12. build project
  13. emulate via ripple
  14. Test, test, test…
  15. Build using command line or PhoneGap Build services

I’m probably missing a few steps – and if any one of these configurations if off… good luck fixing it.

You have to admit… that is a LOT for a newcomer (I teach PhoneGap at least once a year – it is seriously a lot for newcomers to deal with).

Well now we have some really nice tools to make the whole process much, much nicer! There is the PhoneGap Desktop Application for starters. It allows the creation and management of PhoneGap projects from a simple installed application interface. Grab it from http://app.phonegap.com/

PhoneGap Desktop Application
PhoneGap Desktop Application

While the application currently does not support managing platforms or plugins – if you are targeting PhoneGap Build at the end… this really doesn’t matter. This one installation covers steps 1-12 above. No kidding.

Notice the server address that is displayed at the bottom? We will use this later to test our application using the dedicated mobile app.

Once a new project is set up… we can start working on the layout and design as well as functionality that is not specific to hardware. I do this with Brackets and Chrome. Get Brackets at http://brackets.io/

Testing with Brackets and Chrome
Testing with Brackets and Chrome

As you see above, editing the HTML, JavaScript, and CSS within Brackets is pretty straightforward. That is the focus of this IDE and it does it very well. You can also launch a live preview from Brackets for testing functionality and layout in a browser like Chrome. As displayed above, using the mobile device simulation aspect of Chrome is great for layout – while access to the other developer tools like the console makes debugging and problem solving and immediately accessible task.

To test on a real mobile device, just install the PhoneGap Mobile App from http://app.phonegap.com/

PhoneGap Mobile App
PhoneGap Mobile App

Once installed and running on the same wireless network as the desktop app, you can fire up the app on mobile and type in the server address on display within the desktop app to test your PhoneGap application on a real device. Much nicer than any crummy emulator and you have the full functionality which browser testing lacks. That takes care of steps 13-14.

Once ready to compile your application for various mobile platforms, it doesn’t get much easier than using PhoneGap Build. Access PhoneGap Build from https://build.phonegap.com/

These are a great set of tools that make the whole process much, much easier to get started with :)

Publish Flash content on multiple platforms

Fl_multipleplatforms

Flash Professional CC lets you create animations for virtually any use case, device, browser, or platform. Natively author and publish your content to various formats using the tools and interface you already know.

I have recorded – and Adobe has published – a set of video tutorials to spread awareness of Flash Professional CC as a platform agnostic creative animation and asset generation tool. Not only is this messaging important for creatives looking for a solid solution for targeting HTML5 Canvas, WebGL, and an array of custom platforms like Away3D and GAF… but is also beneficial to getting people to understand what a great platform exists within the Adobe runtimes; Flash Player and AIR!

No matter what the target – Flash Professional is a wonderfully expressive tool and Adobe is committed to enhancing the application to make it more useful for an ever-expanding set of creative designers, developers, animators, and more.

Check out the set of videos over at Adobe!

On YouTube, HTML5, and Flash

Many stories are running about this over the past few days and they all give the impression that Flash Player is no longer used when delivering video with YouTube. We have to be clear on a few different points here:

  1. HTML5 video playback has already been the default with Chrome for a long, long time now.
  2. It has taken YouTube around 4-5 years to get the HTML5 playback to a state where they feel it matches Flash Player well enough to make it the default.
  3. YouTube had not “ditched” Flash for playback. their HTML5 playback is simply the default in most cases. So long as it plays video well – what is the problem?
  4. The absolute hatred expressed in the comments to these articles is not an expression of enlightenment but rather all that is wrong with the web today.
  5. As I stated on Twitter – we would not have YouTube if it were not for Flash Player. It cannot be stressed enough how important Flash has been for the web and just about everyone seems to not even comprehend this fact at all.
  6. A lot of the features of HTML5 regarding media playback and rich expression are there because Flash paved the way. Again – some would do well to learn from history and respect the work of others that came before them.