Using HTML5 Canvas In Animate CC: JavaScript Basics

makeitrain

I have another article up on the Adobe Animate team blog – this time dealing with the basics of using JavaScript and CreateJS within Animate CC.

For nearly 20 years, the programming language used within Animate (Flash Professional) projects has been ActionScript. So why the current shift to JavaScript? Well, it isn’t exactly as simple as that. For one thing, Animate is not a JavaScript only application. You use JavaScript in projects which require it, such as HTML5 Canvas and WebGL… but you can still use ActionScript on projects which are to be published for Flash Player or AIR, including AIR for Android and iOS – and Adobe continues to update these runtimes. It’s important to note that Animate is not a JavaScript and web-centric application – but is rather a platform and language agnostic application for working across a variety of platforms.

Check it out!

Edge Animate to Animate CC: Responsive Scaling and Positioning

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.

responsiveanimate

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.

However – being able to scale and reposition elements within an Animate CC HTML5 Canvas document is absolutely possible. The main difference is that you’ll have to write some JavaScript to accomplish this as there are currently no GUI elements in Animate CC to make it a visual task. In the days when Animate CC (as Flash Professional) only output to SWF, I used to dynamically scale and reposition elements across the document at runtime in many of my projects – especially regarding things like video players and other size-variable modules that would exist as embedded web content. It was all done through a little code and worked great – even before browser-based responsive DOM was even a thing!

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:

Here are standalone code examples if you would rather reference these in stead of downloading the FLA files above!

Responsive scaling while respecting aspect ratio

/* 

responsive scale code as expressed by @davegamez 

*/


var page_body = document.getElementsByTagName("body")[0];
page_body.style.backgroundColor = "#3C0600";
page_body.style.overflow = "hidden";
page_body.style.position = "fixed";

var page_canvas = document.getElementsByTagName("canvas")[0];
stageWidth = page_canvas.width;
stageHeight = page_canvas.height;

var viewport = document.querySelector('meta[name=viewport]');
var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

if (viewport === null) {
 var head = document.getElementsByTagName('head')[0];
 viewport = document.createElement('meta');
 viewport.setAttribute('name', 'viewport');
 head.appendChild(viewport);
}

viewport.setAttribute('content', viewportContent);

function onResize() {
 var widthToHeight = stageWidth / stageHeight;
 var newWidth = window.innerWidth;
 var newHeight = window.innerHeight;
 var newWidthToHeight = newWidth / newHeight;
 //
 if (newWidthToHeight > widthToHeight) {
 newWidth = newHeight * widthToHeight;
 page_canvas.style.height = newHeight + "px";
 page_canvas.style.width = newWidth + "px";
 } else {
 newHeight = newWidth / widthToHeight;
 page_canvas.style.height = newHeight + "px";
 page_canvas.style.width = newWidth + "px";
 }
 scale = newWidthToHeight / widthToHeight;
 stage.width = newWidth;
 stage.height = newHeight;
 page_canvas.style.marginTop = ((window.innerHeight - newHeight) / 2) + "px";
 page_canvas.style.marginLeft = ((window.innerWidth - newWidth) / 2) + "px";
}

window.onresize = function () {
 onResize();
}

onResize();

Responsive scaling ignoring aspect ratio

/* 

responsive scale code as expressed by @davegamez 
and modified by @josephLabrecque 

*/


var page_body = document.getElementsByTagName("body")[0];
page_body.style.backgroundColor = "#3C0600";
page_body.style.overflow = "hidden";
page_body.style.position = "fixed";

var page_canvas = document.getElementsByTagName("canvas")[0];
stageWidth = page_canvas.width;
stageHeight = page_canvas.height;

var viewport = document.querySelector('meta[name=viewport]');
var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

if (viewport === null) {
 var head = document.getElementsByTagName('head')[0];
 viewport = document.createElement('meta');
 viewport.setAttribute('name', 'viewport');
 head.appendChild(viewport);
}

viewport.setAttribute('content', viewportContent);

function onResize() {
 var newWidth = window.innerWidth;
 var newHeight = window.innerHeight;
 page_canvas.style.height = newHeight + "px";
 page_canvas.style.width = newWidth + "px";
 stage.width = newWidth;
 stage.height = newHeight;
}

window.onresize = function () {
 onResize();
}

onResize();

Responsive repositioning of elements

var r = this;
var w = stage.canvas.width;
var h = stage.canvas.height;

r.an0.x = w/2;
r.an0.y = h/2;

r.an1.x = 40;
r.an1.y = 40;

r.an2.x = w - 40;
r.an2.y = 40;

r.an3.x = 40;
r.an3.y = h-40;

r.an4.x = w-40;
r.an4.y = h-40;




 

 

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 :)