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.
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.
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.
Creating a video element
Making the video element responsive
Setting up an AngularJS controller
Customizing the playback controls and time display
Enabling full-screen playback and playlist support
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:
download and install Java- add to path [C:\Program Files\Java\jdk1.7.0_45\bin]
add new system var JAVA_HOME [C:\Program Files\Java\jdk1.7.0_51]
download and install ANT – add to path and be sure to RESTART [C:\ANT\bin]
download and install ADT [https://developer.android.com/tools/help/adt.html]
download and update the Android SDK from tools [pray]
create a new Android VM for emulation [pray harder]
add references to Android tools to PATH [C:\Program Files\ADT\sdk\platform-tools;C:\Program Files\ADT\sdk\tools;]
download and install node.js [https://nodejs.org/]
Install PhoneGap via NPM [npm phonegap]
Install Ripple emulator via NPM [npm ripple]
setup new PhoneGap project
emulate via ripple
Test, test, test…
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/
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/
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 :)
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.
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:
HTML5 video playback has already been the default with Chrome for a long, long time now.
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.
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?
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.
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.
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.