☰
Navigation :

Drawing Canvas

Drawing Canvas

The following steps to make a canvas to draw with touching the screen

You can download the tutorial files

the screenshots are of kwik3 but the project file is updated with Kwik4

New Project

Open canvas.psd file. The psd size is for 1024x768 so let’s create a kwik project with iPad Mini.

It is a good practice to click Publish button after you loaded a PSD file into Kwik to make sure every layer name is valid and then you turn it of exporting image. Now you can work to create animations, interactions etc

Published images on corona simulator

Making Interactions

these buttons are created and if user shakes the device, it also erase the canvas

Bursh Size Button

select ButMedium layer and click Add button from Interactions

In Add button window, select Brush Size from Canvas interactions. Create a brush with Size 15 and Alpha 100%.

Select butLarge and click add button.

Bursh Size is 30 and Alpha is 15% for but_large

Take Screenshot Button

To take a screenshot and to save it to device’s photo folder, selet butCamera layer and create a button for screenshot.

In Add Button window, but_screenshot is created with Canvas’s TakeScreenshot.

Color Button

Next Coloring brush, select butOrange and create a button wtih Brush Color

Brush Color with orange is created

Layer butWhite for Brush with white color. It is better not to make all RGB value with 255 to make white. So the B value is 252

ButBlue is Brush blue.

Erase Canvas with Shake

Erase canvas is done by shaking the device. From Actions in Project and Pages, let’s create an erase action beforehand.

In Add Action button, choose Erase Canvas

Now Enable shake in Interactions is set with the action above.

Select act_erase in Enable Shake window

bigCandice-Canvas

bigCandeice is the canvas for user to draw. There is one trick for kwik to detect the canvas size.

Please be aware there are small squares on the left top corner and the right bottm corner of bigCandice layer. Because photoshop script does not let kwik to know the width and height of a layer if layer is completely transparent, Kwik needs the small squares to know the width and height.

this is actual look without yellow background. The white layer is placed under bigCandice.

Select bigCandice layer and click Set canvas from Interactions.

In Set Canvas window, you can set default properties of brush size, brush colors etc.

Pubish now.

Shake is in Hardware menus

Note

Set Canvas feature have the ability to save the paintings in a temporary folder, enabling their users to return to their previous art, even after switching pages.