Tutorial: Creating a scene from Sparky the Shark

Mark Newell, the Australian genius behind Sparky the Shark, a beautiful story rewarded in several sites about children’s books, was kind enough to authorize us to share this tutorial with Kwik users. So, pick the project files* here and let’s play!

*in order to protect Mark’s rights, the demo files were edited and only the used layers in this tutorial are free to editing.

Using one of Sparky’s scene as reference, let’s learn how to use Kwik. Before open Photoshop, make sure you have Kwik (www.kwiksher.com) and Corona SDK (www.anscamobile.com) already installed in your machine (both products offer a free trial version).

Creating a new project

In Photoshop, open Kwik’s panel interface (menu Window->Extensions->Kwik). In this example, I have a previous composition already opened that I will use as first page of my project (file h.psd):

Clicking the New Project button will open the following window, allowing you to set your project name, the device you want to use as reference for the screen size, the orientation and, considering we have a Photoshop file already opened, if you want to use it as first page of the project.

Enter Sparky Tutorial as your project name, select iPad as the main device, with the landscape orientation. Also, accept the current page “h.psd” as one of your project pages. Kwik then creates the project for you. Now, it is time to add sound, create animations and add interactivity.

Kwik’s top menu provides several features that can “spice” your projects. Each button in the first line is a category, which will show several options.

For example, to add an audio file to your project, select the Page icon (the second icon from let to right). Click the Add audio button (the musical note) and enter the following info:

After browsing and pointing to “bb.mp3” (this audio file contains the narration of the phrase in the screen), set the Controls to Loop only once, with 0 delay (meaning the audio will play as soon as the page starts). Leave all other options as is, as we do not have other pages in this project nor different languages.

If you press the Preview button now, Kwik will automatically create image files from each layer and the necessary code for the Corona Simulator. After the export, the Simulator will open. Use File->Open… and point to the build folder created inside your project folder (you will see the images, the audio file and several *.lua files there). If everything worked fine, you will see the page with the illustrations and the audio will play.

Creating animations

Kwik can create linear and path animations from Photoshop layers. It can also replace a layer content with a Sprite Sheet file or several image files (they are called Movie Clip). In this tutorial, we are not going to use movie clips or sprite sheets.

Let’s create a linear animation first. Select the layer name “ross” (the guy behind the Encore Emporium desk), and then go to the Animation category (butterfly icon) and click the Linear Animation button. The follow window will open:

Although Kwik will auto name every action you create, it is a good idea to enter your own names, for easy reference/editing in the future. In this case, let’s name it to “ross_hide”, as it is going to be the thing happening here.

Use the sliders or simply enter the new numbers for the x and y coordinates (this is going to be the final position of your animation – as you will see, a preview happens while changing numbers thru the sliders or the +- buttons).

To add some anticipation, select the inOutElastic easing option (you can play with the other ones later), set the duration of the animation to 2 seconds and the loop just to 1 (it will play only once).

The Starts parameter is an important one: When page starts will play your animation promptly when the page loads. In our case, select Wait request, meaning Ross will stand until a button triggers the animation.

In the optional Play Audio menu, select the audio pete-scream.mp3 (when Ross hides, he will scream). Then click Create.

Let’s create a Path animation too. If you go to the Path window (in Photoshop), you will notice a path named “Path 1”. We are going to use it our frog layer.

Select the frog layer, and then click Path Animation. The follow window appears:

Name the animation as frog_jump, set the path to “Path 1”, the duration to 3 seconds, disable the Auto Turn option, set the delay to 2 seconds (the frog will jump 2 seconds after the page loads) and the loop to 1. In this case, because we are using When page starts, the frog will not need any trigger to start to jump.

Before to Preview your project again, disable the option Export Images, available thru the Settings window (first button in the Status area, in the bottom part of Kwik’s panel), or directly via the Export Images button (second button in the Status area), as we don’t need to re-export any layer/image content, just the code part.

 

Adding Interactivity

Besides buttons, Kwik allow you to define draggable layers, and device interaction (Shake, for example, which uses the accelerometer), between several other options.

Let’s enable the wheel layer to spin, when user rotates his/her finger around. Select the wheel layer and press the icon Spin Layer, under the Interaction category. A new window will appear:

It asks for an optional Action (Actions are a sequence of user-defined commands – more on that on a future tutorial) to be played when user releases the wheel. In this case, we are going to spin the wheel just for fun so, no Action will be used. Click Save.

Lastly, let’s create a button to trigger the animation that will hide Ross. With “ross” layer selected, click Add Button.

Enter the following info in the Add Button window:

Set the name of your button (any name you set needs to have less than 15 characters). In this example we will not need a different “rollover” layer (an image replacing Ross while he is pressed) so, select Ross.

Although you can set several actions to play in sequence when the button is pressed, in this case we just need one: Play Animation (the butterfly button). When clicked, the following window appears:

We then select the “ross_hide” animation we created before (only animations set to Wait request appears in this list) and press Create. Back to the previous button window, press Create as well.

Our tutorial project is almost done. Pressing Preview now will render the final version of this Sparky scene.  You will see this in the Simulator:

 

Spin the wheel and it will rotate. Click Ross and he will scream and hide behind the desk, the narration plays in the background and the frog jump along the path. Pretty cool for a creative, non-developer, guy, right?

If you want to test it in your own device (or even send to Apple/Google/Amazon/B&N store you will need a paid version of Corona), while in the Simulator use the option File->Build…

If you want to learn more about you can do with Kwik, check the the Learn Kwik area in our website. Don’t forget to see the Showcase area as well, where designers share their experience and works done with the plugin.

Tutorial authors:

Alex Souza, is the founder of Kwiksher, which brings to life his vision of creating software for creative people. Mark Newell is the creator, co-author and illustrator of Sparky, the Shark, and creative director at Biscuit Interactive.