A 300 x 250 HTML5 Canvas banner that fails the network validator
You must deliver a 300 x 250 HTML5 Canvas banner to an ad network. Specs: total initial load under 150 KB, no external network calls after load, click-through to a landing page, 15-second auto-stop with a replay control, and a 3-frame loop. Your build contains a bitmap photo at 420 KB, a Google-hosted webfont, a mask on the product shot, and a glowing filter on the call-to-action button. The network's validator rejects the first submission, and the test harness throttles traffic to 3G.
1. Rebuild the asset budget to reach 150 KB. What goes, what shrinks, and what is your reasoning on quality?
Read the worked answer
The photo alone is nearly three times the limit, so it sets the budget. Resize to the delivered pixel area at 2x density and re-encode as JPEG at moderate quality, targeting 60-80 KB; on a 300 x 250 unit viewed at arm's length, the difference from the original is invisible, whereas a 420 KB download on throttled 3G delays first paint by seconds and often posts an empty frame during billing. Convert remaining vector art as vectors, and pack the three loop frames into a sprite sheet so the runtime requests one image rather than three. Drop the glow filter rather than compressing around it. Then re-measure initial load the way the validator does - uncompressed, before gzip - because optimising the wrong metric is how files pass locally and fail submission.
2. Explain why the mask and the glow are problems on HTML5 Canvas, and what you substitute.
Read the worked answer
Canvas output does not render Animate's full effect stack the way the stage does. Filters are the biggest casualty - a glow may be flattened, dropped or rasterised at poor resolution per browser, and any baked filter also inflates the runtime cost on a throttled device. Masks are supported only in specific configurations; masks applied to non-bitmap content, or stacked masks, frequently fail or clip differently across browsers. So: replace the mask by pre-cropping the product shot in an image editor and exporting it with an alpha channel, and replace the glow with a drawn soft-edged shape behind the button, or a small alpha PNG. Test the published output in the network's harness, not the Animate preview - the preview is not the delivery environment.
3. Address the font, the click-through and the 15-second stop with replay, given the no-external-calls rule.
Read the worked answer
The Google-hosted font is an external call after load, so it breaks the spec and often arrives too late to apply anyway, causing a visible reflow. Either break the text apart to shapes, which is bulletproof but not editable or translatable, or self-host a subsetted webfont declared in the publish settings - the right choice if the network needs localised variants. Click-through must use the network's clickTag mechanism on a Button symbol, never a hard-coded URL; the network swaps the destination per campaign, and a hard-coded link silently breaks tracking and gets rejected. For the 15-second stop, put a keyframe at 15 x fps with a stop action and label it, with the replay control calling gotoAndPlay on the first label - the timeline stays the single clock for animation and audio, whereas a separate timer will desynchronise.