Creating and publishing a WebGL document

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Working with video cue points
    9. Draw and create objects with Animate
    10. Reshape lines and shapes
    11. Strokes, fills, and gradients with Animate CC
    12. Working with Adobe Premiere Pro and After Effects
    13. Color Panels in Animate CC
    14. Opening Flash CS6 files with Animate
    15. Work with classic text in Animate
    16. Placing artwork into Animate
    17. Imported bitmaps in Animate
    18. 3D graphics
    19. Working with symbols in Animate
    20. Draw lines & shapes with Adobe Animate
    21. Work with the libraries in Animate
    22. Exporting Sounds
    23. Selecting objects in Animate CC
    24. Working with Illustrator AI files in Animate
    25. Apply patterns with the Spray Brushtool
    26. Applying blend modes
    27. Arranging objects
    28. Automating tasks with the Commands menu
    29. Multilanguage text
    30. Using camera in Animate
    31. Using Animate with Adobe Scout
    32. Working with Fireworks files
    33. Graphic filters
    34. Sound and ActionScript
    35. Drawing preferences
    36. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Best practices - Accessibility guidelines
    12. Accessibility in the Animate workspace
    13. Writing and managing scripts
    14. Enabling Support for Custom Platforms
    15. Custom Platform Support Overview
    16. Creating accessible content
    17. Working with Custom Platform Support Plug-in
    18. Debugging ActionScript 3.0
    19. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Export QuickTime video files
    9. Controlling external video playback with ActionScript
    10. Best practices - Tips for creating content for mobile devices
    11. Best practices - Video conventions
    12. Best practices - SWF application authoring guidelines
    13. Best practices - Structuring FLA files
    14. Best Practices to optimize FLA files for Animate
    15. ActionScript publish settings
    16. Specify publish settings for Animate
    17. Exporting projector files
    18. Export Images and Animated GIFs
    19. HTML publishing templates
    20. Working with Adobe Premiere Pro and After Effects
    21. Quick share and publish your animations

What is WebGL?

WebGL is an open web standard for rendering graphics on any compatible browser, without the need for additional plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of image processing and effects as part of the web page canvas. WebGL elements can be embedded with other HTML elements and composited with other parts of the page.

Although, most modern-day browsers support WebGL, visit this link to know more details about the exact versions that are supported.

Some browsers do not have WebGL enabled by default. To enable WebGL on your browser, see this article.

Merk:

Ensure that you enable WebGL on your browser, because some browsers disable WebGL by default.

Using WebGL-glTF (Beta) document type

Animate now has two WebGL-glTF document types. You can use WebGL-glTF Standard document type to allow integration with any of the standard WebGL-glTF packages. It is is completely standards-compliant.

  1. To create a WebGL-glTF based document, select WebGL-glTF Standard or WebGL-glTF Extended from Advanced intent of Home screen. 

    WebGL-glTF document type
    WebGL-glTF document type

  2. Specify the Width, Height, and Units as per your requirement and click Create.

Publishing a WebGL-glTF file

  1. Click Publish Settings from the Properties Inspector.

    Publish WebGL-glTF file
    Publish WebGL-glTF file

  2. Type a name in the Output name textbox.

    Publish Settings dialog of WebGL-glTF Standard document type
    Publish Settings dialog of WebGL-glTF Standard document type

  3. Select GLB or GLTF in Format option.

  4. Specify a decimal number with 1-3 range in the Image Resolution textbox.

  5. Check the Remove white spaces in JSON file to reduce file size.

  6. By default, the standard options Loop timeline and Include hidden layers are checked. You can uncheck them to find any small errors.

  7. Click the Publish button to publish the file.

Convert animations to GLTF and GLB formats

WebGL-glTF and GLB reduces the file size and runtime processing. On Animate, you can use the documents in both the formats. Want to use your videos in both the formats? Watch the tutorial at the end of this example and follow these steps.

  1. In the Properties, click Publish Settings.

  2. Type a name in the Output name textbox.

  3. Select GLB or GLTF in Format option.

  4. Specify a decimal number with 3 range in the Image Resolution textbox.

  5. Check the Remove white spaces in JSON file to reduce file size.

How to create advanced animations using WebGL GLTF Export in Animate

Watch the video to know how an animation looks in WebGL GLTF, GLB formats.

Animate 18.0 and earlier versions

You can refer to the following content if you are using Animate 18.0 or any of the earlier versions of Animate.

The WebGL document type

Animate allows you to create and publish rich interactive content to the Web Graphics Library (WebGL) format. Since WebGL is fully integrated into browsers, it allows Animate to leverage GPU accelerated usage of graphics processing and rendering, as part of the web page canvas.

This new document type allows you to create content and quickly publish to a WebGL output. You can leverage powerful tools within Animate to create rich content, but render WebGL output that runs on any compatible browser. This means that you can use the traditional Animate timeline, workspace, and drawing tools to natively author and produce WebGL content. Most commonly used browsers support WebGL, there by, allowing Animate to render content on most web platforms.

Merk:

Support for WebGL is only available as preview. This update of Animate includes support for basic animations with sound and scripting, and a set of interactivity features. With future releases of Animate, you will see more features being enabled for the WebGL document type. For a complete list of Animate features that are supported for WebGL, see this KB article.

Creating a WebGL document

In Animate, the WebGL document allows you to quickly create and publish content for the WebGL format. To create a WebGL document:

  1. Launch Animate.
  2. On the Welcome Screen, click the WebGL(Preview) option. Alternatively, select File > New menu option to display the New Document dialog. Click the WebGL(Preview) option.

Previewing WebGL content on browsers

You can use the Test Movie feature of Animate to preview or test your content. To preview, do the following:

  1. Within Animate, press Ctrl+Enter on Windows and CMD+Enter on MAC. This launches your default browser and renders the WebGL content.
Animate requires a web server to run WebGL content. Animate has a built-in Web Server that is configured to run WebGL content on Port #8090. If a server is already using this port, Animate automatically detects and resolves the conflict.

Publishing content to the WebGL format

Animate allows you to create and publish WebGL content natively from within.

To publish your WebGL document, do the following:

  1. Select File > Publish Settings to display the Publish Settings dialog. Alternatively, select File > Publish. if you have already specified Publish Settings for WebGL.
  2. On the Publish Settings dialog, specify values for:

Output file

Provide a meaningful name for the output. Also, browse to or enter the location where you want to publish the WebGL output.

Overwrite HTML

Lets you specify whether to overwrite the HTML Wrapper or not everytime you publish your WebGL project. You may uncheck this option if you have made any external changes to the published HTML file and wish to retain them while updating any changes made to the animation or assets in Animate.

Include Hidden Layers

Includes all hidden layers in the WebGL output. Deselecting Include Hidden Layers prevents all layers (including layers nested inside movie clips) marked as hidden from being exported in the resulting WebGL. This lets you easily test different versions of WebGL document by making layers invisible.

Loop Timeline

Repeats the content when it reaches the last frame. Deselect this option to stop the content when it reaches the last frame.

  1. Click Publish to publish WebGL content to the specified location.
Merk:

The maximum FPS that could specified for WebGL content that run on browsers is 60FPS.

Understanding the WebGL output

The published WebGL output contains the following files:

HTML Wrapper file

It includes the runtime, calls for assets, and also, initializes the WebGL renderer. The file is named as <FLA_name>.html by default. You can provide a different name for the HTML file in the Publish Settings dialog (File > Publish Settings).

The HTML file is placed in the same directory as that of the FLA by default. You can provide a different location on the Publish Settings dialog.

JavaScript File (WebGL Runtime)

Renders published content on WebGL. Is published in the libs/ folder of the WebGL document. The file is named as: flwebgl-<version>.min.js

The HTML wrapper makes use of this JS file to render WebGL content.

Texture Atlas

Stores all the color value ( of shapes ) including the bitmap instances on the stage.

Adding audio to your WebGL document

You can import and embed audio to the your WebGL document, control the playback using the sync settings (event, start, and stop), and play timeline audio at runtime. WebGL currently supports only .wav and .mp3 formats.

For more information on working with audio, see Using Sounds in Animate.

Migrating existing content to a WebGL document

You can migrate existing content within Animate to a WebGL document. To its end, Animate allows you to migrate via copying or importing content manually. Also, when working with multiple documents within Animate, it is a common practice to copy content across documents as Layers or assets in the Library. Although, most features of Animate are supported, some content types are modified to better accommodate the WebGL format.

Animate contains several powerful features that help produce visually rich content. However, considering that some of these features are native to Animate, they will not be supported in a WebGL document. Animate has been designed to modify such content to a supported format, and visually indicate when a tool or feature is not supported.

Copy

content (layers or library symbols) from a traditional Animate document type (such as ActionScript 3.0, AIR for Android, AIR for Desktop, and so on) into a WebGL document. In this case, an unsupported content-type is either removed or converted to supported defaults.

For example, copying 3D animation will remove all 3D transformations applied to objects on stage.

Import

a PSD or AI file that contain unsupported content. In this case, the content is either removed or converted to supported defaults.

For example, import a PSD file that has Blur effects applied. Animate removes the effect.

Work

with multiple document types (for example, ActionScript 3.0 and WebGL) simultaneously, you switch documents with an unsupported tool or option selected. In this case, Animate visually indicates that the feature is not supported.

For example, you created a dotted line in an ActionScript 3.0 document and switch to WebGL with the Line tool still selected. Observe the pointer and the Properties Inspector, they visually indicate that dotted line is not supported within WebGL.

Scripts

You can write Javascript code in the Actions panel, which will be executed after player enters the frame. The 'this' variable in the context of frame scripts refers to the instance of the MovieClip it belongs to. In addition, frame scripts can access Javascript functions and variables declared in the container HTML file. When you copy a frame or layer from an ActionScript document and paste it in a WebGL document, scripts if any will be commented.

Changes applied to content after migrating

The following are the types of changes that are applied when you migrate legacy content to an WebGL document.

Content is removed

Content types that are not supported in HTML5 Canvas are removed. For example:

Filters

are not supported. The effect will be removed, and the shape will assume a solid fill, instead.

Blur Filter effect is removed, and is replaced by Solid fill.

Content is modified to a supported default value

Content type or feature is supported, but a property of the feature is not. For example:

 

Radial Gradient

is modified to assume Solid fill using the primary color.

Radial Gradient is modified to Solid fill using the primary color.

For a full list of features that are not supported and their fallback values during migration, see this article.

Improving rendering performance with bitmap caching

Runtime bitmap caching lets you optimize rendering performance by specifying that a static movie clip (for example, a background image) or button symbol be cached as a bitmap at runtime. By default, vector items are redrawn in every frame. Caching a movie clip or button symbol as a bitmap prevents the browser from having to continually redraw the item, because the image is a bitmap and its position does not change. This provides a significant improvement in performance of rendering WebGL content.

For example, when you create an animation with a complex background, create a movie clip containing all the items included in the background. Then select Cache as Bitmap for the background movie clip in the Property inspector. During playback, the background is rendered as a bitmap stored at the current screen depth. Browser draws the bitmap on the Stage quickly and only once, letting the animation play faster and more smoothly.

Bitmap caching lets you use a movie clip and freeze it in place automatically. If a region changes, vector data updates the bitmap cache. This process minimizes the number of redraws that browser must perform, and provides smoother, faster rendering performance.

To enable Cache as Bitmap property for a movieclip symbol, select the movieclip instance, and select Cache as Bitmap from the Render drop-down on Properties Inspector (Window > Properties).

Considerations when using Cache as Bitmap

When using Cache as Bitmap property on WebGL content, consider the following:

  • Maximum size of the movieclip symbol is limited to 2048x2048. Note that the actual bounds of the movie clip instance that can be cached are lesser than 2048x2048, WebGL reserves some pixels.
  • If there is more than one instance of the same movieclip, Animate generates the cache with the size of the first instance encountered. However, the cache is not re-generated and Cache as Bitmap property is not ignored, even if the transform of the movie clip changes to a large extent. And hence, if the movieclip symbol is greatly scaled during the course of animation, the animation may appear pixelated.
Adobe-logoen

Logg på kontoen din