Timeline Eraser

I've covered how to cut out, or erase portions of a Drawing canvas, this tut will show you how to animate erasing a path like in the video.

As always order matters... sort of.

Mainly you need to make sure the part you want to show is under the Drawing canvas.

We will be pasting the tiled bg into the canvas and then destroying it, so it doesn't really matter where it goes order wise. It just makes sense to leave it on top for organizational purposes.

Unfortunately we cant erase using an actual object in the DC, but we still need one to get coordinates. Sprite 2 serves as our dummy, and Timeline target.

Assuming you know how to add objects to a time line as we covered in the Timeline tutorial, and the tuts over at Scirra, we will use the sprite to make a path. I make a small change with this timeline, and make it curved.

This vid will show how to change the line to a Bezier curve:

Then this one will show what the path looks like after:

On to the events.

+ System: On start of layout

-> DrawingCanvas: Paste object TiledBackground with effects

-> System: Wait for previous actions to complete

-> TiledBackground: Destroy

-> DrawingCanvas: Set drawing blend mode to Destination out

-> TimelineController: Play Timeline 1 with tags ""

So when we start paste the Tiled bg into the Drawing canvas, wait for that to complete, and then destroy it.

Then set its blend mode to Destination out so we can do the erasing bit, and start the timeline.

 + TimelineController: Is any playing

-> DrawingCanvas: Fill ellipse at (Sprite2.X, Sprite2.Y) radius (TimelineController.Value("Timeline 1", "Value Track 1")+random(64), TimelineController.Value("Timeline 1", "Value Track 1")+random(64)) with choose(rgba(0, 0, 0, 100),rgba(0, 0, 0, 75),rgba(0, 0, 0, 50),rgba(0, 0, 0, 25)) (Smooth edge)

While the timeline is playing draw an ellipse at the sprites xy,'s. I added a bit of randomness to make it look a little more like a paintbrush, or pen.
Yes you can erase with different opacities.

The source is here