Playable Ads Maker: The Complete Master Class (Every Tutorial, Beginner to Advanced)

One tap, and the ad plays. Nothing downloaded, no new page — the whole thing is running inside the ad. When the round ends, the last screen arrives: the offer, and one button to the store.

That is a playable ad. You play it first, and install second. Every major network describes it the same way. Google says it lets people interact with your app before downloading it. Unity calls it a quick interactive demo of your game. Meta calls it a short preview, before anyone chooses to install. They also convert. In Liftoff's 2025 Mobile Ad Creative Index, playables turned impressions into installs 8× better than other formats for top-spending game advertisers, and 16× better for everyone else in games. That is games, measured by one ad platform. Take it as a reason to test playables, not as a promise.

Playables come in four shapes. A mini-game: one slice of the real thing, cut down to a few seconds.

A product you get your hands on — tap the tape, and the box opens.

Something that is not a game at all — a choice, a price, a quote. Travel, retail, banking, insurance.

And interactive video, where the film stops, asks you something, and plays on with your answer.

Whatever the middle is, it ends the same way: an end card, asking for the install. So every playable has the same four parts. Something that invites the first touch. One short thing to do. The end card. And the exit. The exit is the part you do not write yourself. Unity and AppLovin open the store through MRAID. Google has its own ExitApi. Meta has its own function. Get that one line wrong, and the ad plays perfectly and sends nobody anywhere. And it all ships as one file. Unity and AppLovin take a single HTML file under 5 MB. Google takes a ZIP, also 5 MB, with at most 512 files inside. Meta holds the HTML itself to 2 MB. Every network also agrees on a few rules. No sound until somebody touches the ad — Google and AppLovin both spell that one out. It has to work portrait and landscape, and it cannot call out to the internet: everything it needs is embedded in the file. That is the fiddly part of a playable, and it is the part this tool does for you: one project, exported for 13 networks, each file written the way that network asks. Making one starts with a template. All 109 of them are live on their own pages, so you play one before you pick it. Remix opens it in the editor as your own project.

Click any text and type your own words.

Everything about that object is on the right. Where it sits, how big it is, what it says — and portrait and landscape each keep their own numbers. Four tabs. General is the words and the look — colour, size, weight, font, alignment. Animate is movement. FX is filters. Events is what happens when somebody taps it.

Press Play, and you are watching exactly what a viewer will get.

One project can also speak 17 languages, so the same ad ships to every market you sell in. Then Export: tick the networks you are running on, and each one gets its own ready-to-upload file.

Seven playable ads - a reveal, a charge-up, a picker, a menu, a product builder, a quiz, a product tour. Every one built without code. Here's how. For each one: what the player does, what it's built from, and the video that shows every step. One: tap to reveal. Tap the chest, and it opens, the headline changes and a badge slides in. That's one event with four actions - the Events video builds it from scratch. Two: charge it up. Every tap fills the ring by twenty, and when it's full, the ad moves on by itself. A Progress object, a Set Progress action and a Progress Complete trigger. Three: pick a size. The cup and the price follow the choice. Choice Chips write a variable, and each cup shows only for its size. Four: choose from a menu. Four cards, one design and a table - the Repeater draws a card for every row, and the tap records the pick. Five: build your own. Colours and sizes swap the product and keep the price up to date. That's the Configurator module, driven by your own buttons. Six: find your match. Three questions, and the answers lead to a product. The Quiz module - you write the questions and the matches. Seven: tour the product. The buttons swap the photo inside a framed card. Image objects and the Swap Image action. All seven export as one small HTML file, ready for every ad network - and every one started from a blank canvas or a template.

A card for a bank, a ride for a taxi app, a chair at a salon, a basket at a grocer. Interactive ads that aren't games - and they sell apps and brands. Why they work, which one fits your product, and how to ship one today, from a template. A game ad sells a game. An app or a brand needs something else: the viewer trying the product. Here, they pick the card they'd carry - and the choice rides along in the link. Then one button to the result - approved - and the End Card is the click to the store. Decide first where that click goes. An app sends it to the App Store and Google Play. A brand sends it to its own site, with the choice in the address.

Then pick the format your product already has. A ride? Let them set it. A booking? Let them choose a time. A basket? Let them fill it. A plan? Let them slide it. To build one today, open the closest template and press Remix this template. Pick the size, and it's yours. Change the name first - it's text, like any other. Then your colours, your pictures, your copy. The events, the scenes and the End Card are already wired.

Press Play, and check it still does its one job.

Then export it for your networks - the Export video goes through every setting. Three mistakes to avoid. One: hiding the product behind a game it doesn't need. Let them touch the real thing. Two: more than one decision on a screen. One choice, then the result. Three: a generic End Card. It's the click - make it say what they just chose.

This isn't a video ad. It's one you can play — and you can build it in minutes, with no code.

For top mobile games, playables turn views into installs eight times better than other ads. But getting one built usually means a developer, weeks of waiting, and thousands of dollars per ad. Playable Ads Maker fixes that. Start from 140+ ready-made templates — mini-games, interactive video, 3D products and end cards. Every template is live. Play it right on the page, then hit Remix.

Now make it yours. Click any text and type. Swap in your own art.

The taps, drags, timers and scene changes are already wired, so press Play and it just works.

Selling worldwide? One project speaks 17 languages.

When it's ready, hit Export and tick your networks — Unity, AppLovin, Google, Meta, TikTok, and more.

Each file comes out sized and wired for its network, in one zip. And that's a real playable ad, ready to upload. No developer. No agency queue. Test a new idea every week, not every quarter. This is Playable Ads Maker. You can create interactive ads for every major ad network, right in your browser. The fastest way to start is with a template. Every template here is a real, working playable ad.

Let's jump to the industry playables.

I'll open this coffee loyalty card.

The preview is live, so you can play it before you choose. Tap the cup, and it collects a stamp. I like this one. Click Remix this template, and it opens in the editor.

First, pick a canvas size. 375 × 667 is the standard phone screen, so I will keep it.

Here's the editor. Your scenes and layers are on the left, the canvas is in the middle, and whatever you select shows its properties on the right. To change something, just click it on the canvas.

Then type your own text in the properties panel. The canvas updates as you type.

Now let's swap the picture. Select it, then click Change Image.

You can choose from the built-in library, or upload your own artwork. I'll upload a product shot.

And there's our product, right in the ad.

Time to test it. Press Play, and the ad runs exactly the way a player will see it.

I'll tap the cup to collect stamps. A double-tap gives a bonus. Card full! Tapping through opens the End Card, the screen that sends players to the app store.

Happy with it? Click Export.

Paste your App Store and Google Play links. That's where the ad sends people when they tap.

Web Preview is on by default. It gives you a file that plays in any browser, and it never uses up an export.

Next, tick the ad networks you're publishing to. Each one gets its own ready-to-upload file.

Then hit Export. The first time, you'll just sign in with a free account.

Done! One zip, with a file for every network, plus the web preview. And here's the finished playable ad, running in a browser. Let's play it once more.

That's your first playable ad. Part two: templates and the editor. Remixing a template, every panel, portrait and landscape, and ads with more than one screen.

This is a template page, and the phone on the left is not a picture. It is the real ad, built the same way the file you upload is built. Everything you need to judge it is here: it is a mini-game playable, it exports as a single HTML5 file, it goes to thirteen ad networks, and the plan line says free to edit and export.

There are over a hundred of these across games, apps, retail and video, and new ones land every week. One thing to trust: the phone is the live build, made fresh when the page loaded. The still image beside a template in the gallery is a photograph taken once, so if the two ever disagree, the live one is the truth. Remix this template opens the editor with this ad already loaded. It does not copy a picture of it; it copies the project. First it asks for a canvas size, and that step is deliberate. The template is rebuilt at the size you choose, not squashed into it, so every distance inside it scales with the box. 375 x 667 is the default and the safest bet. 1080 x 1920 gives you a full HD canvas if your art is that big. And look at the address: it has already dropped the template name. You are in your own project from this moment, and it saves itself as you work.

Here is what a remix gives you. Scenes down the left - the game, then the win screen and the lose screen - and under them every object in the scene you are looking at.

The first object is the game itself. That one layer is the whole mini-game: its board, its rules and its scoring. Select it and the panel on the right fills with its own tabs - General, Game Settings, Appearance, Pointer. This is where a template stops being someone else's ad.

Appearance, then Tiles. These six images are the pieces the player swaps, and every one of them can be your product. Put your six best sellers on that board and the viewer spends thirty seconds handling your catalogue. That is the whole idea of a playable ad. Change one and the board changes under it immediately. Use a cut-out with a transparent background, square, and keep the six clearly different from each other - a matching game is only fun if telling two pieces apart is instant. Cell Background is the board behind them. Keep it darker and quieter than your tiles, or the pieces stop reading at a glance on a phone.

Tile Gap and Tile Size decide how the board feels. A wider gap with slightly smaller tiles reads as premium; packed tight reads as arcade.

Game Settings is the rules. Rows and Columns set the board - six by six is the sweet spot on a phone; go much bigger and the pieces get too small to tap.

End Condition decides how the game can end: a move limit, a wrong-swipe limit, lives, or both together.

Move Limit is your difficulty dial, and it is the number most worth testing. Too few and people fail and leave; too many and there is no tension. For an ad, err on the generous side. You are not selling a challenge, you are selling the feeling of being good at it - and the win screen is where your install button lives. Score Per Match and Combo Multiplier set how fast the number climbs. A bigger multiplier makes a lucky cascade feel spectacular.

And look how little is in this scene: the game, and a background. That is all. This game draws its own score and moves on the board, so there is nothing else here to keep in step with it. Which is why two rows here will not move, and the editor says so plainly: this layer is locked by the template, and the game itself cannot be deleted.

That is not a sales tactic. The game lays itself out against that background and owns this scene, so the two things it is built on are the two things you cannot delete by accident. You will also see that adding another scene asks you to remove the game first. A mini-game owns its scene, and the win screen after it is where your own ideas go.

There is one more lock you will only meet on a real account. Changing a prebuilt's structure - its events, its scenes, adding or deleting objects - is kept to the Agency plan, because that is building from scratch rather than re-skinning.

Everything else is on every plan, free included. All thirteen networks, every creative feature and the whole library - your plan sets how many exports a month and how many networks go into one file, never which template you may open.

Your words live on the win and lose screens, as ordinary text objects. Select one and type - say what the player gets, not what the mechanic is called.

Text size is set separately in portrait and in landscape, on purpose, so a headline that fits upright does not have to shrink sideways. Colour and type are next. Your brand colour and your font, and it stops looking like a template.

Art, audio, animation and position are yours on every plan. Copy, colours and type need you signed in, and signing in is free.

Press Play and the game runs in the editor exactly as it will on a phone. Play it through to the win screen; that is the screen that earns the install.

Check both orientations before you ship. Every template is built for both, and this is where you catch a headline that wraps badly sideways.

The editor keeps its own list of things worth checking - a missing store link, art heavier than a network allows. Clear that before you export.

Then Export. Paste your App Store and Play links, tick the networks you are shipping to, and you get one self-contained file for each. There is a full video on that window on the channel.

One mistake to avoid: choose your canvas size at the beginning, not after an hour of editing, because that first choice is what every measurement in the template is built from.

Remix one, change the tiles, the background and the copy, and export it. That is a shippable ad in an afternoon - and your second one takes twenty minutes. Remixing is the fastest route to a live ad, and it is the one most people get wrong. They swap the pictures, stop, and ship something that still looks like the template it came from. So nothing here is a list of field names. Every setting I mention, I am going to change, and you are going to see the board change with it. Start on the template's page. Every prebuilt has one with the playable running live - the real ad, not a video of it - so you can try it before you commit.

Remix this template opens the editor with it loaded. It asks for a canvas size first, and that is deliberate: the whole template rescales to whatever you pick, so choose the shape you are actually buying. Here is what arrives. The scenes, the layers, and the game itself as a single object. Select it and the panel on the right fills up with everything it can do.

Five sections: General, Game Settings, Appearance, Sounds and Events. We will go through them in order.

General first, and the two fields I would not want you to scroll past: Score Text Object, and Shots Text Object. This template has already pointed them at its own text layers. That is why the score under the board is in the template's typeface rather than something the game drew for itself. Point them at YOUR text object and the game writes into your font, your colour.

Game Settings is where the difficulty lives, and this is the tab that decides whether anyone finishes your ad. Watch the board while I change these. Colour Count 4 → 7. Every shot now has more ways to be wrong. For a fifteen second ad I would go the other way. Three colours is almost impossible to lose at, and a viewer who clears a board is a viewer who taps your install button.

Starting Rows 6 → 3. Half the board goes. Columns changes how wide the grid is. Fewer, bigger bubbles read better on a phone held at arm's length; more of them makes a clear feel cleverer.

Shot Limit is how many bubbles they get before the game ends. Zero means unlimited, and for an ad, unlimited is often the right answer - a playable that ends in failure has spent your impression on a failure.

And Bubble Speed scales how fast the shot travels. Faster feels more responsive and buys you more gameplay in the seconds you have; too fast and nobody can aim.

Appearance is the tab that makes it yours, and the first control on it is the biggest single change in this whole video. Style: Premium (lit, animated) or Classic (flat)

One dropdown. Two completely different-looking ads.

If you keep the frame, its three colours are yours: the outer, the inner, and the accent. Put your brand in here and the cabinet stops being the template's and starts being yours. Bubble Images: one per colour. This is where your product goes. A bubble shooter where the bubbles are your actual product is an ad about your product. The same board with generic bubbles is an ad about bubble shooters. And the background behind it all is an ordinary image you can replace, or switch off entirely if your own artwork is already underneath. Sounds and Events are the last two tabs. Sounds swaps the pop and the fire; Events is where the game tells the rest of your ad that it has been won or lost - and that one is worth its own video.

Outside the game object, everything else is an ordinary layer. Your headline, your colours, your fonts, your end card - all of it editable, all of it yours. Then check both orientations before you finish. Position and size are held separately for each, and the second one is the one people forget to look at.

Now the part you actually came for: what is locked. A couple of layers in this template will not let you delete them - the game, and the board behind it. That is the template protecting itself rather than a paywall. Removing either leaves an ad with no ad in it. Everything in this video is on every plan, including the free one. Paid: the template's STRUCTURE and EVENTS.

Which is the right line, I think. Re-skinning a template cannot break it. Deleting the scene its win screen lives on absolutely can.

Play it before you export, and play it properly - clear a board, lose a board, see both endings. The screens you have not looked at are the ones your viewers will find.

Then export for the network you are actually buying. One file per network, and there is a whole video on that. Three mistakes. Swapping the art and nothing else - the settings are where a template stops looking like a template. Leaving the difficulty where you found it. A template ships with sensible defaults, not with your product's defaults, and an ad nobody finishes is an ad nobody installs from. And checking one orientation. Half of what you just set has a second value you have not looked at.

Pick a template, drop your colour count to three, put your product on the bubbles, and set it so you can win in fifteen seconds. That is a real ad, and it is an afternoon. This chair is an ad. Turn it around, choose the wood and the seat, and watch the price update — no code.

The Playable Ads Maker is a blank canvas with real logic: scenes, events, variables and mini-games.

Drop in a mini-game — 50 genres, from match-3 to runners — and it plays straight away.

Remix a game template on any plan, or build one from scratch on Agency.

Every object can react. Tap, hold or drag it — then show something, move it, count it, or jump to the next scene.

String scenes together, and choose how they change: a crossfade, a wipe, or a zoom.

Variables keep track of every choice. Move a slider, and the price updates live.

Then add the finish: particle effects, and text that animates in letter by letter.

Export, pick your networks, and each one gets its own ready-to-upload file.

Here's the ad on a phone — every tap, every scene, working.

Three badges, all over the place. Select them, line up the tops, space them evenly - and one key takes it all back.

That's the editor, panel by panel: the header, the object list, the canvas, the properties, Play - and the shortcuts that save you an hour. Across the top: Localization and Variables, your save options, the light or dark theme, the build check - and Export. Under it: undo and redo, and the zoom - Fit puts the whole canvas in view. Then the snap grid: switch it on, pick a size, and show the lines. On the left, your scenes. Add one here; double-click a scene to rename it. Below, every object in the scene. The top row is in front. Each row moves up or down, hides, locks, duplicates or deletes - and a right click opens the same menu. On the canvas, click to select, drag to move, and pull a corner to resize. Clicking the background clears the selection - so does Escape. The right panel is whatever you selected: General for its settings, Animate for motion, FX for effects, and Events for what it does.

Under the canvas: Play runs the scene the way the ad will, the volume, and the orientation switch - the portrait and landscape video covers that one. Shift-click to select several - in the list, or right on the canvas. A bar appears: hide, lock, bring to front, and the align buttons. Align top edges lines them up. Distribute horizontally spaces them evenly - that one needs three or more. The arrow keys nudge five pixels, one with Shift. Control D duplicates. Control C and V copy and paste. Delete removes it. And Control Z undoes, fifty steps back. Control Y - or Control Shift Z - brings it back.

Three mistakes to avoid. One: aligning a locked object. Locked objects are skipped - unlock them first. Two: distributing two objects. Distribute needs three; with two, it does nothing. Three: fighting the snap. Snap pulls every drag onto the grid - switch it off for fine placement, or nudge with Shift and the arrows.

A new project starts here: three sizes, all tall. Landscape is the same size, turned - so there's nothing else to pick. The size is set once, when the project is made - choose it before you build. Then start from scratch, or from a template. Here's an ad built in portrait. The switch under the canvas flips the editor to landscape. Nothing has a landscape position yet, so everything sits where it was in portrait - squeezed to one side. Position belongs to each orientation. Drag the headline where it should be - the panel says Position, Landscape, and shows the portrait values under it. A text's size belongs to each orientation too - on purpose. A smaller headline here leaves portrait's untouched. Every other size is shared. Make the sticker bigger here, and portrait gets the bigger sticker too. The background picture is per orientation too. Portrait has one - landscape needs its own, a wider shot of the same place.

I'll place the rest the same way. Now flip back and forth to check both. Portrait kept its layout; landscape has its own.

In the exported ad, the phone decides: turn it, and the ad switches layout by itself. Three mistakes to avoid. One: building only in portrait. Landscape then shows everything squeezed where portrait put it - lay out both. Two: a portrait-only background. Landscape doesn't borrow it - it shows the plain colour. Give it its own picture. Three: expecting text to follow. Resize a headline in portrait and landscape keeps its own size - set both.

A scene is a screen. Your ad starts on the first one in this list and stays there until something moves it - which means a playable with three scenes is not three ads, it is one ad with three states. That matters more than it sounds. Almost every high-performing playable is a small sequence: show the problem, let me choose, show me what I chose. Each of those is a scene.

Add a scene. Name it properly - you will pick it from a dropdown later. Duplicate is usually the faster start. A second scene that shares a background and a layout should be a copy you edit, not a screen you rebuild. And each scene carries its own transition - the wipe or fade that plays on the way in. There is a whole video on those, so today I'll leave them at the default and spend the time on structure.

An event on a button, action: Go to Scene.

Pick the destination and you're done. That is the entire navigation model - there is no flow chart to maintain, because the buttons themselves are the map.

Watch what happens when we arrive. Every entrance animation on that scene plays, right then. An entrance is timed from its SCENE starting, not from the ad loading. Branching is the same action twice. Two buttons, two destinations - and now the viewer's choice decides which screen they see.

This is the shape almost every choice-driven ad uses. Pick your character, pick your plan, pick your room - each option is a button, and each button names a different scene. But branching by scene alone gets expensive fast. Four choices across two questions is sixteen screens, and you do not want to build sixteen screens. Set a variable, go to ONE scene, let the scene read it.

Variables survive the scene change - that is the point of them. What they chose on the first screen is still true on the third. Open End Card - a different action from Go to Scene. The end card is the screen that gets the install, so the product treats it as its own thing rather than as scene number four. There is a full video on designing one; what matters here is how you arrive at it.

On an End Card, EVERY button is already the click-through.

Which brings me to the mistake I most want you to avoid, because the editor cannot show it to you. CTA Button is a BEHAVIOUR - leave the ad and open the store - not a style. So if you use one as a mid-scene next button, here is what happens. In the editor it navigates perfectly, because there is no store to leave for. In the exported ad it runs your event and then sends the viewer to the store - and the rest of your playable is unreachable. Mid-scene: a plain Button. CTA Button only when there is no End Card.

One more structural thing. The first scene in this list is where the ad opens, so reordering is not cosmetic - drag a different scene to the top and you have changed what the viewer sees first. Check every scene in both orientations before you finish. Objects hold their own position per orientation, and it is easy to lay out scene one carefully and never look at scene three sideways. Then walk the whole thing with Play - every branch, not just the one you built last. A dead button on the path you did not test is a dead ad for the people who take it. Three to avoid. A CTA Button used mid-scene - that one is worth checking your project for right now. A scene nothing navigates to. It costs file size, it ships, and no viewer will ever see it. And building a screen per combination when a variable would have done it. If your scene list is growing faster than your ideas, that is the sign.

Try the smallest useful version: two scenes, one question, and an end card that names what they chose. That is a complete playable, and it is about ten minutes' work.

Part three: backgrounds, images and shapes. Pictures and assets, masks, and effects.

Every scene has one Background, at the bottom of the list, locked, so a stray click can't move it. Select it from the list.

Background Type. Color is one flat colour - pick it here. Image uses a picture. Click to choose or upload, and it covers the whole screen.

Size and Position work like the Image object: Cover fills and crops, and Position picks what you keep. The Image video goes through each one. Behind text, a busy photo needs help. Darken, about forty-five percent, and a little blur - and the headline reads. Switch to Color, and the picture isn't thrown away. Switch back, and it's still there. Each orientation can have its own picture, too - that's the Orientation video. Now the phone. Your design is sixteen by nine, and most phones are taller. The ad fits your design, and the background fills the rest, softly blurred - no bars, nothing cut. And for more: a moving background is Parallax. A panel under text is a Glass shape. A video background lives in the video editor. Each one has its own video. Three mistakes to avoid. One: text straight on a busy photo. Darken it, or put a glass panel under the words. Two: the subject at the edge of the photo. Cover crops to fill, so keep what matters in the middle. Three: a huge photo. It ships inside the ad - about a thousand pixels tall is plenty.

Add New Object, Image. It arrives as an empty box. Click it to choose a picture, or upload your own.

The first picture sizes the box to fit, and centres it. I'll put it in the card.

Object Fit decides how the picture meets its box. Contain shows all of it, with empty bands. Cover fills the box and crops the rest. Fill stretches it - almost never what you want. With Cover, Picture Position picks which part you keep. Top keeps the windows. Bottom keeps the sofa and the floor. Back to the centre. Tint colours the picture - white leaves it untouched, a pale warm tone makes it golden hour. Then a border, three pixels, in white. Border Radius rounds the corners. And Blur and Darken are for a photo behind text - reset them when you don't need them. Below: opacity, rotation, scale and blend mode. And in the FX tab, a drop shadow lifts the card off the page.

Change Image keeps your box. The new picture drops into the same frame, with the same fit. The two buttons use the Swap Image action - the Events video covers it. Press Play.

Living room. Kitchen. The frame, the tint and the shadow stay; only the picture changes.

Three mistakes to avoid. One: a huge photo. The picture ships inside the ad - a thousand pixels is plenty, and compress it first. Two: Fill on a photo. It stretches to the box. Use Cover, and choose the position. Three: corners on a cut-out. A transparent PNG has no corners to round - put a shape behind it instead.

What makes an ad heavy is almost always pictures. This background came straight from a camera: eighteen hundred pixels wide, over two megabytes. The sweater is a one-megabyte PNG. Open Export and tick your network. The window weighs the whole ad against that network's limit: three point nine megabytes, and Facebook's cap is two. Export stays blocked until it fits. Compress assets lists every file in the ad, with its size. Press Compress: each picture is re-encoded as WebP, at a size a phone can actually show. Ninety percent off the sweater, seventy-seven off the background - two point seven megabytes saved. Anything that would come out bigger is left exactly as it is. Continue to export: the warning is gone, and the canvas looks the same as before.

Add New Object, Image, and click to choose. Beside Upload your own, there's a built-in library: logos, backgrounds, buttons, hands, sprites, game icons and UI elements.

Hands, for a tap hint. Pick one, it lands sized to fit, and I set it beside the button. A picture you add later is weighed like the rest - compress again before you export. Three mistakes to avoid. One: pictures straight from a camera. A phone shows about a thousand pixels - anything more is weight. Two: PNG for photos. Keep PNG for cut-outs that need transparency; photos compress far better as JPEG or WebP. Three: checking the size at the very end. Open the export window as you build, and you'll never rebuild an ad to fit.

Add New Object, Shape. It arrives as a small square. I'll make it wider, so you can see the difference in a moment. Shape Type picks the outline. Circle, ellipse, triangle, star. A circle stays round whatever the box - ellipse fills it. A star has Points. Eight makes a sale burst. Fill Color paints it. Stroke Color and Stroke Width draw an outline - zero means none. I'll put the badge behind its label, and add two plain rectangles: a panel behind the text, and a plate behind the button.

Corner Radius rounds a rectangle. It stops at half the shorter side, so a big number makes a pill. Now Surface. Flat is one colour. 3D Lit adds a darker lip underneath, a soft gloss and an edge - a button you want to press. Depth sets the lip, as a share of the height. Deep for a chunky game button, shallow for a subtle one.

Glass is for a panel over a photo: a see-through face and a light rim. The photo shows through, and the text is readable again. A shape takes everything else too: opacity, blend mode, the FX tab, animations and events. The plate carries the tap. Press Play.

Book now, and the End Card - whose button is the same lit shape.

Three mistakes to avoid. One: a picture for a plain button. A shape costs a few bytes and stays sharp at any size. Two: flat text straight on a busy photo. Put a glass panel under it. Three: a circle in a wide box, expecting an oval. Circle uses the shorter side - pick Ellipse.

A Mask draws nothing. It is a shape that decides what you can see of the objects it covers, and that is its whole job. Add one and the canvas looks unchanged until something is underneath it.

This card's glint is an ordinary shape. What keeps it inside the card is a mask.

Turn the mask off and the glint runs straight over the edge, across the background, past the chip. That is the difference a mask makes, and it is the only honest way to see one: not by reading the panel, but by watching what the viewer sees change.

A mask gets its shape from one of three places, and this is the first choice you make. A built-in shape, a picture you upload, or a custom outline you trace point by point.

Rect, Circle, Oval, Tri, Star - and a Corner Radius. The radius is worth a moment. It is the difference between a photo in a box and a photo that looks like it belongs in your app, and it costs one number. Now the question people get wrong: WHICH objects does it cut? Applies To answers it three ways. Objects below it is the default, and it is the one to reach for. The mask cuts everything under it in the layer list, exactly like a clipping layer in Photoshop or Adobe Animate. Every object in the scene ignores the layer order entirely - useful for a vignette or a viewport that the whole ad sits inside. And Only the ones I choose gives you a checkbox per object. That is what this card's glint uses: one mask, one target, nothing else affected. An object belongs to exactly ONE mask. The nearest one claims it.

Invert: everything OUTSIDE the shape survives. That is how you cut a real notch out of a panel, or a keyhole a product shows through, without painting a fake hole in your artwork and hoping the background never changes.

Feather softens the edge. Zero is a hard cut; wind it up and the mask fades out instead of stopping. Feather allocates a texture PER TARGET. Use it where it shows.

Now the second source: a picture. Upload any image and its shape becomes the cut - a logo, a brush stroke, a torn paper edge, anything you can draw. Reads: Alpha or Luminance. This one matters. Alpha uses the transparency in your file. That is what you want for the commonest mask asset there is - a black cut-out on a transparent background. On Luminance, a BLACK cut-out reveals nothing. Black means hide.

Luminance is for when you actually want brightness to drive it - a greyscale gradient that fades a photo out, or a cloudy texture that dissolves one layer into another. And because it is a picture, it fits its box the same way every other image does: cover, contain, stretch, or actual size, with a position to match. The third source is the one I like most. Custom lets you trace the outline yourself, point by point. Convert to editable points: every corner becomes a handle. Drag a handle to move that point. Click anywhere on the outline itself to insert a new point into that edge - so you add detail exactly where you need it, rather than starting with fifty points and tidying up. And hold Alt and click a point to delete it. Three is the floor, because two points do not enclose anything. Smooth rounds the outline into curves - and the box grows to follow the CURVE. Points are stored as FRACTIONS of the box - so one outline serves both orientations.

Now the reason masks are worth learning at all. A mask is an ordinary object, so it can be animated - and when it moves, the cut moves. Move a rectangle: a wipe. Grow a circle: an iris. And because every target is cut by the same mask object, animating that one mask moves all of them together. One animation, however many layers it is revealing. Check both orientations before you finish. The outline carries over, but the box it lives in has its own size in each - so a mask that frames your product in portrait can be cropping it in landscape.

And test it with Play. A mask is invisible by definition, so every way of getting it wrong is invisible too - the panel will look completely correct either way.

Three mistakes to avoid. A picture mask reading Luminance when your file is a black cut-out - that is the blank screen, and it is the one that catches everyone. Feather on everything. It is the only setting here that costs you a texture per target, and on a mid-range phone that adds up. And expecting an object to be cut by two masks at once. It will not be - the nearest one claims it, and the other is silently ignored.

Try the iris. Put a circle mask over your product, animate it from nothing to full size, and you have the reveal every prize ad in the store is built on. Select the title, and open the FX tab. Every effect is a module: tick it to switch it on, then click its name to open its settings. Outline draws an edge around the letters. A deep purple, four pixels thick. Now tick Glow as well. The two stack: the outline, then a golden glow around both. The trophy gets a paler, wider glow, so it reads as light coming off the gold.

The light behind it is just an ellipse. Blur it, twenty-four pixels. Then, in the General tab, Blend Mode Add, and a little less opacity - and it becomes light. For the locked reward: Color Adjust, and Grayscale, a touch darker. Grey reads as not yet, in every game. There are twenty-five effects in all - bevel, glitch, shockwave, god rays, reflection and more. The drop shadow is in the Image video.

A few effects on each object, and the card looks finished. Three mistakes to avoid. One: stacking too many. Every effect is work for the phone - two or three on an object, not ten. Two: effects on small text. A glow on body copy just blurs it. Save them for headlines. Three: an effect that fights the message. A glitch on a price reads as broken.

Part four: text and fonts. Every text setting, your own fonts, kinetic text, and translating an ad.

This end card is just three text objects, and it switches to French, Japanese and Arabic. Here's every text setting that built it. Text carries the headline, the price and the small print of almost every playable ad, and every setting here is on every plan. I've started a blank project with a dark background. Click Add New Object, then Text.

A new text box starts narrow, so set its width first. 300, and the words wrap where you want. Now type your headline into Text Content. The canvas updates as you type. Choose a Font Family. Impact is bold and condensed, made for headlines. Set the Font Size. Below 8, it snaps back to 8 when you leave the field. For a font you upload, Font Weight only lists the weights that font really has. Pick a Text Color. Then Text Transform makes it uppercase, and what you typed stays as it is. Letter Spacing opens the letters up, and Line Height pulls the two lines closer together. Text Align sets the side. In Arabic, left and right swap on their own. For contrast, Stroke Width and Stroke Color outline every letter, and Drop Shadow is on the FX tab.

Next, the price. A second text, width first again, 44 px, bold.

A price shouldn't break onto two lines, so switch Word Wrap off. Now the box grows sideways instead. Last, the small print. With Word Wrap on, it wraps inside its width, and the box grows taller by itself. That's auto-height.

Text Overflow decides what happens when the words don't fit. Ellipsis keeps the box and ends in three dots. Clip keeps it too, and cuts the text at the edge. Visible, the default, lets the box grow. Text can also react while the ad runs. Put a variable in curly braces, and it shows a live value, like a score. And on the Events tab, a Set Text action rewrites a text when something happens. The Variables and Events videos build both.

Now switch to landscape. Every text keeps its own position here, and its own font size, spacing and line height. Portrait sizes don't carry over. So I'll give the headline 44 for the shorter screen, and place the other two.

Next, languages. Open Localization, add French, Japanese and Arabic, and paste each translation, or import a CSV from your translator.

Then flip languages from the top bar. The French price stays on one line, because Word Wrap is off. Look at the Japanese: Impact has no Japanese letters, so the device draws them in its own font. That's normal, just check it looks right. And Arabic reads right to left, with every letter joined. Letter spacing is skipped for Arabic, so the letters still connect.

Last touch: on the Animate tab, Letter Bounce brings the headline in, letter by letter.

Now press Play to test it like a player. Here comes the bounce.

Three mistakes to avoid. One: typing before you set the width, so your words wrap too early. Two: Ellipsis on words people need, like a price or the terms.

Three: a display font missing a character, like an arrow. The device fills it in with its own font, so preview every language before you export.

Select a text, open Font Family, and the last option is Upload a font.

Drop a font file in - woff2, woff, TTF or OTF. It's read straight away: this one has five weights, three hundred to seven hundred, and every character it can draw. Close the dialog, and your font sits at the top of the list, under Project fonts. Pick it. Font Weight now offers only the weights the file really has. Anything else, the browser would fake - smeared, not bold. Seven hundred for the headline. Now the subline. It has an arrow, and this font doesn't. Open Manage fonts: the warning names the character - it would be drawn by whatever font each phone falls back to. And the cost: three hundred and fifty kilobytes uploaded, under eight in the export. Only the characters your ad draws are kept.

No font of your own? The Game fonts - Montserrat, Poppins and Lilita One - are built in, and cut down the same way. Three mistakes to avoid. One: a font you can't use in ads. Upload only fonts licensed for embedding. Two: renaming a family after you've used it. Text set to the old name falls back - rename first, or set the text again. Three: symbols. Arrows, stars and ticks are missing from most display fonts - read the warning, and swap them for words or an image.

The Animations video covered entrances, loops and exits for any object. This is the extra set only text gets. Select a text, open Animate, and look for Kinetic Text. There are six ways in, and one loop. Letter Bounce grows each letter up from the line. Letter Wave rises them into place. Typewriter makes them appear, one after another. Flip In turns them, Drop In drops them with a spring, and Scramble brings them in out of order.

Wave Loop is different: it never finishes. The letters keep rolling for as long as the scene is on screen - so it lives with the idle loops.

Four numbers tune it. Stagger is the gap between one letter starting and the next. Push it up, and the word unrolls slowly.

Per-character duration is how long each single letter takes to land. And start delay holds the whole line back - handy when a headline should arrive after its background.

Easing is the feel of each letter's move. Back overshoots and settles, elastic springs, linear just goes. Change it, and the same preset reads completely differently. Now switch the preview to Arabic. The headline doesn't animate letter by letter - it's drawn as one line. Arabic letters join to their neighbours, and pulled apart they'd come out unjoined and in the wrong order. So the line stays whole on purpose. The same goes for Hindi and the other Indic scripts. Japanese, Chinese and Korean draw correctly one character at a time, so they animate just like English. Thai does too on a modern phone, and falls back to a whole line on an old one.

Three mistakes to avoid. One: a long stagger on a long line. Twenty letters at eighty milliseconds is over a second and a half before the last one lands. Two: Wave Loop on anything people need to read. Motion that never stops pulls the eye - save it for one short word. Three: judging it only in English. Preview every language you ship - the Arabic headline won't animate letter by letter, and it's better to see that now than in a review.

Add New Object, Scrolling Text. It starts scrolling straight away. I'll stretch it across the bottom of the screen.

Text Content is one short phrase, and it repeats forever. Three or four ideas, no more. Background puts a band behind it. None takes the band away again. Yellow - and the text goes black, so it reads. Direction: left is the classic ticker. Right runs the other way - that's the one at the top. Up and down scroll a column, for a tall box. Speed is pixels per second. Two hundred is hard to read. Around eighty, anyone can. Gap Between Repeats is the space before the phrase comes round again, and Separator is what sits in it - a dot, a star, anything. The rest is type, like any text: font, weight, case, letter spacing - and a stroke, if it sits straight on a photo. Translations work too; the Localization video shows how. Press Play, and the button takes the tap as usual.

Shop the drop - and the End Card has a ticker of its own.

Three mistakes to avoid. One: too fast. If you can't read it in one pass, nobody will. Two: a paragraph. A ticker carries one short phrase - the rest belongs on the screen. Three: a ticker across the thing you want tapped. Keep it at an edge.

The Export video covered what happens at export: one file that picks the viewer's language, one file per language, or English only. This one is about getting the words in. Open Localization from the top bar. Every text and every button in the project is a row, whatever scene it's on. Add a language, and it becomes a column. I'll add French, and Arabic. Type each translation into its cell. A cell you leave empty shows the English in grey - and that's exactly what the ad will show in that language: the English, not a blank.

Close the panel and pick a language in the top bar to see the canvas in it. French first. Now Arabic. The headline was aligned left - and in Arabic it moves to the right edge, because that's where an Arabic reader starts. Centred text stays centred, and nothing else moves.

Most translations come from a translator, not from you. Export CSV gives them a spreadsheet: a row per text, with its object ID, the English, and a column for every language you have. Template does the same with all seventeen languages as empty columns, for when you're asking for everything at once. When it comes back, Import CSV. This file has a German column the project didn't have - so German is switched on for you, filled in. And this is why you check every language on the canvas. Sommerschlussverkauf is one word, it doesn't fit, and it runs straight into the line underneath. Shorten it, or give the box more room. Three mistakes to avoid. One: an empty cell in an imported file doesn't mean skip - it clears that translation. Send back only the columns you mean to change. Two: checking only the language you typed. German often runs a third longer than English, and it's the one that breaks the layout. Three: fixing right-to-left by moving things. Only alignment flips, on purpose. If a design needs mirroring, that's a layout decision you make yourself.

Part five: buttons, sound and moving pictures. Buttons, audio, sprite animations, parallax, timers and progress bars.

This ad has two buttons. Tap Next, and it moves on to the End Card. Tap the button on the End Card, and the store opens. They look alike, but they do different jobs. Let's build both, and see which button goes where.

I started this project from scratch: a level-complete screen that needs a way forward. Its buttons and events are editable on any plan. Click Add New Object. Here are the button types. Button is your own picture. Button with Text is a label on a coloured plate. CTA Button and CTA Button with Text look the same, but a tap on one always goes to the store. I'll add a Button with Text. It lands in the middle, so I'll move it below the headline. Type the label into Button Text. Then pick a Background Color, and a Text Color for the words. The label has its own Font Size, Font Family and Font Weight. It's always one line, centred on the plate. Border Radius rounds the corners. 28 on a 56 px button makes a pill. Outline, Drop Shadow and Glow are on the FX tab. A soft glow helps it stand out.

Now the screen it leads to. Add New Object, Add End Card, and pick a design. I'll take Reward Reveal.

Its big button is a plain Button made from a picture. Change Image swaps in new art.

Here's the rule that matters most: every button on an End Card already opens the store. There's nothing to wire. It uses the store links you paste in Export. An ad gets one exit: an End Card, or a CTA Button. This one has an End Card, so the CTA cards are greyed out.

So a CTA Button is for an ad with no End Card at all. It has no Events tab, and it goes to the store wherever it sits.

Back on Scene 1, the Next button needs a job. Select it, open the Events tab, and add a Tap.

Choose Go to Scene, and pick the End Card. A plain button can run any action here, like showing, hiding or changing text. What it can't do is open a web page: the click-through is the End Card's job. In the Video Playable Maker, a button inside a video break gets one more menu: resume the video, jump to a time, or open the CTA link.

In landscape, the button keeps its own position, and its label its own font size, just like text. So I place it, and size the label for this screen.

The End Card came already translated. So open Localization, and give the Next label its words in each language.

Preview German. The label is wider than the button, so it's cut at both ends. Text Overflow, Ellipsis, trims it to fit. Shorter words are even better.

Now press Play, and tap Next. There's the End Card.

Tap its button, and nothing happens: the editor has no store to open. In the exported ad, that same tap opens your store page.

Three mistakes to avoid. One: a CTA Button as a Next button. In Play it does nothing, but in the real ad it leaves for the store, and the rest of your ad is never seen.

Two: words painted into a button picture. Localization translates text, not pictures, so every language sees the same words. For a label that translates, use Button with Text.

Three: an End Card and a CTA Button in one project. The editor won't add both, but an older project can have them. The build check warns you: two click-throughs.

Add New Object, Audio. It's invisible on the canvas - it lives in the list. Choose a sound from the library, or upload your own.

Autoplay starts it with the scene. Loop repeats it - right for music, wrong for a sound effect. Volume sets its level: half, so it sits under everything else. The player here lets you hear it without pressing Play.

For the coin, a second audio object with Autoplay off, so it waits. The Spin button's event uses Control Audio: play that sound. Pause works the same way. Press Play, and listen. The music - then Spin, and the coin.

Now the rules, which the export handles for you. No sound before the viewer's first tap - networks reject ads that play one. An iPhone on silent stays silent. And the sound stops when the screen locks. Three mistakes to avoid. One: a whole song. It ships inside the ad - a thirty-second loop is plenty. Two: sound as the only feedback. Many people watch muted, so every sound needs something to see, too. Three: music louder than the effects. Keep the music low, so a tap is heard.

Add New Object, Animated Sprite. Choose Sprite Sheet, and upload one: every frame of the animation in a single grid picture.

Columns and Rows say how the picture is cut. This sheet is four by four - sixteen frames. Cut it two by two, and every frame is a quarter of the sheet. Back to four. Speed is frames per second. Twenty-four spins it fast; five is a slow turn. I'll settle on fourteen.

Start frame and End frame play part of the sheet. Zero to seven is half a turn. Ping-pong plays it forward, then back, so half a turn becomes a rock. Reversed turns it the other way.

Loop repeats it forever. Turn it off and it plays once. Loop count plays it a set number of times, and On complete decides what stays on screen - here, the last frame.

Fit mode matters when the box isn't the frame's shape. Stretch squashes it. Contain keeps its shape. Cover fills the box and crops.

For the ad, the chest waits: Auto play is off, and it turns once. The Spin button uses the Control Animated Sprite action - Play, Pause or Restart. And the chest has its own event: Animation Complete. When the turn ends, it goes to the End Card. Press Play, and try it the way a viewer would.

Spin. One turn, and the End Card opens - with its own spinning coins.

Three mistakes to avoid. One: a huge sheet. Every frame ships inside the ad - a couple of hundred pixels a frame is plenty. Two: the wrong grid. If the animation jumps, or shows slices of its neighbours, check Columns and Rows. Three: Stretch in a box that isn't the frame's shape. Use Contain.

Add New Object, Parallax BG. It arrives as a band across the canvas. Upload tile image: one picture, repeated in every direction.

The box decides where it shows. I'll make it as tall as the mountains, and put it on the horizon. Auto scroll moves it on its own, and the arrows pick a direction: right, up, diagonal. Back to left - the way the car drives.

Speed X and Speed Y are pixels per second. Two hundred races past. Twenty-two is a slow, distant drift. Tile Scale sizes the picture inside the box. At a half, the range is smaller, and further away. Back to one. Now the trick. Parallax is several layers, and the further away, the slower: stars, clouds, mountains, hills - and the road, fastest of all. That difference is the depth.

Fullscreen On covers the whole canvas, in both orientations, and locks it like a background. Off, it's an ordinary box again. And like any object, a layer takes opacity and blend mode. Clouds at half, so the stars show through. Press Play, and take it for a drive.

Start driving, and the End Card - over the same starry sky.

Three mistakes to avoid. One: a tile whose edges don't match. The seam scrolls past, over and over - make the left and right edges meet. Two: every layer at the same speed. That's just a moving picture. The difference is the depth. Three: a huge tile. It repeats, so a few hundred pixels is plenty - and it ships inside the ad.

Add New Object, Timer. It reads thirty seconds, and it only ever counts down. Duration is in seconds. I'll use ninety for a moment, to show the formats. Minutes and seconds. Just the seconds. Hours, minutes and seconds, for a long sale. And one minute thirty, for a friendly look.

For this ad, ten seconds is plenty. Back to minutes and seconds. It's text, so size, colour and weight work as you'd expect. Background plate gives it a panel, with its own colour and rounded corners. Notice it isn't moving. A timer holds at full while you edit - it only runs when you press Play, or in the ad. The timer has its own triggers, on its Events tab: At Second, and Timer End. At Second counts what's LEFT. At three seconds left, set the headline's text to Last chance.

And at Timer End, go to the End Card.

Press Play.

Ten, nine... at three, the headline changes. And at zero, the End Card.

In the ad, a timer starts when its scene starts. Put one on an End Card, and it starts when the End Card appears - not when the ad loads.

Three mistakes to avoid. One: At Second is time left, not time passed. Three means three seconds before the end. Two: digits typed into a text never move. If it says it's counting, use a Timer. Three: judging it in the editor. It only ticks, and its rules only fire, in Play or in the ad.

Add New Object, Progress. It arrives as a bar that fills itself over ten seconds - because its Source is Time.

There are six styles. Bar. Ring. Arc, for a gauge. Steps. Pie. And Liquid.

Rings, arcs and pies are drawn from the shorter side of the box, so give them a square one. I'll keep the ring, and make it thicker. The fill can be one colour, a gradient, or thresholds that change colour as it fills. There's the track behind it, too. The label reads a percent by default. It can also be a fraction, a value, a step count, time left, or your own template. Source decides what fills it. Time fills it on its own. Variable follows a number - the Follow the Path video drives one from a drag. And Set by Events is for your buttons. Set by Events, starting at zero. Now the button. On Tap, add Set Progress: this progress, Add, twenty. That's in its own units, zero to a hundred here - not a percent of anything else. The ring has triggers of its own. Progress Milestone fires at a marker: at fifty, change the headline.

And Progress Complete goes to the End Card.

Press Play, and charge it.

Twenty at a time. Past halfway, the headline changes. Full - and the End Card.

Three mistakes to avoid. One: Set Progress with a Time or Variable source. That source keeps writing the value, so your action is overwritten. Two: percent thinking. Set Progress and the markers use the bar's own Min and Max. With a max of five, add one, not twenty. Three: a ring in a wide box. It's drawn from the shorter side, so a wide, short box gives you a tiny ring.

Part six: motion. Animations, scene transitions, moving along a path, and particle effects.

This screen builds itself in. The badge pops, the headline rides up, the small line follows it, and the button keeps breathing until you tap it. That is the Animate tab, and none of it is code. Let's build the whole thing from a screen with no movement at all. Every object gets three slots: how it arrives, what it does while it waits, and how it leaves. Entry, Idle and Exit.

I started this project from scratch. Select an object, open the Animate tab, and there they are. Seven ways in. Six idle loops. Six ways out. A text object gets an extra set that animates letter by letter, and that one has its own video. The headline gets Slide Up. It starts below where it belongs and rides up into place. As soon as a preset is on, its card appears at the top. Duration is how long the move takes. Delay is how long it waits before starting. Easing is the character of the move. Ease Out arrives quickly and settles. Back Out goes past its place and comes back. And on the Curve tab you can draw your own.

Delay is what turns separate animations into a sequence. The small line waits 400 ms, so it follows the headline instead of racing it. The badge gets Pop In. It scales up from nothing, overshoots a little, and settles.

Now the button. I'll give it Fade In, and then click Pulse, the idle loop. Watch the counter: still one animation. Pulse replaced the fade. Clicking a preset clears the whole entry block and writes its own. So the last preset you click is the only one you get. To keep both, use the tabs beside Presets. The fade lives on Transparency, so I build the pulse on Scale myself: 1. 12, Loop, and Yoyo to send it back. Two animations active, and they run together. Exits are different. They always stack. Fade Out on the badge, and now it has an entrance and an exit. Delay here is when the exit starts, counted from the moment the screen appears. Two seconds by default, not two seconds after the entrance. And every screen starts its own clock. The first scene starts when the ad loads. A later scene starts when its transition finishes. A break overlay starts when the break opens. An end card starts when it is shown.

One animation serves both orientations. There is no separate landscape version, so check landscape too: the same distance travels across a screen of a different shape.

While you build, the object you have selected previews itself, so you can judge a curve without leaving the panel. Everything else waits. Press Play and the whole screen runs together, the way a viewer will see it.

Two mistakes to avoid. One: an object you hide with the eye in the layers list is never built into the ad at all, so nothing can animate it. Leave it visible, and gate it with Show If instead. Two: an entrance on something that appears later. Delays are measured from the moment the screen starts, so by the time your object is revealed, its entrance has already been and gone. Give it an idle loop, or nothing.

A transition belongs to the scene you arrive at. On the scene's row, press the transition button. Four types. Crossfade dissolves one into the other. Wipe slides the old scene off, in the direction you pick. Zoom Blur pushes through it. Pixelate breaks it into blocks. Arriving at Sunday: Zoom Blur, six hundred milliseconds. Arriving at the End Card: a Wipe, up, half a second. The duration runs from a tenth of a second to two. Around half a second feels quick; past a second, people wait. And one set on the first scene plays as the ad opens - an entrance for the whole ad. Press Play, and go through it.

Saturday - Next. Zoom. Sunday - Next. And the wipe.

Three mistakes to avoid. One: too slow. Past a second, a transition is a wait. Two: a different type on every scene. Pick one or two, and let them become the ad's rhythm. Three: a transition doing an animation's job. To move one thing, animate it - a transition moves the whole screen.

Drag the train, and it only moves along the line. Get it to the end of the line, and the ticket prints. That's Follow the Path - built from scratch, every option, and a landscape route. No code. Follow the Path is a drag with a route. The viewer's finger has to travel along a line you draw, and when it gets far enough, your actions run.

It's also how you make a swipe. There's no separate swipe trigger - a straight path with two points is a swipe. I started this project from scratch, so its events are editable on any plan. There's a gem, a chest to bring it to, a headline, and an empty progress bar we'll wire up later. Select the gem, open Events, and pick Follow the Path.

It says no route yet, so nothing can fire. The quickest start is a preset: a line in any of four directions, an arc, or a circle, each one sized to the object. Arc. The route starts at the centre of the gem and curves over, straight into the chest. The ring is where it fires: 90%, because people stop a few pixels short. Now, what happens when they get there. Add action, Set Text, the headline, and the new words. Press Play, and drag the gem along the route.

It rides the line, and the moment it passes the ring, the headline changes.

Stay within: how far off the route a finger still counts. 60 px is about a thumb. Fires at moves the ring. Fifty, and the reward comes halfway. I'll put it back to ninety. The object follows the path is on by default, which is why the gem rides the route. Turn it off, and the finger traces the line while the object stays where it is - right for drawing a signature, or a scratch stroke.

Show the path to the viewer draws the line in the ad. Turn it off for a hidden route - a secret gesture. A line says WHERE. A hand says HOW.

Progress writes 0 to 1 into a variable as the drag advances. Play, drag slowly, and the bar fills with the gem.

Now switch to landscape. The gem has moved, but the route hasn't followed it. Landscape has no route of its own yet, so it borrows portrait's - turned on its side. So draw one. Clear it, press Custom, and click the canvas point by point, from the gem to the chest. You can drag any point to move it. Then Done. Play it in landscape, and it's the route you drew. Portrait still has its arc.

Three mistakes to avoid. One: firing at a hundred percent. People stop just short, nothing happens, and they decide your ad is broken. Two: a corridor thinner than a thumb. Start at sixty and tighten it only on purpose. Three: forgetting landscape. Without its own route, the path is portrait's turned sideways, and it lands somewhere your object isn't.

That's Follow the Path. Want a reveal waiting at the end of the route? Tap the crate, and the reward lands in a burst of confetti. That burst is one object, with no code behind it at all. This is Particle FX. We are going through the entire panel — every module, every field — the presets, the emitter, colour, size, physics, trails and glow, and how to fire a burst on a tap. A Particle FX is an object like any other. Add New Object, Particle FX, and it lands on the canvas as an emitter: a box that throws particles.

And it runs while you build. Particles are the one thing on this canvas that never waits for Play, so what you are looking at is what the viewer gets. Start from a preset. There are 29 of them, from confetti and fire to snow, sparks, portals and gold rain. One click fills in every setting underneath. Change any of them afterwards and the chip moves to Custom, because a preset is a starting point, never a lock.

The Emitter decides where particles are born. Six shapes: a Point, a Rect that fills the whole box, a Circle, a Cone, an Edge, or a Ring with a radius you set. The last three bring their own control with them. A Cone has a half-angle, for a jet. An Edge has a length, which is how rain falls across the whole top of a screen. And a Ring has a radius, which is where a portal or a shockwave starts.

Emission rate is simply how many are born every second. Turn it up and the screen fills; turn it down and you get a trickle. That is the difference between a snowstorm and a few lazy flakes. One thing to expect while you work: a change only applies to particles born after it. The ones already in the air live out their lifetime with the old settings, so give the canvas a second or two to catch up. Max particles is the ceiling, and the ceiling wins. Drop it, and the cloud thins out however high the rate is — that is your performance budget, in one number. Or tick Burst mode instead, and the whole lot arrives at once. Two smaller ones finish the module. Start delay holds the emitter back before it begins. And Simulation space decides what happens when the emitter itself moves: on Local the particles travel with it, on World they stay where they were born.

Emission Curve shapes that flow over time. Constant is a steady stream. Sine swings between nothing and double. Ramp Up climbs to the full rate, Ramp Down falls away to nothing, and Burst Wave fires a hard pulse at the top of every period.

Underneath it is Loop. Leave it on and the emitter runs for as long as the ad does. Switch it off and you get a Duration instead, with a Stop action: fade out quietly, or destroy the object when it is done. And Prewarm runs the simulation before anyone sees it, so snow is already falling when the screen opens instead of starting from an empty sky.

Then the particle itself: a Circle, a Square, a Star, or your own image. Tell it how many columns and rows that image has and it is treated as a sprite sheet, playing across the particle’s life.

Four colour modes. Solid. Gradient, from birth to death. Random, out of a pool you fill. And Multi-Stop, where you place each colour and its alpha yourself.

Blend mode is what makes fire look hot. On Add, overlapping particles get brighter instead of just covering each other. There is Multiply to darken, and Screen to lighten.

Size runs from birth to death, in pixels, along a curve — Linear, Ease In, Ease Out, Pop, Bounce or Pulse. Watch what a bigger birth size does here: the same emitter suddenly reads. The curve in between is the character. Linear is a steady shrink. Pop snaps up and then away, which is the one for an impact. And Pulse breathes the whole way down. Alpha does the same for opacity, one value at birth and one at death. Fading to nothing is what stops particles popping out of existence.

Lifetime is a range in seconds, not a single number, so they do not all die together.

Short lifetimes keep everything close to the emitter — a tight sparkle at the point of impact. Long ones let particles cross the whole screen, which is what snow and falling leaves need.

Velocity is a speed range and an angle range, and the little dial shows you the arc they will fire into. 0° is right, 90° is down, 270° is up. A narrow arc is a jet, or a fountain. Open it all the way to 360°, and the same emitter throws in every direction, which is an explosion. Two more live in there. Velocity stretch elongates fast particles along the way they are travelling — that is what turns a dot into a raindrop. And Orbital velocity curls them around the emitter instead of letting them fly straight.

Now the physics. Gravity pulls, sideways as well as down, and a fountain becomes a fall. Air drag slows everything, and a very little of it goes a long way.

Force over lifetime is the subtle one. It ramps from nothing at birth to full at death, so particles gather a drift just as they are fading out.

Rotation is a spin range in degrees per second. Give it a negative minimum and a positive maximum and the pieces tumble both ways, which is most of what makes confetti look like confetti.

Turbulence is a noise field they drift through. Strength is how hard it pushes, Scale sizes the swirls — smaller makes them bigger — and Speed is how fast the field itself moves.

An Attractor pulls everything towards a point, or repels it. You pick the mode, the target’s X and Y on the canvas, a strength, and a radius — outside that radius nothing feels it. That is how a vortex or a portal is made.

Cursor Attraction is the same idea, except the point is the finger. It has its own strength and radius. Drag across the ad, and the particles come with you.

Trails draw the path behind each particle — a length in segments, a width in pixels, and a fade towards the tail you can switch off if you want a solid ribbon.

And Glow is a blurred copy drawn behind them, at a strength you choose. Together with Add, that is what turns a dot into a spark. The last module is the Sub-Emitter: when a particle dies, it spawns a little burst of its own. Count, shape, colour, size, speed and lifetime. That is a firework, in one checkbox.

So: a burst on a tap. A burst fires when its screen is built. So put the emitter on the screen the tap goes to — the crate runs Go to Scene, the reward screen builds, and the confetti goes off with it. What does not work is hiding a burst and revealing it. A hidden emitter still runs: it bursts behind the hidden layer and it is over before you show it. When something has to react in place, use a looping emitter and gate it with Show If.

A burst can also tell you when it has finished. In the Events tab, a Particle FX has exactly one trigger: Burst Complete.

Press Play and take the whole thing from the top. Tap the crate, and there it is again.

One thing to keep an eye on. Max particles is a budget, not a target — every preset here sits between 60 and 400, and a looping emitter keeps working for as long as the ad is open.

Part seven: logic and inputs. Events, variables, calculations, and the controls a player can use.

An event is a rule: when something happens to an object, do these things. The something is the trigger. The things are the actions. I started this project from scratch, so I can edit its events on any plan. Editing the events of a prebuilt template needs the Agency plan. On the canvas there's a chest, a headline, a hint and a button. And a badge is waiting just off the right edge. Select the chest, open the Events tab, and pick a trigger. I'll choose Tap.

That adds a rule. Every action inside it runs each time the chest is tapped. First action: Swap Image. Its target is Self, the chest itself, so I only choose the new picture: the open chest.

Next, Set Text. See the orange warning? Nothing happens until every field is filled in. That's the first thing to check when an event seems dead. I'll point it at the headline, and type the new words.

Move To slides the badge in. Pick the badge, then type where it should land. Half a second, easing out, is just right.

Last, Show / Hide Object. Target the hint, and choose Hide. Every object has the same triggers: Tap, Double Tap, Hold, Dropped On, for dropping it onto something, and Follow the Path, for swipes and drags along a route. Some objects bring their own. A timer fires Timer End or At Second, an animated sprite fires Animation Complete, and particles fire Burst Complete.

Now the finish. Add New Object, Add End Card, and pick a design. That's the screen that sends people to the store.

Back on Scene 1, select the button and add a Hold. Tick Progress ring, so people can see the hold filling up. Its action is Go to Scene, and the scene is the End Card. Events work the same in portrait and landscape, with two things to check. Move To has one position for both orientations, so preview landscape too. And once your ad has more than one language, Set Text gives you a box for each, so translate the new words too.

Now press Play, and try it. Tap the chest. Then hold the button. The ring fills up, and there's the End Card.

Three mistakes to avoid. One: a trigger can only navigate once. After Go to Scene, a second navigation is marked already used. Two: an object you hide with the eye icon is never created in the ad, so Show / Hide can't bring it back. Leave it visible, and use Show If Variable instead. That's the next video. Three: every button on an End Card already opens the store, so you don't need a CTA Button there. A CTA Button is for ads with no End Card at all.

A variable is a named value your ad remembers while it plays: a number, a piece of text, or true or false. Use one whenever the ad should react to what the player already did: a score, a choice, a reward they've earned. Variables belong to the whole project, so every scene can read them, the End Card included. They start fresh every time the ad is played.

Start a blank project in the Playable Ads Maker. Anything you build from scratch, variables included, works on every plan. Variables live in the toolbar. Click Variables, then Add variable. Name it stamps. That name is how you'll show the value later, so use letters, numbers and underscores. Keep the type as Number, and the starting value at 0. Text holds words, like a name the player picked. Boolean is a simple yes or no.

Now something to tap. I'll add an image and upload a coffee cup.

With the cup selected, open Events and add a Tap. Add an action and choose Set Variable. Pick stamps, choose Add, and type 1. A number can be set, added to, subtracted, multiplied, divided, or rolled at random. Text can be set or appended, and a Boolean can be set or toggled. Compute and Look Up write to variables too, and a progress bar can follow one. Each gets its own video later in this series. To show the count, add a text, and make its box wider before you type.

Click Insert Variable and pick stamps. It drops the name in, wrapped in curly brackets. Type the rest of the line. The canvas already shows the live value: 0 of 5. Now the reward: one more text. Free coffee unlocked.

Under Show If Variable, pick stamps, choose ≥ (greater than or equal to), and type 5. Press Escape to deselect it, and it's gone. Stamps is 0, so it stays hidden until the card is full. It's checked live, the moment the value changes. Last, stop the count at 5. On the cup's action, click Only run if a variable matches, and set stamps < 5. All of this works the same in portrait and landscape, and in every language: a translated text keeps its curly-bracket name, and the value fills in.

Time to test it. Press Play, and tap the cup.

Every tap adds one, and the text keeps up. At five, the reward appears. Tap again, and nothing changes. The condition holds it at 5.

Three mistakes to avoid. First, don't hide the reward with the eye in the layers list. An object hidden there doesn't exist while the ad plays, so no action can ever show it. Start it visible, and gate it with Show If. Second, give every variable a name. An unnamed one never appears in any list, so nothing can use it.

And third, make sure a condition can come true. Stamps stops at 5, so a rule waiting for more than 5 never runs. Want the finished version? The coffee loyalty template does all of this and more: a double-tap bonus, a happy hour, and a reward on its End Card. Remix it, and make it yours.

The Input Controls video already typed one formula - a price - on a slider's Value Changed. This one picks up where that stopped. The slider here is bound to bill, and nothing happens when it moves yet. Select the slider, open Events, Value Changed, add an action, and pick Compute. The result goes into savings. Now watch the line underneath while I type. A name that isn't a variable is flagged straight away - it would quietly read as zero. Leave a bracket open, and it tells you that too.

Close it, and the panel works it out with the starting values: 504. Under Operators and functions is everything a formula can use: min, max, round, floor, ceil, abs, square root, power, clamp, and if. payback = round(6000 / max({savings}, 1), 1) Order matters. Payback reads savings, so it sits underneath it: the actions run from the top down. Some answers aren't a formula at all - they're a table. Add a Look Up, write into kit, and look up the bill. Each tier is a range and a result. Forty to ninety-nine is the starter kit. A hundred to a hundred and ninety-nine, the home kit. Two hundred and up - leave the top blank - the whole-home kit.

Both ends are inclusive, a blank end is open, and if two ranges overlap, the first one wins. The last box is the fallback, for anything no tier catches. Last, how it prints: {savings|money} → 504. 00 · {savings|int} → 504 int · 1 · 2 · money · pct · compact Press Play and drag the bill up.

Savings, the kit and the payback all follow the slider - and at two hundred, the kit jumps to whole-home.

Three mistakes to avoid. One: a typo in a name. It reads as zero, so the formula still works - it's just wrong. Watch for that amber line. Two: gaps between tiers. 99. 5 is in neither 40–99 nor 100–199 — it falls to the fallback. Three: pct doesn't multiply by a hundred. Store sixty-four, not point six four, or you'll print one percent.

Each one asks the viewer a question. A Slider for an amount, a Stepper for a count, a Toggle for a yes or no. And each one writes its answer straight into a variable. The control doesn't own the value — the variable is the value. So the variables come first. Nights, guests, breakfast and total are declared already — that's the Variables video, linked below.

All three are in Add New Object. I will start with the Stepper.

Every new object lands in the middle of the canvas, so they arrive on top of each other. Place each one before you add the next: X, Y, Width and Height, at the top of the panel. Display Name is what the layers list calls it. Rename it now and you will still know which control is which, twenty layers later.

Show If Variable hides the whole control until a variable says otherwise. It stays put while you build, so you can still edit it — I will show you it disappearing in Play. Then the field that matters most, and it is the first one: Writes to. Pick the variable this control should write. Until you do, the panel says it plainly: nothing bound, so this control does nothing. It won't even move when dragged.

A Stepper and a Slider want a Number. A Toggle wants a Boolean — so each one only offers you the variables it can actually use. Then Range: Min, Max, Step, and the value it starts on. Nights runs from 1 to 7, a step of 1.

Starting value is where the conversation opens. Put it on the number most people would pick rather than on the minimum — two nights already on screen is an answer they only have to adjust. On a Stepper that range clamps rather than wraps: each tap moves by one Step and stops at the end.

On a Slider, Step matters more than it looks. Leave it at 0 and the slider slides continuously, so one drag gives you 97. 16 guests.

Set the step to 1, and it snaps to whole guests. Set it on anything a person would count.

Now the Stepper's own groups, in the order the panel lists them. Arrangement first. Layout puts the buttons either side of the read-out, both after it, both before it, or stacked above and below.

Button shape joins the keys to the field, or cuts them loose as pills, circles or squares, or drops the plate and leaves the bare glyph. Circles read as buttons on a busy screen, where a joined key can look like part of the picture.

Under it: Button size, Gap and Radius. A gap is what turns one shared pill into three separate objects — and a bigger key is a bigger touch target, which is the whole game on a phone.

Appearance is colour first: the Field behind the number, the Buttons, and the Glyphs on them. Three swatches are usually all it takes to make a control look like it belongs to your brand.

Then a Border with its own width, and the Dividers between the parts — a hairline divider is how a joined stepper still shows where the key ends and the number begins.

The glyphs themselves are yours. Any character can be the minus and the plus, at whatever Glyph size you give them — arrows for a browser, chevrons for a picker.

Value align puts the number in the centre, or hard left, or hard right. Left is for a read-out with a unit after it, so the number stays still while the word moves.

Decimals is how many places it prints. Nights are whole numbers; a weight or a rate wants one or two.

Inset is the breathing room around the number. Open it up and the read-out stops touching the keys, which matters most when the value is long.

Spent key opacity is worth keeping. At the minimum the minus fades, at the maximum the plus does, so a key that can no longer do anything stops looking live — set it to one for a stepper that never admits it has stopped.

Prefix and Suffix print around the number: a currency sign in front, the word nights after. And the read-out between them is deliberately inert, so a mis-tap in the centre changes nothing.

Last group, Text: the size, colour, weight and font of the number itself. This is the one that decides whether the control reads from a metre away.

The Toggle next. Its Range is a single sentence, because a toggle is on or off: it writes true or false to a Boolean, or one and zero if you bind it to a Number.

Style is the whole look. A Switch with a knob that slides, a Checkbox that ticks, a Segmented pair of labelled halves, or a Button that stays pressed. Segmented is two answers rather than a switch — pressing a half selects it.

A Checkbox and a Segmented pair draw their words beside the box, so give the object room. The whole width stays tappable, which is what makes a checkbox easy to hit with a thumb.

Beside Style, a switch chooses a round or square knob, and every other look uses that slot for its corner radius.

Then the colours: On, Off, and the knob. Off is the one you can see while you build; On is what the viewer gets for saying yes, so make it the colour your ad uses for yes.

Inset is how deep the knob sits in the track, and Radius squares the whole thing off — a switch at radius six stops being a phone switch and starts being yours.

A border, with its own colour, for a toggle sitting on a photograph where a flat pill would disappear.

Show ON / OFF text gives you the two labels — which on a Segmented toggle become the left and right halves instead — and any words will do: Yes and No, Add and Added, Monthly and Yearly.

And the Text group styles those words: size, colour, weight and font.

And the Slider, which has the longest panel of the three, for one good reason: a Slider is a Progress bar you can grab.

Only Behaviour is its own. Start from far end fills it the other way, for a bar that drains rather than grows. Write while dragging keeps the knob exactly under your finger; turn it off and the bar eases after it instead — easier to feel than to see, so leave it on unless the bar is long and heavily styled.

Everything below that is the Progress controls. Style: Bar, Ring, Arc, Steps, Pie or Liquid — every bar style is a slider style, so a slider can be a dial.

A ring cannot live in a thirty-pixel strip, so before the round styles, give the object a square box. All six styles draw into that same box.

Ring, with its own fields: Thickness, the Start angle it begins from, and whether the ends are rounded or cut flat. A ring is the one people read as a dial.

Arc is a ring with a gap. Sweep decides how much of the circle it uses and Clockwise which way it fills — 270° is the speedometer everybody recognises.

Pie fills like a clock, and Donut hole opens the middle — which is where you put the number.

Steps turns the track into nodes: how many, their shape, their size, the connector between them, and numbering. That is a checkout, a level map, or a quiz showing how far in they are.

Liquid fills a vessel — a circle or a rounded rectangle — with a wave whose height, length and speed you set, and a second slower wave underneath, which is the thing that makes it read as liquid.

Direction stands the whole thing up. A vertical slider is a volume, a temperature, a floor in a lift. And the same Direction appears in Behaviour and in Style, because it is one setting in two places.

Back on a Bar: Segments cuts the track into pieces with a gap between them, which turns an amount into a count you can read at a glance. Snap to whole segments fills them one at a time — it changes nothing here, because a step of one already lands on a segment.

Corner radius takes it from a pill to a hard-edged bar, and Fill inset is the gap between the fill and the track — a thin fill inside a wide track is the progress look every game uses.

Colours: a solid fill, a gradient, or thresholds that change the colour as the value climbs. Then the track, its opacity, whether it is drawn at all, and a border.

Fill is the colour of the answer. Put your own accent colour in there and the slider stops looking like a default.

Gradient adds a second colour at the far end, so the bar warms up as it fills.

Thresholds change the colour at values you choose — red under 25, amber under 50, your fill colour above them. That is a health bar, a fuel gauge, a budget warning.

The track behind it takes its own colour and its own opacity, and can be turned off completely — for a fill drawn straight onto your artwork.

And a border with its own colour, which is what keeps a pale bar visible on a pale photograph. Embellishments are the extras — milestone markers along the track, the leading knob, a shimmer sweep, and animated stripes.

Markers are ticks at values you type, in the bar’s own units. The same values are the choices for the Progress Milestone trigger, so the ad can fire something at each one.

The leading knob is the grab handle: its radius, colour and border, and a shape — round, a rounded block, a square, a grip or a diamond. Make it big. It is what a thumb is aiming at.

Shimmer sweeps a highlight along the filled span — the classic still-going cue.

Animated stripes give it barber-pole motion, with their own width, angle, speed, colour and opacity. Motion on a control is what tells a viewer it can be touched.

And Label, which is the number the viewer reads. Show label turns it on, and everything under it is how it looks.

Format prints it as a percent, a fraction, the raw value, steps, a time — or a Custom template you write yourself, with the tokens as chips you click. Two of six guests, in your own words.

Position is centred in the track by default, and that default was learned the hard way: above, it lands on whatever caption is sitting there. Above, below, either side, inside the head, or following the head — pick the one with room.

Then its offset, size, colour, decimals, font and weight, an outline and a shadow. The outline is what keeps a white number readable when the fill passes underneath it.

That is General. Every control also has Animate, FX and Events — the same entrance and loop presets, and the same filters, as any other object — and further down General, opacity, rotation, scale and blend mode, per orientation.

Now press Play and read the values back. Anywhere you can type, the name in curly brackets prints it live — the line at the top is nights and guests, moving as I move them. The price underneath does not move, and that is not a bug: nothing has told it to. A value changing, and something happening because of it, are two different jobs.

This is also where Show If Variable shows itself. Gate the slider on breakfast, and in Play it is simply not there until the toggle says yes — which is how you ask a question only when it becomes relevant.

And a control has events of its own. Open the Events tab on any of them and there is Value Changed — it fires the moment the value really changes, and not on every pixel of a drag. A Toggle carries two more: Switched On and Switched Off. So "when they turn it on" is a trigger, instead of a condition you have to write. Which is exactly what a price wants. A price is a formula, a formula is an action: Value Changed → Add action → Compute → total = {nights} × 90 + {guests} × 15 + 12 for breakfast. The panel checks the expression as you type, and tells you what it comes to with the starting values. The same two clicks on the Stepper and the Toggle, and all three re-price the screen as they move. No button, no waiting for one.

The price itself is that one variable with a format on it — {total|money} — so it always prints 2 decimals.

Controls stay still while you build, so a drag moves the object and not the value. Press Play to use them. Step the nights, drag the guests, flip breakfast — the line at the top and the price underneath both keep up, with nothing left to press. And keep tapping: it stops at seven and stays there. That is the clamp — a viewer cannot book a hundred nights by leaning on the key.

Three mistakes. One: an unbound control. It looks perfect and does nothing, so check Writes to first. Two: leaving Step at 0 on something a person counts, and shipping 97. 16 guests. Three: putting the formula where it never runs. On Value Changed it recalculates every time the viewer moves anything; on a button it waits for the button.

For a finished one, remix Energy, Meter Wall: a slider, a stepper and a toggle, all feeding one figure on a dial. Add New Object, Choice Chips. They arrive as Small, Medium and Large - and the panel warns you: without a variable, they draw but can't be chosen.

Options are typed in, separated by commas. Write value, equals, label, when what you show and what you record differ. S equals Small shows Small, and records S. They can also come from a table - one column to show, one to write. Writes to picks the variable. I made a text variable called size - the Variables video shows how. Now Medium is chosen, because size starts at M. Each cup and each price has Show If Variable: size equals S, M or L. That's all the logic there is.

Layout: one row, wrap at a count per row, or auto fit, which wraps when a chip would get narrower than your minimum.

And four forms. Pill. Tabs. Card. And Tick. I'll keep Card, with a lit surface.

Colours come in two sets: unselected, and selected. Coffee brown for the chips, caramel for the chosen one, and a smaller corner. Link Parameter records the pick for the click-through. Name it size, and a tap adds size equals S, M or L to your link - map it in the Deep Link settings. Press Play.

Large. Small. Medium. Every tap writes the variable, and everything reading it follows.

Three mistakes to avoid. One: no variable. The chips draw, but nothing records the tap and nothing can look chosen. Two: gating on the label. The variable holds the value - S, not Small. Show If size equals Small never shows. Three: long labels. A chip never grows to fit its text; it cuts it short. Keep chips to a word or two.

Add New Object, Repeater. And it draws nothing at all - it needs a table with rows, and a card to repeat.

Under Data, New makes a table: a column for name, a column for price, and one empty row. One row per card. Margherita, nine dollars. Plus Column adds a column - I'll call it note.

I've filled in the other three rows. The card design is any group. This one is three texts: name, note and price, each written in curly braces. Choose it, and the group stops drawing itself - there's a card for every row. Grid wraps at a column count. Stack is one per row. Rail runs one row past the edge. Back to a grid of two. The card look: none, plate, outline, raised, or edge - with a lit surface. Edge it is, in orange.

Arrival brings the cards in: fade, rise, or pop, one after another.

Turn on Cards are choosable. A tap writes the row's name to a text variable, pizza. Tick marks the chosen card - and Link Parameter carries the pick into your click-through. Press Play. They pop in. Truffle. Veggie. The text under the grid reads the same variable.

Three mistakes to avoid. One: expecting a placeholder. An empty table, or an empty group, draws nothing at all. Two: editing one card. Every card is the same design - change the group for all of them, or the table for one. Three: tapping in edit mode. There, a press moves the repeater. Test the choices in Play.

Part eight: mini-games and interactive modules. Game templates, the quiz, the product configurator, and 3D.

A game template is a whole mini-game packaged as one object. There are more than forty genres, and each one plays the same way in the editor as in the exported ad. Remix a prebuilt game: every plan. Place one in your own project: Agency. Add New Object, scroll down to Game Templates, and every genre is a card. I'll pick Jigsaw.

It lands in the middle of the canvas, already playable. One game per scene - once a scene has one, the other cards grey out. Its settings work exactly the way the Remix video shows. I'll make this one two by two - four pieces - so we can finish it on camera. Now the part that's new. Open the game's Events tab. These are the moments this game can tell you about: Valid Moves, Halfway Done, Last Piece and Time Limit Warning. Every genre brings its own. A match-three can tell you about combos. A memory game, about its last pair. Pick Halfway Done, and give it an action: Set Text, on the headline, nearly there.

No ending to wire: when the game is over, it opens the End Card. Which means the project needs an End Card. Add New Object, Add End Card, and pick a design.

Back to the game. Press Play, and solve it.

Two pieces in, Halfway Done fires, and the headline changes. The last piece goes in, the game is over - and we're on the End Card, without a single rule for it.

Three mistakes to avoid. One: no End Card at all. The game has nowhere to send people, so it just sits on its last move. Two: a second game in the same scene. You can't - give it a scene of its own, and go to it. Three: looking for games on the End Card. They aren't offered there. A game belongs on a normal scene, and the End Card is where it sends people.

That's game templates. Pick a genre, react to its moments, and let it finish on your End Card. Add New Object, Quiz and Finder - on the real site, placing a module is the Agency plan. It arrives with its question and nothing else. The answers are your buttons. It isn't a test. Every answer votes for a result, and the result with the most votes is the viewer's match. Open Questions. There's one tab per question. The question is one short line, and the answers are one line too, separated by commas.

Votes For is the heart of it: one result number per answer, in the same order. Road votes for result one, trail for two, treadmill for three. The other two questions are written the same way, and the three results have a name, a line and a picture each. Now the buttons. Under Buttons, bind Answer Button one, two and three. Each one now reads the answer in its position, and it changes with every question. If a question has fewer answers, the extra button hides itself. And when the match is up, they all step aside. Showing an answer isn't choosing it. Select the first button, open Events, choose Tap, and add Select Option. Pick the quiz, then Current question, and Answer one. That's the first answer as shown, whatever the question. Buttons two and three are wired the same way. Or pick a question by name, for a button that belongs to one question only - it does nothing while any other is up.

Scoring decides how answers add up. Votes is a product finder - most picked wins. Points turns each answer into a score and picks a band, for a level test or a risk profile.

Under Behaviour: shuffle the answers so the first one isn't favoured - the bound buttons follow the shuffle - and set the pause after each answer. Go to End Card is on, so after a moment on the match, the ad moves on. The End Card prints it with the result token.

Press Play, and answer.

Three taps. The buttons change with each question, the match comes up with its picture, and the End Card arrives with the same name. And the match, plus every answer, rides the click-through link - so the product page can open on the right shoe. The Deep Link video covers that.

Three mistakes to avoid. One: typing the answers onto the buttons yourself. Bind them instead - with shuffle on, a typed label points at the wrong answer. Two: too many questions. Three is the sweet spot for an ad - six or more, and people drop off before the match. Three: switching scoring without rewriting the numbers. In Votes they're result numbers; in Points they're scores - the same boxes mean something else.

Add New Object, Configurator. On the real site, placing a module in your own project is the Agency plan. And notice what arrives: just the product. No buttons. That's on purpose. The buttons are yours - ordinary buttons you place, style and animate like anything else. These seven are already on the canvas, and I've sized the configurator to sit above them. Everything that makes it yours is under Groups. Group one: call it Colour, and give it three options, separated by commas.

Now the pictures. Option Images takes one photo per option, in the same order: Midnight, Sand, Forest.

Set Changes to Swap the whole picture, and the product becomes the first photo. A real photo per colour is almost always the best-looking choice. The others: Add a layer over it, for a part - wheels on a car. Tint, for one plain product. And Record only, for a choice you don't show. Group two is Size: thirty-eight, forty, forty-two, forty-four. No pictures, so it's recorded. Forty-four is sold out, so Unavailable Options takes its position: four. Now connect a button. Select Sand, open Events, choose Tap, and add the action Select Option. Pick the configurator, then the group and the option. These lists are exactly what the configurator offers - you can't wire a button to a choice it doesn't have. The other six are wired the same way. A sold-out option is listed as unavailable, and a tap on it does nothing, so style its button to look it. Pricing → running price, base 89 · each group's Price Deltas, e. g. 0,0,10

Price Text Object → "From {price}" · Spec Text Object → "{1} · {2}" Finish When All Set sends the viewer to the End Card once every group has been chosen. It's off by default, and that's usually right - leave it off, and the build stays on screen until they tap your button. For this demo I'll switch it on. The End Card reads the same tokens: one, two and price. The configurator publishes them as it goes, so any text on a later scene can print the build.

Press Play and build one.

Sand, then Forest - the photo swaps, and it's ten dollars more. Forty-four won't take a tap. Size forty, and the End Card arrives with the build and the price on it. One more: every choice also rides the click-through link, so the product page can open on the same shoe. That's the Deep Link video.

Three mistakes to avoid. One: Unavailable Options counts from one, but Starts On counts from zero. Starts On two is the third option. Two: a button remembers a position, not a name. Reorder the options, and every button picks something else - check them after any reorder. Three: finishing too early. With Finish When All Set on, a viewer who taps around to explore is taken away before they've decided.

Add New Object, 3D Product - on the real site, placing a module is the Agency plan. It arrives empty: it needs a model. Under Model, Choose Model, and upload a GLB file. This first one is too heavy, on purpose. It's checked before it's used: triangles, materials, textures and file size against the budget for a web ad - with the networks that would reject it. Choose another file.

This chair is small. And the note has read the file itself: two materials, Wood Dark and Cushin. Remember those names. Environment sets the light: studio, soft, or dramatic.

Spin is how it moves. Drag to rotate, a turntable until the first touch, and zoom - a pinch on a phone, the wheel on a computer - kept between your closest and furthest. Finishes recolour one material each. Name the row Frame, and pick Wood Dark - the list is the model's own materials. Then the colours, and their names in the same order: walnut, oak, charcoal. The wood changes, and the seat doesn't. A second row does the same for the cushion. Pricing, your own buttons and the End Card work exactly as in the Configurator video - here they're already wired. Press Play.

Drag to turn it, and scroll to zoom in and out. Oak, then Sage - and the price follows.

Three mistakes to avoid. One: compressed models. A GLB with Draco or meshopt compression can't be used - export it without. Two: leaving the material on Every material. The colour then lands on everything, glass and tyres included. Three: a heavy model. Keep it under about one megabyte - Meta's limit is two megabytes for the whole ad.

Part nine: the End Card - the last screen, and where the click to the store goes.

The last screen of your ad decides the install. So make it move.

The End Card Maker gives you 40 ready-made end cards — every one animated, every one ready to ship.

Pick one, and it plays straight away: the entrance, the effects, the button.

Change the choreography in a click. Here's the headline, now bouncing in letter by letter.

Swap the effects to match your game — sparks, confetti, or gold rain.

Need urgency? Add a live countdown, and it ticks in the finished ad.

Then make it yours. Your words, your art, in seconds.

Export for the networks you use — each file sized to that network's rules.

And here's your end card, on a phone.

An End Card is a scene, marked as the end card. It is the last thing a viewer sees, and the one screen that carries your store link. It is not optional, either. With no End Card and no CTA Button, the build check blocks the export. An ad needs a way out.

So let's add one. Add New Object, and down in the Scenes section, Add End Card.

Here are the 40 ready-made designs. Every one is animated, every one is on every plan. Or start blank and build your own. Pick one, and it opens as its own scene, already playing. I'll take the store listing.

There it is in the left panel, in amber, under your scenes. It is a scene like any other, and everything on it is an ordinary object. So make it yours. The headline is a text object: select it, and type your game's name.

The icon is an image. Change Image swaps in your own art.

And the copy arrived translated. Open Localization: your own scene’s rows start empty, and below them, the design’s rows are already filled in, language by language.

Preview German, and the whole card changes with it.

Every object arrived animated, too. This headline has two animations active: where it comes in from, and how it fades up. The Animate tab changes that in one click. Pop In, Bounce In, or letter by letter.

And here is the timing people get wrong: an End Card's entrances run when the card is shown, not when the ad loads. So the viewer always sees it build itself.

Now the rule that matters most. Every button on an End Card is already the click-through. There is nothing to wire: it opens the store links you paste in Export. So an ad gets one exit. With an End Card here, the CTA Button cards are greyed out. The Buttons video has the whole story.

What opens the card? Here, the CONTINUE button. Select it, add a Tap, then Go to Scene, and pick the End Card.

A button is one way in. A timer's Timer End is another. And when a mini-game finishes, the ad goes to the End Card by itself.

Press Play and try it. Tap Continue, and the card builds itself in.

Tap its button, and nothing happens: the editor has no store to open.

So test it in the exported file. Same card, same motion, and now that tap opens the store page you pasted in.

Three mistakes to avoid. One: an End Card and a CTA Button in one project. That is two click-throughs, and the viewer leaves before ever reaching the card. The build check warns you.

Two: hiding something on the End Card with the eye. A hidden object is never built into the ad, so nothing can bring it back. Leave it visible, and use Show If instead. Three: an End Card nothing opens. The build check only asks that one exists, never that your ad reaches it. So walk the route in Play, every time. The Configurator and Quiz videos built the choices. This one sends them somewhere. There's one more way to record a choice: any button. Its Events can Set Link Parameter: a name, equals, a value - gift equals yes. Set replaces the value, Add builds a list, and Toggle switches it on and off. Now Export. Parameters travel on a web address, not on a bare store link - so switch the destination to Web, and paste the product page. On Web, the export is one ad that opens your link, and it counts as one export - like a network.

Deep Link lists everything this ad records. Colour, size and price come from the configurator. Gift comes from the button. A recorded choice goes nowhere until it's mapped. Map all turns each one into a parameter on the address.

And Example click shows the exact address the ad will open. Sending people to an app? Paste your tracking link instead. AppsFlyer, Adjust, Branch, Singular and Kochava are recognised. What the app receives shows what your app gets on first open. Pick the choice it opens on - the colour.

And in the exported ad: Midnight, size forty-two, a gift box, Order - and the shop opens on it.

Three mistakes to avoid. One: expecting a store link to carry them. The App Store and Google Play drop parameters - use a web page or a tracking link. Two: some ad networks own the exit. Google, Meta, TikTok and Mintegral open the store themselves, so parameters never arrive through them. Three: recording without mapping. A choice that isn't mapped in Deep Link never leaves the ad.

Part ten: video playables. A video that stops and waits for the viewer, timed text, and overlays.

This video ad just paused itself. It's waiting for your thumb — tap, hold, then double-tap.

That is a video playable. Turn any gameplay or product video into one — no code, right in your browser.

Open the Video Playable Maker, pick portrait or landscape, and start from a ready-made spot.

Everything happens on the timeline. Scrub the video, and drag any break to the exact frame you want.

A break pauses the video until the viewer acts. Make it a tap, a double-tap, or a hold — with a filling ring and a hand that shows them where.

Or make them trace a path. Here, the food only pours as fast as you drag the scoop.

Add text and buttons that appear on cue. Set exactly when each one shows up, and when it leaves.

When the video ends, your end screen takes over. Start from 40 designs, and send people straight to the store.

Export, tick your networks, and every file is sized for its network — the video included.

And here it is on a phone. Every gesture works exactly as you built it.

A break is three things: a moment where the video freezes, a gesture that gets the viewer past it, and whatever you put on screen while it waits.

Here is the same ad in the editor. A video project is a video, the breaks along its clock, and an end screen after it. The footage plays, a break stops it, the viewer answers, and it plays on. The Video list on the left shows every break in time order, with the gesture it waits for. This one waits for a traced path, and this one for a tap. Click a break, and the canvas jumps to the exact frame it freezes on, with everything that break puts on screen. So you always judge a break against its real picture.

Every setting in this video is on every plan, Free included. On the live site you only need to be signed in. To add a break, press Break. It lands halfway through the video, and its settings open straight away. The add buttons live on the list, not on a break's own panel, so press Escape to get back to them. The timeline adds a break exactly where you want it. Park the playhead on a frame, press Break, and the new break sits on that frame. Press it again without moving, and the editor refuses. Two breaks can never share a frame, because the second one could never be reached. And anything you add, you can remove. Hover the break in the list, and press the bin.

Time is the frame a break freezes on, to the millisecond. It can never run past your footage: type 99, and it snaps back to 13, the length of this spot. Put a break on the frame where the question is on screen. I will use two seconds, because Play always starts from the top, so the earliest break is the first one you meet, and testing stays quick.

Resume video when is the gesture itself: Click or Tap, Double Tap, or Hold. A tap is the default. Press Play, the video stops, one tap anywhere, and it carries on. Use it for continue and next: anything the viewer should never have to think about.

Double Tap waits for two taps inside half a second. Tick Show resume hint text, and the break tells the viewer what to do. Now one tap does nothing, and two taps play it on. Save a double tap for a moment the viewer should mean: a like, a confirm, a reveal they could otherwise set off by accident.

Hold asks them to press and keep pressing, and it brings a Hold duration with it, from 400 ms up to 3 seconds. At three seconds the ring fills slowly. Let go halfway, and it empties straight back to the start. Hold on to the end, and the video plays on. That is a commitment: charge it, brew it, fill it up.

At 400 ms, a hold is barely longer than a tap: enough to ignore a stray touch, not enough to ask for patience.

Now untick the hint. A hold with no hint and no spot draws nothing at all. The press still works, but the viewer is holding a screen that shows them nothing happening.

So a hold break always gets one of two things: the hint ticked, or a spot to press. Which is the next setting.

Hold a specific spot gives the break a target, and while the break is selected, that target is drawn right on the canvas. X and Y are percentages of the canvas, measured to the middle of the spot. Watch it move as I type.

W and H size it the same way, and Shape turns the rounded box into a circle.

Or skip the numbers. Drag the spot where you want it, pull its corner to size it, and the fields follow. In Play the spot is outlined and pulsing. A long press anywhere else does nothing. Press the spot itself, and the ring fills right on it. Use a spot when the footage has one thing to press: a button, a lever, a lid.

The spot is kept per orientation, so a landscape layout has a spot of its own. We will look at landscape near the end. Look and feedback styles the ring and the spot. Colour paints both: here, a brand orange. Ring label is the word under the ring, up to 12 characters. It says HOLD until you change it, so use your own verb. This slider is how far the spot swells while it is held, up to 140%. Show a hand pressing the spot puts a pointing hand on it, from three hand images. Here it all is together. The hand presses on a loop until the viewer touches, then gets out of the way. The spot swells in orange, the label reads PRESS, and the moment the hold completes, it flashes.

Pulse and Flash are both on by default. Switch them off for a quieter break: no breathing before the press, and no flash after it.

Hint and label colour sets all of that small print at once: the label's pill, the double tap hint, and a path's guide line. White suits dark footage like this. Over a bright frame, set a dark ink, and the pill flips to light so it still reads. Overlay objects are what you put on screen while the video waits. They appear the moment it pauses, and they are gone the moment it plays on. Buttons belong on a tap break, and you will see why in a minute, so I will switch this one back to Click or Tap first. Add Text, and a caption lands in the middle of the frame. Type your line, then give it a colour, a size and a weight. Tell the viewer what this pause is asking for.

Align sets it left, centre or right inside its box. And to place it, drag it on the canvas.

Add Button, and it arrives reading Resume.

It takes a label, a font size, a background and a text colour, and a corner radius, from square up to a full pill.

One thing changes the moment a break has a button: the button becomes the way out. Tapping the frame no longer resumes, and tapping the button does. That is how a break asks a real question.

Action decides what the button does, and there are five. Jump to time sends the video to a second you choose. Back to zero makes a watch again button. Jump forward past a break, and that break still stops the viewer where they land.

Open the CTA link sends the viewer to your store page, the one you set in Export, and leaves the video paused behind them. The last two do both: resume or jump, and open the link. Inside the editor there is no store to open, so those three do nothing when you test them here. Check them in a web preview build. Set link parameter records a choice on the click-through. Type pack = amber, and the link carries pack=amber, so the page opens on what they picked. Set replaces an earlier choice. Add builds a list. And Toggle adds it on one tap and takes it away on the next, for a screen where the viewer picks several. Add Image puts a picture on the pause: the product, a price, a badge. Choose one from the library, or upload your own.

Every object has a bin, to take it off the break again.

Add Audio plays a sound while the break waits, with Autoplay, Loop, and a volume of its own, and it stops when the video plays on. That one you hear, rather than see. And here is the one that catches everybody. Switch this break to Hold, and the panel warns you in amber: a hold covers the whole frame to catch the press, so no button on it can ever be tapped.

In Play, the button is dead. Buttons belong on a tap break.

To retime a break, drag its handle along the ruler. It snaps to tenths of a second. Hold Shift for fine control, to the hundredth. Drag it into another break, and it stops short. Two breaks never share a frame.

To move a break past its neighbours, type its new Time. I send this one to 10. 5 seconds, after both of the ad's own breaks, and the list renumbers itself in time order. Which leaves the fourth gesture, and the one this ad is built on: the path break. The viewer traces a route with a finger, and the footage can follow them. To show every part of it, I will delete this ad's own wipe, and build it again from nothing.

Press Path break, and set its Time to 3. 6, the frame where the squeegee meets the glass. It arrives with a pointing hand on a path. Path offers ready-made shapes: an ellipse, a rectangle, and an infinity loop. Good for circling a product, or a figure of eight. Path Border sizes a ready-made shape as a share of the canvas. For anything real, choose Custom and draw your own route. Add point at center gives you one more point to work with. Then drag each point to where the finger should go. Point one is the start, and the route runs through the points in order. Drag inside the route's box to move the whole route at once. Right-click a point to delete it, or use its cross in the panel.

Closed loop joins the last point back to the first, for a route that goes all the way round. A wipe is a line, so it stays off. Enable path animation is the path itself. Switch it off, and there is nothing to trace, so the rest of the panel steps aside. Switch it back on, and your route is still there. What rides the path is the thing the finger drags. The pointer hand is the default. Custom image gives the pointer a picture of your own: a sponge, a spray bottle, a key.

Or add an image to the break from its row in the list, pick it here, and the viewer drags that image along the route instead.

Duration, Repeat, Easing, Yoyo, Reverse and Auto Rotate all drive the demonstration: the hand that walks the route before anyone touches it. At four seconds, it walks slowly enough to follow.

Repeat zero walks it once, and then it stops. Minus one, the default, keeps it going until the viewer touches.

Easing shapes its speed along the way, Yoyo walks it back instead of jumping to the start, Reverse sends it the other way, and Auto Rotate turns the rider to face the route, which shows on an arrow far more than on a hand. Path follow is the part that judges the finger. Show path in playable draws the route as a dotted guide. Switch it off, and the hand still demonstrates, but the line is gone. That suits a gesture you want found, rather than followed.

Show trace the path hint text adds a small label at the start of the route.

Must complete is how much of the route the finger has to cover, from 70% to all of it, and the diamond on the canvas marks that finish line. At 100%, a trace that stops at 80 is not enough. At 70, the very same trace is. Forgiving for a casual ad, strict when the gesture is the point.

Finger tolerance is how far the finger may stray from the line, from 20 to 100 pixels, and the band on the canvas shows it.

At 20, a trace just below the line fails. At 100, the same trace passes. Keep it wide for thumbs on a small phone.

Fixed start point makes the finger begin at point one, and in Play the start marker turns amber to say so. Starting from the far end does nothing; from the start, it works. Leave it off, and they can join the route anywhere.

Now switch on the last rule, and every point in the list gets a video time. The first is the pause itself. I give the last one 5. 9, when the glass is clear, and every point between fills in on its own.

Video sync to path is the one that sells it. Give each point a video time, and the footage scrubs between them as they drag. That is the glass clearing at exactly the speed of my finger. Stop, and the footage stops with me. Finish the route, and the ad plays on from where the finger left it. Press Play one last time, and take it from the top: my rebuilt wipe, the pack choice, the break I added with its caption and its button, and on to the end screen.

One more thing: orientation. Portrait or landscape is chosen when you set up a video project, and every break keeps its own layout for each: its spot, its route, its objects, and its video times. This is the same ad on a landscape screen. The footage is letterboxed, and the wipe follows a landscape route of its own. Build the orientation you ship, and test it the way it will be seen. Before you ship, check five things. A button on a hold break can never be tapped. A button on a path break switches the drag off. A hold with no spot and no hint shows nothing. White hints vanish over bright footage. And a route at 100% with a 20 px band will beat most thumbs.

And which gesture, when. A tap to continue, or to choose. A double tap for a moment they should mean. A hold for anything that charges, brews or fills. And a traced path for anything you wipe, pour, spread or draw.

Add New Object, Text. The first beat's caption: watch the streaks. Up at the top.

Appearance: Time frame. From half a second to three point two - so it leaves before the first break, at three point six. Check it on the timebar. At zero: nothing. At two seconds: the caption. At four: gone.

The template's closing claim works the same way: eleven point three seconds, to the end. When the video ends, the end screen takes over. It's a page of its own - select it here. Three things belong on it: what they get, one line of detail, and one button. That button is the click-through to the store. Change the words to fit your offer. The layout stays put.

Three mistakes to avoid. One: text that flashes by. Under a second and a half, nobody reads it. Two: a caption running into a break. The video stops there, and so does the caption - time it to leave first. Three: an end screen that says too much. One offer, one line, one button.

In the Video Playable Maker: Add New Object, Overlay. It covers the whole video - black, at half strength. Overlay Color: a deep navy. Opacity sixty percent - dark enough for white text, light enough to still see the road. A new object lands on top, so it's dimming the text too. Move it down, below the text, and the words stay bright. Full video would tint the whole spot. Time frame limits it: from eleven seconds to the end, exactly when the claim appears. Scrub to ten seconds: no tint. Twelve: the road dims, and the claim reads.

On its Animate tab, switch on Entry Fade, so it eases in instead of cutting. Exit Fade does the same at the end. Three mistakes to avoid. One: too dark. Past seventy percent the product disappears - dim it, don't black it out. Two: an overlay on top of the text. Move it below, or the words dim with everything else. Three: a tint for the whole video. Time it to the moment it's needed, and let the footage breathe.

Part eleven: check and export. What stops an export, and the export window, end to end.

It's the round icon beside Export. Red means something blocks the export; amber, something worth a look; green, all clear. The number is how many. Open it. Fix these before exporting: this ad has no End Card - the page that holds the click to the store. And File size: over two and a half megabytes, when Facebook allows two.

Add New Object, Final CTA scene. An End Card is added, and that error is gone. The End Card video shows how to design it. The size problem has its own button: Compress one asset. The background comes down by three quarters, and the ad fits every network. Worth a look never blocks an export - but each one is something a viewer would notice. An image with no picture: choose one, or delete it. And a missing character: this font has no arrow, so every phone would draw it in a different font. Replace it - an exclamation mark reads just as well. The icon turns green. Open it: every network fits, and there is nothing left to fix.

Three mistakes to avoid. One: waiting for Export to find the problems. The check updates as you work - glance at it after every change. Two: ignoring Worth a look. It won't stop the export, but a viewer will see every one. Three: fixing a size error by deleting pictures. Compress first - it usually saves more than half.

Tap what you want, and this grocery ad re-prices itself — basket, delivery, the lot. In a minute it stops being a thing on screen and becomes a file an ad network can run. This is the Export window, end to end. Every control in it, what each one costs you, and exactly what lands in your downloads folder. Export is in the top bar, and it is the last decision you make about the ad. Everything the file becomes is decided in this one window.

It opens by checking the build. Red is must-fix — this one wants a store link before it will export anything at all, and the Export button stays dead until it gets one. Amber is a warning: it still builds.

First control, and the one worth understanding before any other: Web Preview. It adds a copy of the ad that plays in any browser, and the badge on it is the point. It is free. It never spends an export. There is a catch, and it is deliberate. In a preview-only build the click-through is not disabled, it is removed: no store link, no web address, nothing left in the file to switch back on. A free build with a working call-to-action would be a finished ad nobody paid for.

Signed in, a second line appears under it: save the project to the cloud and get a share link. The link belongs to the saved project, not to this build, and it takes one of your plan project slots — so it is a tick box rather than something that happens to you. Next, languages, because this template carries seventeen. One file that picks the viewer language as it loads, one file per language, or English only — which leaves the translations out and is the smallest build of the three.

Then the ad networks, and ticking one is not a setting on the file. It builds that network its own package, with that network own calls inside it. Select all is there, and the counter beside the heading tells you how many you are about to build.

Two badges on every row. URL means that network opens the address your creative hands it. SDK means the network decides the destination itself, through an exit call that takes no URL at all — so a custom button link, or a Deep Link parameter, cannot travel there. That is their contract, not a limit of the export.

The little “i” is that network’s size cap. Most of them take 5 MB. AppLovin takes 4, Chartboost 3, and Meta 2 — and the window measures your build against the strictest one you have ticked, not against the average.

How many you may tick at once is the one thing a plan decides here. Every network is on every plan, free included; what a plan buys is how many of them one export may carry. A free account builds one network at a time, and each paid plan takes more. I am on localhost, where every gate is open, so nothing dims.

Store links. Paste your App Store and Play addresses, and the window goes and looks the app up — so a wrong id is a missing card here, rather than a dead button in front of a customer. Or flip the destination to Web, and the whole block becomes one field: your landing page, or your tracking link. That path builds a single file and no network packages at all, because there is no network in the loop to build one for. Under it, Deep Link carries what the player chose into that address. It has already found what this ad records — the items going into the basket — and it is warning me that nothing is mapped yet, so nothing would arrive. Map it, and the landing page opens on the basket they filled. Now the number everyone opens this window for — and instead of one figure, it shows you where the weight actually is. Library is the engine that runs the ad, and it is the same engine in every export. Definition is your scene, which is tiny. And Assets are your own pictures and sound, listed one by one, so the expensive file has nowhere to hide. And the warning under it re-points itself at whatever you ticked. On its own it reads “approaching the 5MB limit”. With AppLovin in the list, the very same build reads “approaching the AppLovin’s 4MB limit”.

Which is what Compress assets is for. It lists every picture and every sound in the ad, re-encodes the images to WebP and the audio to Opus, right here in your browser — and anything that would come out larger is left exactly as it is.

One pass, and it re-encodes every one of them in front of you. It totals what came off at the bottom, the estimate re-measures itself the moment you come back, and the warning above either eases off or goes away. Same ad, fewer bytes.

One last line at the bottom, and it is worth reading: audio never autoplays in an ad network. Every one of them requires the first sound to wait for the first touch, so the ad has to be built that way. Then Export. On the real site you sign in first, and this is the moment the counting happens: a web preview on its own is free, but the instant a network is ticked the build is a deliverable and it costs one of your plan monthly exports — one network or three, preview or no preview.

And those limits are hard. Over your allowance, the server refuses the build before the file is handed over — so the number on the counter is the number you actually have. And there it is. One file for every network you ticked, each one ready to upload exactly as it comes, and the web copy beside them — all of it in a single zip in your downloads folder.

And the web copy beside them is the one you send to a client — it opens in any browser, on any phone, with no network needed to run it. Remix the Grocery template from this video and take it through the window yourself. Part twelve: every ad network. What MRAID is, then each network's rules - one by one.

Unity: MRAID 3. 0. AppLovin: 2. 0. TikTok: forbidden. Mintegral: not used. None of those is wrong, and none of them is out of date. They are four networks answering the same question differently, and once you see why, every spec sheet you read after this gets easier.

MRAID: an IAB standard for how an ad talks to the app around it.

Your playable is a web page running in a little browser inside somebody else's game. It is sealed in there. It cannot open the App Store, it cannot know whether it is actually on screen, it cannot close itself - because a web page has no way to do any of that. MRAID is the bridge. The app puts a handful of functions on the page, your ad calls them, and suddenly it can open a store link, ask whether it is visible, and tell the app it has finished.

mraid. js is NOT in your ZIP - and it should not be. You are leaving a socket for the network to plug into.

6 of 13 networks take an MRAID build.

The other seven each have their own way out. Google has ExitApi. Mintegral has window dot install. TikTok and Pangle use their own SDK. Facebook and Moloco share one call, and Liftoff listens for a message.

TikTok bans mraid. js, JS redirects and network requests as ONE rule. And the version numbers? Two point oh is the one everything supports. Three point oh adds later features on top. That is why one network's sheet says two and another says three, and why neither is telling you the other is wrong. Decided at RUN time: 3. 0 where real, 2. 0 where not. One file. Pick the network. The preset decides. You write none of it. Which is also why exporting the wrong network's file is the single most common way a playable fails. It is not broken - it is fluent in a language that container does not speak. The CTA does nothing, silently. So let's test one. This is our MRAID validator - it is free, it runs in your browser, and nothing you drop into it is uploaded anywhere.

Drop in an exported file and it tells you what it found: whether the MRAID tag is there, which API calls the creative makes, whether it waits for the ready event before touching anything.

MRAID is not there on page load. Wait for ready.

And beside it, the spec checker, which asks the broader question: is this file within the size the network publishes, does it reach for anything at run time, does it have a working way out. Three mistakes. Bundling your own mraid dot js - you have replaced the network's bridge with a dead one. Calling MRAID before the ready event, which works on your desk every time and fails on a phone some of the time. Those are the worst bugs there are. And shipping one file to every network. Six of them want MRAID and seven want something else - one export per network is the whole reason the Export window asks.

If you only remember one thing: you do not need to learn MRAID to ship a playable. You need to pick the right network in the Export window, and check the file before you upload it. And the button sends people to the store only when they tap it. First, the rules. Everything here comes from Unity's own playable ad specifications, and the links are in the description. One: the whole ad is a single HTML file, inlined and minified, with no links to other files or folders. Two: it has to be under 5 MB. Three: it follows MRAID 3. 0, the standard an ad uses to talk to the app it runs in. Unity's web view injects it for you. Four: it should support both portrait and landscape. Five: the call to action opens the store through mraid. open, and never by itself. No redirect without a tap. Six: it shouldn't need any network requests. Analytics calls may be allowed, if they carry no personal data. And it must never block the close button. Seven: it should wait for MRAID's viewableChange event before the game starts, so it only begins once it's really on screen.

Now let's build one. Open the Spin the Wheel template, and press Remix this template.

It already has a portrait and a landscape layout, so both orientations are covered. Press Export, and tick Unity. The URL badge means Unity opens the store link your ad supplies, through mraid. open. The estimate is under 1. 5 MB, far inside Unity's 5 MB.

Paste your App Store and Google Play links. That's where the button will send people.

Keep Web Preview on. It adds a copy that plays in any browser, and it never uses an export. Then Export. On the real site you sign in first, and a network export counts as one of your plan's monthly exports.

You get a zip with two files: the Unity file to upload, and the web copy. Before uploading, test it. Our free spec checker reads the file right in your browser, and nothing is uploaded. Choose the Unity file, and pick Unity Ads. It passes: under the size limit, a single HTML file, the mraid. js tag in place, and the button wired to mraid. open. A pass means nothing disqualifying shows in the file. It isn't Unity's approval. Here's the Unity file itself, at phone size. Tap, spin, and the End Card.

And the very same file, turned sideways.

Then test it where it will run, with Unity's Ad Testing app for iPhone and Android. It needs the file at a web address ending in . html, and https for iPhone. Upload it to the Unity dashboard or host it yourself, then scan its QR code. Play it several times, and make sure it loads, plays and runs smoothly every time. To upload, open Creative Packs in your Unity Ads User Acquisition dashboard. Choose Create, then Playable, and name the pack. Pick the playable type, upload the file or add it by URL, choose its language, and press Create. Then assign the pack to your campaigns. Every new creative goes through Unity's human review, and a campaign needs an approved pack to go live.

Every rule here comes from AppLovin's own page, Creative specs & guidelines. It's linked in the description. First, the file. One HTML file of 5 MB or less, with every image and sound embedded inside it. External resources are not allowed. Second, MRAID. The ad supports MRAID 2. 0, waits until MRAID is ready, and opens the store with mraid. open(). AppLovin warns that any other click-through fails. Third, sound. It stays muted until the first touch, and stops when the ad is closed or hidden. Fourth, the first tap. The ad works in portrait and landscape, any timer waits for the first touch, and nothing jumps to the store by itself, or on that very first tap. And fifth, the network: no calls at all. Nothing is fetched while the ad runs. Playable Ads Maker takes care of the file, MRAID, sound and network rules in every AppLovin export. The first tap and any timers are design choices, so those are yours to check.

Let's build one. I'll use the Hexa Sort template. Its first tap is a move in the game, never a trip to the store, and it ends on an End Card. Click Remix this template, and it opens in the editor.

I'll export it as it is. Click Export, and tick AppLovin.

See this note? The template's music is set to start on its own, so the export holds it until the viewer touches the screen. That's AppLovin's sound rule, handled for you.

Paste your App Store and Google Play links. The End Card's button opens them with mraid. open(). The estimate is about 1. 5 MB. AppLovin allows 5. Playable Ads Maker holds AppLovin builds to 4, to leave a safety margin. Then click Export. On the real site you sign in first, and an export with a network ticked counts toward your monthly exports.

Done: one file for AppLovin, plus a web preview that plays in any browser. Before you upload anything, check it. Our free Spec Checker reads the file in your browser, and never uploads it. Choose the AppLovin file. The checker first ticks every network that could take it, so I narrow it down to AppLovin MAX. A pass: 1. 54 MB of AppLovin's 5, a single HTML file, mraid. js referenced, and mraid. open() wired. Further down, the file itself: no external assets, and no network calls. A pass means nothing disqualifying is visible in the file. It isn't AppLovin's approval, so test it on AppLovin's own tool next. That tool is AppLovin's Playable Preview page. Upload your HTML file, press Rotate to try landscape, and tap your call to action. If the click works, it says: You have successfully clicked. Then test on a real phone. The page shows a QR code, and you scan it with AppLovin's Playable Preview app, for iPhone and Android. To upload, open your campaign in AppLovin's dashboard and click Create, to start a creative set. Name it, click Add Assets, and pick your HTML file from the Media Library, or upload it there. Click Confirm, check the Preview, then Save as live. A creative set holds up to 10 files of each type, so it's worth adding a few variants. Three mistakes to avoid. One: a store jump on the first tap. AppLovin wants that tap to play the ad. Two: a countdown that starts as soon as the ad loads. Start it on the first touch instead. Three: anything loaded from the web, like a font link or a tracking pixel. Keep everything inside the file.

To try it yourself, remix the Hexa Sort template from this video. It's linked in the description, next to AppLovin's spec page. Half the foil gone, and the End Card takes over. Its button is the click-through — on Google, through Google’s own exit call, not MRAID. Every rule here comes from one Google page: “About HTML5/Playable ads for App campaigns”. It’s linked in the description. First, the package. Google takes a . ZIP file, 5 MB at most, with no more than 512 files inside it. Inside, the main HTML file needs a doctype, an <html> tag and a <body> tag, explicit closing tags, relative paths to everything else in the ZIP, and a responsive design. It also needs an orientation meta tag in the <head>. Ours says content="portrait,landscape", so one file serves both. Now the big one. Google does not use MRAID. Google’s exitapi. js script goes in the <head>, and your button calls ExitApi. exit(). A creative wired for another network reports no clicks here. Everything else lives inside the zip. No external references — the only exceptions Google names are its own fonts, jQuery, Greensock and CreateJS. Sound and video are allowed, but sound must not start before the viewer interacts with the ad. And a trap: Google’s uploaded display ad specs are different numbers — 600 KB, 40 files. 5 MB and 512 files are the App campaign playable rules.

Let’s build one. I’ll use the Scratch Card template: the first touch is a scratch, never a trip to the store, and it ends on an End Card. Click Remix this template, and it opens in the editor.

It already has a portrait and a landscape layout, which is exactly what that orientation tag promises Google. Press Export, and tick Google. See the SDK badge? Google decides the destination itself, through an exit call that takes no URL — so click parameters cannot travel here.

Paste your store links anyway. They fill the click tag inside the file, and the web copy uses them. The estimate is 3. 26 MB, comfortably inside Google’s 5 MB.

Keep Web Preview on. It adds a copy that plays in any browser, and it never uses an export. Then Export. On the real site you sign in first, and a network export counts as one of your plan’s monthly exports.

Here is what people get wrong. The download holds two things: the web copy, and the Google . zip. The inner one is what Google gets — index. html and main. js at its root. Before uploading, check it. Our free Spec Checker reads the file right in your browser, and nothing is uploaded. Choose the Google . zip, and it picks Google by itself. A pass: 3. 26 of 5 MB, ZIP packaging accepted, and ExitApi. exit() wired. It reads the whole archive — both files — and finds no external asset requests and no network calls. That is Google’s no-external-references rule, checked. A pass means nothing disqualifying is visible in the file. It is not Google’s approval. And here is the bundle itself, unzipped and played on a phone: index. html, with main. js beside it. Same files, turned sideways. To upload, open your App campaign in Google Ads and add the . ZIP as an HTML5 asset. You can have up to 20 . ZIP files in one ad group. Then it is reviewed like any other ad — most within one business day. One catch: HTML5 playables do not serve on App campaigns for pre-registration, or for engagement.

To try it yourself, remix the Scratch Card template from this video. Round over, and the End Card takes over. Its button is the click-through, and on Meta it goes through Meta’s own call, not MRAID. Every rule here comes from two Meta pages: the playable ad specifications, and Meta’s developer doc. Both are linked below. First, the package. Meta takes one of two things: a single HTML file with everything embedded as data URIs, or a ZIP with index. html at its root. A ZIP has to come in under 5 MB for the whole archive, holding no more than 100 files. And here is the number people miss. Meta’s uploader rejects a single HTML file, or an index. html, over 2 MB. That 2 MB is in the developer doc; the specifications page lists 5 MB for the single-file route. So check both, and keep the HTML itself small. Meta is not an MRAID network. The spec says a playable must work without mraid. js, or anything like it. The exit is one call: FbPlayableAd. onCTAClick(). Get it wrong and the upload comes back: “Missing CTA Click Function Call”. Nothing may reach outside the file. No external network calls — Meta names XMLHttpRequest — no loading assets from a network, and no JavaScript redirects. It must be built in portrait, and stay responsive across different screen resolutions. One part is not the playable at all. Meta also wants a lead-in video, the clip with Tap to Try on it. It is not shown on Audience Network placements.

Let’s build one. I’ll use the Tap Clicker template: one tap is a punch, and the round ends on an End Card. Press Remix this template.

Pick a canvas size and it opens in the editor, with a portrait and a landscape layout already built. Press Export, and tick Facebook. That is Meta’s row.

The SDK badge means Meta decides the destination itself. Its call takes no URL, so custom button links and Deep Link parameters cannot travel here. The estimate is 1. 25 MB. We hold Facebook to 2 MB, stricter than the 5 MB norm, and Export simply will not let you past it.

Paste your App Store and Google Play links. They fill the click tag inside the file, and the web copy uses them.

Keep Web Preview on. It adds a copy that plays in any browser, and it never uses an export. Then Export. On the real site you sign in first, and a network export counts as one of your plan’s monthly exports.

Here is what people get wrong. The download holds two things: the web copy, and the Facebook . zip. The inner one is what Meta gets — index. html and main. js at its root. Two files of Meta’s 100, and 1. 24 MB of its 5 MB. Before uploading, check it. Our free Spec Checker reads the file right in your browser, and nothing is uploaded.

This file picks Meta and Moloco on its own, because they share that same call — but Moloco wants a single file, so it fails on packaging. Clear it, and choose Meta. A pass: 1. 24 of 2. 00 MB, ZIP packaging accepted, and FbPlayableAd. onCTAClick() wired. It reads both files and finds no external asset requests and no runtime network calls. And it notes the creative never loads mraid. js — which is exactly what Meta asks for. A pass means nothing disqualifying is visible in the file. It is not Meta’s approval. And here is the bundle itself, unzipped and played on a phone: index. html, with main. js beside it. Same two files, turned sideways. To upload, open Ads Manager and create a campaign with the App promotion objective. Playable ads are not available for any other one. At the ad, choose Single image or video, then in the Destination section pick Playable source and upload your ZIP. Meta previews it right there — and a ZIP needs an app your account can advertise. From there it can run on Feed, Stories and Reels across Facebook and Instagram, and on Meta Audience Network.

To try it yourself, remix the Tap Clicker template from this video. TikTok is the network most likely to catch you out, because almost nothing it wants is what the other networks want. It takes a ZIP, not a single HTML file. Inside it, the main page has to be called index. html and sit at the top level of the archive — not in a folder.

The limit is 5 MB, and it is measured on the compressed ZIP — after zipping, not before.

Beside index. html sits a small file called config. json, and it carries one thing: the orientation your creative supports. 0 means either way up, 1 means portrait only, 2 means landscape only.

Then three things TikTok does not allow. No mraid. js — the standard most other networks require is the one thing TikTok rejects. No JavaScript redirects, and no HTTP requests once the ad is running. Everything the ad needs has to already be inside that ZIP.

That last rule is the one creative teams trip over: a web font, an image on your CDN, an analytics pixel. Each one is a request, and each one can fail review. And the part that decides whether you get any installs at all: the click-through. TikTok does not use the MRAID call other networks use. Its documentation asks you to include the Pangle playable SDK in the page, before your own script, and then to open the store by calling window. openAppStore(). Both halves matter. The call is defined by the SDK, so a creative that calls it without loading the SDK has a button that looks perfect and does nothing.

I know that because it was true of this exporter until today. The call was there, the SDK was not, and every TikTok build quietly fell back to a plain window. open() — which is the JavaScript redirect the same page forbids.

So let's build one. Anything you make here works - I'll keep this deliberately simple, because the packaging is the subject, not the art.

Design it portrait. TikTok's feed is vertical and full screen, so a landscape creative letterboxes inside a player that is the wrong shape for it.

Open Export, and pick TikTok. Your App Store and Play links go in here - they are wired into the creative's own click handler, which reads the device and opens the right store.

They do not go into config. json, whatever you may have read. That file holds the orientation and nothing else. The modal shows you the size before you build, and it knows each network's cap - so you find out here rather than after an upload is rejected. Build it, and what lands is a ZIP with three files: index. html, main. js and config. json.

index. html carries the SDK tag and your styles. main. js is the playable itself, with every image inlined so nothing is fetched. And config. json is that single orientation number.

Uploading is TikTok's part of the story, so here it is in their words rather than mine.

One thing worth knowing: TikTok and Pangle share this format and this SDK. The same creative runs on TikTok's own feed and on Pangle's publisher network, which is a lot of inventory from one file. Three mistakes to avoid. Exporting the wrong network's file - a creative built for an MRAID network has a CTA that silently does nothing here, because those calls are ignored. Designing landscape and shipping portrait. Your config declares what you built, so decide the shape before you start, not after. And measuring the wrong thing: the cap is on the zipped archive. If you are close, compress your images before you blame the exporter.

Build one, unzip it, read the three files. Once you have seen what a compliant creative actually contains, every other network gets easier. Mintegral is a mobile ad platform with especially deep publisher inventory across Asia-Pacific, and it is one of the networks that does not use MRAID at all. It takes either a single HTML file or a ZIP with your resources, up to 5 MB. We export the ZIP: index. html and main. js, with every image already inlined. 5 MB is the ceiling their creative specs publish for a playable.

Now the part that is unlike the others: three JavaScript calls, and your creative is expected to make all three. The store exit is window. install(). Not mraid. open(), not a redirect. gameReady() tells Mintegral your playable has finished loading and can be touched. And gameEnd() fires once, when the round is over.

The Mintegral preset wires all three for you, so the thing to check is that your ad really does end - that something in it reaches a win or a finish, rather than looping forever.

So let's build one. I'll keep it deliberately simple, because the packaging is the subject.

Open Export and pick Mintegral. Your App Store and Play links go here; they are the fallback the creative uses if the container has not provided the install call.

Build it, and what lands is a ZIP with index. html and main. js.

index. html carries your styles and loads the script. main. js is the playable itself.

Uploading happens in the Mintegral dashboard, under creative management. That is their platform rather than ours, so here it is in outline.

Two mistakes to avoid. Exporting another network's file - an MRAID creative has a CTA here that silently does nothing, because Mintegral is not listening for that call. And shipping a playable that never ends. If nothing in your ad fires game end, Mintegral has no idea the round finished, and that is a rejection you can prevent in the editor.

Build one, unzip it, read both files. Once you know what a compliant creative contains, every network gets easier.

Part thirteen: working with a team. Cloud projects, version history, and client review.

Open the save menu, and choose Save current work to cloud. Give the project a name, and save. The badge at the top now says Saved to cloud. Every saved project is on your account page, under Saved projects. Open it from any computer, or see its history.

A version is a snapshot you name. Open Version history, call this one Launch, and save it. Your plan decides how many are kept - Studio keeps five, and when it's full, the oldest is replaced first.

Now the client asks for a sale headline. Open the project from your account. Change the title, and save to the cloud again. Saving again updates the same copy - it does not make a new version.

A week later, the sale is over. Back in Version history, point at Launch, and press Restore. It overwrites the cloud copy, so it asks first. Then open the project again. The launch headline is back - exactly as it was when you named the version. Last, the link. In Export, keep Web Preview on, and tick Save project to cloud and create a share link. Then export. The share link is at the top. Copy it, and send it to anyone - it always shows your latest export. It opens the real ad, on any phone, in any browser. The click to the store is switched off, and it says so - so a client can play it, but never mistake it for the live ad. Three mistakes to avoid. One: trusting the browser. A local draft goes when the browser's data does - save to the cloud before you close the laptop. Two: expecting every save to be a restore point. Saving updates one copy. Name a version before any big change. Three: sending the downloaded file for review. Send the share link - it plays anywhere, and it updates every time you export.

On your account page, under My Workspace, press Create My Workspace. Keep the suggested name, or type your own, and create it. Open Members. Each teammate uses one seat, and seats are bought right here. Type their email, keep Editor, and invite. Your teammate sees the invitation on their own account page. Accept, and they're in. Back on your account, share the project with the workspace from its row. Everyone in it can now open the project.

Open the project while your teammate has it open, and their initial appears at the top, with co-editing beside it - so you both know before anyone saves over the other.

For the client, press Send for Review on the project's row. Add their email and a short message, and open it in the editor. A reviewer needs something to play. Export a web preview from the panel, keeping Save project to cloud ticked, and close the export window.

Now press Send to Reviewers. The review link is right here - copy it into any chat, or let the email do the work.

The client opens the link - no account needed. They play the real ad, leave comments, and approve it, or ask for changes.

And back on your account page, the project now says Approved. Three mistakes to avoid. One: sharing one login. Invite each person - everyone gets their own account. Two: inviting a client into your workspace. A client needs no account at all - send them the review link. Three: ignoring co-editing. If a teammate's initial is at the top, agree who saves first - or one of you will have to choose which version to keep.

That's the whole master class. Every lesson has its own video on the channel, linked below. Start free at playableadsmaker dot com - and see you in the next video!