DIY app software Kwik tutorial: making a butterfly fly

The short clip below was made with the Photoshop plug-in Kwik and previewed using Corona. Basically, the art is in layers in PS, the animation and interactivity is added using Kwik, then the app can be previewed in the Corona simulator. Once the app is complete, it can be uploaded to the various app stores. More details on all that can be found on www.kwiksher.com.

I drew and painted the art in Illustrator and Photoshop. Here are the steps to make the animation:

I made 6 images of the butterfly with the wings squinching in then out again, saved in PNG format. The images must be named like this: Name_1.png; Name_2.png, and so on. These will create the “movie clip” that will run in a loop to create the flapping motion. [Note: these 6 images could have been on a sprite sheet as an alternative method.]

The artwork elements were sized for a 1024 X 768 pixel document @132 pixels per inch to fit an iPad screen. The first butterfly image was placed as a layer in the Photoshop file, along with the hibiscus, bushes, and background. A new Kwik iPad book project was made using the layered Photoshop document.

I selected the butterfly image layer, then moved it off screen in the lower left corner. This was the starting position so the butterfly can fly into the screen.

In the Kwik panel, I clicked the Add Animation icon (circled in red):

A dialog box comes up with quite a few options, so here we go (numbers refer to image below):

1 I changed the animation name to get rid of the random numbers Kwik generates.

2 Type: From the drop down menu, Movie Clip was selected.

3 First File: The movie clip will replace the butterfly layer. I used the Browse button to navigate to the first of the 6 images. Kwik will automatically bring in the rest.

4 Image Width/Height: The numbers were obtained from the first butterfly image.

5 Number of Images: In this case there are 6 images in the butterfly wing flap loop..

6 Loop: It’s hard to know how many times the wings will need to flap, so I just entered any number than adjusted it later to arrive at the number of 42. Most of the remaining numbers are a result of tweaking after watching the preview.

7 End Position: Once you start moving the x and y sliders, the butterfly can be seen in the PS document (remember, it had been offscreen.) X controls the horizontal axis, Y is vertical.

8 Duration: This controls how long it takes the butterfly to go from off screen to its final position.

9 Starts: This animation starts as the page loads (as opposed to being triggered by a button.) The delay is 1 second so it’s not too abrupt.

10 Easing: There are several methods that change how the butterfly goes from start to end position. Some go past the end point, some bounce, some speed up or slow down, etc.

11 Loop: This refers only to the path the butterfly takes from start to end position, not how its wings are looping as in step 6. It loops once meaning the animation runs once. If “forever” is checked, the butterfly will disappear and fly in from the corner over and over.

12 Rotate: It is set to 20% so the butterfly starts with a vertical orientation then makes a slight turn to the right by the end of its path. However, the path itself is a straight line.

So, this seems like a lot of stuff, but it starts to make sense after you do it a few times.

Additional notes:
Sometimes it’s a little tricky to reopen the animation dialog box to tweak these numbers. You have to double click it, but sometimes it doesn’t work right away.

The End Position sliders sometimes don’t update the image on the screen, but by clicking back and forth from the x and y boxes, it usually will.

I used Screenflow to record the animation in the Corona simulator. Love it!