Colour-your-cupcake

View interaction

Download .Story file

This weeks challenge was to design a colouring-in interaction. So, I decided that I would create a colouring image of one of my favourite things …. cupcakes!

I created the cupcake image using several different shapes in Storyline 2. You can see the outline in the image below. The background image is from: https://www.freepik.com

 

I then created my own cupcake themed colour pallete from https://coolors.co/. To use this pallette creator, you press the space bar until a colour comes up you like. You then lock that colour and keep pressing space bar until another colour comes up that you like, then lock that and so on, until you have all your colours.

I then added the colours as a new theme in Storyline 2. By selecting the Design tab, then ‘Colors’, then ‘Create New Theme Colors’. I added the colours by using the eye-drop tool.

I selected one shape and then created a state for each colour. I labelled each state 1-5, as seen in the image below. To save time doing this for each shape, I used the format shape painter (double click it to keep it turned on) and then selected each of the other shapes of the cupcakes to automatically add all the colours.

I then created a number variable called colour and kept the starting value at 0.

When a colour is selected on the screen, a trigger changes the number of the variable (this also matched each of the state colours.)

I then created five triggers on each shape. To save time, I used copy and paste for the triggers and just changed the numbers.

For the sprinkle shaker, I used multiple motion paths and layers to create this animation. First off, I created a curve animation on a new layer, with a spin entry animation (set to half turn). I then added more motion paths to add the shake effect and changed them to appear one after the other in the triggers list. The sprinkles then appeared on a new layer with a motion path and spin and grow animation. The reason why I used two different layers is because on the shaker animation, I hid the shaker from the base layer. On the sprinkle layer, the shaker returned and the learner can still colour with the sprinkles remaining on the screen.

So, that’s how I created this colour-in interaction. If you have any questions, please comment below.

Cheers!