A Four Panel Cartoon
A simple cartoon tutorial. You may publish it for HTML5. Please download the latest Kwik4
Here is the sample project I made up.
Special thanks to Dott Inc for a cartoon sample. You can read their stories in FB of Dott Inc
unzip and run build4/main.lua with corona simulator to review. The cartoon starts automatically one panel by one panel in 3 seconds and ends with the whole image
page1 consists of the following layers
- -panels is a layer group and panel coordinates are specified with rectangles on top of panels. Please notice the hyphen(-) at the first character. -panels tells Kwik that it is panel coordinates.
- balloons group has the balloon images with text
background is the art layer.
You can not use a layer group as the background in a comic page.
these names(-panels, balloons, background) are used in the lua files, so don’t change them.
The size of the background layer of this sample is 1280x1920 including the four panel cartoon on the grey painted area. You may enlarge it for iPhoneX if necessary, please read Photoshop Settings for more information.
the layer group of “balloon” contains balloons of panels.
- Each balloon name must have the digit of the panel after prefix ‘b’
- For instance, for the panel name is “1”, the balloons with “b11” and “b12” are displayed.
|panel|balloon| |–|–| |1|b11, b12| |2|b21, b22| |3|b3| |4|b41, b42|
For your own cartoon
- change the background layer to yours
- adjust the panel rectangle’s positions and sizes to fit your panels. You may add panels more than 4
- create balloons under the balloons group
- associate the balloon’s name with the panel index
Project&Pages > Action to create an action. It is named as act_init
From Code, choose External Code to set auto.lua
create a timer which starts when the page is loaded and calls act_init
auto.lua is the external code to start the panel transition on the page
local panels = require(“components.”..UI.page..”.page_meta_panels”) panels:reset() panels:start(1, false)
Page Properites - Comic
Enable Comic Page checkbox.
Build for HTML5
That’s all, Publish and Enjoy!