Quikly introudces how to create a visual storytelling application for iPad or smarphones/tablets. Each image file on this page is created on Photshop and the animations are made with Kwik
|1||Design||Digital Self Publishing|
|2||Drawing, Sketchign, Painting||Folio Academy, Socity Of Vizual Storytelling|
|3||Digital Tools||Wacom Bamboo Slate, InkSpace, iPad, Photoshop|
|4||What is Kwik?||kwik, Corona SDK, ImageMagic|
|5||Adding Pages||Kwik's project&page > icon for page Add, Audio, publish icon|
|6||Making Animations||Cat's Car: rotating wheels, linearing car|
|7||Handling Touch Events||Hedgefog dragging, spinning, pinching, swipping|
|8||Interaction and Action||Car puzzle of dragging ompletion & playing Audio, timer to lauch Hedgefog ballon|
|9||Drawing Cavas||Hedgefog ballon, outline, brush size, color, erase|
|10||Physics||Hedgefog ballon falling, collided with Headgefog|
|11||App Store||Icons & Launch images for Hedgefog/Cat, Apple/Google/Amazon Store and your app on device|
|12||Sprite Animations||Spine bone&mesh animations for Headgefog standing and cluching|
|13||Particles Effect||Balloon in the sky with cloud and stars particles, Blurring for perspective|
|14||Programming||Cat/Hedgefog trip 4 framed comic, cat's car, hedgefog ballon, visiting a town, driving/flying over mountains to the sea|
|15||Network Download||download button for final scene of Cat/Hedgefog having vacation on the sea|
Here is a plan that explains tools, tutorials/documentations and workflow in order to make for the goal as self-publishing a visual storytelling app which are capable of animations, audio and interactive effects. For instance, fistly you can to use Wacom Bamboo Slate to sketch your ideas and drawings, and the put them into iPad or Photoshop as digitalizing data to complete graphic images. The grahic images on Photoshop are composed with Kwik to make an iOS or Android application. You need a good story to tell and marketing to promote too.
- Folio Acamedy, Society of Visual Storytelling
- Wacom Bamboo Slate
- iPad -WacomInkSpace, Adobe Sketch
- Kwik/Corona SDK
Corona SDK is free. Kwik is also free for creating less than or equal to 6 pages in an app, if you need to create an app more than 6 pages, please purchase a license.
- Script lab
Sketching, Storyboard and Making
- Price and Value
2 Drawing, Sketching, Painting
Basic fundamentals like how to begin drawing or how to use computer to paint, let's quickly summarise the activities such as designig, sketching, making thumbnails. You would illustrate characters, objects and settings from a manuscript. You would learn much about color theory or value(shading) by practicing a draw with cryon or by painting on iPad/Photoshop.
- characters, settings, scenes
- anatomy, perspective
3 Digital Tools
You can take notes and ideas with Wacom Bamboo Slate, writing naturally with pen on paper and the device converts handwritten text and drawings for digital data for iPad or PC. Software like Wacom's Inkspace, Adobe's Sketch on iPad, Photshop are good tools for digital painting. Those software offers various digital brushes and useful color pallets.
- Bamboo slate
- iPad InkSpace
- iPad Adobe Sketch
4 What is Kwik?
Let's install Kwik and get ready for making a vizual story app or an animated gif file。Hello World project is explained and you can create a new Kwik project where you can import images drawn with Wacom Bamboo Slate or Adobe's Sketch book on iPad. You may add animation effect too.
- Downloading Corona SDK and Kwik
- Installing and setting up
- New Project
- Animation Widgets
- Corona Simulator
5 Adding Pages
Creating first page and second one, you can make transition between them. when swiping screen on app, the page will render back and force. The app page can have audio file to play as BGM
- adding pages
- page settings
- adding BGM
6 Making Animations
There are simple but effective animation widgets available in Kwik. You can control an animation by setting parmeters like duration, repeat number, transparency etc. For instance, a simple linear aniamtion like a car moving back/force, rotating wheels etc wth various parameter seetings. Timer function allow to trigger an animation after certain amount of time is passed.
- Linear animation
7 Handling Touch Events Kwik
A button that reponses from a tap on the screen can be configured to a layer. When a tap event occures, you may add an action like showing or hiding an image or images on app. The simplest animation is two framed animation by just toggling the two layers alternatively. Other interactions such as dragging and spinnig can be attached to a layer instead of simple button interaction.
- Roll Over
8 Interaction & Action
Button reactions like playing animation, going to aonther page are called Action. One action can consists of multiple actions and you can reuse an action to other buttons/timers
- Making an action
- Magnetic effect with dragging
- Audio control:Play Stop
- Timer On Showing page
9 Drawing Cavas
Painting feature is enabled if you set canvas interaction to a layer. Under the canvas layer, outline layer is placed for referenece. Brush colors and sizes are changeable for user to select color or size buttons. Erase button and save canvas buttons are also available.
- Canvas and Outline layers
- Brush Colors and Sizes
An apple falls from a tree and bumbing and rolling on ground, Physics featrue enables such realworld simulation on app. A layer set as Physics body behaves like according to the law of physics. If layer A and layer B are collided each other, they are bounced.
- Physics Settings
- Dynamic, Static, Kinematic
11 App Store
Overviewing how to register your app to App stores. The commercial final app with the icons and the launch images are submitted to the developer sites of Apple, Google or Amazon. Kwik is on the top of Corona SDK, you can build apps for them from one codebase that Kwik generated. iOS, Android, Mac, Windows PC app
- ｘCode Provisioning
- Android Studio Signing
- launch images
- PNG compession
- app name
- submitting for each platform: iOS, google and Amazon
12 Sprite Animations
Replace the layer image with the sprite animation created by Spine. Exporting photoshop layers to Spine, working with Spine to create bones and animations, and back to Photoshop by exporting PNG atlas image and JSON file. You can use this PNG and JSON file with Kwik.
- Export to Spine
- Spine PNG Atlas/Json Export
- Importing to Kwik
13 Particles Effect
Using particle animations or filter animations. Learn how to create particles in Kwik, and how to import files created by a third-party tool: Particle Designer. Various filfers are applied to layer.
- Particle Editor（Kaboom)
- Import from Particle Designer
- Filter Animation
You can add your own programming code by customizing the Tmplt files out of which Kwik uses to generates programming code. For example, you can add paging curl effect for page transition or customise comic app tmplt for displaying each layer one by one
- Tmplt Customization
- Page Curl
15 Network Download
It provides a mechanism to download binary files for images and audios to apps via the Internet. You can also set up item pruchase function billing for download. Let's create a menu for download one chapter's images and audos in a zip file to save the app size when user first get the app from App Store
- Setting up download
- store tmplt files
- In App Purchase