I’ve received a lot of inquiries by Edge Animate users as to how to make items responsive within Animate CC. So many, in fact, that I decided to produce a number of demonstration projects, record some video on each one, and write this little article.
First, I’ll just emphasize that the way Edge Animate handles things like element scaling and sizing is very DOM-oriented… because it works within the very narrow focus of the browser DOM. Animate CC is platform-agnostic (not specifically an HTML tool) and works differently in terms of targeting a single element when targeting HTML5 Canvas (the canvas DOM element). So a lot of things like media queries and such, as employed by the Edge suite, go out the window.
Here is a video demonstration of 3 different scaling methods based upon browser window resize using Animate CC HTML5 Canvas output:
Considering that Animate CC has a fully extensible SDK for creating custom publish formats… and that SnapSVG Animator (one of the most popular) actually does output an SVG DOM… there is really no reason why Animate CC cannot, in the future, output an HTML DOM as well. Though I have no knowledge of any plans like that at the current time (which means nothing except that I don’t know).
In the end – Edge Animate and Animate CC have very different ways of working with content. Edge Animate was very restrictive (HTML5 DOM only) and Animate CC is completely agnostic in regard to platform (Flash Player, AIR, iOS, Android, HD Video, WebGL, HTML5 Canvas, Windows, OS X, GAF, Away, SnapSVG, et cetera) providing huge amounts of creative freedom not possible in Edge Animate. That said, there are other tools like Dreamweaver, Muse, and the like which do responsive DOM focused stuff today… and these are not going anywhere.
You can download the 3 FLA files used in the video with all the code you need:
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 :)