Add Buttons To Page Template Kwik Book App
We will add the Home, Back and Next buttons to our Kwik page template and add the actions that will program the buttons.
Adding Pages to Kwik Book App Template
Now that we have our template completed, we can quickly add the other pages to the book app. Once we have all the pages added, it will be a good time to test our project in the Corona Simulator.
Background Music in Kwik 2
In this tutorial, we will be finishing the cover page for our book app. We will add a background audio to our book app and create a button to toggle the background music on and off. We will also program the Info button to go directly to the information page of our app.
Building Cover Page for Kwik Book App
Now we will create the first page of our Kwik book app - the cover page. We will take a look at the buttons and background graphics.
Cover Page Layer Properties - Kwik 2
The cover page is the first page we will work on for our Kwik 2 book app. We will learn how to set the page and layer properties for this page.
Drag Object Interaction in Kwik 2
What makes a storybook app more interesting then a traditional book? It's the interaction between the reader and the app. Kwik 2 has many interactive features. In this tutorial, we will add a Drag Object interactive feature to a page.
Fade-in Effect for Kwik 2 Storybook App
The Linear animation can be used to create many effects in your book apps. In our sample project, the story calls for the sky to suddenly turn dark because of a storm. We can use the Linear animation and the Hide Layer feature to create this effect on the background of the scene.
General Project Properties - Kwik 2
Before we can begin to build the pages of our book, we need to set a few Project Properties for this project. Kwik has several features that can be set differently for any project. These general options are what we will take a look at now.
How Buttons Work in Kwik 2
In Kwik we can use two types of buttons and the type we choose will determine the number of layers that we need for the button. Let's walk through an example to learn about buttons and button states.
Installing Kwik 2 In Photoshop
Kwik 2 works as a plug-in to Photoshop to help you build your storybook app. Once installed, the plug-in has its own panel and controls for building the pages in your book app. Kwik 2, along with the Corona SDK, will generate the book app for the mobile device of your choice.
Introduction - Kwik 2
In just one year, there have been many additions and enhancements to Kwik 2 by Alex Souza. With this plugin, you can create interactive mobile apps without the need to write code. Because Kwik is a plugin for Photoshop, you will be creating your game or book app from within the Photoshop workspace.
Introduction to Jigsaw Puzzles with Kwik
Making jigsaw puzzle games with Kwik is easy and doesn’t take any coding. You will use the Drag feature and magnetic “hot areas” to create the puzzle. Continue to find out the basics.
Introduction to Multiple Languages in Kwik
One of the nice features of Kwik is the ability to have text and audio narration in multiple languages. In the discussion below, we will be using both English and Spanish for our app.
Kwik - Layers and Shared Assets
This tutorial will discuss how Kwik 2 works with the Photoshop Layers panel to create the pages of your book app. You will build your pages by placing the design elements on Photoshop layers and adding interactivity.
Kwik 2 and Texture Packer Sprite Sheets
How to create a Kwik 2 sprite sheet animation. You will combine and optimize the individual images of the animation, called sprites, into one file called a sprite sheet. This sprite sheet will be a smaller image file and will use less of your device's memory when loaded into your app.
Kwik 2 Game Physics
In this tutorial, we will learn how to use one of the most popular animation features in Kwik 2, game physics. We can use Kwik to create a real-to-life environment where the object on the page responds to aspects of this environment such as gravity, force and collisions.
Kwik 2 Path Animation for a Movie Clip or Sprite
We have created a movie clip and sprite animation. Now we will see how to move the animated object across the page in our Kwik storybook app.
Kwik Book App Cover Page Buttons
We will continue to work on the buttons for our book app. These navigational buttons will allow us to move between the pages of our app.
Kwik Book App Sequencing Actions
We will learn how to set a button to trigger a sequence of actions, animations and sound.
Kwik Movie Clip PNG Sequence
In Kwik, a movie clip is a series of images that when played in sequence create an animation. Let's take a quick look at how these png images where created.
Kwik Movie Clip Replacement
Now we are ready to add the movie clip to a layer on the page of our Kwik storybook app. We will first add a new layer to the page and a placeholder image for the movie clip. When Kwik builds your app, it will replace the placeholder image with the movie clip.
Kwik Multi-Language Audio Import
In the last tutorial, we set up the cover page of our Kwik book app with two Read to Me buttons for our Spanish and English languages. Now we need to import our narrative audio files and tell Kwik which one to use for each language.
Kwik Multi-Language Read to Me Buttons
In the last tutorial, we assembled the ingredients for our Kwik multi-language book app and set the Multi-Language Project Properties. Now we need to begin working on the details for the cover page.
Kwik Multi-Language Text and Graphic Layers
In the previous tutorial, we learned about Kwik Language Groups and how they work. Now we can set up our text and graphic layers for our multi-language book app.
Kwik Multiplier Replacement for Snow Effect
One of the most popular types of animations is the particle effect, which is used to create effects such as snow, rain or fireworks. Kwik creates this type of effect with the Multiplier Replacement feature.
Kwik Page Template - Add Audio
We have a simple linear animation that emulates a page turn and plays when a page loads. Before we get started building this animation, we will add a small audio file that will also play every time a page loads. This is a simple 6 kb page flip sound .mp3 file.
Kwik Page Turn Animation
At this point, we will be creating a very simple animation and will be using most of Kwik's default settings for this animation. But we will be learning a lot about linear animations as we add many of them to the book app.
Kwik Photoshop Plugin - Making iOS & Android Apps
Kwik is a Photoshop plugin that creates mobile apps from your Photoshop images.
Kwik Sprite Sheet Animation
How to use the Kwik sprite sheet script to add an animation to your mobile project.
Kwik Sprite Sheet Replacement Feature
We used Texture Packer for Kwik 2 to create a sprite sheet that we will use for our sprite sheet replacement layer. Now we are ready to add the sprite sheet to the layer on the page.
Moving in 2D Space
Most 2D artists don't think about 2D space when they create their art. However, once that artist begins to animate their art, they soon need to learn a few facts about how objects move in 2D space.
Navigation For Book App - Kwik 2 Project
Now that we have begun our first project, we can start working on a few decisions for our book. Most of you will want the cover of your book to be the opening page and you will need a few buttons for navigation.
Page Template for Kwik 2 Book App
We will add the first page of our Kwik 2 book app and set the page and layer properties. You will learn how to set the buttons and other objects on this page as shared assets, so the Kwik knows to use them on every page of the book.
Play Sound with Button in Kwik 2
We used the Rotation Widget in Kwik to animate four bats to swing from a branch of a tree. Each bat was on its own layer and was animated independently. This was a nice effect but it doesn't have much interactivity. It would be better if the reader could click on a bat and hear a bat sound.
Rotation Widget in Kwik 2
Kwik has several widgets, which are pre-configured animations that you can apply to a layer, group or page in your storybook app. On page 10 of our sample app, we have four bats that are hanging from a tree. It would be nice to animate these bats to swing from the tree instead of just hang there.
Starting Your First Kwik 2 Project
Before we can start our first Kwik project, we need to set up the general settings for the plugin. These settings will tell Kwik where to find the Corona SDK Simulator and where to store your projects files.
Toggle Background Music in Kwik 2
In this tutorial, we are going to attach two actions to one button. Then we will tell the button to remember which action it performed last and when clicked again to perform the other action. This is commonly called a toggle button.
Top Ten Articles
Content copyright © 2018 by . All rights reserved.
This content was written by . If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.