10 Steps to Create Poster Fallback Image for Adobe Animate Video Banner | Instructions with Screenshots

For all the clients I’ve had the fortune of developing HTML5 Video Display Ads for, static fallback images are a requirement. These step-by-step instructions will help guide through the process.

1. In Adobe Animate, add a Video Component to the stage by navigating to toolbar > Window > Components > Video
2. In Adobe Animate, set the Component Parameters by navigating to toolbar > Window > Component Parameters. Link the source parameter to the video file. Link the poster image to the image you’d like to use for the initial frame
3. In the actions layer of the Adobe Animate window, add root.stage.canvas.style.zIndex = 1; to actions layer. This places the canvas above the exported div in the published HTML file in standard CSS fashion
4. In Adobe Animate publish settings, uncheck the override HTML on export option. With this setting on, updates added to the HTML file directly between publishing will be overwritten
5. Publish the Adobe Animate file
6. Open the published HTML file in a text editor. Ensure override HTML on exportis unchecked in publish settings
7. Navigate to the sibling div next to the canvas element (in this example the DIV has an id div#dom_overlay_container). Note this example is leveraging the GreenSockJS library and the ID is automatically added. If you are using another method, locate the sibling div next to the canvas element
8. Inside this sibling div, add an image element. For the image element scr attribute, add the URL path for the poster image you’d like to use for the initial frame (add consistency and save time using same poster image from step 2).
9. Save HTML file
10. Test to validate

Screenshots:

Step #2 — Adobe Animate Video Component Parameters Screenshot

Step #6 — Adobe Animate Published HTML div #dom_overlay_container add Fallback Image Tag

If you found this helpful, like > follow > share > comment.

CR Rollyson is a Digital UX & Web manager for a S&P 500 FinTech company and is the COO of Side Role, a marketing agency partnering with In-house Teams & Agencies, Non-profits, and Start-Ups. Learn more about Side Role here.