Using Animate CC HTML5 Canvas Templates with Multiple Publish Profiles

I nearly forgot to post about this… I have an article up at the Adobe Animate CC Team Blog on using Templates and Publish Profiles to do some neat stuff.

figure11

The ability to publish to HTML5 Canvas from Animate CC (and Flash Professional before it) is nothing new… however, with the release of Animate CC we now have a number of additional options when managing how a project gets published – especially in terms of how the HTML output is constructed.

Absinthe: an Exploration of the Role of Mythology and Ritual in Market Revival

Last year, I was able to contribute to a small paper along with Lauren Labrecque and Garret Warr titled “Absinthe: an Exploration of the Role of Mythology and Ritual in Market Revival” which looks at the spirit, absinthe, from a marketing angle with a brief overview of the history, ban, and revival. In terms of the paper itself, and the presentation of the findings, they truly did most of the work! As part of our research, we conducted interviews with a number of well-known American absinthe distillers.

This is a purely academic publication and was quite interesting to assist with. Hopefully as absinthe becomes more legitimized in the public sphere, papers and accompanying research like this will become even more common!

The paper was recently published by Springer as a chapter within the larger volume “Celebrating America’s Pastimes: Baseball, Hot Dogs, Apple Pie and Marketing?” which contains the full proceedings of the 2015 Academy of Marketing Science (AMS) Annual Conference.


Absinthe: an Exploration of the Role of Mythology and Ritual in Market RevivalAbsinthe, a once wildly popular spirit, was banned at the turn of the twentieth century as a consequence of its purported hallucinogenic effects. Now after nearly a century-long prohibition, recent de-restrictions in Europe and the Americas have allowed the opalescent green drink, nicknamed “the Green Fairy,” to return to the marketplace. This research uses netnography and content analysis as tools to help understand the historic marketability and consumption of this product and to reveal current consumption behaviors.

Chapter Authors: Lauren I. Labrecque, Garret M. Warr, Joseph Labrecque
Publisher: Springer International Publishing (April, 2016)
ISBN-13: 978-3-319-26646-6
Pages: 325-328

Acquire at http://link.springer.com/chapter/10.1007%2F978-3-319-26647-3_67

Learn Adobe Animate CC for Interactive Media

My new book with Peachpit and Adobe Press, Learn Adobe Animate CC for Interactive Media, is now available from the publisher and also retailers like Amazon.com and physical bookstores. I received author copies the other day and am so pleased with how it came out. The materials and layout just scream quality!

learnadobeanimatecc

The book itself provides a solid overview on Animate CC with the focus on preparing the reader for the Adobe Certified Associate certification exam for interactive media. We cover everything across 6 main projects while using the new features of Animate CC like Vector Art Brushes, fully scaleable video output, HTML5 Canvas improvements, and more… alongside all the time tested tools and functionality that makes this program great.

learnadobeanimatecc_collage

There are a couple of things that make this book quite unique:

  • This is the first book published on Adobe Animate CC and covers many of the new features now available.
  • In addition to the book, you get access to a fully developed web experience with additional features like quizzes and such.
  • You aren’t getting just the physical book and the online experience – each project also has a video component – adding up to over 6 hours of video content as well!

You can now find the book for purchase at Adobe Press, Peachpit, Amazon.com, and other fine retailers.

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;