Animate CC: Interactive HTML5 Canvas Video Projects

Since beginning this practice with the Adobe Generation Professional demo sessions, I’ve begun recording any live demos using Camtasia 9 and uploading them to YouTube. The full session with all speakers is linked below as well – but this segment has better audio and video. I also include the project files created during the session if you wish to download.


Part of the “Four Masters of Animate CC” session from December 10th, 2016.

Direct link: https://youtu.be/ViDw06N96MQ


Animate CC Demo Files

Joseph’s demo files (with video included) [176 MB]

Joseph’s demo files (no video) [20.7 KB]


Full Recording (Adobe Connect)

Full recording with Tom Green, Joseph Labrecque, Myra Ferguson, and Chris Georgenes: http://my.adobeconnect.com/p8mjp0ghp6s/

Adobe Media Server, Apache, and Windows

I’ve been meaning to write about this for some time, for the benefit of anyone else who encounters the problem. Things are going to get crazy around here, so I might as well get this out there and out of my drafts!


The problem itself is that we run a number of Adobe Media Server 5 instances at the University of Denver and after an upgrade over the Summer Quarter, streaming and stability pretty much went from 100% reliable to “we need to find another streaming solution”.

So the setup is AMS5, bundled Apache 2.4, and Windows Server 2012. On both live streams and VOD – we saw similar behavior… the services were all still running… but no content was being served. After looking at a number of parameters we discovered that our RTMP streams were actually running fine. It was the HLS streams which were constantly dying.

We were actually having to restart the services to get streams running again multiple times a day – for weeks. It was an incredibly frustrating experience and searches for this problem in regard to AMS yielded no workable results. I even tried reaching out to Adobe through my contacts with them and was met with complete silence. Absolutely frustrating.

It wasn’t until I began excluding the term “AMS” from my research – and looked only toward Windows and Apache HTTPD that I found anything close to what I was experiencing.

asf_logo

I found 2 different posts about what appears to be the exact same issue – not with AMS itself… but with Apache on Windows:

Both threads suggest the addition of the following parameters to the main Apache configuration file:

AcceptFilter http none
EnableSendfile Off
EnableMMAP off

Performing the mentioned adjustments to the Apache 2.4 configuration file within your AMS installation absolutely resolves this issue. Here is the modified httpd.conf located at {PROGRAMS}\Adobe\Adobe Media Server 5\Apache2.4\conf as an example:

#
# This is the main Apache server configuration file. It contains the
# configuration directives that give the server its instructions.
# See <URL:http://httpd.apache.org/docs/2.4/> for detailed information.
# In particular, see
# <URL:http://httpd.apache.org/docs/2.4/mod/directives.html>
# for a discussion of each configuration directive.
#
# Please see httpd.conf.orig for the configuration of a default
# (non-AMS) installation of apache.
Define AMS_BASE_PATH ".."
Define WEB_ROOT "/webroot"
Define AMS_WEB_ROOT ${AMS_BASE_PATH}${WEB_ROOT}
Listen 80
Listen 8134

LoadModule slotmem_shm_module modules/mod_slotmem_shm.so

# If you plan to run AMS as root on linux, you _must_ specify a
# valid user, with access to the AMS installation direction, or
# apache will not run.
#
# If you've used the default installer, nobody (or whatever other
# username you gave to the installer) will work here.
#
# If you're running a developer build under your own home directory,
# you should use your own username.

AcceptFilter http none
EnableSendfile Off
EnableMMAP off
AccessFileName .htaccess
ServerSignature On
UseCanonicalName Off
HostnameLookups Off

Timeout 120
KeepAlive On
MaxKeepAliveRequests 100
KeepAliveTimeout 15

This was an incredibly frustrating experience for myself and many others involved. I hope this post helps someone out there to resolve this problem without the weeks upon weeks of crap I had to deal with!

Announcing AS3-WebVTT

AS3-WebVTT is a set of ActionScript 3.0 utility classes which enable the parsing and sorting of standard WebVTT (.vtt) files for video captioning.

AS3-WebVTTdemo

Why write a WebVTT parser in AS3? Simple. A lot of video is still served with Flash Player or AIR – we certainly still use it extensively at the University of Denver. Recently, we’ve found the need to integrate captioning through a standard format across our video delivery tools. We settled on support for the WebVTT standard and now make our work available for everyone. Another example of web standards and Flash innovation working hand in hand!

So how is it used?

  1. Download the code and include it in your project.
  2. Import edu.du.captions.utils.CaptionsHandler – this is the only class you need to interact with from your application code.
  3. Create a new instance of the CaptionsHandler class: captionsHandler = new CaptionsHandler();
  4. You will need to stream a video, and create a text field for the captions to display in. This should be in your app already apart from the text object for captions support.
  5. Invoke captionsHandler.gatherCaptions(captionsPath); passing in string representing a .vtt file location. It will then be loaded, read, and parsed.
  6. Invoke captionsHandler.renderCaptions(CurrentVideoTime, TextFieldForDisplay); – passing in the current playback time of the video and the text field object whenever appropriate to render captions to the screen. You could use a Timer, for instance.

The video and text objects are completely under your control. Experiment with text positioning and format to get the desired results. You can see an example of all of this in the demo project.

If you do improve the classes – please contribute back to the project! Everything is pretty solid right now but there is always room for improvement. Some pieces of the WebVTT specification (such as alignment) are currently ignored by the parser.

You can find the source code along with a set of demos over at: https://github.com/du-otl/AS3-WebVTT

I’ve also recorded a video to show how this works in both a pure AS3 environment and with using the visual tooling in Flash Professional CC:

Multi-Symbol Sprite Sheets from Flash Professional CC to Edge Animate CC

The other day I posted about using sprite sheets generated from the 2014 release of Flash Professional CC and using those within Edge Animate CC. It’s an awesome workflow between the two applications and works really, really well.

A reader commented about a number of things – and one of the specific things that was asked revolves around the ability to export/import multiple symbols between the programs. So I set out to see how that worked… (it works amazingly well)

Here’s a video of the entire process!