Circle Animation

I covered how to cut out shapes using the Drawing canvas, and this one does the same, but animated, and eh a good bit of cheating. 

Usually its not that easy, or cost effective to animate that kind of masking. You would wind up drawing the polygon, and then filling the canvas back, then drawing the poly differently, rinse repeat, for nth amount of steps, and that eats up time as well as being processing intensive.
Here you can get away with just nibbling away at a circle.

Like always order has to be figured out since this is working like a mask.

The nice thing about covering up parts of another image is you don't have to worry about cropping it that much. You generally just put the image point at the center, and use that to figure out where to work.

The starting events:

+ System: On start of layout

-> DrawingCanvas: Fill rectangle (0, 0) to (LayoutWidth, LayoutHeight) with rgb(252, 238, 176)

-> DrawingCanvas: Tween "in" value from 0 to 128 in 0.75 seconds (Default, destroy: No, loop: No, ping pong: No, repeat count: 1)

-> DrawingCanvas: Set drawing blend mode to Destination out

+ DrawingCanvas: Is Tween "in" playing

-> DrawingCanvas: Fill ellipse at (Sprite2.X, Sprite2.Y) radius (DrawingCanvas.Tween.Value("in"), DrawingCanvas.Tween.Value("in")) with rgba(0, 0, 0, 100) (Smooth edge)

First fill in the Drawing canvas, then start our animation using a Tween behavior.

Then while the tween is going, erase with an ellipse with a radius from 0 to 128.

+ DrawingCanvas: On Tween "in" finished

-> DrawingCanvas: Set drawing blend mode to Normal

----+ System: For "r" from 0 to 45

-----> DrawingCanvas: Add polygon point (Sprite2.X+cos(LoopIndex×8)×135, Sprite2.Y+sin(LoopIndex×8)×135)

----+ (no conditions)

-----> DrawingCanvas: Draw dashed polygon outline with rgb(92, 87, 62), thickness 3, dash length 5, cap Butt

-----> Text: Typewriter text "Welcome" over 1 seconds

When its done add a bit of the "crafting" style using the dashed outline.

Then cheat a bit and use a pre rendered sprite with a similar dashed effect, rather than figure out all the points.

It also works for the font of course. heh

Find the source here