Export for Web and Video
Output formats and file size optimization.
Step 1: Publish Settings Overview
Open File > Publish Settings to choose targets: HTML5 Canvas for interactive web, MP4/MOV for video, GIF for lightweight loops, and PNG sequences for compositing. Wrong target choice often means rework.
For new Nova Lab projects, HTML5 Canvas is the default web path. Uncheck include hidden layers, compress bitmaps appropriately, and confirm document type before your first publish.
Step 2: HTML5 Web Export
Publish to generate index.html, JavaScript, and an assets folder. Open index.html through a local server — file:// paths often block scripts. Test responsive scaling with Make Responsive enabled.
Add a preloader on frame 1 for heavy files so users see feedback instead of a blank screen. Use HTML5 when you need clicks or hover states; use MP4 for a non-interactive hero animation.
Step 3: MP4 and MOV Video Export
Export through Media Encoder or Animate video export with H.264 MP4 for broad playback. Match resolution to stage (1920x1080) and keep frame rate aligned with the timeline — do not resample casually.
Animate does not export alpha in MP4 directly. Use PNG sequences or a green screen background and key in After Effects or Premiere when you need transparency. Test a 5-second clip before rendering long projects.
Step 4: Optimize File Size
Delete unused Library items, import bitmaps at display size (2x for retina max), and simplify vector paths. Fewer anchor points mean smaller JS bundles and faster render.
Target budgets: under 200 KB for a web banner, under 2 MB for a landing hero. Compress PNG/JPEG before import and consider sprite sheets for game output.
Step 5: GIF and Social Formats
Export Animated GIF with 128–256 colors and width around 480–800 px for social limits. 12 fps is usually enough for GIF — 24 fps doubles size with little visible benefit.
Prefer native MP4 upload to Instagram, TikTok, and LinkedIn when possible. GIF fits Slack reactions and email embeds where autoplay loops without sound control matter most.
Step 6: Professional Workflow and QA
Never overwrite your master .fla with exports only. Version source files, gitignore generated folders, and run QA: audio sync, seamless loops, mobile performance, and readable text at target size.
Deliver source .fla, MP4, web folder, poster PNG, and a short README for client handoff. Revisions happen in the timeline — treat export as a render pass, not the primary archive.
FAQ
HTML5 or MP4 for the web?
MP4 with a video tag is simpler for static animation and predictable size. HTML5 suits interactivity and infinite vector scaling at the cost of JS payload. Many teams use MP4 heroes plus HTML5 micro-interactions.
Why is my HTML5 export so large?
Compress and resize bitmaps, remove unused Library assets, simplify vectors, and lazy-load secondary animation. Aim for under 500 KB first load on banners and under 2 MB on full landing pages.
Can GIF have transparency?
GIF supports one transparent color, which often creates halos on anti-aliased edges. Use PNG sequences, WebM with alpha, or composite on a brand background for better quality.