JavaScript.sg JavaScript everyday

Quick dive into Animate CC HTML5 Components

I’ve been working on Adobe Animate CC quite a bit lately and wanted to create some custom Animate CC components. There hasn’t been too much documentation on this topic, so here’s what I gathered. I learnt a lot by looking at Adobe Animate CC’s default set of components which can be found in:

Windows

  • Defaults: C:\Program Files\Adobe\Adobe Animate CC 2017\Common\Configuration\HTML5Components
  • Custom: C:\Users\KahWee\AppData\Local\Adobe\Animate CC 2017\en_US\Configuration\HTML5Components

The rest of this is a guide to how Animate CC locates the contents in the directory and build up the Components panel you now see.

The slashes may get confusing, the convention of Adobe is to use the UNIX-style slashes / instead of Windows \ as the directory separator so be sure to stick with it.

Diving into the main directories

Let’s look at the main dirctories in the defaults directory.

C:.
├───jqueryui
│   ├───assets
│   ├───jquery-ui-1.1
│   │   └───images
│   ├───locale
│   │   ├───...
│   │   └───zh_TW
│   └───src
├───lib
├───META-INF
├───sdk
├───ui
│   ├───assets
│   ├───locale
│   │   ├───...
│   │   └───zh_TW
│   └───src
└───video
    ├───assets
    ├───locale
    │   ├───...
    │   └───zh_TW
    └───src

You see jqueryui, lib, META-INF, sdk, ui and video, of which jqueryui, ui and video are shown in the Animate CC Components Panel here:

Animate CC Components Panel

While I do not know why are Animate CC HTML5 Components ordered the way it is, a set of components qualifies as category set when it contains components.js.

Learning from Video

If there’s a component to start learning from, I’ll humbly suggest “Video” as it is relatively trivial in terms of definition. Let’s start by dragging a “Video” from the Animate CC Components Panel.

Animate CC Components Panel

The component is available as it picks up contents from .\HTML5Components\video\components.js which is a JSON file.

{
  "category": "CATEGORY_VIDEO",
  "components": [{
    "className": "an.Video",
    "displayName": "DISP_NAME_VIDEO",
    "version": "1.0",
    "source": "src/video.js",
    "icon": "assets/SP_FLVPlayback_Sm",
    "dimensions": [400, 300],
    "dependencies": [
      {"src": "../lib/jquery-2.2.4.min.js", "cdn": "https://code.jquery.com/jquery-2.2.4.min.js"},
      {"src": "../sdk/anwidget.js"}
    ],
    "properties": [
      {"name": "PROP_SOURCE", "variable": "src", "type": "Video Content Path", "default": ""},
      {"name": "PROP_AUTOPLAY", "variable": "autoplay", "type": "Boolean", "default": "true"},
      {"name": "PROP_CONTROLS", "variable": "controls", "type": "Boolean", "default": "true"},
      {"name": "PROP_MUTED", "variable": "muted", "type": "Boolean", "default": "false"},
      {"name": "PROP_LOOP", "variable": "loop", "type": "Boolean", "default": "true"},
      {"name": "PROP_POSTER", "variable": "poster", "type": "Image Path", "default": ""},
      {"name": "PROP_PRElOAD", "variable": "preload", "type": "Boolean", "default": "true"},
      {"name": "PROP_CLASS", "variable": "class", "type": "String", "default": "video"}
    ]
  }]
}

In the above JSON file – oddly named components.json, you see components key holding an array. In the case of the “Video” category, there is only one component – “Video”. A good way to learn how to define the component is to modify and reload the Components Panel in ACC.

Defing properties in Video

There are 8 properties and they all correspond to what is in the Property Panel in order.

Animate CC Property Panel for Video

The properties[].name placeholders can be defined in .\HTML5Components\video\locale\strings.json. Here’s the contents for the file:

{
  "locale": "en_US",
  "language": "en",
  "CATEGORY_VIDEO": "Video",
  "DISP_NAME_VIDEO": "Video",	
  "PROP_SOURCE": "source",
  "PROP_AUTOPLAY": "autoplay",
  "PROP_CONTROLS": "controls",
  "PROP_MUTED": "muted",
  "PROP_LOOP": "loop",
  "PROP_POSTER": "poster image",
  "PROP_PRElOAD": "preload",
  "PROP_CLASS": "class"
}

strings.json lets you assign language set to the placeholders.

Types of properties

  • Video Content Path: Lets you select a video file.
  • Boolean: Reveal a checkbox to check and uncheck. The default includes "true" and "false" (note that they are strings instead of booleans).
  • Image Path: Lets you select an image file. Once you chosen the image, it gets copied into your images directory.
  • String: Lets you set a text field.
  • Collection (Not shown)

Example of a property – class

class is pretty straightfoward – let’s start by looking at how to define this.

{
  "name": "PROP_CLASS", 
  "variable": "class", 
  "type": "String", 
  "default": "video"
}

Keys:

  • name: What we have here is to define that the name of this property is using the PROP_CLASS placeholder, of which you can locate in .\HTML5Components\video\locale\strings.json file.
  • variable: This is how to access the variable later in your code. It’s going to look like this – this._options['class'], we will focus on this in a future post.
  • type: This determines a text field to be used in the “Property Panel”
  • default: This sets the default value of the text field to “video”

In this case, class is used in defining the class for the “Video” component which can later be used for styling and more.

End

This post gets a little longer than I hope for. I’ll end here and guide you through the source code of the “Video” component in the next post. We’ll dive into components[].source, located in .\HTML5Components\video\src\video.js.

Thoughts on AWS Lambda

Amazon Web Services has a product called Lambda that I had the opportunity to test out in a Hackathon. It made me rethink what micro-services is about.

The idea isn’t a new one, you send your source code up to AWS and it prepares it onto a server and exposes an index.handler. What this handler does is that it exposes a set of API that you can call using REST.

The only downside is that you have to upload a ZIP source code all the time to deploy this. Or you could do this through pushing it to S3. In either cases you have this rudimentary interface to open up some really progressive ideas on micro-services.

I may be overthinking here. The terrible interface to update my files worked in its advantage, it encourages me to not deploy too many times. What I find myself doing is splitting up my code into small pieces, after all, each time some piece of code reaches a level of stability, it doesn’t have to be touched anymore. And that in turn reinforces the idea of micro-services – doing just one small bit super reliably.

Great job Amazon! I’m excited over what more it can do.

Bash on Ubuntu on Windows

So Microsoft added Ubuntu into Windows which is quite nice (besides the rather mouthful name). Let’s dig a little beneath the surface of things.

What it is not?

  • It is not a Desktop. Duh. It says “Bash” after all. It didn’t occur to me until I installed it.
  • It doesn’t integrate with Git for Windows or SSH agent in Windows
  • It doesn’t mean you can open Linux programs outside of Bash on Ubuntu on Windows.

Where is it located in Windows?

Here: C:\Users\<YourUserName>\AppData\Local\lxss

For example, you usually /etc directory is mapped here: C:\Users\KahWee\AppData\Local\lxss\rootfs\etc.

I tried to manually edit the files here in Windows and it glitched out. Somehow the file disappeared from Bash on Ubuntu.

How do I get to my Windows drives?

It’s mounted in /mnt. In the case for my F: drive, it’s mounted here /mnt/f. You have access to all your drives.

How do I restart Bash on Ubuntu?

You can restart only when you restart your Windows.

Can I open files with Windows applications?

Yes but it doesn’t really sync properly. I wanted a setup where I use Bash on Ubuntu for command line and the Windows file system to do web development. I couldn’t quite get used to this workflow.

Does Bash on Ubuntu support tabs?

Nope, much to my disappointment. I tend to open a lot of terminal tabs and I really miss that. Managing 10 of these terminal sessions with ALT+Tab isn’t ideal.

Can I install zsh?

Yes! I did that. I’m not sure if it would glitch out.

Verdict

I like the idea but the moments when I lost files scare me a little. Until my confidence regains I will not be using this with serious work too soon. I’ll definitely be trying this again.

How to run PHP 5.6 with Apache in El Capitan

I’m assuming you like to install PHP 5.6 with MySQL and want something more than MAMP. Good news is that Mac OS X El Capitan comes with Apache so you simply have to configure it.

To begin, you will need Homebrew, if you don’t already have that, install it here.

Installing MySQL and PHP 5.6

brew install mysql
brew install php56
brew install php56-mcrypt

Updating Apache httpd configuration

Next you will need to edit your Apache configuration. Open /private/etc/apache2/httpd.conf for that.

sudo nano /private/etc/apache2/httpd.conf

Search for rewrite_module and php5_module.

You have to uncomment them and change them to the following:

LoadModule rewrite_module libexec/apache2/mod_rewrite.so
LoadModule php5_module    /usr/local/opt/php56/libexec/apache2/libphp5.so

Notice that php5_module is referencing the Homebrew version. Note that your php.ini file can be found in: /usr/local/etc/php/5.6/php.ini

Starting the servers

Start MySQL this way:

mysql.server start

Start Apache this way (you will need sudo):

sudo apachectl start

Using VirtualHost

If you’re using VirtualHost, you will need to uncomment the following line in /private/etc/apache2/httpd.conf. Search and uncomment this:

# Virtual hosts
Include /private/etc/apache2/extra/httpd-vhosts.conf

Next is to take a look at your VirtualHost file here /private/etc/apache2/extra/httpd-vhosts.conf:

sudo nano /private/etc/apache2/extra/httpd-vhosts.conf

This is a sample of my VirtualHost:

<VirtualHost cors.kahwee:80>
    DocumentRoot "/Users/kahwee/projects/cors"
    ServerName cors.kahwee
    ErrorLog "/private/var/log/apache2/cors.kahwee-error_log"
    CustomLog "/private/var/log/apache2/cors.kahwee-access_log" common
</VirtualHost>

<Directory /Users/kahwee/projects/>
  Options Indexes FollowSymLinks
  AllowOverride All
  Require all granted
</Directory>

Things to note in the above is the directory permissions. It may be different in your use case so be sure to set them properly. My project is using CakePHP is has the DocumentRoot in /Users/kahwee/projects/cors`

Why did Flash have to die?

(Disclaimer: I work in the advertising industry which utilize Flash for advertising opportunities.)

Chrome made the announcement that coming December, Chrome 55 will disable Flash by default and you’ll be prompted to enable Flash. This changes the game for a lot of advertising companies and publishing house that still rely on Flash to serve video.

Here’s the blog post:

Flash and Chrome

Today, more than 90% of Flash on the web loads behind the scenes to support things like page analytics. This kind of Flash slows you down, and starting this September, Chrome 53 will begin to block it. HTML5 is much lighter and faster, and publishers are switching over to speed up page loading and save you more battery life. You’ll see an improvement in responsiveness and efficiency for many sites.

In December, Chrome 55 will make HTML5 the default experience, except for sites which only support Flash. For those, you’ll be prompted to enable Flash when you first visit the site. Aside from that, the only change you’ll notice is a safer and more power-efficient browsing experience.

Source: Chrome

Flash is primarily used for advertisements and games, hardly for analytics purposes as far as I know.

Why browser and device vendors hate Flash so much?

Battery consumption and ability to optimize

Flash exists in a time where it is the only consistent way to play videos across platforms and browsers. The downside to this is that this hinders browser innovation to make videos run smoother. As the custodian of such a critical video distribution format, Adobe has done little to optimize video playing under browsers. Part of this is due to the separation of concerns enacted by the browsers plugin sandbox system.

The Adobe lockin

Essentially using Adobe Flash meant that you’re locked in their ecosystem. There’s a fundamental difference in ideology here where web browsers prefer work that has gone through collaboration.

As video becomes more and more prominent, browsers are starting to catch up with video streaming technologies. One of the reasons Flash stuck for so long is Mozilla’s insistence of not introducing DRM tools for quite a while. Netflix has their way when they supported browsers that works well with DRM. Today, Mozilla reversed the anti-DRM stance. With tighter integration, browsers introduce features such as tab-based muting.

Privacy and security issues

Flash implements its own set of cookies that is managed independently from the browser. Browsers aren’t able to clear cookies in there in the user’s command. This caused unscrupulous ad tracking companies to take advantage of this loophole and track user behaviors here. Often battery is cited as an issue, but the other main reason will be privacy.

Who loses as Flash disappears?

Advertisers are key users of Flash. Blocking Flash does remove a lot of advertisements for the end users. Browsers get happy users, web content publishers lost their ability to monetize.

The reason why advertisers couldn’t switch easily is that designers couldn’t figure out how to design advertisements in JavaScript productively. For example, a designer who is using Animate CC is still crippled by the lack of support for JavaScript export and scripting abilities within Animate CC.

The losers at this time are designers who lost their workflow for using Flash to design interactive advertisements. Some advertising companies are losing out too and are transiting inventory toward Flash. It’s not going to be easy.