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
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
these buttons are created and if user shakes the device, it also erase the canvas
- Brush size Button
- Brush Color Button
- Screenshot Button to save the drawings to device’s photo galley
- Erase the canvas with shake
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.
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
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.
Shake is in Hardware menus
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.