I. Introduction

Transcription

I. Introduction

I. Introduction
1. About FlyingCatBuilder
“ Create your own app book, no coding required “
FlyingCatBuilder is a user friendly app book creator. You can make your own app
books with no programming skills and can distribute these apps to global markets
through Android and Apple app stores. If you can use Powerpoint, you can use
FlyingCatBuilder. You’ll be able to create app books easily if you read the guide
below. Let’s get started!
2. System Requirements
The following requirements are needed in order to install FlyingCatBuilder &
FlyingCatViewer
Mac
o OS X 10.7 Lion
o OS X 10.8 Mountain Lion
o OS X 10.9 Mavericks
o OS X 10.10 Yosemite
Windows
o Windows 7 (Recommended)
o Windows 8
3. Download and Installation
You can download FlyingCatBuilder flyingcat.bookjam.net
FlyingCatBuilder is free for everyone to use.
4. Setting up the Device Preview Environment
You can preview your work made with FlyingCatBuilder on your mobile This section
will explain how to preview using FlyingCatViewer on your device.
Download FlyingCatViewer app on your mobile device
•
•
•
iOS ( iPad, iPhone, iPod Touch) - search ‘FlyingCatViewer’ on App store.
Android(Google Play) - search ‘FlyingCatViewer’ on Google Play Store
Kindle Fire - search ‘FlyingCatViewer’ on Amazon App store
Connect FlyingCatBuilder and FlyingCatViewer on the same Wi-Fi network
To preview your work on your mobile device, you have to connect FlyingCatBuilder
and FlyingCatViewer to the same Wi-Fi network. You can set up Wi-Fi following
these steps:.
1. Check that your computer is connected to a Wi-Fi network and check the
name of the network
2. On your mobile device, go to Wi-Fi settings and select the same network your
computer is using
3. Check the IP of the Wi-Fi on your mobile device
4. Open both FlyingCatBuilder on your computer and FlyingCatViewer on mobile
device
5. Click file > Preview Manager on FlyingCatBuilder
6. See whether IP of FlyingCatViewer shows up on the list or not. If it’s there,
click and preview it.
7. You can choose how your book look like when you preview it.
o
Fill
: Your book will be shown in it’s real size. Usually in many
devices the upper and lower side of book will be cut
o
Fit
: Your book will be re-sized with same ratio of width and
height . Usually in many devices there will be black box on the right
and left side.
o
Stretch
you are using.
: Your book will be re-sized to the mobile screen size
Problems Previewing?
•
•
Try opening both FlyingCatBuilder and FlyingCatViewer at the same time
Check Wi-Fi on your computer and mobile devices
5. Preview while connected to device
You can preview your work on your device by connecting it to your
computer.
Please click on this link to see how to set your device environment for
preview.
6. Previewing
If you've followed all the steps properly, then you're ready to preview your book! If
you want to test the preview please download the mgl file below and open it.
Mobile preview via FlyingCatViewer Preview
< We will use flyingcatsample01.mgl to follow the steps>
Download
1. Click the
‘Find target device’ button and choose the IP belonging to the
mobile device on which you want to preview.
2. If you connect FlyingCatBuilder and FlyingCatViewer properly, then you’ll see
a preview request message on your device . Choose ‘Yes, Always’ to make
preview easier.
Explanation about each option
o
o
o
Yes, Always: FlyingCatViewer will preview your book whenever you
request it without any other actions. You can cancel this setting by
swiping and clicking delete on FlyingCatViewer
Only this time: FlyingCatViewer will preview your book once and you'll
see request message again if you try to preview at another time.
Not now: FlyingCatViewer won't preview your book this time and you'll
see a request message again if you try to preview at another time.
o
Never: FlyingCatViewer won't preview your book at this time and won’t
accept preview requests again. You can cancel this setting by swiping
and clicking delete on FlyingCatViewer If you chose ‘Yes, Always’ then
FlyingCatViewer will download resources and your preview will start.
3. If you chose ‘Yes, Always’ then FlyingCatViewer will download resources
and your preview will start.
4. If you respond to the preview request, the resource download will start.
5. Check device screen to preview.
II. Learning about FlyingCatBuilder
1. Understanding the Workspace
Here you can learn about basic FlyingCat terms and usage of each of the menu
items and icons.
Toolbar
Frequently used features have their own icons on the toolbar. You can see what
each icon does below.
•
New
•
Open
: Open previous MGL file
•
Save
: Save current MGL file
•
Import
: Import Image, Sound and Video to ‘Object Library’. Uploads will
be automatically sorted by file type.
•
Copy
•
Cut
•
Paste
: Paste object or paste (with) actions. If you want to paste an action,
then you have to select the action slot where you want to paste.
•
Undo
: Undo last step.
•
Redo
: Redo step that you just undid
•
Align right
•
Align center
•
Align left
: Align selected objects to the left
•
Align top
: Align selected objects to the top
•
Align middle
: Align selected objects to the middle
•
Align bottom
: Align selected objects to the bottom
•
Bring Forward
•
Send Backward
•
Bring to front
: Move selected objects to the front
•
Send to Back
: Move selected objects to the back
•
Horizontal on page
the page
: Create New MGL file
: Copy object or copy (with) actions
: Cut object or copy (with) actions
: Align selected objects to the right.
: Align selected objects to the center
: Move selected objects one step forward
: Move selected objects one step back
: Align selected objects horizontally to the middle of
•
Vertical on page
page
•
Center on page
•
Find Target Device
: Find mobile devices that are connected to
FlyingCatViewer on the same Wi-Fi network
•
Preview
•
Preview Current Page
•
Zoom In
•
Zoom Out
•
Fit In
: Align selected objects vertically to the center of the
: Align selected objects to the center of the page
: Preview whole book on selected mobile device
: Preview current page on selected mobile device
: Magnify canvas screen
: Make canvas screen smaller
: Resize canvas screen to computer screen size
Action Library
Here you will find all the existing actions that you can add to objects to make them
interactive. You can add actions to objects by dragging and dropping the action onto
the desired image or object. You can find more details about each action in III. Basic
Actions
User Object Library
You can find all imported images, sounds and videos. You can add these objects to
the canvas by dragging and dropping.
Property Editor
You can define the properties of objects, actions and pages on this panel.
Outliner
The outliner makes it easy for you to see relationships between objects.
1. You can see the information of the objects in the Outliner tab
2. You can make objects visible or invisible in the Outliner tab and lock objects
3. You can set parent & child relationship between objects by dragging an object
into another on the outliner
4. You can add layers on the outliner, and make them visible or invisible.
Page Navigation
You can add, delete, rearrange order and search for pages on the page navigation
panel.
2. Creating a New Book
To create a new book you need to either click on the New Book icon or go to
File>New.
When you create a new book, you will get a window in which you have to define
basic information about the book, shown below.
Canvas information
We provide popular device sizes so that you can choose easily. In addition you can
also create your own canvas size. If you choose for example ‘ipad1 -1024X768’
canvas size, then your book won't be optimized for other devices. In this case, you
can choose 3 ways to publish your contents on other devices.
•
•
•
Fill: Your book will be shown in it’s real size. In many devices, upper and
lower sides of book will be cut.
Fit: Your book will be resized with same ratio of width to height . In many
devices, there will be black box on the right and left side.
Stretch: Your book will be resized to the mobile screen size.
Orientation
You can set the book orientation to either landscape or portrait.
Size
Dimensions of your book canvas.
Book information for Publishing
This book information will be used when you publish, share or save your book.
•
Book Name
•
•
•
Author
Description: Write a brief description of the book
Thumbnail: Add thumbnail that will be used like an app icon for app stores
3. Save and Open
You can save and open your mgl files by using the following buttons:
Save a book
You can save your mgl by using above icon on toolbar or clicking File > Save
Open a book
You can open your mgl by using above icon on toolbar or clicking File > Open
4. Importing Objects
To add images, sounds and videos to the canvas, you have to import them to the
object library first. (if you import images, sounds and videos at the same time, they’ll
be sorted by file type automatically)
Importing Image and Sound Files
•
•
•
•
•
Click on the import icon on toolbar or File > import to import images and
sounds.
Choose images and sounds that you want to import on your computer.
You can find imported images on the image tab of user object library.
You can find imported sounds on the sound tab of user object library.
You can find imported videos on the video tab of user object library.
Adding Object to the Canvas
You can add imported objects to the canvas by using drag and drop.
Add text object to Canvas
You can add text object by clicking insert>text or by right clicking on the canvas.
5. Adding Actions
You can add actions to objects directly by dragging and dropping from the Action
Library to the canvas.
Try this:
1. Drag s01_ch001.png from image tab of user object library to the canvas and
drop it
2. Drag Jump action icon from Action Library to the s01_ch001.png image or
square box which is next to s01_ch001.png image
3. Click Web preview button on Toolbar
4. Click the object and check whether it’s jumping or not
6. Pages, Background Music
<We will use flyingcatsample02.mgl to follow the steps>
Download
Adding a new Page
1. Click [+] button on the Page Navigation
Deleting Pages
1. Select the page that you want to delete on the page navigation toolbar.
2. Right click
3. Select the Delete option
Copy and Paste Page
1.
2.
3.
4.
5.
6.
Click the page that you want to copy on the page navigation
Right click
Select the ‘Copy’ option
Select the location where you want to add copied pages on page navigation
Right Click
Select the ‘Paste’ option.
Move Page
1. Select the page that you want to move
2. Drag the page to the between of two pages where you want to put it
3. Drop the page
7. Outliner
Layers, Parent & Child
<We will use flyingcatsample03.mgl to follow the steps>
Download
Setting parent & child relationship between objects.
It is possible to set relationships between objects so that when one object (parent)
moves other object associated with it (child ) will perform the same actions.
To test it out do the following:
1. Drag ch030.png, ch032.png, ch035.png from image tab of the user object
library and drop them on the canvas.
- You will be able to see the number of images on the Outliner tab
- You can use the checkbox to hide the images from the screen
- You can hierarchically set images in Outliner.
2. On the outliner tab, drag Drag ch032.png and drop it onto the ch030.png
image
3. Now you should see how ch032.png (child) is hierarchically under
ch030.png(parent)
4. If you drag ch030.png(parent) on the canvas, then ch032.png will be moved
like a group object.
Undoing Parent & Child relationship between objects.
1. Drag ch032.png to the layer 1 in the outliner tab.
2. Then ch032.png will be disconnected with ch030.png
3. Now, even If you drag ch030.png (parent) on the canvas, then ch032.png
won`t be moved
Modifying the order of Layer
1. Select ch035.png from Outliner and place it between ch030.png and ch032.png.
2. You can see that the order has now changed from ch030.png < ch032.png
<ch035.png to ch030.png < ch035.png < ch032.png
III. Basic Actions
1. Understanding Actions and Properties
An ‘action’ is what will make an object move. To understand how actions work, there
are several terms you need to understand.
•
•
•
•
Property : Set of various characteristics that each action can have. Action
properties involve action settings ( For example a jump action will have height,
duration and repetition settings) and trigger settings ( Next state, play when)
o Action Settings will be different for every action but can include height,
repetition, duration, angle, duration, etc.
Trigger Settings:
o Next state: what state the action will move to after finishing with current
action
o Play when: What will trigger the action (Ex. touch down, shake, single
tap, etc)
Trigger : A trigger defines what will set an actions in motion. The default
trigger is ‘touch down’ but you can use various triggers such as shake and
blow.
State : A state is the current status an action is in.
2. Property Actions
Move
Moves an object from point A to point B.
Action Settings
•
•
•
Y : Y coordinate
X : X coordinate
Duration : Time during which the action will be continued
Trigger settings
•
•
•
•
Jump
Target Object : What object is targeted by selected action
Play When : After what trigger the action will be played
Action Will : How action will perform when it’s mixed with other actions by
target object feature
Next State : State the object will be in after current action is performed.
Makes object rise and fall
Action Settings
•
•
•
Height : How high the object will go
Repeat : Number of times the action will be performed
Trigger Settings
•
•
•
•
Waddle
Makes object waddle based on axis
Action Settings
•
•
•
•
•
Y : Y coordinate
X : X coordinate
Angle : Angle
Repeat : How many times this action will be performed
Trigger Settings
•
•
•
•
Flip
Makes object flip based on axis
Action Settings
•
•
•
Direction : flip direction
Trigger Settings
•
•
•
•
Blink
Makes object blink
Action Settings
•
•
Trigger Settings
•
•
•
•
Fade
Defines change is transparency for the object
Action Settings
•
•
To : transparency (0 transparent, 1 non-transparent)
Trigger Settings
•
•
•
•
Rotate
Rotate object based on axis
Action Settings
•
•
•
•
Anchor X : X axis coordinate
Anchor Y : Y axis coordinate
Angle : Angle
Trigger Settings
•
•
•
•
Scale
Magnify or reduce object size
Action Settings
•
•
To : How much object will be magnified
Trigger Settings
•
•
•
•
Shear
Distorts object
Action Settings
•
•
•
•
Kind : How object be distorted
Horizontal : Degree of horizontal distortion
Vertical : Degree of vertical distortion
Trigger Settings
•
•
•
•
3. Sound Actions
Sound
Make sounds play when you trigger objects . Sounds can be directly dragged from
the sound library and dropped on the canvas.
Action Settings
•
•
Repeat : Number of times sound will play with a single trigger
Duration : How long sound will be played for ( including repetitions)
Trigger Settings
•
•
•
•
4. Physics Action
Physics actions will be performed based on the gravity sensor of the mobile device
being used to play the book. . Object with physics actions can interact with each
other (for instance, collision). You can create many different effects by using these
actions and checking them out in the web viewer, you can define gravity on the right
side of the canvas by using mouse .
Swing
Object will swing based on central axis as mobile device is tilted.
Action Settings
•
•
•
Angle : Angle
Anchor X : X axis coordinate
Anchor Y : Y axis coordinate
Trigger Settings
•
•
•
•
Float
Object will fall to the bottom of the screen and you can change the bottom by moving
mobile device. If you move the screen around you can see the illusion of an object
floating around.
Trigger Settings
•
•
•
•
Spring
Object will be moved as if it were connected to a coil spring
Action Settings
•
•
•
Resilience : How much object will bounce back ( The higher resilience the
more it will bounce back, 0 resilience= no bounce)
Elasticity : How far the object can be moved from it’s original location before
being drawn back
Torque : This represents how much the object can be twisted around its
original position, defines a rotating motion of the object back and forth.
Trigger Settings
•
•
•
•
Note: In order to get Spring Action to work you need to combine it with Drag Action in
the same state and with the same trigger. The only property that will work without
adding drag is ‘torque’
Drag
Makes object move when you drag it across the screen
Trigger Settings
•
•
•
•
5. Page Action
Actions that allow navigation between pages.
Next Page
Move to next page
Action Settings
•
Trigger Settings
•
•
•
•
Prev Page
Moves to previous page
Action Settings
•
Trigger Settings
•
•
•
•
Page To
Moves to certain page
Action Settings
•
•
To : Page to move to
Trigger Settings
•
•
•
•
6. Etc
Other actions
Wait
Make object wait for certain time
Action Settings
•
Delay : Delay time
Trigger Settings
•
•
•
•
Link
Links the object to a webpage.
Action Settings
•
URL : Certain web page URL
Trigger Settings
•
•
•
•
IV. Advanced Actions
So far, you've learned FlyingCatBuilder basics. Now it’s time to learn more advanced
features, like: target objects, combined actions, animations and videos. If you
combine these features, you can create almost unlimited actions. Let’s start!
1. Understanding state and action combinations
You can add actions or sounds to the red and blue state boxes located on the right
side of every object by dragging and dropping.
Understanding States
The blue boxes next to objects are called states. Actions set in state boxes will be
performed once they are triggered. After an action is done (depending on ‘next state’
setting) state can be changed or remain the same.
Understanding Global States
Actions located in the global state (red), will always work when triggered, regardless
of the current state of the object.
Action combinations
1. Horizontal arrangement
If you put actions in the same state horizontally, then all actions will be
performed at the same time if they have same trigger setting.
2. Vertical arrangement
If you put actions in different states vertically, then actions won't be performed at
the same time even if they have same trigger setting. Actions will be performed
sequentially based on next state setting.
2. Trigger and Target Object
Normally actions will be triggered by the object where action is added, however you
can also use other objects to trigger an action in the first object by using ‘target
object feature.
Try this:
1.
2.
3.
4.
Add ch030png, ch035png to the canvas
Add jump action to ch030.png
Click on the jump action icon
Press control and at the same time drag and drop red T icon to the ch035png
action slot.
5. You'll see a link like in the above image.
6. Now ch030png will jump when you touch ch035png.
3. Animations, Videos
Animation
You can import animation files or many sequential images to create animations.
Importing PNGs
1. Import ani_01.png which will be the first frame of the animation and drag and
drop it to the canvas.
2. Add animated sprite action to the action box of ani_01.png
3. Import ani_01.png, ani_02.png once import menu pops up.
Import gif.
1. Import ani_gif_01.gif by using import button.
2. Press control and drag and drop it to the canvas
Tip :
1. Width and height of the first image on animated sprite action should not
exceed 2048.
2. Maximum number of images you can use for one animated sprite action is
(2048 / width of the first image) * (2048/ height of the first image)
Editing Animation Object
You can edit imported Animation Objects.
Action Settings
•
•
•
•
Start Frame : Start Image
End Frame : End Image
Duration : Time during this action is performed.
Trigger Settings
•
•
•
•
Video
You can import videos to play as a media player.
Import Video Files
1. Click File > Import
2. Select popo.mp4 from Import Files and open.
3. Drag the popo file from Video tap on User Object Library on Canvas.
4. Preview to see your video in action.
Action Settings
•
•
•
•
•
•
•
X : X coordinate
Y : Y coordinate
Opacity : Transparency
Scale : Size of the video
Rotation : Rotate
Auto Play : Video will be automatically played when page is loaded
Show Control : Video will have control buttons
V. Q&A
- Tips and Tricks
Can I have a single background track that plays the whole time? How can you
start and stop it?
Yes, it is possible. To add a background track you need to go to the page in which
you want your track to start playing (ie: 1st page) and on the property editor select
the ‘page tab’ shown below.
In this tab you will get an option to select a background track from a dropdown menu
‘file name’. (Make sure you have previously imported your track to FlyingCatBuilder
so that it appears in that list). Select the track you want to play and check the ‘repeat’
box like shown below.
By clicking repeat the track will play seamlessly throughout the pages. If the track
ends it will automatically play again until the book ends unless you select a specific
page where you want the background music to stop.
Stopping the background music
If you want the background music to stop playing when you reach a certain page you
need to follow the same process you did to add the music on the page where you
want the music to stop. You have to select the same track on the property editor, but
in this case click on the stop button.
Here are a couple of scenarios where understanding the repeat and stop functions
will be helpful.
Example 1: You want your track to play seamlessly throughout the pages. However if
the track finishes before your user reaches the last page you don’t want him to be
left without music. If you want the same track to repeat over and over again .Your
first page is ‘Page 1’ and last page is ‘Page 20’.
On the first page, add the background track you want like you learned above and
check repeat.
On page 20, Select the track you want to stop playing ( same track you selected on
page 1) from the dropdown menu and check the ‘repeat’ and ‘end’ boxes.
This is what your property editor of both pages should look like:
Example 2: You want you track to play seamlessly throughout the pages once. Once
the track is finished you don’t want it to repeat. So if your book has 20 pages and the
track ends when the user is on page 15, there will be no background track after that.
In this case you just need to choose your file on the first page, and not click repeat,
this will play the track once.
Example 3: You want to play a certain track from pages 1- 10 and another
background track from pages 11-20. You want the track to repeat in those pages if
the user hasn’t reached the last page in the section by the time the track ends.
In this case you need to check the ‘repeat’ box on page 1, and the and the ‘repeat’
and ‘stop’ boxes on page 10 selecting the same song for both pages. Then you need
to do the same for pages 11 and 20, but choosing a different track. Should look like
this:
Can I import my own fonts (for example Arabic, Japanese, Greek, etc.)?
Yes, it is possible to import your own fonts. The newest version of FlyingCatBuilder
automatically imports your computer fonts, so if you install a font on your computer it
should appear on your builder.
How can I make audio stop/start during playback?
Start Audio If you want to make audio start you need to drag the sound file into your
object statebox, just like you would add any other action. Choose what will trigger the
action in ‘play when’ and keep the other settings to default.
Stop Audio If you want audio to be stopped before the audio file is finished playing
you need to add a specific button or option that will act as a trigger to stop sound. In
the example below we used the text box ‘cancel’ as a “cancel button” for the action
but you can choose to use any other object or image.
Now, you need to add a wait action next to your sound action. Then click on the wait
action while holding CTRL on your keyboard and drag the wait action to the state
box of the object you want to act as a cancel trigger. Should look like this:
On the property editor for the “wait” action you need to select “play when” and also
“action will”. In the “action will” dropdown menu you must select “cancel”. This is
what the property editor should look like:
Is there a way to link objects together so that if one moves the other mirrors
the action and does the same thing?
Yes, It is possible to set relationships between objects which we call a “parent-child”
relationship. This functions in a what that if one object (parent) moves other object
associated with it (child ) will perform the exact same same actions.
To set the parent-child relationship you first need to go to the Outliner Window where
the objects on your canvas will be listed with an icon next to them. The outliner
window can be found on the right side of the builder and is shown in picture 1 below.
Once you find the Outliner you need to select the object you want to designate as
the “child”. ( you can select more than one object). This is shown in picture 2.
One you select your object(s) all you need to do is drag and drop directly onto the
object you want to designate as the “parent”. One you do this the object(s) you
designated as the child will appear to be “under” the parent object like shown in
picture 3.
Once you link the objects in this way, the children will mimic any action the parent
does.
How do you merge 2 .mgl files into 1?
Merging two or more .mgl files into one is as easy as copying and pasting. All you
have to do is select the page(s) you want to copy from one book and paste them
onto the file where you want them. Be sure to select the specific place in the page
navigation window where you want to paste your pages.
FlyingCat Builder allows you to open more than one document at the same time.
Once you open a second document three buttons will appear on the top of your
toolbar that look like this.
If you click on the first button your first project will minimize and the second one will
appear. If you minimize both your screen should look like this on the bottom of the
canvas area and you should easily be able to decide which document to open at a
time.
Is there a way to make actions repeat indefinitely?
Yes there is. Once you add your action you need to go to the property editor and set
the 'repeat' box to -1.
Your property editor should look like this:
What do each of the options in the “Action Will” part of the Trigger settings do?
These three options are only used when you are using target images in which the
targeted image has more than one action in the same state. Target image is when
you use one image to trigger an action in another one( target image).
For example: In the below image, clicking on the boy will make the girl jump. Since
there is only 1 action in the state, then the “Action will” does not matter.
Now, if you add one more action to the same state and use the same “touch down”
trigger, then you will have to consider the “action will” options.
In this case below. You have a jump action and a waddle action set in the same
state. If you select “mix” under the ‘Action Will’ dropdown menu then if you click on
the girl and she is performing the waddle action and then you click on the boy which
triggers the jump actions, both actions will mix so the girl will jump and waddle at the
same time both are triggered.
Now in the same scenario, if you want the girl to stop waddling if triggered to jump,
then you need to choose the “Cancel option”. If you click on the girl, she will waddle.
If you click on the boy, the girl will jump. However if the girl is waddling and you click
on the boy, the waddles will stop and she will only jump.
Now imagine that same scenario, but if the girl is waddling, you want to stop the
jump trigger from working.
This means that if you trigger the jump while the girl is waddling it will not work,
however if you trigger it when the girl is not performing any action, it will work.
Summarizing… Action will:
Mix: both actions can work at the same time Cancel: cancel action in same state of
image being triggered (Refers to image being triggered) Be canceled: cancels action
of the trigger image ( refers to image that acts as a trigger)

I. Introduction

Transcription

Similar documents

Specification of Zero Stat Gun Part

A Guide to the Application of the ANZECC/ARMCANZ

IQMediaAnalyzer Pro

Sig Sauer M11-A1 TB

mosin nagant

FIRE BY WIRE

This is only a preview. The actual page count of this

l nder. tanding untin ton di ease

This is only a preview. The actual page count of this

How to live to 100 and stay out of Emergency Department