Adobe Animate CC lets you create reusable UI components for HTML5 projects. This sounds great, but Adobe's documentation is sparse. Most of what I learned came from reverse-engineering the built-in components.

If you're trying to build custom components for Animate CC, here's what I figured out.

Why custom components matter

Animate CC ships with basic components (buttons, video players, jQuery UI widgets), but real projects need custom controls. Building components lets you create reusable UI elements that designers can drag into projects without writing code.

The problem: Adobe doesn't explain how components work. The official docs describe using components, not building them. To understand the system, I dug into the source code of the built-in components.

Where Animate CC stores components

On Windows, Animate CC looks for components in two locations:

Built-in components (shipped with Animate):

C:\Program Files\Adobe\Adobe Animate CC 2017\Common\Configuration\HTML5Components

User-installed components:

C:\Users\<YourUserName>\AppData\Local\Adobe\Animate CC 2017\en_US\Configuration\HTML5Components

Put your custom components in the user directory so Animate updates don't overwrite them.

Path conventions

Adobe uses UNIX-style forward slashes (/) in all component configs, even on Windows. If you use backslashes (\), your component won't load.

Write paths like this:

src/video.js           ✓ (works on all platforms)
src\video.js           ✗ (breaks on Mac, might break on Windows)

How Animate CC finds components

Looking at the default components directory, you'll see this structure:

C:\...\HTML5Components\
├── jqueryui/
│   ├── assets/
│   ├── locale/
│   └── src/
├── lib/
├── META-INF/
├── sdk/
├── ui/
│   ├── assets/
│   ├── locale/
│   └── src/
└── video/
    ├── assets/
    ├── locale/
    └── src/

Three of these (jqueryui, ui, video) appear in the Animate CC Components Panel:

The others (lib, META-INF, sdk) don't show up because they're not component categories—they're shared libraries.

What makes a component category? A directory becomes a category when it contains a components.js file. That file tells Animate what components live in that category.

Reverse-engineering the Video component

The Video component is the simplest built-in component, making it perfect for learning how the system works. Here's what it looks like on the canvas:

The Video component's definition lives in .\HTML5Components\video\components.js. Despite the .js extension, it's actually JSON.

{
  "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"}
    ]
  }]
}

This file defines the Video category and the single component it contains. The components array can hold multiple component definitions—other categories like jqueryui define dozens of components in one file.

Iterating on component design: You can edit this file and reload Animate CC's Components Panel (Window → Components) to see changes. This makes experimenting with component definitions straightforward.

How properties work

The Video component defines 8 properties in its components.js file. These properties appear in Animate's Property Panel in the same order:

The property names use placeholder strings like PROP_SOURCE and PROP_AUTOPLAY. These get translated to human-readable labels using the locale file at .\HTML5Components\video\locale\strings.json:

{
  "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"
}

This file maps placeholder strings to their displayed labels. You can add translations by creating additional locale files (es_ES, fr_FR, etc.) with the same structure.

Property types

Animate CC supports several property types, each rendering differently in the Property Panel:

Video Content Path: Shows a file picker that filters for video files. The selected path is stored as a string.

Image Path: Shows a file picker for images. When you select an image, Animate copies it into your project's images directory automatically.

Boolean: Renders as a checkbox. Note that the default value is a string ("true" or "false"), not a JavaScript boolean.

String: Renders as a text input field.

Collection: Lets you define dropdown menus or list selections (not used in the Video component, but available for more complex components).

Breaking down a property definition

Let's examine how the class property works:

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

name: References a placeholder string defined in strings.json. In this case, PROP_CLASS maps to "class" in the English locale. This is the label shown in the Property Panel.

variable: The internal name used to access this property in your component's JavaScript code. You'd access it as this._options['class'] in the component implementation (covered in the source code file src/video.js).

type: Determines which UI control appears in the Property Panel. String renders a text input field.

default: Sets the initial value. For the Video component, the default CSS class is "video", letting designers style video elements consistently.

This class property lets designers add custom CSS classes to the video element, making styling and JavaScript selection easier.

What's next

This post covers how Animate CC discovers and displays components. The next piece—implementing the component's behavior—lives in the source file referenced by components[].source.

For the Video component, that's .\HTML5Components\video\src\video.js. That file contains the JavaScript that runs when the component is added to a project and how it handles the properties we defined.

Building your own component

To create a custom component:

1. Create a directory in the user HTML5Components folder
2. Add a components.js file defining your component's metadata and properties
3. Create a locale/strings.json file with property labels
4. Write the component implementation in the src/ directory
5. Reload Animate CC's Components Panel to see your component

The Video component is the simplest reference implementation. For more complex components, look at the jQuery UI components—they demonstrate advanced features like event handling, dependencies, and dynamic property types.

Understanding this structure opens up building interactive HTML5 components that designers can use without writing code. The learning curve is steep due to Adobe's sparse documentation, but reverse-engineering the built-in components reveals the patterns.

This work was part of the broader transition away from Flash. Chrome and other browsers were disabling Flash by default around this time, forcing designers and developers to find HTML5 alternatives.