Manual

Get answers to your questions here.
Use the search option of your browser (i.e. cmd+F) to find keywords.

What’s new in TigerCreate 2.0?

General

TigerCreate 2.0 comes with a whole host of new features, plus tons of tweaks that are too numerous to list here. As such, this section focuses on the new tools and options available to you in TigerCreate 2.0, plus the most important changes we have made since the last version of the software.

Back To Top

Interface

  • Wide range of improvements and expansions to the user interface, including the Object Inspector, Animations Inspector and Scene Inspector, which allow you to edit properties for specific objects, individual animations or your entire scene.
  • Tips provided within the user interface to help with orientation, especially for new users.
  • Customise your controls (Back and Next buttons, text blades, etc.) using the Skinning feature.

Back To Top

Resolution

  • The standard stage size is now 2048 x 1536 pixels (dimensions inverted for portrait format)

Back To Top

Interactivity

  • There is now no limit on depth when nesting assets
  • A new object type, Node, has been introduced in place of buttons and assets used purely as aids when building a scene
  • Easily replace assets within a scene while retaining all their animations using the new Base Image feature
  • Transfer entire animation sequences to other assets using the Copy & Paste buttons
  • Expanded Bézier curve functions
  • Free Drag allows free dragging and scaling of objects within definable limits
  • Create Mini Games (quizzes, etc.) that can be opened using touch events without leaving the current scene
  • Much simpler puzzle creation process

Back To Top

Animations

We have made a wide range of improvements for creating and managing animations:

  • One object can now be assigned multiple animations, each with its own timeline
  • Objects can be used in different types of animation (start animation/button animation)
  • Improved control options: slow down playback of an animation (Delay); accelerate and slow down movements (Easing)
  • Touch events allow different actions for animations (Start, Stop, Toggle start/stop, Pause, Unpause, etc.)
  • Improved Sprite sheet animations, now created within the timeline
  • No defined (overall) speed; each animation has its own speed
  • Form groups of animations using the Pinning feature
  • 3D support adds depth to scenes
  • Augmented Reality (AR) support brings your environment to life

Back To Top

Sounds

  • Sounds can be trimmed and controlled within TigerCreate

Back To Top

Text

  • WYSIWYG editor (WYSIWYG = “What You See Is What You Get”)
  • Comprehensive range of text options: use any font, plus different cuts, indents, etc.
  • Improved word highlighting editing
  • Word highlighting now works with multiple text boxes per speech sound
  • Text boxes can now also be animated, or used as buttons

Back To Top

Test Options

  • Effects such as ‘Scratchable’ can now also be tested in Preview mode
  • TigerCreate now has an additional simulator (Quick Test) that allows you to test individual scenes quicker than ever before

Back To Top

Introduction - Overview - First steps

Introduction

What is TigerCreate?

TigerCreate allows you to create interactive stories and projects that can be sold as e-books or independent apps via all key platforms. It can be used to turn illustrated stories, sales folders, image folders or annual reports into digital titles for an interactive experience.

TigerCreate offers a huge range of design options. Animations, sounds, background information – you can easily integrate a multitude of interactive elements into your products, not to mention learning games and augmented reality sections. Even multilingual e-books are child’s play with TigerCreate. TigerCreate will help you every step of the way.

A TigerCreate licence affords you full flexibility to design titles in a way that suits your wishes and needs. You choose the platforms on which you want to have an e-book presence.

TigerCreate is a Tiger Media International GmbH product. Tiger Media International GmbH’s developers boast many years of experience in the field of digital media, and the company works closely with the most important platforms to ensure the continual further development of TigerCreate. All our user variants are tailored primarily to the needs of the children and young adult book sectors.

System requirements

TigerCreate 2.0 only runs on Apple computers, and requires at least macOS 10.12.x (Sierra). Your computer will need 8 GB of RAM and approx. 900 MB of hard disk space to run TigerCreate.

Export formats

TigerCreate offers an easy way of providing content for a variety of platforms. TigerCreate can currently export to the following formats:

  •  TigerBooks 2.0 (for the TigerBooks platform)
  • Apple iBooks Store format
  • Apple App Store applications (for iOS devices)
  • Google Play Store applications (for Android devices)
  • Amazon Appstore applications
  • Amazon Kindle KF8

We are currently working on formats for other platforms.

The size of your e-books will be determined largely by the number and size of graphics and sounds you include in them, and the number of scenes they contain. Sizes of between around 20 and 70 MB are normal for an e-book in the ePub format.

Back To Top

Overview

From the big picture to the smallest detail: E-books – Scenes – Animations – Assets

TigerCreate allows you to create interactive e-books in special formats, e.g. TigerFormat, iBook format or as independent apps for various platforms. An e-book is made up of individual scenes, or interactive pages. During production, each scene forms a separate TigerCreate file. The individual scenes usually contain text, sounds and images, some of which can be moved (animated) or even set to respond when touched (interactive).

Animations are made using images, which you can also combine with sounds (e.g. a moving car and the sound of its engine …). Images and sounds, which are also known as assets, are stored in your project folder as external files. Each new e-book you create will have its own project folder and various sub-folders. The images and sounds you want to use in a scene are imported into the scene and linked to it. If you then edit an image at a later point, it will also be changed in the other scenes in which it is used.

In order to create and edit assets, you will need an image editing program that can generate PNG and JGP files, and a program that can edit sounds and export them as mp3 files.

In addition to this, you will require the following software:

  • Xcode* (for Apple iOS individual app exports)
  • Android SDK (for Android individual app exports)
  • iBooks (for iBook previews on a Mac; included as standard with macOS)

*You will need the Xcode development environment to export your e-books. This is available to download free of charge from the Apple App Store.

Unlike images and sounds, text is created and managed directly in the scenes themselves. Simply create a “text box” and write the text you want, or copy and paste it from another source.

Back To Top

First Steps

In order to get you acquainted with how TigerCreate works, we will now take a look at a basic project with just one scene. This will help you get to grips with the TigerCreate work environment and create your first animations.

 

  •  Preparing assets

  Before you create a new e-book, you will need to prepare the assets you want to use in it. All the images you want to use will later be placed in the Images folder, while the sounds will go in the Sounds folder (see below).

 

  •  Images

We distinguish between two types of image: background images and animated graphics that make up the foreground of the scene. All your background images should be saved as JPG or PNG files without transparency, and should never be bigger than the stage itself (2048 x 1536 pixels for landscape stages/1536 x 2048 pixels for portrait stages).

Any images you wish to place on top of the background, i.e. in the foreground of a scene, should also be saved as PNG graphics, with a transparent background if necessary. This applies to both animated and non-animated foreground images. In general, you should avoid using images with dimensions greater than 2048 x 1940 pixels for landscape projects (or 1940 x 2048 for portrait projects), as iBooks cannot read images larger than this.

For practical and technical (memory) reasons, we recommend ensuring that both the width and the height of every image you use are divisible by 4. For instance, 48 x 32 pixels would be a ‘good’ format, 47 x 30 pixels a ‘bad’ one. This is especially important for images that are going to be heavily enlarged in TigerCreate – e.g. during an animation – as enlarging images with poor formats can lead to fragmentation or displacement of the image. TigerCreate will display messages in the Scene Navigator and during exporting to warn you when you are using a ‘bad’ image size.

 

 

We recommended that you keep your image files as small as possible to keep scene loading times to a minimum. It’s a good idea to crop graphics so they don’t contain any extra empty space, or use tools such as pnggauntlet.com or tinypng.com to shrink images such as PNG files down heavily without sacrificing too much in terms of quality. This is especially recommended for background images due to their size. For images that aren’t very detailed, you can also keep the amount of graphics memory you are using to a minimum by saving the image at a smaller size than you need (e.g. half-size) and then enlarging it in TigerCreate (e.g. to 200%). This technique also works with background images, which TigerCreate scales automatically. In addition to this, you can also select the “Compress Images” option in the export dialogue for each scene before you publish it (see Testing and Publishing).

 

  • Sounds

There are three types of sound: atmospheric background sounds (the sound of waves on a shore, traffic sounds, etc.), event sounds (a falling object, the sound of a cat meowing when someone touches it, etc.) and speech sounds – the sound of the text being read out. All types of sound – music, noises and speech – are saved in mp3 format.

_____

Caution: Please make sure that you always use sounds with a constant bit rate. These are also known as CBR sounds. Sounds with a variable bit rate (VBR) are not permitted for use in TigerCreate.

_____

Please observe the following file naming conventions:

Do not use accents or special characters.

You can use the letters “A” to “Z”, “a” to “z” and the numbers “0” to “9”.

Name your assets in such a way that it is obvious which scene they belong to. An image with the name “S03_Boy_ arm_left.png” is much easier to identify than “Arm_1.png”, while the sound “S13_Narrator.mp3” is easier to match to the right scene than “Good night little one.mp3”.

There should be no special characters in either the book title or the project name – this includes “(” and “)”.

For our example project, we will take a simple background and add a ball as our animated object.

 

Creating a new e-book project

Once you have installed and registered your copy of TigerCreate, click on the “New TigerCreate 2 Book” option in the start dialogue. In the window that then appears, select at least one language and complete the Book, Name and Copyright fields for each selected language (you can also enter a random sequence of characters in the “Copyright” field for now).

 

     

 

Press ENTER to confirm your entries, then click on the Create button, which should now be active. Once you have done this, a Save dialogue will appear. Here, you can define where you want to save your new project folder.

 

 

The name of the project folder should match the title you have entered in the Book Name field. The project folder contains further folders – most of which are empty – and a project file. The most important folders for now are Images and Sounds. As mentioned above, all your images will be saved (in PNG format) in the Images folder, while your audio files go in the Sounds folder.

 

Creating a scene

Once TigerCreate has created the project folder, it automatically opens your first scene, which will still be empty at this point.

 

 

There are several important elements at the top of the screen, including the setting options for your work environment. In the middle of the screen is the workspace itself – a white triangle (the stage) surrounded by a grey grid. On the left is the directory structure that TigerCreate has set up in your project folder. This is known as the Project Navigator. The right-hand side of the screen is currently empty, but will soon contain various settings for building and playing your scene, depending on the options you select.

 

 

Once a scene has been opened, it is automatically placed in Edit mode, which allows you to edit your scene. Above the workspace, there are two buttons: Edit and Preview. These can be used to switch between the two modes. You will spend most of your time working in the Edit mode. Preview mode is designed to allow you to run checks whenever you need to, e.g. to test animation sequences and interactions.

Find the project folder in the Finder, and copy the images and sounds you have created into the corresponding sub-folders, Images and Sounds. After a few seconds, you will be able to see the images in the TigerCreate work environment using the Project Navigator and use them in your scene. Drag one of your images out of the Images folder and onto the stage. A rectangle, a blue circle and other lines will appear around it. To the right of your image, you will see various display and setting options, including options for its position on the stage (X and Y position), which is calculated starting from the top left-hand corner of the image. Move the image around the stage to see how its positional data changes.

 

     

 

Drag more images onto the stage.

The view on the right of the screen is called the Object Inspector. This shows the properties for an object on the stage whenever it is active or selected. Some of these properties – position, size, rotation (Angle), etc. – can be altered either using the various handles around the object on the stage itself or by modifying the fields in the Object Inspector, e.g. by entering new values or moving the controls.

Click on the small document symbol in the top right-hand corner. This view is known as the Scene Inspector, because you can use it to modify the settings for the entire scene. If you have already prepared a background image (as a PNG file, see above), right-click on the image field under Background Image and use the dialogue that appears to select your background image. The background image will then be immediately linked to the scene and fill the background of the stage. Alternatively, you can use the Background Color field to select a block colour for the background.

 

          

 

Save your scene in the Scenes folder in your project folder by going to the File/Save… menu. Name your screen something like “Scene01”.

To add a constant ambient sound to your scene, go to the Project Navigator – the directory structure on the left that contains folders such as Images and Sounds – and drag a sound from here to the field marked Ambient Sound. Your sound should be approx. 30 seconds long and not end too abruptly, otherwise there will always be a break when it is repeated in an (endless) loop.

 

 

Click the Scene Navigator symbol at the top of the column on the left. Here, you will see a thumbnail view of the images that have already been imported into the scene. The Scene Navigator shows almost all of the assets being used in a scene (sounds and the background image are not shown). Click on the + symbol at the top of the Scene Navigator and, in the menu that appears, select Text. A text box will appear on the stage.

 

 

Click on the text box, move it around and scale it to a convenient size. Once you have done this, click on the small square to the top left of the text box. A pencil appears. You have now activated Edit mode for the text box, and can write or copy your text into it.

 

 

To format the appearance of the text, click on the object symbol on the bar in the top right. This will open the Object Inspector again. Scroll down with the mouse until the Text Properties appear. Here, you can modify a number of settings for the selected text area: font, size, alignment, etc.

 

 

We have now created a scene with a background image, objects in the foreground, a constant ambient sound and a text. But if we want to have more than just a still image, we will also need animations.

 

Creating animations

In this example, we will animate a ball. We will give the ball two different animations. At the beginning of the scene, the ball will roll onto the screen. If the user then taps on the ball, it will bounce on the spot a couple of times.

  • Let’s start by dragging the ball to the right-hand edge of the stage. From here, we want it to roll to about the middle of the stage.

 

 

  • You can activate the Animations Inspector using the middle symbol in the top right-hand corner of the screen.

 

 

  • We will use the + symbol to create new animations. These will automatically be assigned to the ball that is selected in the workspace. We will call this animation “Ball-Rolling”.
  • In the fields below the name, we set the Number of Frames to 60 and the Loop Time to 3; further down, we can see that the Total Time is now 3:00 seconds.

 

 

  • We can now start working on the animation itself in the Animator. To do this, click on the blue dot on the left-hand side of the Animator. The dot will turn red to signal that Animation mode is active.

 

 

  • In the Position line, the first frame of the timeline is selected. This is indicated by the transparent red bar. Clicking on the Position line will create a key, making this frame a key frame. Scroll to frame 60 at the end of the timeline and click on the timeline at the top (where the number 60 is) to move the transparent slider to this frame (alternatively, you can also drag the slider to the required position).

 

 

  • Frame 60 is selected. Let’s create another key here for Position, as this is the point where we want the animation to be completed and the ball to be in the middle of the screen.
  • To make this happen, we now need to drag the ball in frame 60 to the position on the stage where we want it to be at the end of the animation.

 

 

  • Notice that there is a line in the bottom part of the Position line that connects the two key frames to images 1 and 60. If you click on this area, a pop-up menu will appear. In this menu, we are going to select “Ease Out” instead of “Linear”. This will make the ball slow down at the end of the animation, coming to a gradual stop.

 

 

  • There is just one more small thing we need to do before we can test this movement: in the Animations Inspector (on the right), activate the checkbox under ‘Start’ in the top left, next to the ball animation symbol. The check mark indicates that this animation is now a start animation. This means that it will start automatically when the scene is opened.

 

 

  • Let’s test the scene using the Preview function (button to the top left of the timeline). When we do this, we can see straight away that something isn’t right – the ball is moving, but it’s gliding instead of rolling. As such, we need to add a couple of rotations.
  • We want the ball to roll onto the screen from right to left, so it needs to be permanently rotating as it does so. In frame 1 of the animation, we go to the Rotation line and create a key. We then do the same for frame 10, frame 20 and every tenth frame up to frame 60.
  • We move the slider from key frame to key frame, i.e. from 1 to 10, 10 to 20, etc., and rotate the ball by approximately half a rotation each time. In the last two key frames – frames 50 and 60 – the rotation needs to be reduced, as this is where the ball starts moving much more slowly.

 

 

  • By testing it using the Preview function, we can see that our first animation is now complete. You can use the Preview mode to test individual animations and interactions. However, it is not a substitute for more specific testing of an e-book on different end devices.

We want the second animation – the bouncing of the ball – to be triggered when the user clicks on the ball after it has come to a stop. To do this, we will right-click on frame 60 and copy the key for Position. This position will act as the starting point for the second animation.

 

 

  • Click on the + symbol in the Animations Inspector again to create another animation for the ball. We will give this animation the name “Ball-Jump”, a length of 70 frames (Number Of Frames), and a duration of 3 seconds (Loop Time). Since this is not a start animation, we will not check the ‘Start’ checkbox.
  • With the ‘Jump’ animation selected, right-click on frame 1 in the timeline to paste the end position we copied from the ‘Rolling’ animation. This will ensure that the animation begins where the ball comes to a stop after rolling onto the screen.

 

     

 

  • In the Position line, we will now create further keys in the frames 15, 25, 35, 42, 49, 56, 60, 63, 65, 67, 68 and 69. In all these frames, the ball starts in the same position: on the floor.
  • When the user clicks on it, we want the ball to jump up, land on the ground, jump up again, fall down again, etc. However, each jump should be progressively smaller, with the ball finally coming to a stop in frame 69. As such, we will move the ball up vertically on every second key frame (i.e. 15, 35, 49, 60, 65, 68), starting with a large amount and then reducing this amount from key frame to key frame.

There are two ways of moving the ball:

  1. a) Manually, though this is imprecise. You could end up moving the ball sideways, and would need to check how high the ball was in the last key frame each time you moved it.

b) By entering numbers. To do this, we will change the inspector view on the right from Animations Inspector (middle symbol) to Object Inspector (left-hand symbol). The Position Y field shows the current value for the height of the ball. Since the value is calculated starting from the top left-hand corner of the stage, it is probably quite high. In order to move the ball higher, we need to reduce this value. In this example, we will reduce the Position Y value by about 650 pixels for the first jump (frame 15) then by successively smaller values, down to a maximum of 50 pixels at frame 68.

 

  • In order to trigger this animation, we need to define a triggering object. This could be either the ball itself or another object. In order to keep our example simple, we will make tapping the ball itself the trigger for the bounce*: Towards the bottom of the Object Inspector, you will find the Touch Properties category. This contains just one option: Has Touch Event.

– – – –

* It is good practice to place all touch events (clicks used to start an animation) on what are known as Nodes – invisible, scalable objects – positioned over the object itself. This helps you to maintain a clear overview of your touch events, even in complex scenes with a large number of objects and animations. We have deliberately decided to keep our example more simple.

– – – –

  • Once we have checked this box, we can click the + symbol in the pop-up list that appears to select our ball, then choose the animation we want from the sub-menu: ‘Ball-Jump’. This links the ‘Ball’ object to the ‘Ball-Jump’ animation with a click.

 

 

  • If we look at our animation so far in Preview mode, we can see that there is still room for improvement; the ball moves up and down very mechanically. This is because all of the movements happen at the same speed.

To make this more dynamic – and thus more realistic – let’s go back to the Edit mode and take another look at the timeline for the ‘Ball-Jump’ animation.

  • In the bottom section of the Position line, we can once again see a line that represents the movement between each pair of key frames. Think back to our first animation: we can speed animations up or slow them down. For each time the ball jumps up, we will select ‘Ease Out’ as the type of movement between the key frames; for each time it falls, we will select ‘Ease In’.

The animation now looks much more dynamic in Preview mode – we can already see the results, even if we could make the whole thing even more polished by making the ball squash and stretch (Scale line) when it hits the ground.

However, there is one more aesthetic crease we can iron out: at the moment, the animation always starts when the user taps on the ball, even if it is in motion at the time. This can lead to skipping in the sequence, which does not look good. In the worst-case scenario, a user could tap the ball while it is still rolling onto the screen, causing the ‘Ball-Jump’ animation to start straight away. In order to prevent this from happening, we will make one more small – but effective – correction.

  • In the Object Inspector, where we also created the links to the animation, we will go to Touch Properties -> Animations and then change the mode (Mode). Using the pop-up menu, we will switch from ‘Start’ to the bottom option, ‘Start If No Active Animations’. This ensures that all the animations linked to an object (in this case, just ‘Ball-Jump’) can only be triggered if the objects involved (in this case, the ball) are not already playing an animation.

 

 

  • If we now start the scene in Preview mode, we can see that it is no longer possible to start the animation until the ball has actually come to a stop.

We will now run a slightly more extensive test using the new Quick Test function, which is located in the top left. This starts a separate player that shows the scene exactly as it will later appear in the e-book. But before we can use that, we need to finish our scene.

 

 

  • Click on the document symbol in the top right-hand corner of the inspectors area to open the Scene Inspector. This is where we changed the background of the scene earlier on. Further down on this bar, you will see the Scene Screenshot Properties and a notice telling you that you have not yet created a screenshot for this scene (or the selected language). Press the Create From View button to create a screenshot using the current view of the scene (if you are using more than one language, you will need to do this separately for each language).

 

     

 

  • Save your scene and start the Quick Test. (You may need to download the app first. However, this can be done quickly and automatically with just a click.) The TigerSimulator app will start up and load the current scene. The menus at the top of the screen present a number of options, and among other things enable you to test the view on different end devices.

 

  • At the same time, the ‘Publish Info’ window will also open. This provides you with an overview of the scenes you have exported and the amount of storage space taken up by the graphics they contain.

 

     

Back To Top

Interface

General

Generally speaking, the TigerCreate program interface can be divided into the following areas:

  • In the toolbar at the top of the screen, you can alter the project and scene settings
  • In the area on the left, you can manage all the assets that belong to your project
  • The area on the right contains the Scene and Asset Inspectors, which allow you to adjust a wide variety of settings
  • In the middle of the screen is the workspace itself, including the stage

 

Back To Top

Toolbar

On the top left of the screen are three buttons for testing and publishing your e-book – Quick Test, Test Build, Publish. On the top right are the general Project Settings, underneath which is a bar containing buttons that can be used to adjust the view of the current scene.

 

 

The testing and publishing functions are described in greater detail later on in this manual, but their purposes are basically as follows:

  • Quick Test exports only the current scene and opens it in TigerSimulator.
  • Test Build exports the entire project or parts thereof to one of the supported formats and, if necessary, launches the TigerSimulator.
  • Publish publishes your project in one of the supported formats once you have tested it thoroughly in different environments.

Back To Top

Project Settings

The project settings will seem familiar to you – at the very least, you will have already come across the first area, Options, when creating a new project:

  • Options allows you to choose the name and format of your project, as well as the languages it will support.
    • Orientation: Choose between landscape and portrait.
    • Author: Enter your own name or that of the author(s).
    • Supported Languages: Choose at least one language (TigerCreate currently supports 20 languages, including some Asian languages).
    • Book Name: Enter a book title for each of the languages you have chosen. The title in the first language you have chosen will also act as the name of the project folder.
    • Copyright: Enter the name of the copyright holder here. Here too, a separate entry is required for each language.

 

 

  • Skinning & Navigation provides options for influencing how the navigation elements look throughout the project. Caution: in addition to this, you can also modify individual elements in each scene (see Scene Inspector).
    • Show Previous Scene Navigation Button: This checkbox and the one below it allow you to determine whether you want options for navigating forwards and backwards to be displayed as permanent elements on every screen. Note: you can also browse/jump to another scene using buttons within a scene (see Object Inspector/Touch Event).
    • Transition: This option is only displayed when the above checkbox is checked. If this is the case, you can choose how the system transitions between scenes using the options in the pop-up menu. Move moves one scene off the screen and replaces it with the other. Fade makes the screens fade in and out. Page Curl simulates the act of turning a page in a book.
    • Show Next Scene Navigation Button: see above
    • Navigation and Text Blade: The display shows the default navigation elements – the Previous button, the Next button and the Menu button. You can replace these elements individually, either by dragging and dropping or by right-clicking in the element in question and choosing the “Select File…” command to load a new image from the UIAssets project folder. As explained below, an image file (PNG with transparency) with the dimensions 160 x 160 to 256 x 256 pixels is required for this.

 

  • The Default Text Options allow you to adjust the universal settings for how text is displayed.
    • Use Automatic Font Scaling for Text Objects/for Text Blade: These checkboxes allow you to ensure that text in text boxes is scaled automatically when the e-book is viewed on a device with a small display. Depending on the size of the screen, the text will be scaled up by a factor of 1.5 or 2 to ensure that it remains legible. This also has an effect on your text breaks: text that no longer fits in its text box as a result of the scaling will become scrolling text.
    • Use Text Options per Language: If this checkbox is checked, the text options below it will only ever apply for the current language. This allows you to define different text designs for different languages.
    • Default Text Options: Here, you can define parameters such as the default font, default font size, default font colour, line height (spacing) and text alignment (justification).
    • Scrollbar Color, Opacity & Size: Here, you can adjust the settings for a vertical text scrollbar. (The scrollbar will appear automatically if a text box contains more text than can be displayed at once.)

 

  • Hints are flashing information symbols that, by default, appear every few seconds to indicate where there is something the user can tap. When using hints, please note that the program will cycle through all the interactive elements in your scene that have hints, even if they are still outside the visible stage area at the start of the scene. As such, if you have a large number of interactive elements, it can take a few seconds before the hint icon appears at a certain point.
    • You can use the Active checkbox, which is checked by default, to switch off the hint function for your entire project if you wish. There will then be no flashing hint symbols in your project at all.*
    • Hint Icon: The default symbol is a semi-transparent, white circle. You can replace this either by dragging and dropping or by right-clicking on the icon and using the “Select File…” command to select a different graphic (e.g. a 138 x 138 pixel PNG file with transparency) from your project folder.
    • The fields below this option (Initial Wait, Duration, Delay…) allow you to modify the behaviour of the hint icon – whether there is a delay before it first appears, how often and for how long it flashes above a button, and the length of the pause before a new flashing cycle begins.
    • There are also two more checkboxes that allow you to determine how the hint icon behaves during flashing (Fade and Scale).

 

 

*If you want to switch off the hint function for individual objects only, you can do this using the ‘Show Hint’ checkbox under Touch Properties in the Object Inspector.

Back To Top

Scene Settings

There are various buttons above the workspace that affect the view of the current scene.

 

 

These are described briefly below, from left to right:

  • Edit: You will see the Edit mode by default whenever you open a scene. This view allows you to create your scene, import or create assets, create animations, link them to sounds, etc.
  • Preview: You cannot alter the scene any way in this view. However, you can test the entire scene sequence and check the speed of animations and – importantly – interactions. The Preview mode is not intended as a substitute for extensive testing on different end devices and platforms, though it does give you a first impression of how your scene will look.
  • Language: There will already be one language selected here for the current scene. Since multilingual projects allow you to use different text, sounds, images and animations for different languages, you can use the Language Choice option at any time to try out your scene in different languages. (Note: the settings for whether a project is multilingual and, if so, what languages it supports, are defined when you first create the project. However, you can also change these settings at a later point in the Project Settings.).
  • 2D/3D: These two buttons allow you to switch between 2D and 3D mode, providing you have checked the 3D option in the Scene Inspector. At first, switching to 3D will not change anything. The small – but important – difference can be seen at the bottom of the workspace: by holding down the ALT/Option key and left-clicking, you can now change the camera perspective! You can find more information on working in 3D here.
  • Local/Global: This option refers to the coordinates of the objects you are using in a scene. Basically, it this is to do with the different coordinate reference points for Nestes (parent-child) objects. More information can be found at the link above, and also in the Object Inspector description.
  • Animator: Opens the animation tool with the timeline for editing animations. If no object or animation is currently selected, the timeline will be empty save for a system information text.

 

 

However, if an animation is selected, it will be displayed together with ist key frames. To edit an animation – i.e. to add new keys or to adjust values (position, rotation, etc.) for key frames – click the small, blue button on the far left of the timeline (Toggle Animation Recording Button). This will start Record Mode. As long as the button remains blue, none of the changes you make to individual key frames in an animation will be saved. Animations can only be edited in Record Mode. Record mode is active when the button and the transparent vertical bar (slider) in the timeline are red.

 

 

Which object properties you can change/animate via the timeline depends on the type of object in question. Generally speaking, you can always adjust the Position, Rotation, Scaling and Opacity. Images also have an Image line, which can be used to replace the image shown in an animation (see Sprite sheet animations). If a sound is linked to an animation, the Audio line will also be shown, and the sound will be displayed as a curve.

To the right of these properties is a small padlock symbol. Clicking on this symbol will lock the padlock and protect the individual properties from being changed by accident.

Every property that can be edited in the timeline has a segmented line: the keys are placed in the top half, and under them, the link between the keys is shown by a connecting line – this is known as the Easing. This shows the curve for the interpolated change in values between key frame A and key frame B. If you click on this line, you will see a pop-up menu for selecting other curve types. This allows you to speed up or slow down an animation (movement, rotation, etc.), for example. This will make your animations move more realistically.

 

 

The set changes can be seen easily by the shape and colour of the lines between the key frames. By default, changes are set to ‘Linear’. The diagram below shows the different options available (from left to right): Linear, Ease In, Ease Out, Ease In Ease Out, Ease In (without actual change), None. The last two are the most important. The penultimate section is set to Ease In, as can be seen from the curve. However, since there is no actual change in values between the two key frames in question, the sequence can also be accelerated – this is why the curve has a grey background.

By contrast, the last section is red as no interpolation is meant to happen here – None. This means that there will be no change between the penultimate and the last key frames at first; instead, the set change in value will be implemented ‘suddenly’ in the last key frame, i.e. without a transition.

 

 

To the left above the timeline is a bar containing buttons for controlling the animation(s). These are, from left to right: Back to beginning, Back to previous key frame, Play/Pause, Skip to next key frame. Note: these control elements only ever affect the current timeline. If you press Play, only the animation in this timeline will start, not the entire scene and all its other animations.

The line below displays information on the animation: a symbol for the animated object, the name of the object and, above that, the name of the animation and the group it belongs to (if applicable). The triangle button to the left of the object icon allows you to show or hide the editable properties. The pin icon is both a display element and a button: if it is filled in, the animation is ‘pinned’ and will be permanently displayed (and played), even if a different animation is selected. If only the outline of the icon is shown, you can click on it to ‘pin’ the animation.

To the right of the control bar, the Pinning Actions button allows you to select one or more Pinning Groups of animations from a pop-up menu. These will then be displayed simultaneously in the timeline. Active groups are always displayed (and played), even if no animation or object is selected.

(More information on pinning groups and creating and editing animations can be found here.)

 

 

At the bottom left of the enlargeable Animator window is a scale indicator. The slider can be used to alter the scale of the timeline. The further to the right it is moved, the more frames are shown in the visible section of the timeline. Existing keys can be seen in every view. To the right of this scale, you will see the current time within the timeline, which is indicated by a movable, transparent, vertical bar (slider).

  • Options: Refers to the view of the workspace and stage. For example, you can switch off the background grid or change its size and colour. There are also various options for the view in the Edit and Preview modes, including showing borders on all interactive objects to make them easier to distinguish.

 

Back To Top

Asset Management

On the left of the user interface are the Project Navigator and Scene Navigator.

The Project Navigator maps out the structure of your project folder to allow you access to all your assets. For example, you can drag individual images onto the stage from the Project Navigator when you want to use them in your scene.

 

 

The slider at the bottom allows you to adjust the size of the image icons. The dimensions of each image (width and height, in pixels) are displayed underneath its name. For sounds, the Project Navigator tells you the length of the sound and allows you to listen to individual sounds. (Note: unlike images, sounds are not imported onto the stage directly. Instead, they are linked with specific individual objects or animations. More information can be found here.

At the top of the Project Navigator, you will find the following options:

  • Search function: Enter text in this window to restrict the project folder view so that it only shows assets that match your search term. For example, you can search for “Flower” to view all the assets that contain this sequence of letters in their names.
  • Filter File List: This option can be used to adjust which files from the project folder are displayed in the navigator. This can be particularly useful if you have a lot of images that you use frequently, as it allows you to hide all other media from your view.
  • You can use the + symbol to create mini games. Unlike the three main game types – Doodle, Memory and Puzzle – these games can be launched individually within a scene using a touch event, so the user does not have to leave the scene.

You can choose from the following types of game:

  • QuestGame   // Find 1-5 objects in the picture and tap on them.
  • QuizGame      // Answer a question on the story (multiple-choice).
  • RhymesGame        // Out of a selection of 6 words, choose the ones that rhyme with the word provided.
  • SpellGame     // Use the letters provided to make a word you can see in the picture.
  • SpotGame      // Find 5 differences between the two pictures.
  • SpotGameAR                   // Find 5 differences between this picture and the one in your book.

All these games can be configured with their own images, backgrounds and sounds. You can find more detailed information on how to edit games here.

 

 

The Scene Navigator lists all the objects that appear in a scene. These could be linked images, or texts, nodes or Bézier curves that have been created in the scene. The only items not listed in the Scene Navigator are background images and sounds that are linked to the scene. Sounds are displayed as links in the Object Inspector or the Animations Inspector, while background images are listed in the Scene Inspector. Each object is represented by a square icon.

Underneath each object are details on the type of object it is, its hierarchy level (local order, see blow) and its dimensions in its basic state (width & height in pixels).

To the left of each object are two symbols that modify how it is displayed in the Editor:

  • Click on the unlocked padlock symbol to protect an object from being selected and edited accidentally. This is especially useful if you have several objects close together and overlapping in a tight space.
  • Click on the eye symbol to temporarily hide an object. This is especially useful when you have several objects in a tight space but only wish to edit certain ones.

At the top of the Scene Navigator is an input field, which you can use to help you filter all the objects listed in the Scene Navigator and limit your view to specific objects. The Filter List And Selection option just below the input field allows you to further restrict your results.

 

 

You can use the + button in the top right-hand corner of the Scene Navigator to create additional objects that will only be available in the current scene. These include the following object types:

  • Node
  • Bézier
  • Text
  • Text Blade

 

 

Node

A node is a type of empty container. This option creates a transparent square approx. 400 x 400 pixels in size. By default, this is given the name “UntitledNode”. Just like any other object, this node can be scaled, rotated, moved, animated, etc. What makes a node different is that it will be invisible in the finished e-book (and is thus also invisible in Preview mode). This allows you to use a node as a type of button, for example. You can either simply place this button above a part of the background image (e.g. if there is a car there that needs to make sounds but not move), or use it as a kind of invisible collection box for other objects. This is especially useful for parent-child objects (for more information, see below and here).

 

Bézier

Like nodes, Bézier curves cannot be seen in the finished e-book. They act as invisible paths that other objects use for orientation. For example, you could use a Bézier curve to define the flight path of a bird or a line/curve along which the user can move another object. Unlike images, nodes and text boxes, Bézier curves cannot be assigned animations of their own. Nevertheless, you can scale, rotate and position them however and wherever you want. When you create a Bézier curve, a small rectangle with an arrow will appear to the top left of it. This indicates that the Bézier curve is in Transformation mode. In this view, you can scale, rotate and move the Bézier curve as a unit. Click the rectangle to switch to Edit mode for the Bézier curve. The arrow will change into a pencil, and the Bézier curve itself will be given a series of handles that can be used to edit it. More information on using Bézier Curies can be found here.

 

Text

The Text option allows you to create a text box. This will appear as a rectangle in the middle of the stage, containing a dummy text in the set language. Like Bézier curves, text boxes have a Transformation mode – indicated by the small rectangle with the arrow – in which they can be positioned, rotated, scaled and also animated. There are two different types of scaling you can use. If you simply drag the corner and side points, you will change the size of the text area. This may affect text breaks, but it will not change the font size in any way. If, on the other hand, you hold down the Control key while dragging the side and corner points, you will also scale the text itself. Like most other objects, a text box can be assigned one or more animations – for example, it could be given a start animation that makes it fade in slowly and another animation that causes it to fade out or move off the stage when clicked.

In Edit mode, which you can enter by clicking on the small square to the top left of the text box, you can edit the contents of the text box. Enter your text using the keyboard, or copy it into the box from the clipboard. The Object Inspector contains a variety of settings for font type, size, colour, etc. For more information, see Working with Text.

 

Text Blade

Text Blade creates a large text box that covers the width of the entire stage and appears at the bottom of the screen. Inside this area is a configurable text box. In the finished e-book, the text blade will at first appear as just a tab at the bottom of the screen (which acts as both an ‘Open’ and a ‘Close’ button). When tapped, it will move further onto the screen. Like normal text boxes (see above), text blades have a Transformation mode and an Edit mode. The transformation mode can be used to scale the text blade and thus the text box (downwards), while the Edit mode can be used to enter text with the keyboard or copy it in from the clipboard. The Edit mode offers the same text properties as for normal text boxes, but the additional Text Blade Properties area will also appear in the Object Inspector. This enables you to adjust the following settings:

  • The height of the text blade relative to that of the stage (Blade Height; range between 20% and 70%). This value corresponds to the handles on the bottom edge of the text blade.
  • The percentage by which the stage is shifted upwards when the text box appears (Scene Movement). If this value is 0, the text box will simply obscure the bottom part of the stage. Since this is not usually what is required, you can set a percentage for how far up you want the stage to be moved.
  • How close the text itself is to the side/top of the text blade (Fill Unit Width and Fill Unit Height).

Text blades cannot be animated, though they do already have a preset animation (Text Blade Audio) in the Animations Inspector. This refers to a linked speech sound or imported files for word highlighting (for more Details,see Word highlighting).

As with other navigation elements, you can modify how a text blade actually looks using the Scene Inspector (see also Scene Skinning Properties).

You can use the button at the top, to the right of the + button, to remove the selected object from the scene – and thus from the Scene Navigator. (Alternatively, you can also use the Backspace key or right-click > Delete.)

At the bottom of the Scene Navigator is a slider. You can use this to enlarge/shrink the image preview icons.

 

Hierarchy in the Scene Navigator

The order of objects in the Scene Navigator mirrors their layering on the stage itself. The lower down an object appears, the closer to the top it will be on the stage. For example, if you drag ten images onto the stage one by one from the Project Navigator, TigerCreate will sort them alphabetically at first – the “Arm” object will be higher up the list in Scene Navigator than the “Head” object”, and so will be behind or underneath it on the stage. To change this order, you could then change the names of the objects used in the scene, e.g. by renaming “Arm” to “RightArm” so that it moves up the hierarchy (in terms of its stage position). [Caution: objects in Scene Navigator will not be rearranged as soon as their names are changed; updates are set on a time delay]. Since this would be rather impractical, there is a simpler option for modifying the order. This is known as Local Order. The local order can be set for every object in the scene in the Object Inspector. By default, every object that is imported into or created in the scene is assigned the local order = 0. This places it at the lowest level, directly on top of the background image. Increasing an object’s local order moves it to a higher level. Within a local order, or Z level (imagine the objects being arranged along the Z axis, even for 2D scenes), alphabetical organisation applies as described above.

This means that if you want to move the “Arm” object further up so that it is in front of/on top of the other objects, you will need to increase its local order value in the Object Inspector. (Note: the local order can also be set to a negative value in order to place one object behind another. Even if an object has a negative local order value, it will always be displayed in front of the background.)

 

Parent-child objects

The Scene Navigator can also help you to combine objects to form complex, interdependent objects – also known as parent-child objects. Imagine a butterfly made up of a slim body with a head, plus two wings. In order to lend its behaviour a certain sense of realism, two types of movement are required: the wings must flap while the butterfly as a whole moves across the scene. In this case, it makes sense to combine the individual wings with the butterfly’s body to make a parent-child object, so that the wings flap as expected and follow the body as if they were pinned to it and, if necessary, all the parts are scaled and rotated as one unit.

In order to turn several objects into a parent-child object, you first need to consider which of the objects should be the main (or parent) object. For the butterfly, this clearly needs to be the main body, to which the wings are attached on the left and right. In the Scene Navigator, drag the object you wish to use as your child object (in this case, a wing) onto the parent object (the butterfly’s body). The child object will seem to disappear, but a small triangle will appear next to the padlock and eye icons for the parent object. If you tap this triangle, the parent object will expand to reveal all its child objects, offset to the right. The child objects are now assigned to the parent object. Nothing changes in the way the objects are displayed on the stage (*with one exception; see below). However, if you move the parent object, the child objects will automatically be moved, rotated, scaled etc. with it. You can find more information on parent-child objects and how they affect the animations of the individual parts here.

 

 

*The child objects will also be assigned to the parent object in terms of the order/hierarchy. Even if a child object has been assigned its own local order, it will take on the hierarchy level of its parent object. Within the complex parent-child object, the hierarchy order – and thus the way the objects appear on the stage – will be as follows:

  • The parent object will be in the lowest position, and thus visibly behind (!) its child objects.
  • The child objects themselves will be sorted either alphabetically or using their previous local order, despite being assigned to the parent object.

Example: Take a parent-child object comprising a butterfly’s body and two wings. Originally, the two wings were assigned the local order = 2, while the body had a local order = 0. Now that they have been combined to form a complex object, the wings still have a local order = 2 but, as they are now child objects, they are subject primarily to the local order of their parent, which is still 0. As such, if another object – a bee, for instance – with a local order =1 were introduced, it would obscure both the butterfly and its two wings. The local order of the child objects still exists, but it only applies within their parent object.

Back To Top

Inspectors

On the right of the user interface is the inspector bar. This displays the Object Inspector, Animations Inspector and Scene Inspector.

As the name indicates, you can use the Object Inspector to modify the settings for a selected object:

  • Generic Properties
  • Default Transformation Properties
  • Touch Properties
  • Bézier Properties
  • Text Properties
  • Text Blade Properties

The Object Inspector offers a range of features, including detailed settings options for position, rotation, scaling, opacity and spatial placement (Z axis). You can also use the Object Inspector to link objects to animations and sounds, or turn them into interactive objects.

Select an object to view its current settings on the stage. You can also enter values for any variable directly. For example, if you want to place multiple objects in the exact same position, simply select all the objects in question and enter the required coordinates for X Position and Y Position.

 

Generic Properties

In the Generic Properties area, you can see the current status information for an object.

This starts with the name (Unique Name), which matches the file name by default. If an object is used more than once in the same scene, a number (1, 2, etc.) is automatically added to the end of the name. However, you can change these names at any time, e.g. from “S01_Butterfly_WingLeft” to just “Wing left”.

The Locked and Visible checkboxes under Editor States correspond to the Padlock and Eye icons in the Scene Navigator, and define whether an object is locked or visible.

 

     

 

Base Image refers to the original image in the project folder to which the object is linked. To the right of the symbol and name of the current asset is a symbol that looks like a link in a chain. This button is the Image Pointer. It can be used to reassign the original image or create a link to a different image in the Project Navigator. To do this, left-click on the original image and drag it onto an image in the Project Navigator. The name, properties and all animations will remain unchanged; only the picture will change.

Alternatively, you can drag a new asset into the Base Image field from the Project Navigator.

Local Order defines the position of an object in relation to the background, i.e. the layering. By default, every object you import into a scene from the Project Navigator will be given the value Order = 0 so that they are all on the same level. When this is the case, the objects will be arranged in alphabetical order; an object named “Dog” will be placed behind an object named “Tree” but in front of one called “Axe”. If you wish to employ a more specific ordering structure – ‘further forward’ or ‘further back’ – you can increase the Local Order value. The higher the Local Order, the further forward the object in question will be. In principle, you can also use negative Local Order values to position an object further back. However, even if they have a negative value, all objects will always be displayed in front of the background.

Outline Color (debug) opens the colour selection options. The colour you set here will only be applied to the current object. These options are linked to the settings under the Options button in the toolbar above the stage. For example, you can use the Options to set a coloured border (outline) for all objects that have a Touch Event (all clickable objects). This is a highly practical way of maintaining a clear overview over all your objects during production, especially in complex scenes. In order to distinguish between such objects and those that have a touch event but have not yet been assigned an animation, you could use different coloured outlines, for example.

 

     

 

Default Transformation Properties

The Default Transformation Properties reflect the basic settings for an object if there is no active animation assigned to it (in the Animations Inspector). If an object has one or more animations and one of these is currently selected, the heading for this section will also change to Key Transformation Properes (for more information, see the Animations area).

From top to bottom, the Transformation Properties relate to:

  • The position of the object (Position xy). Since the coordinates are calculated starting from the top left-hand corner of the stage, negative values mean that the object is outside of the stage area. The same applies for values greater than X = 2048 and Y = 1536, as these are the coordinates of the bottom right-hand corner of the stage.
  • Angle z represents the rotation of the object. This is calculated as a value between 0° and 360°, i.e. within the range of one full revolution. As described below, the (movable) anchor point is relevant for the rotation of an object, as this is the point around which it rotates. As the name Angle Z indicates, this value refers to the spatial Z axis; while the X and Y axis define the position of the object on a plane, Angle indicates the angle by which the object is rotated around the Z axis (moved backwards in terms of depth).
  • Scale xy, the scaling of the object. A value of X = 1 and Y = 1, or (1/1), corresponds to the original size of an object. If X = 2 and Y = 1 (2/1), the object would be twice the length of the original, but exactly the same height. Values of (.5/.5) would cause the object to shrink to a quarter of its original size. Negative values would cause the object to be mirrored horizontally (e.g. Scale X = -1) or vertically (e.g. Scale Y = -1).

The object’s Anchor point (see above) is also important for scaling, especially in animations, as this is the point from which the scaling of the object is calculated.

  • Anchor xy, the object’s anchor point. By default, every object that is dragged onto the stage from the Project Navigator has an anchor point – a bold, white x – at its exact centre, corresponding to the values ‘.5’ or (‘0.5’). The anchor point is especially important for transformations such as rotation and scaling, as the transformations will be calculated in reference to this point. As we have already mentioned, an object will be displayed with a rectangle with handles and a circle around it when it is active. The anchor point can be moved freely; the top left-hand corner of the rectangle corresponds to the values (0/0) and the bottom right-hand corner to (1/1). The anchor point can be positioned outside of the object’s rectangle. The effects of this can be seen clearly if you move the anchor point a good distance outside of the rectangle and then rotate the object.

Click on the small dots on the grid intersection in the Object Inspector to position the anchor point precisely in the corners or the centre of the object’s rectangle.

  • The transparency or opacity of the object. The opacity of the object can be set to anywhere on a scale of 0 to 100, where 0 = completely transparent and 100 = completely opaque.

 

 

The rotation and opacity values (Angle Z and Opacity) each bear the suffix (local). This is a reference to the difference between local and global values (see the Local and Global buttons above the workspace). Basically, this is to do with the different coordinate reference points for nested objects (parent-child objects). Take the example of a butterfly whose individual parts – the body and two separate wings – are nested together to create a complex parent-child object. Before you start the nesting process, you will place the wings to the left and right of the body. Each of the parts will then have its own transformation values (position, scaling, rotation). The moment the parts are nested with one another, the values displayed for the child objects will change, becoming local values in reference to the centre of the parent object, which acts as the zero point. If you want to view the original (pre-nesting) values, switch the display from Local to Global at the top of the workspace. The values for the rotation (Angle Z) and opacity (Opacity) will not change; these are always shown as local values.

You can copy all the Transformation Properties in a single operation and transfer them to another object. To do this, use the + symbol in the circle to the right of the Transformation Properties heading. Clicking on this symbol activates the adjacent button (arrow symbol), as well as the arrow symbols to the left of the individual properties (Position, Scale, etc.). Next, select a different object. By clicking on this object’s arrow symbols, you can transfer either all the transformation properties you have copied (click on the arrow symbol to the right of the heading) or only specific ones (click on the arrow symbol to the right of a specific property, e.g. Z Angle).

Caution: if you have activated the 3D option for a scene in the Scene Inspector, the view for the Default Transformation Properties will also change. The properties Position, Scale and Angle each have their own X, Y and Z values. For more information on this, please refer to Using 3D.

 

Special considerations for text boxes:

Text boxes are objects that are created and edited within a scene. This is done using the Editor mode, which allows you to edit and format the text,. There is also a different mode for changing the position, orientation and scaling of the text box. In the latter mode, the Default Transformation Properties display acquires a new line: Size (width, height). This shows the length and height of the text box.

 

 

Touch Properties

The Touch Properties section primarily offers just one option – Has Touch Event. Checking this checkbox makes an object interactive.

By subsequently tapping the object, you can …

  • Trigger animations linked with this object
  • Trigger animations for other objects
  • Play sounds
  • Trigger or jump to another scene
  • Launch one of the mini games in the scene
  • Start AR mode for this scene
  • Open a hyperlink

More details on these options are provided below. The Show Hint and Show Hint At Anchor checkboxes allow you to switch off the hint symbol for this object or, in the case of the second option, to adjust the behaviour of the hint symbol more precisely.

You will generally adjust the hint behaviour using the Project Settings (see corresponding section). However, if you do not want a flashing hint for a particular object, you can switch it off here. Show Hint At Anchor sets the hint symbol to flash exactly above the object’s anchor point.

 

 

Touch Properties is split into three sections – Animations, Sounds and Miscellaneous.

Under Animations, you can link one or more animations with the object in question. These could be animations that refer to the object itself (click on the frog to make it jump) or belong to other objects (click on a tree and a few birds fly out of it).

There are two ways of linking an animation to an object:

  • Clicking on the + symbol opens a pop-up window that lists all the objects with animations. To the right of each object is a small triangle; clicking on these opens more lists containing all the animations for the object in question. You can use this method to select one or more animations. These will then be listed one under the other together with further information.

Extra tip: the Add All From Animator function in the pop-up window refers to ‘pinned’ animations, i.e. animations that are being kept active using the pinning function (for more information, see Working with Animations.). This function allows you to add several animations to the list simultaneously.

 

 

  • The second option is perhaps even more convenient, especially when there are a lot of objects in a scene and many of them also have animations. In such situations, it can be difficult to keep track of everything. Click and hold the left mouse button to drag the link icon, or Animation Pointer, at the bottom right of the animation list into the stage area. Whenever you hover the cursor over an object with animations, a list of the objects in this position will appear. This provides you with a convenient way of selecting the animation you want. Animations that have already been selected are marked as such.

 

 

The Mode option allows you to define how a selected animation is played:

  • Start – starts all the (linked) animations from their starting points
  • Start Once – plays all the animations exactly once from start to end
  • Stop – stops any linked animations that are playing and returns them to their starting points
  • Toggle Start/Stop – stops any animations that are currently playing (see above) or starts them from the beginning; this trigger object alternates between being a Start button and a Stop button
  • Pause – pauses any running (linked) animations without returning them to their starting points
  • Unpause – resumes playback of paused animations from the point at which they were paused
  • Toggle Resume/Pause – resumes paused animations or pauses playing animations; alternates between Pause and Play
  • Toggle Start/Pause – alternates between Pause and Start (from beginning); animations that are currently playing are paused (Pause), paused animations are restarted from the beginning (Start)
  • Start If No Active Animations – starts the animations in the list, but only if none of the objects linked to them is already being played in an animation

 

 

Let’s look at an example to make things clearer: imagine a ball that belongs to multiple animations – ‘Ball rolls from left to right’, ‘Ball bounces from right to left’. You want to control the two animations using two different buttons: one on the left of the stage and one on the right. In order to ensure that ‘Ball rolls from left to right’ is not triggered while the ball is bouncing from left to right, the trigger objects (buttons) are assigned the Start If No Active Animations touch event.

The Use Different Animations Per Language checkbox allows you to use different animations for different languages. This means that, in addition to using language-specific graphics and sounds, you now have even more control over the way scenes are set up and played in different languages. When using this feature, please make sure that you link animations for every supported language; unlike graphics and sounds, animations have no default that can be used if no other option has been selected. You can find more information on multilingual support here.

Unlike animations, you can link sounds to an object by dragging them into the sound list in Touch Properties from either the Project Navigator or the Finder. In this list, the sound will be displayed together with its full file name and settings. As soon as a sound is selected in this list, setting options for Volume, Delay, number of repetitions (Loops) and the start and end time will appear below it. As soon as the start and/or end times of a sound are changed, this trimming will be reflected in the sound preview curve below these options. You can then move the bars in this preview using your mouse. The total play time based on the settings (including the number of loops) is shown above the settings. Below them, you can see the length of the trimmed sound, not including delay and loops.

 

 

As with animations, there are several control options for playing a sound:

  • Start – starts all the sounds in the list from their respective beginnings
  • Start Once – plays all the sounds exactly once from start to end
  • Toggle Start/Stop – stops any sounds that are currently playing (see above) or starts them from the beginning; this trigger object alternates between functioning as a Start button and a Stop button
  • Toggle Resume/Pause – resumes paused sounds or pauses playing sounds; alternates between Pause and Play
  • Start If No Active Sounds – starts the sounds in the list, but only if none of them is already being played

 

 

The – symbol below the sound list allows you to remove a selected sound from the list. The + symbol in the circle on the right allows you to copy sounds together with their settings and transfer them onto other objects. This also works when changing scenes, so you can transfer sounds across different scenes.

The Miscellaneous section at the bottom allows you to select actions that will allow the user to exit the current scene or temporarily switch to another mode.

 

 

  • Go to Scene allows you to trigger or jump to another scene. Once you have selected a scene from the pop-up menu, other options (Delay and Transition) will appear. These affect how the transition to the selected scene is displayed and how long it takes. You can choose to Move the current scene off the screen, Fade in and out or simulate the action of turning a page (Page Curl).

If you want to start one or more animations and wait until they have finished before jumping to another scene, you will need to set the Delay for the Go to Scene option accordingly.

 

 

  • Start Game adds one of the mini games to the scene. This will open inside the scene. (For more information, please refer to Creating and Adding Games).
  • Start AR Mode starts AR mode for this scene: the internal camera is activated, and the scene ‘augments’ the camera image, bringing it to life. In order for this to work, the Use Augmented Reality option must be activated in the Scene Augmented Reality Properties area in the Scene Inspector. In addition to this, an AR scene needs to be already prepared, and you will also need the original book – the Target Image. You can use this function to build your own scenes in order to introduce the user to the concept of AR and how it works. The camera’s AR mode will then not start until a “START AR” button or similar is clicked.
  • Open Link opens a hyperlink, such as the address of a website or an e-mail address with subject and content. These are opened in a browser. You can then return to the e-book story using the task menu in Android or the new “Back” button at the top left in iOS.

– – – – –

Other properties in the Object Inspector

The properties listed above are shown for all object types. However, there are also some properties that are only displayed when certain types of object are selected:

Bézier Properties

If a Bézier curve is selected on the screen, the Object Inspector will display special properties for Bézier curves in addition to the standard object properties.

  • Closed – This connects the two ends of the Bézier curve, thus forming a closed curve.
  • Reverse Points – Swaps the start and end points of the Bézier curve so that it runs in reverse (from right to left).
  • Convert to – Opens a pop-up menu that provides a selection of geometric figures (e.g. circle, square) and previously saved Bézier curves (see below) that the current curve can be converted to.
  • Export As Shape – Exports the Bézier curve, allowing you to name it as you wish. This allows you to use the saved curve as a template in other scenes (see Convert to, above).
  • Global Points – Lists all the points and controllers (handles) for the Bézier curve. If the curve is in Edit mode, the values can also be modified directly in the list. (For more details on Bézier Curies, see here).

 

 

Text Properties

The Text Properties offer a number of options for editing either all or part of the contents of a text box:

  • Block Transformations allows you to move the selected section of text both horizontally and vertically. Check the Impacts Following checkbox to ensure that the offsets are transferred from word to word (of the highlighted text).
  • The Scrollbar settings define how the scrollbar looks (the scrollbar appears automatically when the amount of text exceeds the limits of the text box).

These settings are followed by the usual options for font type, size, colour and alignment, line height, etc. These can be saved as your default settings (Save As Defaults) or overwritten with your current defaults (Load Defaults). This means that you only need to save your formatting once, and it will be automatically applied to text in other scenes. However, these two commands are only ever applied to highlighted sections of text.

 

 

Text Blade Properties

When a Text Blade – a movable text box – is added to a scene, settings for the text blade will appear in the Object Inspector in addition to the text properties:

  • Blade Height (range: 20% to 70%) – Defines the height of the text blade relative to that of the stage; this values corresponds to the handles on the bottom edge of the text blade.
  • Scene Movement – Defines the percentage by which the stage is shifted upwards when the text box appears. If this value is 0, the text blade will simply obscure the bottom part of the stage. If you do not want it to do this, you can set a percentage for how far up you want the stage to be moved.
  • Fill Unit Width and Fill Unit Height – Define how close the text itself should be to the side/upper edge of the text blade.

 

 

The Animations Inspector is where animations for an object are created, configured and managed. If animations have already been created for an object, they will appear in a list at the top. Each animation is displayed together with a preview icon of the object, the name of the animation, the duration of the animation and the name of the object. To the left of the icon is a checkbox that allows you to turn an animation into a start animation. This means that it will start to play automatically without any triggering elements (buttons) when the scene starts, and cannot be controlled (Start, Stop, Pause, etc.). There is also another column that shows the Pinning status of the animation in the form of a small pin, and allows you to change it (see below).

 

 

In addition to this, the Animations List is used to define new animations (+ symbol), delete existing animations (– symbol) or copy entire animations in order to transfer them to other objects (+ symbol in circle and the adjacent arrow symbol). The latter of these functions can also be applied across different scenes. For example, you can copy the animation for a ball (fall, bounce, roll, etc.) from Scene A onto a hat in Scene B, and the hat will then perform the exact same movement sequences, rotations, scaling procedures, etc. as the ball in Scene A. Essentially, this process copies the values for the properties (Object Properties) at defined points in time (key frames) and the settings for duration, repetitions, etc. that you have stored in the Animations Inspector. Of course, the two animations can be modified independently of one another after copying.

 

Defining the settings for an animation

When a new animation is created or an existing one selected, the corresponding timeline automatically opens in the stage area and the object is shown in its status at the start of the animation. Depending on the size of the window, the timeline may be displayed as just a relatively thin strip. However, it can be expanded downwards. (The timeline can also be displayed independently of animations by pressing the Animator button above the workspace. If no animation is selected, the Animator area will be empty.)

The Animator is where the actual animation of the object takes place: keys are used to modify settings such as position, rotation, scaling and opacity at defined points in the timeline. TigerCreate calculates the intermediate values. More details on creating animations can be found here: Working with Animations.

The Animations Inspector, on the other hand, is used to define the basic settings for an animation.

Let’s have a look at the individual settings in detail:

  • Name:

Giving each animation a clear name will make it easier to keep track of them – “Jumping frog” is much easier to find among a large number of animations than “Untitled 3”.

  •  Pinning Group:

Animations that are ‘pinned’ are played in Editor mode when the slider (position indicator) in the timeline is moved. Normally, only currently active animations will run when the timeline is played. ‘Pinning’ an animation changes its status to ‘active’. This allows you to play multiple object simultaneously in Editor mode (for more information, see timeline and Working with Animations). In order to make it easier for you to work with several animations at once, pinned animations can be bundled together in a Pinning Group.

In this area of the Animations Inspector, you can define a new pinning group by clicking on the gearwheel icon (left) and then, in the pop-up window that appears, clicking the + symbol. If there are already pinning groups in your scene, a pinning group can be assigned to each animation using the Select menu. This animation will then always be played together with the group’s other animations in Editor mode.

 

 

  • Number Of Frames:

How many frames do you want the animation to run for? The lower the frame rate, the less refined your changes will look.

  • Loop Time:

How many seconds do you want the animation to run for when it is played one full time?

__________

Caution: Number Of Frames and Loop Time are linked to one another by a padlock symbol. You can lock and unlock this padlock by clicking on it.

When the padlock is unlocked, these two parameters will need to be adjusted separately; if you increase the Number of Frames from 30 to 60, for example, the Loop Time will not change. In this case, the animation would run through twice as many frames in the set Loop Time, meaning it would run faster.

When the padlock is locked, the two parameters are linked – doubling the number of frames will result in the Loop Time also being doubled. In this case, the speed would remain the same, but the animation would take longer to complete.

__________

  • Loops:

How often do you want your animation to be repeated?

  • Ping Pong:

Do you want your animation to be reversed once it has reached its end point (Ping Pong), or for it to start again from the beginning? Note: in order for this to work, the number of Loops must be set to > 1.

  • Delay Time:

Do you want the animation to start straight away (0), or only after a brief pause (in seconds)?

  • Total Time:

The previous settings are combined to give the total time of the animation. If you want an animation to run through 30 frames in 2 seconds and be repeated 3 times, your total time for the animation will be 2 x 3 = 6 seconds.

  • Follow Path:

You can make your animation run along a Bézier curve . This makes the flight of a bird, a butterfly or a thrown object look more realistic. To do this, select a Bézier curve from the pop-up menu (note: the menu only shows Bézier curves that are in the current scene).

  • Drag Along:

When this option is used, the animation progresses based on the actions of the user. The user can ‘grab’ the object and move it back and forth along a path or the defined animation route. As soon as it is ‘released’, it comes to an immediate stop and remains unchanged until it is moved again by the user. The rotation, scaling and opacity of the object will change depending on the progress of the animation along its route, just like they would if the animation ran automatically. The speed of the movement for Drag Along objects is not affected by the set Loop Time (see above); it is defined by the program itself. The Loops option (number of cycles, see above) is inactive in this mode.

 

__________

Caution:

In order for the Drag Along option to work for an object, the animation must be set as a start animation (see above), or the object in question must have a touch event. This means that you need to activate Has Touch Event for the object in question in the Object Inspector and link it to the corresponding animation.

If a Delay Time has been set (see above), you should set this back to 0 before activating the Drag Along option.

__________

  • Free Drag:

This disables the animation created in the Timeline in Animator mode (the Timeline no longer displays any editable properties). Instead, you can now use the Limit Movement option to define a rectangle or circle within which the user can move the object freely.

If you choose a rectangle, you will need to define the distance in which the object can be moved up, down, left and right from its starting point. In extreme cases, it will be able to move across the entire stage. If you choose a circle, you will need to define the freedom of movement as a radius (Max Radius).

The Min Pinch Scale and Max Pinch Scale options allow you to set upper and lower limits for the scaling of your object. In Preview mode, hover the cursor over the object and scroll to scale the object using a zoom-type feature.

In order to use Free Drag, you will need to set an animation as a start animation (see above). To do this, you must again set the Delay Time to 0 before selecting Free Drag.

 

 

  • Is Scratchable:

This function can be used to make an object ‘erasable’, allowing the user to scratch it out bit by bit. You can also adjust the size of the eraser area (Brush Size) and set a limit for the percentage at which the object is classified as ‘erased’, at which point it will disappear completely (Complete). In principle, it is still possible to animate an object that has been scratched – e.g. by adding a start animation to it so that it moves slowly across the stage. However, this approach has only limited uses.

One example of when the scratch function can be useful is when you have hidden something behind an object, and want to remove the foreground object by erasing it.

 

 

__________

Caution: Normal touch events will be ignored during a scratch animation!

If an animation is set to run more than once (Loops > 1), the area that has been scratched out will be restored at the start of each animation loop.

__________

 

  • Animation Sounds:

This is another way of linking an animation to a sound; the first is by linking the two via a touch event . However, while an animation can, in theory, be started via several touch events – and thus with different sounds – any sound that you link to an animation using the Animations Inspector will always be played when the animation starts, even if another sound has been linked to it via a touch event.

 

 

Drag one or more sounds into the field below Animation Sounds one at a time, from either the Project Navigator or the Finder. If you link several sounds together, they will be played simultaneously, not one after the other! The – symbol at the bottom of the Animation Sounds list can be used to remove a sound from the list, and thus from the animation. You can use the + icon in the circle on the right to copy the linked sounds together with their settings and transfer them to another animation.

The options that appear when you select any sound allow you to configure it:

  • Audio Delay Time sets a delay time (in seconds) that must elapse before the sound starts.
  • Start Time determines whether the sound itself will be played from the beginning, or some point in the middle.
  • End Time determines whether the sound will be played through to the end or cut off at an earlier point.
  • Trimmed Audio shows the total play time for a selected sound and, below this, a visual preview/test listening option. (Caution: if you have set a Delay Time, this will not be included in the displayed Trimmed Audio time!)

__________

Caution: Whether a sound is played through to the end or for as long as you have configured it to do so using the Delay, Start and End Time settings depends primarily on the Loop Time specified above. This is the time the animation needs to be played through in its entirety. For example, if the Loop Time is set to 4 seconds, any sound that is playing will also be cut off after 4 seconds. If you have set a higher number of Loops for the animation, the sound will start again from the beginning at the start of each loop. The sound will behave differently if you have also activated the Ping Pong option. In this case, the sound will keep playing until the animation returns to its starting point (i.e. twice as long as for a single run-through). After this, it will play back again from the beginning.

__________

 

Settings for text boxes

There is one thing to remember when the object you have selected in the Animations Inspector is a text box. Of course, it goes without saying that you can also use TigerCreate 2 to animate (move, fade in, fade out, etc.) text boxes. But in the Animations Inspector, you can also use an animation to link a text box with a speech sound and corresponding word highlight data.

To do this, start by defining a new animation – it doesn’t matter whether you actually want to animate the text box or not. The following options will appear at the bottom of the Animations Inspector:

  • Speech Sound: You can use this option to link your speech sound (the voice of a narrator reading the text) to the text box by dragging a sound file (mp3) into the field from the Project Navigator or the Finder. In the sound curve preview that then opens, you can set the Volume and listen to a preview of the sound.
  • Highlight Color: You can use this option to select the colour used to highlight the word that is currently being read in the text box.
  • Next Speech: If you are using more than one text box in a scene, together with this speech sound and word highlighting, you can play one speech sound first and then link to the next one using the Next Speech function. The next speech will then be played when the first text box is finished.
  • Import Highlight Data: You can use this option to select a (text) file that already contains the data for your word highlighting and import it into your scene. This might be the case if data for this text and the linked sound highlight were originally created in another file and exported, for example.
  • Export Highlight Data: If you have created highlighting keys for a text and the speech sound linked to it in a scene, you can use this button to export this data as a text file, e.g. to use it on the same text in another scene. To find out more about the procedure for creating word highlighting data, see Word highlighting.

 

 

Meanwhile, the Scene Inspector allows you to adjust the settings for the scene as a whole.

The Scene Inspector is split into 5 sections, each of which affects a different area of the scene.

Scene Generic Properties

 

 

In the top section, you can define:

  • Whether you want the current scene to support 3D mode. This mode offers you more ways of animating objects and using depth. You can find more information on 3D mode in the text that appears when you check the checkbox, and also here.
  • Whether a scene has a background image or a block colour backdrop. To use a background image, drag an image that fills the whole background (PNG format without transparency*) directly into the field next to Background Image from the project folder in the Finder. Alternatively, you can right-click in this field and choose your image via the “Select File” menu.

The Background Color field is only shown if you have not assigned a background image for this scene. Click in this field to access a variety of colour selection systems.

* We recommended that you keep your image files as small as possible in order to keep scene loading times to a minimum, or use tools such as pnggauntlet.com or tinypng.com to shrink images such as PNG files down without sacrificing too much in terms of quality. This is especially recommended for background images due to their size.

 

Scene Screenshot Properties

Every scene needs a preview that represents the scene, such as a screenshot. The screenshot could capture how the scene looks at the start or at a specific point during its playback. A separate screenshot needs to be taken for each language version.

You can choose a screenshot one of two ways:

  • Drag an image (JPG format) into the Screenshot field from the Project Navigator, or directly from the project folder in the Finder. When doing this, please note the different names used for language-specific files.
  • Use the Create From View button to create a screenshot of the scene in its current condition.

Once you have done this, switch languages within the scene and repeat the process for each language. The Scene Inspector will show you if you have not yet created a screenshot for any of your languages.

You can also edit and reload the screenshot after you have created it. To do this, drag the image (a 510 x 384 pixel JPG) onto the Finder and edit it in an image editing program.

You can use the Checkbox Display in Thumbnail bar option to modify whether the scene preview will subsequently be shown in the e-book’s navigation bar so that the scene can be triggered directly. This option is activated by default, but you may have a good reason to deactivate it.

 

 

Scene Sounds Properties

Here, you can define the sound you want to use as your Ambient Sound. To do this, drag a sound file from the Project Navigator into the long field.

You will then see a preview of the sound curve and be able to listen to a preview of the sound and set a separate volume for it. The best ambient sounds are generally sounds at least 30 seconds long that end in such a way that there is no break or skipping in the sound if when is repeated on an endless loop.

 

 

The See All Sounds function shows an overview window containing all the sounds used in the scene. This shows the name of the sound, where it is stored in the Finder, the object to which it is linked and the method used to link it – whether it is an animation sound or a touch event sound.

 

 

Scene Start Animations Properties

The only option here, Use Different Animations per Language, allows you to assign different animations to different language versions of the same scene. This expands the range of ways in which you can make a scene different depending on what language it is viewed in. Of course, you can already use different texts, sounds (speech and other sounds) and images (e.g. the writing on a sign or how a police car looks) for different langsames (see Multilingual Projects). And now, you can also use different start animations:

When you open the Scene Inspector, you will see a list of all your start animations (animations that start automatically, i.e. without a touch event). If you check this checkbox, this list will be emptied – but the animations will not be deleted! The display simply shows the status for the active language, which is empty by default. Use the + symbol to select one or more start animations for the current language. Once you have done this, change language and assign start animations for your next language.

You can also assign the same animation to multiple languages: maybe you are using a total of three animations in the scene, one of which will be the same in every language. If this is the case, simply assign it to every language.

 

 

Caution: The + symbol gives you access to all the animations in a scene, including the dependent animations! If you add a dependent animation to the list of start animations for a language, it will also be turned into a start animation (for the language in question). However, the touch event assigned to it will also remain assigned to this animation. This means that the animation will be played automatically at the start of the scene using the settings in the Animation Inspector, and can then be played again using the predefined touch event.

You can use this little ‘trick’ if you want to assign two different animations for the same object in different languages (e.g. if you want a frog to hop off the left side of the screen in language A, and off the right side in language B). To do this, set the first animation as a start animation and the second as a normal animation. When they are assigned in different languages, the animations will then both become start animations in their respective languages.

 

Scene Augmented Reality Properties

In this area there is only one option, which allows the use of augmented reality in the current scene. Put simply, augmented reality allows you to bring the environment (e.g. the original book) to life through combined use of the e-book and a camera.

The text that appears behind the question mark symbol indicates the AR files that need to be stored in the “ar” folder in the project folder.

 

 

When you activate the checkbox, further text will appear to explain the procedure for using AR in a scene in more detail. You will need a Target – a predefined point over which the scene is animated. This target image must be saved in a predefined format and then managed in a database (Vuforia). More details are available here.

Once the AR option has been activated, messages indicating that AR files have not yet been saved to the project folder will appear, together with a new field. You can drag an image to this field to set it as the target image, or right-click in the field and use the “Select File” option to browse for the file location.

 

 

Scene Navigation Properties

You can use this section to modify the general settings you have established or confirmed in the Project Settings on an individual basis for specific scenes. This can be useful in many situations, e.g. if the scene in question serves as the starting point for several narrative threads, rather than as part of a linear thread with fixed scenes before and after it. In this case, navigation to other scenes could be triggered by touch events on individual objects.

The default setting is Use Project Navigation Options. This displays the navigation elements as defined in the Project Settings. Deactivate this checkbox if you want to define on a scene-by-scene basis whether you want to use buttons for navigating to the previous and next scenes (Show Previous Scene Navig. Button), and what kind of Transition you want to use when changing scene. There are several options for transition effects: No Value (no effect), Move (moves one scene off the screen and replaces it with another) Fade (fade in/out) and Page Curl (a page-turning animation). When you choose an effect, further options will appear to allow you to adjust factors such as the duration of the transition (in seconds).

 

 

Scene Skinning Properties

This section allows you to adjust the appearance of the navigation elements for the current scene independently of the general Project Settings.

 

 

Navigation Buttons Skinning

Here, you can see the symbols currently set for use as the navigation elements. If you want to use your own icons, save them in the UIAssets folder in the project folder. To change a symbol, either right-click on it and go to “Select File…” or drag a suitable image into the field directly from the Project Navigator/UIAssets or Project folder/UIAssets in the Finder. The symbol image should be between 160 x 160 and 256 x 256 pixels in size, and be saved as a transparent PNG.

Any changes you make here will be applied only to this scene. If you want to use a different image symbol for all your scenes, click on Make Default. This will overwrite the existing Project Settings so that the new symbol appears in every scene that does not have its own individual settings.

If you use your own images as navigation elements in this way, they will be linked to the scene in question. This means that if you change or overwrite the external image, it will also be automatically changed in every scene it is linked to.

 

Text Blade Skinning

The principle used for the navigation buttons (see above) also applies here. However, this section allows you to modify the appearance of the text blade box. This applies to the ‘tab’ that always appears at the bottom of the scene (the ‘Open’ and ‘Close’ button), and the background on which the (transparent) text box is displayed. When changing the background, remember that you might need to adjust the colour of the font in the text box.

The Make Default option allows you to apply these changes to all standard scenes, thus updating the Project Settings.

Back To Top

Stage and Workspace

Everything you can see in a scene plays out on the stage – the area the scene occupies in the finished e-book. Scene size and orientation are defined universally for all scenes in the Project Settings (see above). There is an important distinction to be made here: the stage is the rectangle that can be seen in the finished e-book – the area occupied by the background image. The workspace, on the other hand, extends beyond the stage and is marked out by the grey background and the grid. While everything in the workspace may not (yet) be visible on the stage, it is in the scene – just outside the visible (stage) area. This distinction is important when an object is only meant to appear in or exit a scene after a delay (e.g. a car driving into or out of the scene).

 

 

You can use the mouse (scrolling or sliding) to zoom in or out of the stage view. By holding down the right mouse button, you can move the visible section of the stage. You can use the Options button (see above) above the workspace to modify the size and appearance of the background grid and the way objects behave on it (alignment).

Part of the stage is bordered by a movable turquoise rectangle. The format of the stage itself is 4:3; the smaller rectangle indicates the area that will be visible on devices with a 16:9 aspect ratio. In every scene, you can move the smaller rectangle around to define which area will always be visible (Safety Zone).

In the Editor view, the edge of the stage is also marked by a thin grey line. This runs over all the objects so that you can always see what is actually on the stage, even when using large images that are only partially in the stage area.

 

 

Foreground and background on the stage 

A scene is always essentially made up of background and foreground. The background is created using an image in PNG format, which can be selected and replaced using the Scene Inspector. This background image has a fixed position on the stage; it cannot be moved, scaled or rotated.

All the other objects in a scene are positioned ‘on top of’ or ‘in front of’ the background image, thus forming the foreground. The foreground is made up of different order levels – there are options for “further forward” and “further back”.

If you drag several objects into a scene one after the other, TigerCreate will place them in alphabetical order at first. This means that an object named “Ball” will always be placed behind an object named “Stone”, regardless of which object is added first. This applies both in the Scene Navigator (bar on left) and on the stage. This order will not change even if you give the “Ball” object a different name (Unique Name in Object Inspector) after you have added it to the scene.

The most common way of defining the front-to-back order is by using the Local Order setting, which you can set separately for each object under Generic Properties in the Object Inspector. The higher the Local Order value, the further forward an object will be on the stage. When objects are first imported, their Local Order = 0 – this is why they are placed in alphabetical order at first. If you change the Local Order value for an object, its position in the Scene Navigator will also change automatically: the lower down an asset appears in the Scene Navigator, the closer to the ‘top’ it will be on the stage. If several objects have the same Local Order value, their alphabetical order in the Scene Navigator will determine which is placed furthest forward.

This does not apply to Text Blades. It is not possible to set a Local Order value for text blades, as it makes sense for them to always be on top of other objects.

 

 

You can move, rotate, scale and alter the opacity of objects on the stage. You can do this either by using the input fields in the Default area/the Key Transformation Properties in the Object Inspector, or by manipulating the object in question directly on the stage (though only the former option can be used for opacity). To proportionally scale an object, hold down the SHIFT key and drag one of the handles on the rectangle that defines the object’s borders.

Back To Top

Working with TigerCreate 2.0

Working with Animations

The Latin word animare has several meanings, one of which is “to enliven”, or breathe life into something. While we don’t want to go quite that far, it serves as a good metaphor for what we want to achieve – giving the illusion of life by moving things.

The term ‘animation’, then, refers primarily to a form of movement:

  • This could be linear movement between two or more points, i.e. a distance travelled by an asset (usually an image).
  • Over this distance, there could also be a difference in speeds, with either an acceleration or deceleration occurring.
  • If we’re not taking the shortest route from A to B, but instead travelling along a curve or winding course, we call this a path animation – the asset is moving along a path.
  • If the asset remains at its starting point the entire time, perhaps turning on its own axis, this is called a rotation.
  • Changing the size of an asset – also known as scaling – is also a form of animation. If the asset is not scaled proportionately, we call this distortion.
  • An animation doesn’t necessarily have to include a movement – an asset could also fade out gradually until it is invisible, or slowly fade into view. When it comes down to it, both of these transformations are essentially changes in opacity.

What all these possibilities have in common is that they represent types of visible change.

Animations are always linked to objects in a scene. As such, they are never shown as independent assets in the Scene Navigator. Instead, they are created and managed in the Animations Inspector. The Animations Inspector is located in the sidebar on the right. When an object is selected or marked on the stage or in the Scene Navigator, the Animations Inspector displays all the animations that involve the object in question.

 

 

Simple animations

In principle, animations are created by following a simple pattern:

Import objects into the scene – Create a new animation in the Animations Inspector – Specify length, speed and other factors – Define the starting status for the object in the timeline (key frame) – Use other key frames to make changes to the position, rotation, size and opacity of the object.

All of this will be easier to follow if we go through an example step by step. In our example, we want a leaf to fall from a tree.

Both the tree and the leaf are imported into the scene as assets, and the leaf is initially placed in the treetop.

 

 

  • In order to make sure that the leaf is positioned further forward than the tree, we need to increase its Local Order from 0 to 1. We can do this in the top area of the Object Inspector. The Local Order value determines how far in front of the background an object is positioned. The higher the value, the further forward the object is. When assets are first imported, their Local Order = 0.

 

 

  • Next, we will select the leaf, open the Animations Inspector (right sidebar, middle symbol) and use it to create a new animation. We will call this animation ‘FallingLeaf’.
  •  We want the fall to take 4 seconds and include 100 frames (frame rate: 25 frames/second).

 

 

___________

Caution: The Number Of Frames and Loop Time are linked to one another by a padlock symbol. You can lock and unlock this padlock by clicking on it.

When the padlock is unlocked, these two parameters will need to be adjusted separately; if you increase the Number of Frames from 30 to 60, for example, the Loop Time will not change. In this case, the animation would run through twice as many frames in the set Loop Time, meaning it would run faster.

When the padlock is locked, the two parameters are linked – doubling the number of frames will result in the Loop Time also being doubled. In this case, the speed would remain the same, but the animation would take longer to complete.

As such, there is an important difference you must remember if you want to alter the duration of an animation at a later point:

  • If you increase the Number Of Frames without changing the Loop Time, the animation will take just as long as before, but play more frames – making it faster.
  • If you only increase the Loop Time, the animation will take longer, but the same number of frames will be played. This means that the movement/animation will be slower.
  • As such, if you want to increase the duration of an animation without altering its speed – e.g. because you want to tag another movement onto the end – you will need to adjust both the Number of Frames and the Loop Time. The easiest way of doing this is by locking the padlock, thus linking the two values.

___________

  • If the timeline is not yet open, you can click on the Animator (above the workspace). Clicking on the round, blue button on the far left activates Record mode for the timeline. You will need to be in Record mode in order to set keys and make changes to animations. You can use the Scale Timeline option at the bottom of the Animator window to adjust the view so that you can see the entire length of the animation.

 

 

  • In the current frame, frame 1 (the transparent red bar – the slider – indicates the current position), we want to set keys for Position and Rotation in order to save the current status of the object.
  • We will also set more keys in frame 100, at the end of the animation. In the timeline, a line is now shown between the keys in frames 1 and 100 to indicate that an animation may take place during this time. If we were to play the animation now, however, nothing would happen, as the status of the object at the start of the animation is identical to that at the end.

 

 

  • Set the slider to frame 100 (by clicking in the frame scale at the top), then move the leaf to its end position on the floor. There are several ways of doing this:
  1. a) Use the mouse to drag the leaf from one position to the other on the stage itself.
  2. b) Use the arrow keys on the keyboard to move the leaf (hold down Shift to move in larger increments). This option takes far too long to be useful for our example.
  3. c) Adjust the values in the Object Inspector. In the Key Transformation Properties area, you will see X and Y values for the Position of the object. Since we are primarily interested in moving the leaf downwards on the vertical axis, change the Y value to approx. 1,000 and fine-tune afterwards using the mouse, if necessary.

 

 

  • For as long as the ‘FallingLeaf’ remains selected, you can test what you have done so far with it by pressing the Space bar to run the animation.
  • In order to make the animation a little more life-like, we will create a few more key frames between the start and end points. In these frames, we will make the leaf move sideways several times while rotating on its own axis. To do this, click on the scale at the top to move the slider – the red bar in the timeline – forwards 15 frames at a time to frames 15, 30, 45, etc. In each of these frames, we will set another key by clicking in the Position and Rotation lines.

 

 

  • Once you have set all your keys, you will need to adjust the values for Position and Rotation in the individual key frames (15, 30, 45 etc.). You can either do this manually using the mouse, or by changing the values for Position (x) and Angle (z) in the Object Inspector.

 

 

Start animations – Dependent animations

  • If you launch the Preview function – the simplest of TigerCreate’s internal testing options – at this point, you will see that the leaf does not move. This is because we have not yet defined whether we want the animation to start automatically (making it a start animation) or only when it is clicked (making it a dependent animation).

Let’s try out both. Open the Animations Inspector again – the area where we created the ‘FallingLeaf’ animation and can now manage its properties. To the left of the animation is a checkbox with the word ‘Start’ above it. If this checkbox is checked, the animation will start automatically. It will normally do this as soon as the scene and the object in question have finished loading. To stop it from doing so, enter a value of 5 seconds in the Delay Time box further down the screen. This means that the ‘FallingLeaf’ animation will not start until 5 seconds after the scene has finished loading, at which point it will play through exactly once. This applies in both the Preview mode and the final e-book.

 

 

  • If you do not want the animation to start automatically at all, you will need a trigger element, or Touch Event. You can assign touch events to the animation using the Object Inspector. Before you do this, however, it is useful to note that there are three ways of starting an animation using a touch event:
  1. a) By placing the touch event on the object itself: when the user clicks on the touch event, the animation to which it is assigned starts. This is not very practical for our leaf, as it is very small and hard to make out against the rest of the tree.
  2. b) By placing the touch event on another object: for example, the ‘FallingLeaf’ animation could start when the user clicks on the tree. We could take this one step further by adding another animation to the tree itself, making it move before the leaf falls to the ground. In order to do this, we would need to link two animations – wobbling tree and falling leaf – to one object. This is exactly what we’re going to do – only in a different way.

c) Experience has demonstrated that it is good practice not to link touch events to the moving object itself, e.g. an image. Instead, it is best to create a node and place this in the position where you want the animation to start. Nodes are transparent, rectangular objects that are invisible in the final e-book. (Nodes fulfil the same function as the buttons used in TigerCreate 1.)

 

Working with nodes as buttons

 There are many benefits to using nodes as buttons for animations.

  • If you have a complex scene with a lot of objects and animations, and want to make changes to your scene at a later date, it can quickly become difficult to keep track of which object controls which animation. If you follow the principle of “every animation must be controlled by its own node, and every node must have a clear name” it will be much easier to maintain a clear overview of everything.
  • When an image object controls an animation, it is always the object’s surrounding rectangle that acts as the button. If your tree is very high, this would be very impractical as the animation would be started not only when the user clicked on the treetop, but also if they clicked on the trunk or the areas to the left and right of it.
  • Many animations need to be triggered only once – no more. Think about an apple falling from a tree. Once it has hit the ground, there is no logical reason to click on it again and make it fall a second time. In such cases, it is helpful if the animation is triggered not by the object itself (the apple), but by a node, which is then removed from the stage area by an animation of its own. For an alternative, simpler way of solving this particular problem, see below.

Let’s return now to our example. We want to give the tree its own animation to make it move back and forth slightly before the leaf falls off it. We will execute this movement using a slight rotation.

When an object is imported, TigerCreate shows the object’s ‘anchor point’. This is automatically positioned in the centre of the object’s surrounding rectangle when it is first imported. There is a blue circle around the anchor point; this is responsible for the object’s rotation. If we were to rotate the tree while it remained in its starting position, it would turn around its centre point, causing the trunk to rotate as well. This would look decidedly strange.

 

 

  • Using the mouse, we will drag the anchor point to the bottom of the trunk, where the tree touches the ground.

 

 

  • The Animations Inspector will show no changes at first, as we have not yet assigned an animation to the tree itself. Now, we need to create a new animation, which we will call ‘Tree’. Set the length of this animation to 40 frames and 2 seconds (Loop Time) and increase the number of Loops to 2 so that the animation plays through twice in direct succession. You will notice that Total Time is now displayed as 2 * 2 = 4 seconds.

 

  • Since we only want a rotation, we will only set keys in the Rotation line of the timeline. In this line, set one key in frame 1 and one in frame 40 – we want the tree to be back in its starting position by the last frame. We also need to assign keys to frames 8, 20 and 32.

 

 

  • You can set the rotation in the Object Inspector by entering the corresponding numbers in the Angle field. Since we only want a slight rotation, it is better to use this method than to move the blue circle around the anchor point using the mouse. Move the slider in the timeline to frames 8, 20 and 32 in turn, and use the Object Inspector to assign these keys the values 1, 359 and 1 respectively. This means that the tree will rotate just 1° to the left and 1° to the right.

 

 

  • In Edit mode, you can start and stop individual animations by pressing the Space bar.
  • As you will recall, our leaf is currently positioned in front of the tree, so it will not move when the tree rotates. In order to keep things simple, we will now set the Local Order value for the leaf back to 0 in the Object Inspector so that it disappears behind the tree. (Alternatively, of course, we could also increase the Local Order of the tree to match that of the leaf.)
  • Press the + symbol in the Scene Navigator (left) to create a node. In the Object Inspector, we will name this node “Button_Tree”. We will then move and scale the node until it covers the majority of the treetop.

 

 

  • Further down in the Object Inspector, we also need to check the Has Touch Event checkbox. Next, we want to assign this node to both of our animations – ‘Tree’ and ‘FallingLeaf’. We will do this using two procedures:
  • Press the + symbol below the white field to open a pop-up menu listing all the animated objects in the current scene. If you move the mouse over an object, the animations assigned to it will be displayed. We will use this method to add the ‘FallingLeaf’ animation.

 

 

  • At the bottom right of the animation list is a small icon in the shape of a chain link, the Animation Pointer, which can be dragged around the screen using the mouse. Whenever the mouse moves over an object with animations, either on the stage or in the Scene Navigator, a list will appear of the objects in this location, together with their animations. Using this method, drag the Animation Pointer over the tree and select the ‘Tree’ animation. This will now also appear in the list of linked animations.

 

  • There are two things we need to bear in mind at this point:
    • A leaf can usually only fall from a tree once. At the moment, however, the animation will restart every time the user clicks on the treetop. In order to prevent this from happening, we need to set the Touch Properties for the node to Start Once in the Mode menu. This ensures that every animation linked to the node is only triggered once.*

 

 

*Further Mode options for Touch Properties are described in the Object Inspector/Touch Properties section.

  • Secondly, the ‘FallingLeaf’ animation is still set as a start animation, so it will start automatically even if the user does not click on the node button. As such, we need to uncheck the Start box in the Animations Inspector. While we’re here, we can also set the Delay Time for ‘FallingLeaf’ to 4 seconds instead of 5 so that this animation starts when the ‘Tree’ animation ends.

All done! If you now click on the treetop, the tree will shake back and forth for a few seconds and then a leaf will fall slowly to the ground.

_____

Caution: If you want to trigger a nested parent-child object comprising several individual objects (see corresponding section), it is important to ensure that all the animations for the individual nested objects that you want to play are linked to the trigger node via the touch event list!

_____

 

Special considerations for overlapping nodes

Wherever possible, you should avoid contact and overlapping between different nodes with touch events. However, if you cannot avoid this for some reason – e.g. because nodes are always rectangular and you are using them to cover several round objects that are close together – you will need to bear the following points in mind:

  • In 2D scenes, the touch event that will be executed is the one belonging to the node with the highest Local Order value. For more information, see Object Inspector/Generic Properties.
  • In 3D scenes, the touch event that will be executed is the one belonging to the node with the highest Z position. In 3D scenes, the Z position takes priority over the local order. The local order only plays a role if two overlapping nodes have the same Z position. In this case, as with 2D scenes, the node with the higher local order value will be triggered. For more information, see Using 3D.

 

Objects with multiple animations

In the example above, we had two objects with one animation each that were controlled by a third object (the node). However, it is also possible for one object to trigger multiple animations at different times/in different objects. In order to do this in TigerCreate 1, we would need to trigger different sections of the same timeline. In TigerCreate 2, on the other hand, every animation has its own timeline with its own parameters, such as length, speed and number of loops.

Let’s look at a simple example: a scene of a stylised field of flowers. A bee flies into the scene and hovers over the flowers. We’re going to create three animations for the bee, so that it flies between a few different flowers before returning to its starting point. We will control these three animations using invisible nodes placed over the flowers.

 

 

  • First, we will move the bee to the right of the stage so that it can fly into the scene. This position will act as the starting point for the first animation. We want the bee to start flying onto the screen automatically, so this needs to be a start animation.

Select the bee, then press the + symbol in the Animations Inspector to create a new animation. We will call this animation “Start-Bee”. Check the Start checkbox to ensure that the animation starts automatically, then give it a length of 80 frames and a duration of 4 seconds.

 

 

  • With the Animator open, activate Record Mode; the corresponding button and the bar in the timeline will turn red. Set a key in frame 1 to mark the bee’s starting position, off-stage to the right.
  • Next, we need to scroll to the end of the timeline using the slider and set a second key in the last frame, before moving the bee in this frame to about the middle of the stage, above the flowers.

In order to make the bee’s flight path when entering the stage more dynamic, click the lower half of the Position line in the timeline to open the control options, then select Ease Out. This will make the bee fly onto the stage quickly and then slow down at the end of its path (presumably upon discovering the flowers 😉 ).

 

 

  • In order to prevent any jerks or skipping between animations, we should now use the end point of this start animation as the start and end points for the three animations of the bee flying around the flowers. As such, we need to copy the end position of the start animation by right-clicking on it (‘Copy Key’).
  • We can now create the first of these flight animations in the Animations Inspector. We will name it ‘FlyToFlower_1’ and give it a length of 140 Frames and 7 seconds. We want the bee to fly to the big flower on the left side of the stage, stay there for a moment and then quickly return.

 

 

  • The start and end points of this animation need to be identical to the end point of the start animation: right-click in the first and last frames in the timeline to paste the Position key we copied earlier.

The bee should need 50 – 60 frames to reach the flower, remain in position for approx. 30 frames and then return at a slightly faster speed. We will set a key (Position) in frame 55 and move the bee in this frame to the flower.

 

 

  • If we start the animation as it is now (by pressing the Space bar or the Play button above the timeline), the bee will be facing backwards when it returns from the flower. As such, we will need to set more keys in the timeline for Scale. We want the bee to stay the way it is in the first and last frames; it only needs to be mirrored on its return journey, from frame 86 to the penultimate frame (139).

In the timeline, we need to set keys in frames 1, 85, 86, 139 and 140 in the Scale line. In frames 86 (the first frame of the return journey) and 139 (the penultimate frame of the return journey), the bee needs to be flipped around. To do this, go to the Object Inspector and change the Scale X value for these frames from 1 to -1. This will flip the bee around to make it a mirror image of its original state.

 

 

  • Our first animation is now basically complete, though you can still fine-tune it if you want: you could speed up the flight to the flower at the beginning and slow it down at the end again (Ease Out); make the bee move a little when it is on the flower (Position, Rotation); or set extra keys for Position to make the bee take a less direct route.

Now, we will follow the same pattern to assign two more animations to the bee – ‘FlyToFlower_2’ and ‘FlyToFlower_3’ – so that it flies to two more flowers further to its right. Once again, it is important to make sure that the bee never flies backwards by setting keys in the Scale line to flip it around whenever necessary.

  • Once we have created all three animations, we can use the + symbol in the Scene Navigator (to the left of the workspace) to create three nodes. On the stage, these will take the form of transparent rectangles that will be invisible in the finished scene. We will call these nodes ‘NodeFlower_1’, ‘NodeFlower_2’ and ‘NodeFlower_3’. Position them above the flowers the bee is going to fly to. The nodes will act as the control elements for the animations.

 

 

  • Open the Object Inspector to link the nodes to the individual animations. Select ‘NodeFlower_1’, check the Has Touch Event Checkbox in the Touch Properties and use the + symbol to select the correct animation (‘FlyToFlower_1’) from the list.

 

 

  • For the other two nodes, we will link the corresponding animations by dragging the Animation Pointer onto the bee rather than using the + symbol.

 

 

––––––––––––––––

  • Caution: Don’t be alarmed if your object seems to ‘disappear’ for no reason when performing these tasks, or if it appears somewhere unexpected. We have one object (in this case, the bee), but several animations; each animation has its own start and end point. If you switch between the animations in the Animations Inspector, your object will move to the current point in the timeline for the animation in question. If you click anywhere in the workspace, on the other hand, your object will move to the position it was placed in when it was first put on the stage, rather than the position it was moved to for its first animation.

Every object has a home position; this is where it will be located when it is not selected/marked. In addition to this, every animation has a starting position. This is not necessarily identical to the home position!

––––––––––––––––

  • Once all three animations have been linked to the nodes, we can test them one by one in Preview mode.

You will notice that we still need to make two aesthetic improvements:

  • Firstly, the bee might disappear behind one of the flowers, because the flower is positioned further forward on the stage than the bee. You might want this to happen with the yellow flower, but at the very least the bee should be further forward than the flower it flies to on the far right of the stage. To make sure this is the case, open the Object Inspector and change the Local Order value for the bee to 1 or 2. The bee will now be further forward on the stage, so it no longer disappears behind the flower.

 

 

  • In addition to this, the animation may jump in certain situations, e.g. if the user clicks on a flower before the bee has fully returned from a different flower. To prevent this from happening, go to the Touch Properties in the Object Inspector and change the Animation Mode for all three nodes from Start to Start If No Active Animations. This ensures that clicking on a flower (or the node placed over it) will only start an animation if none of the bee’s other animations are currently running.

 

 

Special animations

  • Sprite sheet animations – Lots of images, little movement

Despite all the options TigerCreate offers for animations, there are still some situations where complex workarounds are required to create certain effects.

As an example, take a look at this image sequence:

 

 

In order to animate this cleanly, we would need to divide the hippo into several separate parts and use several different water sections to cover the bottom half of the hippo at different points in the sequence – and that’s without even worrying about the foam and splashes. When you need to do all this for an effect that only appears briefly, it’s time to take a different approach. The magic words here are Sprite Sheet Animation. This function actually swaps the image on the stage for the next one in the sequence multiple times during the animation. Only the 6 images shown here are used for the animation. Each image contains only the part of the picture that changes, i.e. the hippo and the rings in the water around it. The rest acts as part of the background and remains unchanged throughout the entire sequence. It is important to ensure that all the images are the same height and width. You may also find it useful to number all the image names so that you can see more clearly which order they belong in.

 

 

Start by importing the first image – the starting status for the animation – into the scene. In the Animations Inspector, create an animation and set the number of frames and time in seconds for it. Once you have done this, go to the Animator and set a key in the first frame in the top line, Image. Next, move the slider to each of the frames where you want the next phase of the animation to appear, and drag the corresponding images for the next phase of the animation directly into the frame from the Project Navigator (Images folder). The image on the stage will be replaced and the anchor point, scaling, rotation, etc. will be adopted automatically. A key will also be added to the timeline. If you left-click on this key, the image inserted at this point will be displayed. This allows you to keep track of what happens in which frame.

 

 

This method – sprite sheet animation – is especially useful for sequences of movement that need to be repeated frequently, such as the flickering of a candle or flame, or the movement of a figure running or swimming on the spot while their environment moves around them. Since all the movement phases for this kind of animation need to be retained in the memory at once, you should take care not to use too many images.

 

  • Animations on a path (Follow Path) – Bézier curves

Bézier curves are freely configurable curves that can be used as a path for an animation. They come in handy whenever you want to create any movement that is more than just a straight line between two or more defined points (keys), such as an oval, a circle or a curved line.

In our last example, we had a bee that flew into a scene and then flew back and forth to different flowers in separate animations. In that case, we used fixed points (keys) in the timeline to define the movement. In order to make the flight paths more random and life-like, we will now ‘soften’ them using a Bézier curve.

Press the + symbol in the Scene Navigator to create a new object, ‘Bézier’. The object will appear in the middle of the stage in the form of a small sine curve, with an anchor point and all the usual handles. To the top left of it, you will see a small square with a cursor symbol in it. Like text boxes, Bézier curves have two different modes – one for positioning, scaling and rotating, and one for editing the Bézier curve itself. The little box above the object allows you to switch between the two modes.

When it is first created, a Bézier curve will always have two points. The point on the left is the start point, while the right-hand point is the end point. You can add more points to the curve in Edit mode (see below). We will now enlarge the curve and move it to the top right so that the end point (on the right of the curve) is on top of the bee, just outside the confines of the stage.

 

 

  • Next, we will go to the Object Inspector and give the Bézier curve a clear name – ‘Start-Path’ – before scrolling down to Bézier Properties and pressing the Reverse Points button. This will swap over the start and end points so that the curve runs from right to left – much more suitable for our bee.
  • Click on the small box above the curve to switch to Edit mode. The pencil symbol indicates when you have done this successfully. The appearance of the curve will change: a small arrow indicating the direction of the animation will appear, small spikes will appear along the length of the curve, handles will appear on the start and end points so that they can be moved, and additional controls allowing you to alter the appearance of the curve between its points will also be displayed.

_____

Caution: When Edit mode is active for a Bézier curve, all the other objects and animations in the scene will be temporarily disabled. You will not be able to select them until you exit Edit mode for the Bézier curve.

_____

In order to keep things simple, we will limit the changes in our example to moving the curve’s start and end points and slightly altering its shape. You can find more detailed information on working with Bézier Curies here.

  • Exit Edit mode briefly, select the bee, then go to the Animations Inspector and select the ‘Start-Bee’ animation. In the timeline, go right to the end of the animation – the bee should be in the middle of the stage – and take a look at the position values for X and Y in the Object Inspector. We need these values to remain unchanged so that the bee still comes to a stop at this point, even if it is following a curve. In order to ensure that this happens, we need to set the end point of the curve to the same coordinates. To do this, select the curve again and switch back to Edit mode. The Bézier Properties in the Object Inspector show the coordinates for all the points on the curve: point 1 is the start point, point 2 the end point. Edit mode allows us to adjust these values manually, so we can enter the exact coordinates for the bee’s end point.

 

 

  • The rest of the process is pretty straightforward. After exiting Edit mode, select the bee’s start animation again. Next, under Follow Path, we need to assign the curve we have created to ‘Start-Path’. The timeline will then also change: instead of the Position line, you will now see a line called Path Movement. Here, we can once again choose the Ease Out option to speed up and slow down the movement.

When the animation is played in Preview mode, the bee will now fly into the scene along the path, which will now be invisible.

 

Extra tip: if you are using a Bézier curve as your animation path, you can also combine it with the Drag Along option described below to allow the user to control the animation.

 

  • Back and forth – Ping Pong

Whether you move an animation between fixed, defined keys or along a path, the Ping Pong option in the Animations Inspector allows you to follow the exact same path when moving the object back and forth. The most important prerequisite for using this feature is to ensure that the number of Loops is set to more than 1. If you use an even number, the animation will eventually stop at its original start point; an odd number will cause it to stop at its end point.

When you use the Ping Pong option, the total animation time will be extended according to the number of additional loops, i.e. a value of Loops = 4 will multiply the displayed Total Time by four.

Think back now to the example we used above, where we used three different animations to move the bee from a single start point (A) to different flowers and then back to point A. In principle, we could have shortened these animations by only animating the bee’s path to the flower in question and automating its return journey using the Ping Pong feature. There is one key disadvantage to this approach: the return journey would be identical to the initial path, only in reverse, and we would be unable to adjust the individual parameters. In our example, this would have meant that the bee would fly backwards on its return journey.

As such, you should also be careful when considering using the Ping Pong option.

 

  • Follow me! – Drag Along

Let’s go back to our bee as it hovers over the flowers. Instead of triggering the animation by tapping on a flower, you could use the Drag Along option to grab the bee and guide it to the flower (and back again) bit by bit.*

When the Drag Along feature is activated in the Animations Inspector, the user controls the progress of the animation. The user can ‘grab’ the object and move it back and forth along a path (Bézier curve) or the defined animation route. As soon as it is ‘released’, it will come to an immediate stop and remain unchanged until it is moved again by the user. The rotation, scaling and opacity of the object will change depending on the progress of the animation along its route, just like they would for a normal animation. When you are using the Drag Along feature, the speed of the movement depends on the set Loop Time (see above). This specifies the minimum time in which the object can be moved across the entire length of its route. The Loops option is disabled in this mode.

 

 

In order for the Drag Along function to work properly, the animation must be defined as a start animation. We cannot do this for our bee, as it already has a different start animation. Alternatively, we can assign a touch event to the object we want the user to move (in this case, the bee). This means that Has Touch Event must be activated for the object in question in the Object Inspector, and it must be linked to the corresponding animation (flying to the flower).

* It should be noted that there would be a problem with using this option in our specific example. Since the respective return journeys for the animation we created were identical to the journey to each flower, the bee would not be flipped around. As such, it would fly backwards on the return journey. To change this, we would need to make the return journey significantly different to the outward journey, e.g. by adding another point for the bee to fly to (key frame) or using a closed Bézier curve (e.g. an oval) for the flight path.

__________

Caution: If a Delay Time has been set, you should set this back to 0 before activating the Drag Along option.

__________

 

  • Move me! – Free Drag

Free Drag is not like the other types of animation we have seen so far. When you are using the Free Drag option, no editable properties will be shown in the timeline. Instead, you will need to use the Limit Movement function to define a rectangle or circle within which the user can move the object freely.

If you choose a rectangle, you will need to define the distance by which the object can be moved up, down, left and right from its starting point. In extreme cases, it will be able to move across the entire stage. If you choose a circle, you will need to define the freedom of movement as a radius (Max Radius).

 

 

If we apply this approach to the example we used above, we could use Free Drag to create a large area above the flowers within which the user would be able to fly the bee around freely while the individual flowers sway gently back and forth (start animations).

 

 

The Min Pinch Scale and Max Pinch Scale options allow you to set upper and lower limits for the scaling of your object. By staying focussed on the object, the user can enlarge or reduce it within the set limits in a similar way to a zoom function.

__________

Caution: In order to use Free Drag, you will need to set an animation as a start animation. To do this, you must set the Delay Time to 0 before selecting Free Drag.

__________

 

  • Scratch that! – Scratchables

The Is Scratchable function can be used to make an object ‘erasable’, allowing the user to scratch it out bit by bit. This is not really an animation in the sense that it does not actually move the object; it is more an interactive way of gradually hiding the object in question. You can also use the options to adjust the size of the eraser area (Brush Size) and set a limit for the percentage at which the object is classified as ‘erased’, at which point it will disappear completely (Complete).

 

 

In principle, it is still possible to animate an object that has been scratched – e.g. by adding a start animation to it so that it moves slowly across the stage. However, this approach has only limited uses. One example of when the scratch function can be useful is when you have hidden something behind an object, and want to remove the foreground object by erasing it … as shown in this example.

 

 

__________

Caution: Normal touch events will be ignored during a scratch animation!

If the Loops value for an animation is set to more than 1, parts that have already been erased will be restored each time the animation restarts.

The Scratchable function can only be used in 2D scenes.

__________ 

 

Using sounds in animations

TigerCreate offers two ways of linking animations to sounds: you can use either Animation Sounds, which are linked to the animation itself, or Event Sounds, which are triggered separately.

When you use Animation Sounds, the sound is linked directly to the animation (using the Animations Inspector). The sound will then always play whenever the animation is triggered, and end whenever the animation ends (at the latest).

Event Sounds are not linked to the animation itself. Instead, they are linked to the object that starts the animation (usually a node), i.e. to the touch event (using the Object Inspector). In addition to setting a Start Time and End Time to trim the sound and adding a Delay for it, this option also allows you to set a number of Loops and Volume for your sound. These options will be unaffected by the animation itself.

Event sounds also allow you to start different sounds using several different trigger objects.

 

 (Animation sound)

 (Event sound)

 

For more details on this topic, see Adding sounds/Animation and event sounds.

 

Transferring animations onto other objects

With TigerCreate 2, you can now transfer animations from one object to another, even between different scenes and projects.

Imagine that you’ve created an ingenious animation with well-thought-out parameters for rotation, scaling, etc., and interesting Ease In and Ease Out effects for speeding up and slowing down your object. Now you need to create a number of similar animations. To save time, you can copy the entire animation – independently of the object itself – and transfer it to another object. TigerCreate 1 already offered a rudimentary way of doing this by copying key frames. However, this approach was often lacking when it came down to the detail – e.g. for transferring animations across different scenes. Now, however, the Animations Inspector offers simple copy & paste functions:

  • In the Animations Inspector, select an animation and click on the + symbol in the circle at the bottom right of the Animations List. This will copy the selected animation together with all its parameters, but not the object to which it is assigned.
  • Once you have done this, the arrow symbol in the circle next to the + symbol will become active. This is the Paste symbol.
  • Select another object on the stage or in the Scene Navigator on the left, or switch to another scene. Whatever location you choose, the Paste symbol for the animation in your clipboard will be active in the Animations List.
  • Click on the Paste symbol. The animation you have copied will appear in the Animations List, together with its name and all the associated parameters – but with the symbol for the new object you have selected.

 

 

__________

Caution: If you want to replace an existing object with a new one without losing the associated animations, you will need to use the Base Image function in the Object Inspector (Generic Properties). Here, you will see the original image of the object in the Project Navigator. To the right of this is a Link symbol. This Image Pointer allows you to re-assign the original image or link to another image in the Project Navigator. The name, properties and all animations will remain unchanged; only the picture will change. Another way of replacing an image is by using the drag & drop function – simply drag an image into the link field under Base Image from the image folder in the Project Navigator.

 

 

__________

 

As well as copying individual animations using the Animations Inspector, you can also use the Object Inspector to copy the animations assigned to an object in the Touch Properties and transfer them to another object. At the bottom of the Animations List, you will see the same Copy and Paste symbols as in the Animations Inspector.

 

Pinning animations

In TigerCreate, operating the Animator controls (or moving the slider in the timeline) usually only plays the current animation without changing the other animated objects in the scene. This is generally a practical approach, and helps you to keep track of everything. In some cases, however, it actually makes things harder – e.g. if two or more animated objects reference one another (object A touches object B, thus causing object B to move), or if several objects have been linked together to form a complex parent-child object (see corresponding section). For example, imagine we wanted to animate a cat moving through the scene. We could animate its head, body, legs and tail all as individual objects. However, in order to assess the interplay between all the different parts of the cat’s body, we would need all the associated animations to play simultaneously.

The “Pin” function allows you to keep animations active in the Animator, even when they are no longer selected. As a result, all the “pinned” animations will move at the same time when you move the slider in the timeline.

To pin an animation, simply activate the pin symbol next to it in the Animations Inspector or the Animator.

 

     

 

Pinned animations remain visible in the Animator even when they and their animated object are no longer selected. If you pin multiple animations, these will be listed one under another in the Animator. The currently active animation will always be at the top of the list; this is the only animation that can be edited. If you want to edit another pinned animation, you will first need to make it the active animation. To do this, click on the name button to the right of the object symbol in the Animator. This will move the animation in question to the top of the list.

 

 

__________

Caution: If you have pinned multiple animations, they may not all have the same length. When you start the pinned animations using the Start/Pause button in the Animator, they will all be played all the way from start to finish. However, if you move the slider manually, your movements will be restricted to the top timeline (that of the currently active animation). If necessary, you should make the object with the longest timeline active by clicking on the button with the corresponding name on it in the Animator. This will move the corresponding animation to the top of the list.

 

 

__________

Caution: As long as an animation is pinned, you will not be able to select or edit any other animations for the same object in the Animations Inspector. In order to select or edit other animations, you will first need to deactivate the pin or activate it for another animation.

__________

 

  • Pinning groups

 Things only start to look more complicated when you want a complex (parent-child) object to trigger multiple animations. Let’s take the example of our cat again – we want it both to slink through the scene (animation 1) and to jump in the air at a specific point (animation 2). As such, each of the cat’s body parts needs to perform at least two different animations. So that you don’t need to pin and unpin a whole heap of animations each time you want to edit one or the other of them, TigerCreate 2 allows you to use pinning groups. These can be used to bundle all the animations for the slinking animation together in one group and all the animations for the jumping animation in another, for example. You should give both groups as clear a name as possible. You will then be able to switch between them as often as you like using the Pinning Actions function in the Animator.

Now let’s go through this process step by step:

  • We’ll start by creating two animations for each part of the cat’s body that needs to move – one for walking, one for jumping. You can leave these ‘empty’ for now.
  • For one of the parts, select the walking animation in the Animations Inspector. Next, click on the gearwheel symbol next to the Pinning Group field, further down in the Animations Inspector. A new window – Animation Pinning Group Name – will appear.

 

 

By pressing the + symbol in this window, we will now create a new group. We will call this group ‘Cat-Walk’, as it is going to contain all the animations for the cat walking.

 

 

  • Once you have done this, use the Pinning Group option to assign the walking animations for each of the individual body parts to the new group.

 

 

  • Next to the control bar in the Animator is a drop-down menu entitled Pinning Actions. If we select our ‘Cat-Walk’ group, all the animations associated with it will be pinned and listed one after the other.

 

 

  • Use the same method to create another group for all the jumping animations. Name this group ‘Cat-Jump’. Once you have done this, one click in the Animator is all you need to switch Pinning Group.

 

 

The illustration below provides a brief summary of all the steps above.

1 – Pin symbol for activating/deactivating the pinning function for an animation

2 – Pin function in the Animations Inspector

3 – Button for activating a specific pinned animation – this animation will move to the top of the list, making its timeline the relevant one and allowing you to edit it

4 – Gearwheel symbol used to open the Animation Pinning Group Names window

5 – Drop-down menu in the Animations Inspector; used to assign an animation to a pinning group

6 – Pinning Actions drop-down menu in the Animator; used to activate and deactivate pinning groups. Extra tip: the Remove All Pinned Groups and Remove All Pinned Animations functions make it easy for you to deactivate all the active groups/animations in one move.

 

 

Another advantage of ‘pinned’ animations and pinning groups is that you can use the Touch Properties (see Object Inspector) to easily add all the animations that are currently active (those that are pinned) at once. For example, if the animations in a pinning group called ‘Bee’ are currently active in the Animator, you can add them to the Animations List for the trigger object with a single click.

 

 

In principle, all the animations in a pinning group will be listed in the Animator when the group is question is active. However, you can also temporarily ‘unpin’ individual animations in order to remove them from the Animator display without deleting them from the pinning group.

This is displayed as follows in the Pinning Actions menu:

  • Fully active groups are marked with a √
  • Groups in which not all animations are currently active are marked with a
  • Inactive groups have no symbol

 

 

Animations of nested objects (parent-child objects)

In practice, you will often find yourself wanting to animate objects made up of several sub-objects, rather than simply animating individual objects in isolation. While we were looking at pinning groups, we used the example of a cat. While the cat’s individual body parts were moved/animated in isolation, we wanted it to move across the screen as a single unit. Pinning groups come in handy during the animation process, but the ability to group objects together as nested objects (parent-child objects) is even more important. This type of configuration is made up of a main (parent) and one or more subordinate (child) objects that are assigned to it. In the example of our cat, the individual legs, head and tail of the cat could be ‘children’ of the main ‘Body’ object. In order to achieve this configuration, the objects are nested inside one another in the Scene Navigator, then the child objects are animated individually and linked to the ‘Cat’ parent object by means of the nesting. If the parent object is moved, rotated or scaled, or if its opacity is altered, the child objects automatically adopt the same changes. In order to better illustrate how this works, think of a mother duck with her chicks swimming behind her in her wake. If you make the mother change her path, the chicks will follow her automatically, even though they are still performing their own movements.

 

  • Creating nested objects

Nested objects are easy to create:

  • First, you need to think about which object is going to be your main, or parent, object – the one the other objects will follow.
  • Next, go to the Scene Navigator and drag the child object onto your chosen parent object. Keep the mouse button pressed until a blue background appears behind the target object.
  • The target object should always be the main (parent) object.
  • When you release the mouse button, the child object will seem to disappear. However, a small triangle will appear next to the padlock and eye icons for the parent object. If you tap this triangle, the parent object will expand to reveal all its child objects – offset to the right. The child objects are now assigned to the parent object. Almost nothing changes in the way the objects are displayed on the stage. However, if you move the parent object, the child objects will automatically be moved, rotated, scaled etc. with it.

 

 

You will now notice something interesting if you look at the Object Inspector: the Position values (x, y) for the child objects will change, maybe becoming smaller or even negative. This is because child objects belong simultaneously to multiple coordinate systems. On the one hand, they have a position within the stage area, which means they have x and y values calculated starting from the top left-hand corner of the stage. This is referred to as the global position. At the same time, the fact that they are dependent on their parent objects means that they also have local positional values. These refer to their position in relation to the parent object’s anchor point. You can use the Local and Global buttons above the workspace to switch between these two coordinate systems. The good news is that, despite the complexity of the hierarchy levels for nested objects, TigerCreate can still copy and paste both the local and coordinates for nested child objects ‘cleanly’ when the object itself is copied.

Tip: this works both when copying between different objects and when copying between different coordinate systems – you could copy an object’s local values and use them as the global values for a different object, for example. All you need to do is switch from Local to Global once you have copied the values in question.

_______

Caution: The child objects will also be assigned to the parent object in terms of the order/hierarchy. Even if a child object has been assigned its own Local Order, it will take on the hierarchy level of its parent object. Within the complex parent-child object, the hierarchy order – and thus the way the objects appear on the stage – will be as follows:

  • The parent object will be in the lowest position, and thus visibly behind (!) its child objects.
  • The child objects themselves will be sorted either alphabetically or using their previous Local Order, but still controlled primarily by the parent object.

Example: take a parent-child object comprising a butterfly’s body and two wings. Originally, the two wings were assigned the local order = 2, while the body had a local order = 0. Now that they have been combined to form a complex object, the wings still have a local order = 2 but, as they are now child objects, they are subject primarily to the local order of their parent, which is still 0. As such, if another object – a bee, for instance – with a local order = 1 were introduced, it would obscure both the butterfly and its two wings. The local order of the child objects still exists, but it only applies within their parent object.

_______

Let’s use a simple example to illustrate this.

In our first animations, we used a bee. In order to keep things simple, we moved the bee as a single unit – its wings did not move. Since a bee is quite small, this wasn’t too obvious. Now, however, we want a bee whose wings are always moving when it is in flight.

  • We will start by importing three objects from the Project Navigator: a bee (with no wings) and two individual wings.

 

 

  • If you move the wings onto the bee, you will notice that, due to the alphabetic sorting, they are positioned in front of the bee (see illustration, left). To change this, go to the Object Inspector and assign higher Local Order values to the bee and the left wing. The right wing will now be behind the other two elements (see illustration, centre). Next, move the anchor points for the two wings to the bottom tip, as this is the point around which we want the wings to rotate (see illustration, right).

 

 

  • Next, we want to animate the wings individually. We will do this by creating a short animation for each (‘RightWing’, ‘LeftWing’). These animations should last just 0.2 seconds so that the wing moves through the 15 frames of the animation quickly. In the Animator timeline, we need to define several key frames for the outward and inward rotation of each wing. We will also take this opportunity to create a ‘Bee’ pinning group, in which we will place the individual wing animations. This will allow us to monitor whether the two wings move in time with one another. In order to ensure that the wing animations start automatically, they both need to be set as start animations. In order to ensure that the wings never stop moving, set the Loops value to 0. We do not need to assign an animation to the bee itself.

 

     

 

  • If we now group the individual objects – the bee plus its two wings – together to form a nested parent object, the bee will become the parent object and the wings the two child objects. If we were to move the bee, its wings would follow automatically and move while doing so.

However, there are good reasons not to use this approach. Firstly, regardless of its local order, a parent object will always be positioned behind its child objects. This means that the bee would once again be positioned behind both its wings. It might be possible to overlook this for this example, but if all four of our cat’s legs were in front of its body … Another reason to avoid this method is the need to maintain a clear overview. Our example really isn’t that complex, and it only has one nesting level. However, TigerCreate can be used to create nested objects with any depth. The greater the depth, the more complex the object – and the more complex the object, the more important it is to be able to keep track of what is on which level.

  • In order to circumvent these disadvantages, we can turn once again to nodes. Use nodes as your parent objects and make sure they have a clear name right from the start. In our example, we will now create a new node in the Scene Navigator and name it ‘BeeNode’. We will then scale it to about the size of the bee and place it exactly over the top of it.

 

 

  • Next, we will nest all four objects. In the Scene Navigator, we need to drag the bee and its wings onto the symbol for ‘BeeNode’ and hold them in place until the node’s background turns blue. If we now release the mouse button, a small triangle will appear next to ‘BeeNode’. If we open the drop-down lists under the symbols, we will now see the bee, which is now nested.

 

 

  • In order to make the bee fly, we now need to animate the ‘BeeNode’ parent object. To do this, we will create a (start) animation called ‘BeeFlying’. We will set the time for this animation to 10 seconds and 300 frames, so that the bee crosses the scene in 10 seconds. Set Loops = 0 to make this animation repeat endlessly.

At first, we will only set keys in the first and last frames in the Animator timeline. In the first frame, we will move the bee off-stage to the left, and in the last frame we will move it off-stage to the right.

 

 

  • In order to make this all a little more life-like, we will now create more key frames, in which the bee pauses occasionally during its journey to hover over a flower for half a second (15 frames). We will use Ease In and Ease Out to speed up and slow down the bee’s movement between key frames. Once you have done all this, switch to Preview mode to see the results.

 

 

  • As an alternative to defining a path using keys, we could also use a Bézier curve. To do this, we will use a ‘new’ bee. Right-click on the ‘BeeNode’ object in the Scene Navigator to duplicate it. A new copy of the ‘BeeNode’ object will appear both in the Scene Navigator and on the stage, together with all its child objects and associated animations. This object will have a ‘1’ at the end of its name to distinguish it from the original object and make it easier to tell the two apart. This is ultimately irrelevant, however, as we are going to rename the duplicate parent object ‘BeeNodePath’.

 

 

  • Next, go to the Scene Navigator and create a new Bézier curve called ‘BeePath’. Drag the handles of this curve to enlarge it until it crosses the length of the entire stage. The start and end points of the curve should be off-stage to the left and right respectively. Between these points, you can give the curve any shape you want.

 

 

  • Finally, we need to go to the Animations Inspector and replace the existing start animation, ‘BeeFlying’ with a new one, ‘BeeFlyingPath’. The only keys we need for this are the start and end points. We will use the same length as in the previous animation (10 seconds/300 frames) and link it to the ‘BeePath’ Bézier curve using the Follow Path function. The ‘BeeNodePath’ node will automatically jump to the start point of the Bézier curve.

 

 

If we now select Preview mode or the Quick Test function (top left), we can see that the two bees fly in synchronisation, one straight from key frame to key frame and one following the Bézier curve. However, what is important is that the wings on both bees constantly move together with the bees themselves.

As noted above, this is a very simple example. It would be much more complicated, for example, to animate a walking person. This would be a much more complex object, and you would need to break it down into many different parts – torso, head, arms, thighs, calves, feet, etc. – so that they could be animated individually, nested properly and bundled into pinning groups so that they always move together as a unit, even when you are working on individual animations.

One way of doing this would be as follows:

  • At the bottom level is a foot that is animated individually (mainly using rotation).
  • This foot is a child object of the corresponding calf, so if the calf is moved, the foot moves as well.
  • In turn, the calf is a child object of the thigh.
  • The thigh is a child of the parent object ‘Body’, which encompasses the entire torso.
  • Other child objects of the ‘Body’ include the other leg (in which the second calf and, below that, the second foot are nested), both arms (with the hands as a further child level) and the head (so that this can move independently of the torso).
  • At the top level is a node, which acts as the parent object for ‘Body’ and all the body parts in its various nesting levels.

As you can see, it’s not easy to keep track of everything in an example like this. As such, it is even more important to use clear names for your nodes and assets for this kind of object.

 

  • ‘Pinning’ nested objects

If you want to animate a complex object, it is useful to bundle all the parent and child objects within the object into a single pinning group (see above). This ensures that all your nested animations will move together with the main object in Editor mode.

For some very complex objects, it may make sense to only group certain parts of a parent-child object together in pinning groups. For example, this could apply to the foot, calf and thigh of a figure. These could be seen as a unit, yet separate from the rest of the body – and thus animated as such.

If necessary, you can use the Pinning Actions function in the Animator to toggle quickly between the different groups.

 

  • Triggering nested objects

 In order to set all the animations for a nested object running at the same time, you need to either set all the parent and child animations as start animations or control the animations using a node as the trigger button. If you choose the second option, you will need to assign a touch event (e.g. ‘Start’) to the node in the Object Inspector as usual, then link all the required animations from the nested object to this touch event. It is not possible to create the required effect by simply linking the parent object and starting it with a click. If you do this, the individual child objects on all levels will follow the parent, but their own animations will not start until they are also triggered by the touch event in question.

 

  • Length of individual animations

 When using nested animations, make sure that either all the animations are the same length – which may not always make sense – or that the lengths of the individual animations result in whole numbers when divided by one another.

For example, let’s say we don’t want the bee we created earlier to constantly fly on and off the stage. Instead, we simply want it to fly from flower A to flower B and then come to rest on flower B. We will set the flight time for the bee to 4 seconds. It is then important to ensure that the wings beat for exactly 4 seconds, or as close to this length of time as possible. However, since a single beat of the wings is only very short (we set this to 0.2 seconds), we need to set the number of loops quite high. In this example, the required setting would be 4 ÷ 0.2 = 20 loops. This is not a problem here, as we want the wings not only to flap while the bee is flying, but also to resume their exact starting position at the end.

If the wing animation took 0.3 seconds, on the other hand, we would not have a whole number, as 4 ÷ 0.3 = 13.3. If we looped the animation 13 times, the wings would stop moving a little too early; if we used 14 loops, they would stop a little too late. The wings would stop in the right end position after exactly 13.3 loops.

As such, it is important to make sure that the lengths of the individual nested parent and child animations match up.

Back To Top

Working with Text

There are two ways of using text in TigerCreate 2: you can place a text box anywhere on the stage or insert a text blade that moves up onto the stage from below. (There is actually a third option – inserting text as an image – but we will not be dealing with that method in this section). In both cases, you can insert and format your text using the program’s internal WYSIWIG editor, which displays the text as it will later appear in the finished e-book. You can use all the fonts supported by your system.

If you are sent a project to work on by someone else, TigerCreate will warn you when you open the project of any required fonts that are not installed on your system. You can then install the missing fonts, and everything will look as it should.

 

Working with text boxes 

You can place text boxes anywhere on the stage and scale them to any size you wish. To use a text box, go to the Scene Navigator (left-hand column), click on the + symbol in the circle at the top and select the Text option. This will create a new text object – a text box.

 

 

The text box will appear in the middle of the stage containing a dummy text in the set language. The screenshot below illustrates the options available to you.

 

 

1. The small rectangle indicates that you are in Transformation mode. In this mode, you can move, scale, rotate and animate the text box. If you click on the rectangle, you can switch to Edit mode and write your text.

2. You can use the handles to scale your text box. This will not affect anything in the text itself, aside from line breaks. Hold down the Shift key while scaling using one of the corner points to scale the text box proportionally.

3. You can use the blue circle around the anchor point (see 4) to rotate the text box.

4. The anchor point is the point around which the text box is rotated and from which it is scaled; it can be moved to suit your requirements.

5. You can use these handles to scale the text box vertically together with the text inside it, i.e. the writing will also be stretched or squashed. (Hold down the Shift key while scaling to scale the box and text proportionally.)

6. You can use these handles to scale the text box horizontally together with the text inside it, i.e. the writing will also be stretched or squashed. (Hold down the Shift key while scaling to scale the box and text proportionally.)

As with other objects, you can use Transformation mode to animate a text box. To do this, create a new animation in the Animations Inspector. The timeline will then appear, allowing you to create key frames for the standard parameters: Position, Rotation, Scale, Opacity. (For more information, see Working with Animations.)

The Animations Inspector generally allows you to link a sound to an animation. For text boxes, this option is called Speech Sound, as TigerCreate assumes that the sound you want to link to a text box will be a speech sound reading out the text inside it. If this is the case, the Speech property will also be shown in the timeline so that you can create key frames for word highlighting. (For more information, see below: Word highlighting)

You can get to the Edit mode by clicking on the small rectangle to the top left of the text box. In this mode, you can enter text or paste it into the box from the clipboard (however, formatting is normally lost during this process).

The Text Properties in the Object Inspector (right-hand column, bottom) provide a number of options for editing your text:

  • Block Transformations allows you to move the selected section of text both horizontally and vertically. Check the Impacts Following checkbox to ensure that the offsets are transferred from word to word (of the highlighted text).
  • The Scrollbar settings define how the scrollbar looks (the scrollbar appears automatically when the amount of text exceeds the limits of the text box)
  • The Save As Defaults and Load Defaults buttons allow you to save certain text settings you are using and load them again at a later point. However, these two commands are only ever applied to highlighted sections of text.
  • The Auto Font Scaling option allows you to ensure that text in text boxes is scaled automatically when the e-book is viewed on a device with a small display. Depending on the size of the screen, the text will be scaled up by a factor of 1.5 or 2 to ensure that it remains legible. This also has an effect on your text breaks: text that no longer fits in its text box as a result of the scaling will become scrolling text.

When using this option, it is important to ensure that the Use Automatic Font Scaling for Text Objects/for Textblade option is also activated in the Project Settings, under Default Text Options. (For more information, see Interface/Project Settings).

This is followed by the usual setting options for font type, size, colour, alignment (justification), line height, etc.

 

     

 

The Save As Defaults and Load Defaults buttons refer to the default text box formatting. This is usually set in the Project Settings, where you can set the font type, size, colour, etc. that will be applied by default to every new text box (for more details, see Default text options). By pressing the Save As Defaults button, you can save the current formatting of your text box as the default, thus overwriting the default text options in the project settings. Likewise, if you have changed the formatting of the current text box, you can press the Load Defaults button to restore the default settings.

 

Working with text blades 

A text blade is a large text box that covers the width of the entire stage and appears at the bottom of the screen. Inside this area is a configurable text box. In the finished e-book, the text blade will at first appear as just a tab at the bottom of the screen (which acts as both an ‘Open’ and a ‘Close’ button). When tapped, it will move further onto the screen.

To create a text blade, go to the Scene Navigator (left-hand column), click on the + symbol in the circle at the top and select the Text Blade option.

 

 

Like normal text boxes (see above), text blades have a Transformation mode and an Edit mode. The transformation mode can be used to scale the text blade and thus the text box (downwards), while the Edit mode can be used to enter and format text in the text box. The Edit mode offers the same text properties as for normal text boxes, but the additional Text Blade Properties area will also appear in the Object Inspector under Text Properties. This enables you to adjust the following settings:

  • The height of the text blade relative to that of the stage (Blade Height; range between 20% and 70%). This value corresponds to the handles on the bottom edge of the text blade.
  • The percentage by which the stage is shifted upwards when the text blade appears (Scene Movement). If this value is set to 0, the text blade will simply obscure the bottom part of the stage. If you do not want it to do this, you can set a percentage for how far up you want the stage to be moved.
  • How close the text itself is to the side/top of the text blade (Fill Unit Width and Fill Unit Height).

 

     

 

Text blades cannot be animated, though they do already have a preset animation (Text Blade Audio) in the Animations Inspector. This refers to a linked speech sound or imported files for word highlighting (for more details, see below: Word highlighting).

 

 

As with other navigation elements, you can modify how a text blade looks using the Scene Inspector (see also Scene Skinning Properties). Specifically, you can replace the ‘tab’ (the ‘Open’/‘Close’ button) and the background against which the (transparent) text box is displayed. When changing the background, remember that you might need to adjust the colour of the font in the text box.

The Make Default option allows you to apply these changes in the appearance of the text blade to all standard scenes, thus updating the Project Settings.

 

 

Word highlighting 

‘Word highlighting’ is the term used when individual words in a text box (or text blade) are highlighted as they are read out. In order to use this function, the text box must be linked to a speech file and what is known as label data. Label data is made up of key image positions (keys) that control when each word in the speech file is highlighted in the text. You can create label data (also known as highlight data) in TigerCreate itself:

  • Select the text box and open the Animations Inspector from the inspector bar (right).
  • Next, press the + symbol to create a new animation for the text box. Give the animation a representative name, e.g. “Highlighting”, and make it a start animation by checking the Start checkbox at the top. After all, word highlighting is essentially a start animation that needs to be played automatically.

Caution: If the text box in question is part of a text blade, you can skip this step, as this process will be handled by the existing “Text Blade Audio” animation.

  • Link the animation to a speech file. To do this, go to the Sounds folder in the Project Navigator (left), select the audio file that contains the spoken text and drag it into the empty field next to the Sound option in the Animations Inspector. You will then see a miniature version of the audio file’s sound envelope. By pressing the Play button ▶ , you can listen to the file and reduce its volume if necessary.

Please note that the Number Of Frames and Loop Time in the Animations Inspector will now have been automatically adjusted to the length of the sound.

 

 

  • At the bottom of the animation timeline, an additional line will appear: Speech. This also shows the speech file in the form of a curve. This will help you to identify the individual words that are spoken in the file. Start Record mode by pressing the round, blue button on the left of the timeline. The button will turn red.
  • Create your first key in frame 1. Set the Key and move the slider (the vertical red bar) in the timeline. The first word in the text will be highlighted. You can modify the colour itself using the Highlight Color option in the Animations Inspector. The first word of the text will appear under the envelope in the Speech area.

 

 

  • Once you have added more key frames, you will be able to see how each word is highlighted in turn when you move the slider. You may find that you need to position some of the highlights more precisely. To do this, move the keys you have generated around in the timeline. You can test the highlighting function in both Edit and Preview mode.

 

 

The Export Highlight Data function in the Animations Inspector allows you to export the highlight files (or label data) you have created using the above method as a text file and import them into other scenes. This allows you to divide the workload when producing a scene: one person can create the animations while another works on setting the keys for the word highlighting.

If there is more than one text box in a scene and you want the text to be read out, make sure you place everything in the right order. The text box that is closest to the top in the Scene Navigator will be read out first! If both of the text boxes in question use word highlighting, you can use the Next Speech function in the Animations Inspector to link to the next text box in the sequence – this will then be played once the first text box is finished.

 

Text in multilingual projects 

If you are using multiple languages in your project, you can use the Language button in TigerCreate’s Editor mode (above the workspace) to switch between the different languages. All the text boxes you have created in one language will also automatically exist in all your other languages. They will also have the same properties – Name, Local Order, Position, Rotation – and the same width and height dimensions. Where they differ is that the individual text boxes in your other languages will not yet have any formatting. For example, if you have created a text box in the German version of your e-book, filled it with text and formatted the text to Helvetica, 64 points, justified right and light green, the same text box in the other language versions of your e-book will initially contain just an example text with the default formatting, e.g. Times New Roman, 18 points, justified left, black. The advantage of this is that it allows you to use as many different fonts and formatting options as you like for your different languages.

*You can view the default formatting under Project Settings/Default Text Options. This defines how text boxes are formatted by default, and applies to the whole project.

Back To Top

Adding Sounds

There are many different types of sound you can use to add life to your scenes in TigerCreate: ambient sounds, pieces of music, individual effects or speech files. If a bird flies across the screen, we would expect to hear it tweeting, or maybe flapping its wings. If an object falls to the ground, the sound of the impact makes the animation more believable. A picture of a restaurant automatically seems more life-like when we can hear muffled conversation or the sounds of cutlery in the background.

In TigerCreate 2, you can link background noise, or ambient sounds, to an entire scene in the Scene Inspector. You can also link individual sounds directly to an animation – either by making them an integral part of the animation using the Animations Inspector or by linking them to a trigger object in the Object Inspector. You can use the Animations Inspector to link speech that reads out the text in a text box or text blade to an animation for the text box in question.

_____

Caution: Please make sure that you always use sounds with a constant bit rate. These are also known as CBR sounds. Sounds with a variable bit rate (VBR) are not permitted for use in TigerCreate.

_____

Unlike images and text, the sounds you use in a scene will not be listed in the Scene Navigator. Instead, the Scene Sounds Properties in the Scene Inspector provide an overview of all your animation and event sounds.

The See All Sounds function shows an overview window containing all the sounds used in the current scene. This shows the name of the sound, where it is stored in the Finder, the object to which it is linked and the method used to link it – whether it is an animation sound or a touch event sound. If there are no sounds linked to the scene yet, the list will be empty.

 

 

Background sound (ambient sound)

Atmospheric sounds are usually a very effective way of setting a scene. Since they are repeated on an endless loop, you should be very careful when it comes to using prominent noises such as telephone ringtones in your ambient sounds. Generally speaking, an ambient sound will not need to be any longer than approx. 30 seconds. It should not come to an abrupt end; the transition between the end of the sound and the start of it on the next loop should be as smooth and unobtrusive as possible.

 

 

  • Open the Project Navigator (left) and go to the Sounds folder where your ambient sound is saved.
  • Open the Scene Inspector (right-hand bar) and drag the selected sound into the empty field marked Ambient Sound. A miniature representation of the sound will then appear, and you will have the option of adjusting the volume.
  • Click the Play button ▶ to listen to the sound, or click the – symbol under Ambient Sound to remove it from the scene again.

Ambient sounds normally start as soon as the scene has loaded. If you would rather add a delay before your background sound starts (e.g. if the scene in question is your start scene and is designed just to show the title at first), you can use a little trick to do this:

  • Do not add your background sound as an ambient sound in the Scene Inspector; instead, link it to an animation and set the animation on a loop (the Loop = 0 setting will cause the sound to play on an endless loop). You can then set a delay for this animation.
  • Set the animation to play as a start animation. Once the delay time has elapsed, the animation will begin. From this point on, the sound will also play on an endless loop without a delay.*

* Please note: If you instead set an Audio Delay Time, the delay will play again at the start of each loop.

 

Animation and event sounds 

Animation sounds are used when playing animations. Sounds make movements more believable, augmenting the effect of the movement itself. Take a kangaroo, for example: if we hear a ‘boing’ sound when it jumps, the way we perceive the movement changes completely.

In principle, you can link several sounds to animation at the same time. If you do so, however, all the sounds in question will be played simultaneously, not one after the other! This can be useful in situations where you don’t want several sounds to keep running continuously. For example, imagine you want to animate an apple falling from a tree: the fall could be accompanied by a whistling sound, then a dull ‘thud’ when the apple hits the ground. You could spend a lot of time splicing the two sounds together in a sound editing program – or alternatively, you could link both sounds to the animation individually and use the wide range of options TigerCreate 2 provides for modifying sounds to make sure each one is played at the right time. TigerCreate distinguishes between animation sounds and event sounds. Animation sounds are linked to an animation directly and begin automatically when the animation is played, while event sounds are linked to an object that triggers the animation when touched.

 

Animation sounds

  •  Open the Project Navigator (left) and go to the Sounds folder.
  • Open the Animations Inspector (right-hand bar) and select an animation.

(Note: animations will only be shown here if an object with animations assigned to it is selected on the stage.)

 

 

  • Drag the selected sound file into the empty field under Animation Sounds. The field will then expand downwards, offering you the following options:
    • The name and duration of the sound will be shown in the sound list.

(Note: The duration shown here is dependent on a number of factors, including the set number of loops. If the animation is played twice, the sound will also be started twice, and its duration will increase accordingly. As such, the duration represents the sound’s total playing time.)

  • The – symbol at the bottom left of the list allows you to remove a sound from the list. The + symbol in a circle on the right and the arrow symbol in the circle next to it allow you to copy sounds together with their settings and paste them into other animations.
  • Audio Delay Time: Sounds normally start at exactly the same time as their animations. The Delay Time adds a delay between when the animation begins and when the sound starts to play. For example, if you set the delay to 2 seconds, the animation will start as normal but the sound will not start until 2 seconds later. Think back to the example of the apple mentioned above: we don’t want the ‘thud’ sound to play until the apple reaches the ground. (Note: Any changes made to the Delay Time will also alter the displayed sound duration. If the animation is repeated (Loops > 1), the sound will also start again after the same delay time has elapsed once more.)

 

 

  • Start Time: If you do not want a sound to be played in its entirety right from the start, you can set a start time for it here. The result of this setting will be reflected in the miniature envelope that represents the sound. Changes to the Start Time are indicated by greying out of the beginning of the curve.

 

 

  • End Time: If you do not want a sound to be played in its entirety right to the end, you can set an end time for it here. The result of this setting will be reflected in the miniature envelope that represents the sound. Changes to the End Time are indicated by greying out of the end of the curve.

 

 

  • Trimmed Audio indicates the duration of (one loop of) the sound if the Start or End Time have been modified. The Delay setting, on the other hand, has no effect on the Trimmed Audio time.

Caution: Whether a sound is played through to the end or for as long as you have configured it to do so using the Delay, Start and End Time settings depends primarily on the Loop Time specified further up the screen. This is the time the animation needs to be played through in its entirety. For example, if the Loop Time is set to 4 seconds, any sound that is playing will also be cut off after 4 seconds! If you have set a higher number of Loops for the animation, the sound will start again from the beginning at the start of each loop. The sound will behave differently if you have also activated the Ping Pong option (which basically makes the animation run back and forth). In this case, the sound will keep playing until the animation returns to its starting point (i.e. twice as long as for a single run-through). After this, it will play back again from the beginning.

While you can adjust the volume of ambient and event sounds directly in the Scene Inspector or the Object Inspector, (see below), this is not directly possible in the Animations Inspector. This is because we have given you even more options for controlling animation sounds:

  • When you attach a sound to an animation as an animation sound, it receives a line of its own in the Animator timeline.

 

 

  • In this line, you can set different volumes for different points in time by setting keys in the corresponding frames. Whenever you set a key in the Audio line, the same Ease In/Ease Out options used for animation transitions will appear in a pop-up window. Here, you can set the volume of the sound for the key in question to a value between 0 and 100, and define whether you want the change in volume between the two keys to be continuous (linear) or abrupt.

 

 

Event sounds 

Event sounds offer another way of starting sounds for an animation. Event sounds are not linked to the animation itself. Instead, they are linked to the object that triggers the animation when it is touched. This could be the animated object itself, but in most cases you will be using nodes to trigger animations.

The sound is linked to the trigger element via the Touch Event in the Object Inspector. This method is useful, for example, if you want an animation to be triggered by different events, each of which has a specific sound.

You can modify event sounds using the same parameters as for animation sounds – Delay, Start Time and End Time. You can also adjust the Volume for the sound and the number of times it is repeated (which is not linked to the number of Loops for the animation!).

 

 

Speech sounds

Speech – e.g. the sound of a narrator reading out the text on the screen – represents a special type of audio file.

Case a)

If the speech in question is simply spoken by an off-screen narrator without a matching text on the screen …

  • Create a new (empty) text box in the Scene Navigator and place it outside the stage area.
  • In the Animations Inspector, create a start animation for the text box and link the speech sound to this animation using the Speech Sound function.

The speech will now be played as part of the (off-stage) text box animation when the scene begins.

Case b)

If you do not want the off-stage speech to start until it is triggered with a click, link it to the corresponding object as an event sound in the Object Inspector, as described above. The object in question could be an image, a text box (which will now be visible and contain the corresponding text) or an invisible node placed over the visible part of the background image. There is now no need to link the sound to an animation; the touch event will trigger the sound.

Case c)

Especially when creating children’s stories, you will often want to use the word highlighting function. This links the speech file to a text box containing text, and each word in the text is highlighted as it is read out. In order for this to work, special keys separating the individual words are set in the timeline.

 

Since the narrator’s voice is usually the most important source of audio in a scene, the volume of all the other sounds is reduced a little when using this option. You can find more detailed information on word highlighting under Word highlighting.

Back To Top

Bézier Curves

Bézier curves are paths with multiple anchor points that can be used to alter the shape of a path. They are not visible in the finished e-book, as they simply act as animation paths for specific objects. If an object’s animation is linked to a Bézier curve in the Animations Inspector, the object will move along the path of the Bézier curve, or the user will be able to move it along this path.

Bézier curves are especially useful when you want an object to move along a line that is curved in some way. One example of this would be the parabolic arc of an object when it is thrown.

Unlike images, nodes and text boxes, Bézier curves cannot be assigned animations of their own. Nevertheless, you can scale, rotate and position them however and wherever you want.

To create a new Bézier curve, click on the + symbol at the top of the Scene Navigator and select the Bézier option from the pop-up menu that appears. In its simplest form, a Bézier curve comprises two points: the start point and the end point.

 

 

When you create a Bézier curve, a small rectangle with an arrow will appear to the top left of it. This indicates that the Bézier curve is in Transformation mode. In this view, you can scale, rotate and move the Bézier curve as a unit.

 

 

Click on the rectangle to switch to Edit mode for the Bézier curve the arrow will change into a pencil.

 

 

_____

Caution: When Edit mode is active for a Bézier curve, all the other objects and animations in the scene will be temporarily disabled. You will not be able to select them until you exit Edit mode for the Bézier curve.

_____

In Edit mode, you can modify the start and end points of the curve. You can move the individual points and also use their controllers to make significant alterations to the shape of the curve.

 

 

 

While the start and end points of the curve each have one controller, each point on the curve has two: one for altering the shape of the curve before the point in question, one for altering the shape after it. When a controller is selected (active), its colour changes from blue to red. Right-clicking on a controller will activate the Mirror function. If you do this, the point’s controllers will be placed symmetrically opposite one another; if you move one, the other will mirror the same movement.

 

 

You can add extra points to extend the curve simply by clicking anywhere on the screen. However, if you click directly on the curve, you will add another point where you have clicked.

You can delete points by right-clicking on them and selecting Delete Point from the pop-up menu that appears.

 

 

You can further alter the curve by adding points and then moving them or manipulating them using a Controller. To move them, select one or more points by either clicking on them or dragging a selection field around them.

 

 

Click on the pencil icon at the top left of the selection to exit Edit mode and return to Transformation mode.

 

 

If you want to save a Bézier curve with a particular shape, use the Export As Shape button (see below).

 

 

Bézier Properties (Object Inspector)

The Object Inspector displays the properties of a Bézier curve when it is selected. It also allows you to modify these properties.

 

 

  • Closed – This connects the two ends of the Bézier curve, thus forming a closed curve.
  • Reverse Points – Swaps the start and end points of the Bézier curve so that it runs in reverse (from right to left).
  • Convert to – Opens a pop-up menu that provides a selection of geometric figures (e.g. circle, square) and previously saved paths (see below) that the current curve can be converted to.
  • Export As Shape – Exports the Bézier curve, allowing you to name it as you wish. This allows you to use the saved curve as a template in other scenes (see Convert to, above).
  • Global Points – Lists all the points and controllers for the Bézier curve. If the curve is in Edit mode, the values can also be modified directly in the list. Columns X and Y indicate the point’s position on a plane; the Z dimension is added if the curve is also spatially distorted (3D space). In such cases, the Z column indicates the depth. Z = 0 means that the point is on the same plane as the background image. Positive values place the point in front of/on top of the background image, while negative values place the point behind the background plane.

 

Linking animations to Bézier curves (Animations Inspector)

 In order to move an object on a Bézier curve, you will first need to create an animation in the Animations Inspector.

 

 

Enter a reasonable Number of Frames and set the Loop Time relatively high. Once you have done this, link the animation to a Bézier curve by selecting a Bézier curve from the pop-up menu under Follow Path and assigning it as the path for the animation (this list only shows Bézier curves that are in the current scene).

 

 

The object in question will now execute the animation along the selected Bézier curve. In the simplest of cases, this will merely result in a change of position between the start and end points of the Bézier curve. In the Animator timeline, the Position line will be replaced by a Path Movement line. You can make further changes using the Rotation, Scale and Opacity parameters. You can also use the Animator timeline to activate the Easing function, thus making the object’s movement along the curve more dynamic (tip: the easing will not be affected by the length of the controllers).

 

 

The Drag Along option offers another way of linking an animation to a Bézier curve. When this option is used, the movement progresses based on the actions of the user. The user can ‘grab’ the object and move it back and forth along the path. As soon as it is ‘released’, it will come to an immediate stop and remain unchanged until it is moved again by the user. The rotation, scaling and opacity of the object will change depending on the progress of the animation along its route, just like they would if the animation ran automatically. The speed of the movement for Drag Along objects is not affected by the set Loop Time; it is defined by the program itself. The Loops option (number of cycles) is inactive in this mode.

 

__________

Caution:

In order for the Drag Along option to work for an object, the animation must be set as a start animation, or the object in question must have a touch event. This means that you need to activate Has Touch Event for the object in question in the Object Inspector and link it to the corresponding animation.

If a Delay Time has been set, you should set this back to 0 before activating the Drag Along option.

__________

 

Using Bézier curves in 3D spaces

Bézier curves in 3D scenes are a good way of adding depth to make your animations seem more realistic. When doing this, it is important to ensure to give the Bézier curve itself depth by setting its points on different planes. You can do this by assigning different Z Position values to the points.

Note: The following examples are also used in the Using 3D in TigerCreate section.

In the following example, we will make a ball get smaller as it moves further towards the back of the stage. We will do this by linking the animation to a Bézier curve using the Follow Path option in order to define its path.

 

 

Changing the Z position of the ball from 1000 at the start of the animation to 0 at the end makes it move from the front of the stage to the back. In the 2D view, this will seem no different to a traditional 2D animation where the ball is simply scaled down over the course of the animation. The 3D path only becomes clearer when you tilt the 3D view.

 

 

What you can see, however, is that the whole operation only works if the path – the Bézier curve – also has three dimensions, e.g. if the curve’s start point is positioned much further forward than its other two points.

The coordinates for all the points and their controls can be seen on the right of the screenshot below. The column with the grey background contains the Z-position values for the three points. Point 1 is the start point; like the ball, it is set to z = 1000, a long way in front of the background. Point 2 is set to z = 200, while point 3 has already disappeared behind the background at z = -1.

 

 

The effect is even clearer if we view the Bézier curve from the side, with the background on the right.

 

 

You might think that it’s not worth creating a 3D animation for the ball, as it is flat anyway. However, the opportunities offered by this option are much more impressive if you consider nested objects – parent-child relationships – with moving child objects.

Let’s take the example of a butterfly with constantly moving wings. The anchor point for each wing is located at the respective edge of the body; each wing is moved by rotating it around the Y axis. All three parts – the body and the two wings – are child objects of a node, which acts as the parent object. (For more information on Nestling objects to make parent-child objects see the Animations of nesting objects section.).

 

 

Like the ball in the previous example, this parent object is then animated using a Bézier curve. During the movement, the butterfly rotates around all three axes – X, Y and Z – as a single unit (the parent object). At its start point, the butterfly’s Z position = 1000 (the same applies to the start point of the Bézier curve). At its end point, the butterfly’s Z position = 100. Since the nested object on the path is also rotated in the third dimension, one of its wings will be behind the background image when z = 0, causing it to disappear.

Even in the 2D view, the result looks pretty impressive.

 

 

If we change to the 3D view (shown tilted here), however, we can see that the rotation of the wings has also given the butterfly depth. If we were creating a series of 2D scenes, we would have simulated the movement of the wings by scaling them on a single plane.

 

 

The screenshot below shows the butterfly together with its movement path, which has different Z positions at its start and end points (A: z = 1000, B: z = 100).

 

Back To Top

Using 3D

From Version 2.0 onwards, TigerCreate now also supports 3D. This function provides you with additional ways of animating and transforming objects. Objects can now be rotated around all three axes (X, Y and Z). All positions are now specified using X, Y and Z coordinates, where Z refers to depth in a three-dimensional space. (In 2D scenes, objects are rotated around the Z axis, while the X and Y coordinates define its horizontal and vertical position respectively.)

Rotations in 3D space open up a whole range of possibilities: for example, you can combine several 2D objects to form a 3D object (see below: 2D view with multiple separate parts (left) and tilted 3D view (centre, right)).

 

 

In order to use 3D options, go to Scene Generic Properties (see Scene Inspector) and activate the 3D option.

 

 

In addition to the buttons for toggling between 2D and 3D view, the 3D tool option will now also be visible in the toolbar. When the 3D tool is activated, additional options will be made available for the selected object: in addition to the blue rotation ring you are already familiar with from working in the 2D view, two further rings will appear. The red ring is used for rotation around the X axis, the green one for rotation around the Y axis. To scale the object, drag one of the handles on the rectangle surrounding it (hold down Shift at the same time to scale proportionally). The screenshot below shows three different phases in the manipulation of a nested object (butterfly).

 

 

In the screenshot below, you can see that the object disappears partially when rotated around one of the axes. This is because the object in the example is on the same plane as the background image, so rotating it moves part of the object to behind the background image.

 

 

To tilt or rotate your overall view in 3D scenes, hold down ALT and click the left mouse button. The view mode will then switch from 2D to 3D. Doing this does not move the object itself – it simply moves the camera, thus changing your perspective on the scene. A diagram of the X, Y and Z axes will appear in the top right of the workspace as an orientation aid.

 

 

Things to remember

The following points must be taken into account when working on 3D scenes:

  • While what is at the front and back (i.e. the depth) in 2D scenes is defined by the Local Order value, each object’s Z position takes priority in 3D scenes. This means that an object with a high Local Order value may still be positioned behind other objects if they have higher Z position values. A value of Z position = 0 represents a position on the same plane as the background. Positive values will be in front of the background, negative values behind it.
  • If several objects are on the same Z-position plane, their Local Order will once more define which is the furthest forward. Objects’ Local Order is always shown in the Scene Navigator, and objects with a higher Local Order will appear further down the list. The Z position, on the other hand, represents an object’s spatial position (in the third dimension).

If an object is semi-transparent – e.g. if its opacity has been reduced so that objects behind it can be seen – it must have a higher Local Order than other objects on the same dimensional plane. The same applies to objects with ‘soft’ (unfocused) edges.

Things become difficult when you have multiple objects with soft edges jostling for position on the same Z plane. Even if such objects have different Local Order values, which would position one of the objects further forward, the system may have problems displaying their edges – especially as intersecting, semi-transparent edges allow the user to see both objects behind them and the background image itself.

The following graphic illustrates this problem using two objects on the same Z plane that end up intersecting due to rotation around the Y axis. The illustration on the left shows the objects with hard edges (no problems), while those in the centre and on the right have soft edges.

 

 

If you deactivate the 3D option at a later point, thus turning the scene into a 2D scene again, all the Z-position values will be reset to 0, all the rotations around the X and Y axes will be undone and the set Local Order values will define the order and layering of the objects.

  • Scaling: Even animated objects that are 2D images have scale values for all three coordinates (X, Y and Z). While 2D images cannot be distorted in terms of depth, this is important for rotations when animating multiple objects with parent-child relationships. If necessary, you can set the scale values for all three coordinates to the same value, e.g. X = 0.5, Y = 0.5, Z = 0.5. You can either enter the values directly in the corresponding fields in the Default/Key Transformation Properties, or hold down the Shift key and drag one of the handles on the rectangle around the object to scale it proportionally.
  • Camera: In 3D scenes, the camera view functions using perspective. As such, the positions of objects that are closer to the camera (i.e. closer to the observer) will appear to change relative to the background image. For example, if you change the Z-position value for an object form 0 to 200 without altering the other values.

This may seem like a disadvantage at first, but after a little experimentation, you will soon see the benefits:

In the example below, the door is a 2D object. In the screenshot on the left, you can see that the anchor point has been moved to the right-hand edge, where the hinges are. In the right-hand screenshot, the door has been subsequently rotated around the Y axis by 45 degrees. Thanks to the camera perspective (we are still in the 2D view here), we can now see the depth of the door without manipulating it further.

 

 

This effect can be seen even more clearly in the tilted 3D view. Here, the object actually protrudes from the image.

 

 

  • The Scratchable option cannot be used for animations in 3D scenes.

 

Working in 3D

In the following example, we will make a ball get smaller as it moves further towards the back of the stage. We will do this by linking the animation to a Bézier curve (Follow Path) in order to define the path of the object.

 

 

Changing the Z position of the ball from 1000 at the start of the animation to 0 at the end makes it move from the front of the stage to the back. In the 2D view, this will seem no different to a traditional 2D animation where the ball is simply scaled down over the course of the animation. The 3D path only becomes clearer when you tilt the 3D view.

 

 

What you can see, however, is that the whole operation only works if the path – the Bézier curve – also has three dimensions, e.g. if the Bézier curve’s start point is positioned much further forward than its other two points. You can do this using TigerCreate’s Bézier curve tool. The coordinates for all the points and their controllers can be seen on the right of the screenshot below. The column with the grey background contains the Z-position values for the three points. Point 1 is the start point; like the ball, it is set to z = 1000, a long way in front of the background. Point 2 is set to z = 200, while point 3 has already disappeared behind the background at z = -1.

 

 

The effect is even clearer if we view the Bézier curve from the side, with the background on the right.

 

 

You might think that it’s not worth creating a 3D animation for the ball, as it is flat anyway. However, the opportunities offered by this option are much more impressive if you consider nested objects – parent-child relationships – with moving child objects.

Let’s take the example of a butterfly with constantly moving wings. The anchor point for each wing is located at the respective edge of the body; each wing is moved by rotating it around the Y axis. All three parts – the body and the two wings – are child objects of a node, which acts as the parent object.

 

 

Like the ball in the previous example, this parent object is then animated using a Bézier curve. During the movement, the butterfly rotates around all three axes – X, Y and Z – as a single unit (the parent object). At its start point, the butterfly’s Z position = 1000 (the same applies to the start point of the Bézier curve). At its end point, the butterfly’s Z position = 100. Since the nested object on the path is also rotated in the third dimension, one of its wings will be behind the background image when z = 0, causing it to disappear.

Even in the 2D view, the result looks pretty impressive.

 

 

If we change to the 3D view, however (shown tilted here), we can see that the rotation of the wings has also given the butterfly depth. If we were creating a series of 2D scenes, we would have simulated the movement of the wings by scaling them on a single plane.

 

 

_____

Caution: When scaling, it is important to ensure that the Z-scale value is also adjusted if necessary (see above: Scaling). This value is essential for adding depth to the object, even if this depth is not visible in the 2D view. The screenshots below show two butterflies: one with even scaling for X, Y and Z (left) and one that has only been scaled on the X and Y axes (right).

 

_____

The screenshot below shows the butterfly together with its movement path, which – like the ball in the example above – has different Z positions at its start and end points (A: z = 1000, B: z = 100).

 

 

The final image shows the butterfly object in three phases of its flight path with the 3D tool. The coloured rotation rings indicate the changes in the object’s spatial position.

 

3D in AR scenes

(For more information on this topic, see Augmented Reality)

When you are working in 3D, TigerCreate also offers you additional options for making your scenes even more life-like in Augmented Reality (AR) mode. You can add spatial depth to your scene by moving objects closer to or further away from the camera (stacking) or rotating them in the third dimension so that they protrude from the target image (PopUp).

In order to use the 3D functions, you will need to activate the 3D option in the Scene Generic Properties.

 

 

  • Stacking

Stacking arranges objects in a way that generates the effect of depth when the user moves or tilts their tablet/smartphone. The Z position allows you to set how far in front of the background image – or, in this case, the target image – each object is. The default value for this setting is 0, which places the object on the same plane as the background image. A value of z = 100 would place the object some distance in front of the target image, while a negative value would make the object disappear behind the target image.

In the following example, the target image – a book cover – has been fully reconstructed using individual parts. On the left is the cover – the target image assigned to the scene – while on the right are the objects required for the reconstruction, already arranged in the correct order.

 

 

You can perform the reconstruction in 2D at first to allow good positioning of all the objects. The Clip function is deactivated for the trees on the left and the right, so they extend beyond the edges of the cover.

 

 

Next, you will need to switch to 3D to carry out the Stacking, giving objects that need to be positioned much further forward – such as the frame, the characters and the trees – higher Z position values (z = 200 for the frame; z = approx. 100 for the characters). This generates an effect similar to looking through a zograscope.

 

 

If you rotate the object in three dimensions in Preview mode (by holding down the ALT key), you will see that objects that were created to match the exact width of the Target image, such as grass, meadows, fields and sky, also needed to be wider.

The bear in the middle of the image provides the perfect example for us to demonstrate how to use the Billboard function (AR Properties or see below). This function is normally deactivated for all objects (No value), which means that all your assets will be tilted and rotated equally when moved using the target image. In the screenshot below (centre and right), the Billboard function has been activated for all axes. As a result, the bear maintains its upright position in the screenshots in the centre and the right, irrespective of whether its surroundings are tilted or rotated. This method basically ‘anchors’ objects in place so that they stand out.

 

 

  • Pop-ups

Take a look at the example with the hippo below. On the left, you can see the target image as it appears in the book. On the right is the way it is displayed on the screen.

 

 

Here, parts of the scene have been tilted so that they pop up from the flat plane like pieces in a pop-up book, especially when the tablet is moved. In the next image, we can see that the jungle in the background actually pops up out of the stage area.

 

 

What has actually happened is that the image’s anchor point was moved to its bottom edge, then it was rotated around the X axis. We will now apply the same procedure to the hippo. As a result, both objects will pop up out of the background.

 

 

Normally, these objects will move with the scene when it is moved as a whole, i.e. if the perspective is tilted around the X axis, they will give an impression of depth, but if it is tilted around another axis, they will tilt together with all the other objects.

 

 

The Billboard function in the AR Properties (in the Object Inspector) allows you to define whether an object also maintains its alignment relative to the target image if the tablet is tilted – either for all axes (and thus tilting in all directions) or only for specific axes. You can see how this works in the two examples below:

 

     

Back To Top

Augmented Reality

Augmented Reality (AR) is a form of technology that can intelligently expand the human perception of reality. It enriches the images recorded via the camera on a mobile device with additional digital information – text, images, video or sound – to present a new, augmented version of reality on the device’s screen.

For example, the AR technology in TigerCreate allows you to set up a connection between the print medium and its digital equivalent – the e-book and the hard copy. You do not need specially designed books to use this option with e-books and apps created in TigerCreate. In fact, TigerCreate’s AR technology actually enables you to get more out of the books you already own and use them on a wide variety of platforms.

All the user needs to do is point the camera of their mobile end device – their smartphone or tablet – at a printed page in the book, for example. TigerCreate will recognise the image and then automatically generate the AR augmentations that have been created for the image (printed page) in question. In short, AR combines the book and the app to bring the printed page to life! You can also use 3D effects to add a sense of depth to your AR programming and make it seem like a pop-up book, for example. This provides added digital value for books that have already been printed.

 

 

The user doesn’t need to keep the camera pointing at the real image, either – the FREEZE button in the TigerCreate app can be used to freeze the current camera image so that the user can move their end device around again.

Using AR in TigerCreate

You can use AR for individual scenes, or even add AR options throughout an entire e-book. You can also set AR mode to be active as soon as a scene loads, or create a touch event that will trigger it, such as when the user taps on an object in the scene.

Preparation

You will need to complete several steps in order to use augmented reality in TigerCreate.

  • You will need to define a target object in the real world that can be detected and recognised by the camera. The animated scene will then be played over this object. Examples of potential targets include an illustration in a book, a page of a book, or a photo. Once you have chosen your target, save it as a target image in the project folder. It will then be used as the comparison image for the camera, though the target image itself will not appear in the exported project.
  • All the targets you use for a project must be saved in a database. As such, you will need to prepare a digital version of your target object – a digitised illustration or digital photo:
  • The longest side of your target image must be 2048 pixels in length so that it matches the stage of your e-book. For example, you could use dimensions of 2048 x 1400 pixels for a landscape image or 1578 x 2048 pixels for a portrait image.
  • Make sure that your images are saved in RGB mode (8 bits per channel).
  • The images should be of good quality and have sufficiently high contrast.
  • For example, you could use the Save for Web option in Photoshop to export your images as JPEGs at 100% quality.
  • We recommend naming your images in a way that makes it clear that they are intended for AR purposes, even when you save them for the first time. You could do this by adding the letters “AR” to the end of the file name, for example.
  • File names should only include standard characters, numbers and underscores, e.g. “Scene03_AR.jpg”.
  • Make sure that your images do not get too big (< 2.25 MB). If necessary, reduce the image quality.
  • Do not use more than 100 target images per database.
  •  TigerCreate uses the Vuforia Engine* to display AR scenes. Therefore it is mandatory to manage and define your target images with the Vuforia Target Manager.

 

 

  • You will need to register your Vuforia software the first time you open it. This procedure is relatively simple. Once you have registered, click “Create Database”, enter a name for your database and upload your prepared target images one by one:
  • Click “Add Target”.
  • Enter the exact file name as the Target Name for the image, only without the “.jpg” file extension.
  • Set the Target Type to Single Image and the Target Dimension to 10.
  • The Target Image File field should then show the exact image you have selected, together with the name you gave it.
  • Click “Add” to add the image to the database.
  • Repeat the above steps for each image.

 

 

  • Once you have uploaded all your images, you will need to export your database.
  • Select all the images you want to export as targets for your project by checking their checkboxes.
  • Click Download Database.
  • Select “Android Studio, Xcode or Visual Studio” as your Development platform, then click Download.
  • You will receive a compressed file (.zip). Extract this to gain access to the .dat and .xml files. If necessary, rename the files “ar.dat” and “ar.xml”, then copy both of them to the ar folder for your project, where your target images are already stored. (All the target images you have uploaded to the database must also be saved as JPEG files in the ar folder.)

_______

Caution: You will need to repeat this procedure – database export and assignment – if you want to upload more images to the database or replace existing images.

* In order to export your project, you will require a licence key. For testing purposes it is available free of charge through Vuforia (using the Vuforia watermark).

Choose the free “Development” option as long as you are still testing your book using the Quick Test and the Test Build options. As soon as you want to export any AR scenes via the Publish option, a Vuforia licence has to be purchased. One licence is required for each title you want to publish. For further information on licences and prices please visit the Vuforia website.

_______

Preparing an AR scene

 

  • When you activate the Use Augmented Reality option in the Scene Inspector, you may be shown a warning indicating that no database files can be found.

 

 

  • Upload the target required for the scene in question to the Target Image field from the ar folder. The image file you select must also be part of the database; otherwise the system will display a warning message.
  • If you had already loaded a background image for the scene, this will now be replaced with the imported target image. This will help you to position your objects exactly where you want them to appear above the target image when you are creating your scene.

 

 

Whether or not you will require a background image depends on whether the AR function will be activated as soon as the scene loads. If you want the scene to start without AR at first and have the AR function triggered by a touch event – i.e. the user taps on a prepared object in the scene, which then launches AR mode and switches on the camera – it is both useful and necessary to have a background image for your scene.

  • If you simply want to assign animated elements that are not in the original book to the target image, you can do this by following this basic sequence:
    • Activate the AR function and assign the target image for the scene.
    • Set up your animations as you would for any other scene: import the required images, position them where you want and then animate them.
    • Clipping: For every object that goes beyond the edges of the stage when animated – e.g. a cloud that floats slowly across the background of the stage then leaves it again – you will need to decide whether the object should remain visible when it is off-stage. If you want the object to stop moving once it reaches the edge of the stage or disappear once it leaves the stage, activate the Clip option in the Object Inspector/AR Properties.

 

     

 

  • If you also want to animate existing elements of the target image, you will need to cover the corresponding parts (or even the entire image) with retouched parts.

The example below shows the full target image on the left. To the right of this are assets that will be used to cover up the relevant part and animate the boat with the bear.

 

 

The target image is also shown on the left of the example below, as it appears in the book. In the centre is the completed scene as it appears when first loaded, and the image on the right shows the scene after the touch event has been triggered.

 

 

In this example, the entire scene has been reconstructed; the jungle in the background and the hippo have also been tilted so that they jump out of the picture when the tablet is tilted, just like a pop-up book. See below for more details on how this works.

For initial testing, you can use the Preview or Quick Test functions, each of which only exports the current scene. In the Quick Test, the target image is dimmed so that other elements – primarily the animated parts – stand out.

 

 

It is essential to test scenes with AR on plenty of different end devices!

 

3D in AR scenes

 When you are working in 3D, TigerCreate also offers you additional options for making your AR scenes even more life-like. You can add spatial depth to your scene by positioning objects on different planes (stacking) or rotating parts of the scene in the third dimension so that they protrude from the target image (PopUp).

To use 3D functions, you will first need to go to the Scene Generic Properties and activate the 3D option. Once you have done this, a message will appear explaining how to use the 3D options (you can hide this message if necessary).

 

 

Once you have switched to 3D, the view in the Object Inspector will change accordingly. Additional settings will appear for PositionAngle and Scale:

  • Under Position, the Z value defines the object’s spatial position in relation to the background (the higher the value, the further in front of the background the object is; negative values will place the object behind the background).
  • The Angle – rotation about an axis – can now be set for all three axes: X, Y and Z.
  • Scaling (Scale) is now also possible for the Z value. This will extend the object’s depth.

 

 

  • Stacking

Stacking arranges objects in a way that generates the effect of depth when the user moves or tilts their tablet/smartphone. The Z position (Default Transformation Properties) allows you to set how far in front of the background image – or, in this case, the target image – each object is. The default value for this setting is 0, which places the object on the same plane as the background. A value of z = 100 would place the object some distance in front of the target image, while a negative value would make the object disappear behind the target image.

______

Caution: It is important to remember that the local orders set for the objects do not have top priority in 3D scenes. The spatial plane as defined by the Z position takes precedence. The local order will only be observed in addition to this if several objects are on the same plane (i.e. if they have the same Z value). In such cases, the local order will define which object is placed furthest forward. For more information, see the Working with 3D section.

______

In the following example, the target image – a book cover – has been fully reconstructed using individual parts. On the left is the cover – the target image assigned to the scene – while on the right are the objects required for the reconstruction, already arranged in the correct order.

 

 

You can perform the reconstruction in 2D at first to allow good positioning of all the objects. The Clip function is deactivated for the trees on the left and the right (see above), so they extend beyond the edges of the cover.

 

 

Next, you will need to switch to 3D to carry out the Stacking, giving objects that need to be positioned much further forward – such as the frame, the characters and the trees – higher Z position values (z = 200 for the frame; z = approx. 100 for the characters). This generates an effect similar to looking through a zograscope.

 

 

If you rotate the object in three dimensions in Preview mode (by holding down the ALT key), you will see that objects that were created to match the exact width of the Target image, such as grass, meadows, fields and sky, also needed to be wider.

The bear in the middle of the image provides the perfect example for us to demonstrate how to use the Billboard function (AR Properties or see below). This function is normally deactivated for all objects (No value), which means that all your assets will be tilted and rotated equally when moved using the target image. In the screenshot below (centre and right), the Billboard function has been activated for all axes. As a result, the bear maintains its upright position in the screenshots in the centre and the right, irrespective of whether its surroundings are tilted or rotated. This method basically ‘anchors’ objects in place so that they stand out.

 

 

  • Pop-ups
    •          AR properties/Billboard function

Let’s take another look at the example with the hippo from before. On the left, you can see the target image as it appears in the book. On the right is the way it is displayed on the screen.

 

 

Here, parts of the scene have been tilted so that they pop up from the flat plane like pieces in a pop-up book, especially when the tablet is moved. In the next image, we can see that the jungle in the background actually pops up out of the image area.

 

 

What has actually happened is that the image’s anchor point was moved to its bottom edge, then it was rotated around the X axis. We will now apply the same procedure to the hippo. As a result, both objects will pop up out of the background.

 

 

Normally, these objects will move with the scene when it is moved as a whole, i.e. if the perspective is tilted around the X axis, they will give an impression of depth, but if it is tilted around another axis, they will tilt together with all the other objects.

 

 

The Billboard function in the AR Properties (in the Object Inspector) allows you to define whether an object also maintains its alignment relative to the target image if the tablet is tilted – either for all axes (and thus tilting in all directions) or only for specific axes. You can see how this works in the two examples below:

 

     

 

Things to remember

  • If you have already loaded a background image for the scene, this will be replaced with the imported target image when the AR function is activated. This only applies in the TigerCreate work environment; as soon as the project is exported, the target image itself will no longer be visible.
  • Unlike ‘normal’ scenes, you do not necessarily need a screenshot for AR scenes. If you do decide to use one, however, this will mean that your scene has a thumbnail icon, making it easier to find.

Back To Top

Multilingual Projects

Creating multilingual e-books

TigerCreate supports multilingual e-books. You can select the languages you wish to use in the general Project Settings by clicking the button in the top right-hand corner. In this area, you can also add new languages to an existing project, or remove languages from it. If you are working in Edit mode, you can alter the current language using the Language button (above the workspace), which also displays the current language.

TigerCreate saves you a lot of work, as you will only have to create each scene once! This is a huge advantage, as it means that any corrections you make to individual animations only need to be carried out once, rather than separately for each individual language version of the scene.

 

Preparing assets for multiple languages

Multilingual options can be used for the following asset types:

  • Text in text boxes or text blades
  • Text in graphics
  • Sounds that contain spoken text
  • Highlight data for word highlighting
  • Animations can be set to be language-specific (see below)
  • Screenshots must be created separately for each language version of a scene (see below)

In order to enable you to distinguish between language versions while still allowing TigerCreate to find the right versions automatically, a special code must be added to the name of each asset. This code comprises the letters “_LC_” (Language Code) plus a language-specific identifier.

For example, the sound file for scene 05 would have the name “S05_Voice_LC_DE.mp3” for the German speech, and “S05_Voice_LC_EN.mp3” for the English speech.*

The same basic principle applies to language-specific graphics. It is important to ensure that the name remains the same but for the code at the end, e.g.:

“S01_Auto_LC_DE.png”

“S01_Auto_LC_EN. png”

“S01_Auto_LC_IT.png”

If you follow this naming convention correctly, TigerCreate will save you a lot of work, as it will be able to use the end codes to detect which asset needs to be used in which language version. The Scene Navigator will display the asset (in the image below, a letter) without the language code. Instead, it will be marked with a symbol to indicate that it is a multilingual asset.

 

 

You can use multilingual assets just like other assets. If the user changes language, TigerCreate automatically makes sure that the correct asset is used.

To start with, work on your scenes in just one language. Create text boxes and fill them with text in the language you have chosen. If necessary, use the Animation Inspector to link speech files to the text boxes and the Animator to generate keys for word highlighting (alternatively, you can also import externally prepared label files).

When using text boxes for multiple languages, remember that the same text can have different lengths in different languages. Because of this, it is a good idea to test whether the text box shows the entire text in each of the languages you are using. If the full text is not shown in one language, the text box for this language will automatically become scrollable when viewed on a mobile end device.

For example, if you have set up and saved your scene in German, you can change language using the language selection switch (here: English) and see what happens:

  • If you are using multilingual graphics in your scene, these will be replaced automatically (providing they have been named accordingly).
  • Instead of displaying the German text you entered in the German version of the scene, the text box is empty (“English Text”). It is also already linked to the corresponding English speech file. There are no keys in the timeline’s text box, as the word highlighting will need to be set up from scratch.
  • The text box will have the same properties – Name, Local Order, Position, Rotation – and the same width and height dimensions as its equivalent in the original language.
  • Where they differ is that the text boxes in your other languages will not yet have any formatting. For example, if you have text in the German version of your e-book that is formatted to Helvetica, 64 points, justified right and light green, the same text box in the other language versions of your e-book will initially contain just an example text with the default formatting, e.g. Times New Roman, 18 points, justified left, black. The advantage of this is that it allows you to use as many different fonts and formatting options as you like for your different languages.
  • Put your English text in the text box, format it and set the keys for the English version of your scene.
  • Save the results, then switch back to German using the language selection button.

Yep – that’s everything!

*You can view the default formatting under Default Text Options. This defines how text boxes are formatted by default, and applies to the whole project. You can find more information on this topic under Working with Text.

If you are working with graphics that contain language-specific content, you do not need to use exactly the same size format for every language – though this is probably still the safest option. For example, if you are using a sign with a square logo belonging to a discount store, you may need a longer sign with a different logo in a different language. The important thing is to use the same anchor point position for the sign in every language. This may mean placing the anchor point dead-centre, or in the top left-hand corner, depending on how the sign fits in with its surroundings. However you decide to solve this issue, you should always test your graphics carefully when using different formats in different languages.

TigerCreate will take care of everything else. And when you set multiple languages in your Project Settings, the corresponding language buttons will automatically appear in your e-book, in the form of little country-specific icons.

*In order to ensure that the correct end codes are used for each language, we use the two-letter codes defined in the ISO 639 standard.

Afrikaans AF

Akan AK

Albanian SQ

Amharic AM

Aragonese AN

Armenian HY

Azerbaijani AZ

Bambara BM

Basque EU

Belarusian BE

Bengali BN

Bosnian BS

Brazilian Portuguese BR

Bulgarian BG

Burmese MY

Catalan CA

Chechen CE

Croation HR

Czech CS

Danish DA

Dutch NL

English EN

Esperanto EO

Finnish FI

French FR

Georgian KA

German DE

Greek EL

Hindi HI

Hungarian HU

Indonesian ID

Italian IT

Japanese JA

Korean KO

Macedonian MK

Malay MS

Maltese MT

Nepali NE

Norwegian NO

Polish PL

Portuguese PT

Romanian RO

Russian RU

Simplified Chinese CN

Spanish ES

Swahili SW

Swedish SV

Tamil TA

Thai TH

Traditional Chinese ZH

Turkish TR

Ukrainian UK

Vietnamese VI

 

Things to remember and language-specific settings 

  • In the Object Inspector:

In the Touch Event area of the Object Inspector is a checkbox marked Use Different Animations Per Language. This allows you to use different animations in each different language, providing the animations in question are triggered by touch events.

For example, you could use a button marked “Ende” in your German version that would make balloons float up into the air, then mark the same button “End” and make it set off fireworks in your English version, and in the French version you could mark it “Fin” and make it play the Marseillaise and trigger a sunset animation – all by simply assigning different animations to the same touch event in different languages.

This gives you even more control over the way your scenes are set up and played in different languages. When using this feature, please make sure that you link animations for every supported language; animations have no default that can be used if no other option has been selected.

 

 

  • In the Scene Inspector:

In the Start Animation Properties, you will find the Use Different Animations per Language option. This also allows you to assign different animations in different language versions – in this case, different start animations.

When you open the Scene Inspector, you will see a list of all your start animations (animations that start automatically, i.e. without a touch event). If you check this checkbox, this list will be emptied – but the animations will not be deleted! The display simply shows the status for the active language, which is empty by default. Use the + symbol to select one or more start animations for the current language. Once you have done this, change language and assign start animations for your next language. In principle, it is not particularly important what names you choose for your animations. Nevertheless, it is always helpful to give your animations names that tell you they are start animations for a specific language version.

You can also assign the same animation to multiple languages: maybe you are using a total of three animations in the scene, one of which will be the same in every language. If this is the case, simply assign it to every language.

 

 

_______

Caution: The + symbol gives you access to all the animations in a scene, including the dependent animations (triggered by touch events)! If you add a dependent animation to the list of start animations for a language, it will also be turned into a start animation (for the language in question). However, the touch event assigned to it will also remain assigned to this animation. This means that the animation will be played automatically using the settings in the Animation Inspector when the scene starts in the selected language version, and can then be played again using the predefined touch event.

You can use this little ‘trick’ if you want to assign two different start animations for the same object in different languages (e.g. if you want a frog to hop off the left side of the screen in language A, and off the right side in language B). To do this, set the first animation as a start animation and the second as a normal animation. When they are assigned in different languages, the animations will then both become start animations in their respective languages.

_______

 

  • Language-specific screenshots

Every scene needs a preview that represents the scene, such as a screenshot. The screenshot could capture how the scene looks at the start or at a specific point during its playback. A separate screenshot must be taken for each language version.

 

 

There are two different ways of doing this in the Screenshot Properties (in the Scene Inspector):

  • Drag an image (JPG format) into the Screenshot field from the Project Navigator, or directly from the project folder in the Finder. When doing this, please note the different end codes used in the names for language-specific files.
  • Use the Create From View button to create a screenshot of the scene in its current condition.

Once you have done this, switch languages within the scene and repeat the process for each language. The Scene Inspector will show you if you have not yet created a screenshot for any of your languages.

You can also edit and reload the screenshot after you have created it. To do this, drag the image (a 510 x 384 pixel JPG) onto the Finder and edit it in an image editing program.

Back To Top

Creating and Adding Games

Creating and adding games as part of an e-book

With TigerCreate, you can add games to your e-book to enrich it and add to your story. There are two main types of game in TigerCreate: stand-alone, external games that can be opened from the menu at any point in the e-book, thus interrupting the story itself, and internal games that can be launched and played within a scene, without actually exiting it.

 

Stand-alone games

The external game options are made up of three standard games, which can be selected in the Publishing dialogue: a puzzle, a memory game and a doodle – a picture with defined outlines that the user can colour in. No matter what type of game you choose, it is convenient to use elements from the e-book itself.

At the time of writing, the Memo and Doodle games need to be prepared outside of TigerCreate (see below), then the files saved in the corresponding sub-folder (Memory or Doodle in the Games folder). For the Puzzle game, you can simply save PNG files with the correct dimensions and naming conventions in the Puzzle sub-folder. TigerCreate will take care of everything else.

When you publish your e-book, select the game(s) you want to integrate into it in the Games section of the Publishing dialogue. In the Doodle section, you will also need to define whether you want the lines within which the user will be colouring to remain in the foreground at all times (Background Order: Below), or whether the user can colour over them (Background Order: Above).

 

     

 

The following section explains how games work and how to prepare your own.

  • Puzzle

The Puzzle game has two difficult levels: 12 pieces and 24 pieces. The jigsaw pieces are spread across the playing area. The user can move them in any way they wish. The pieces will lock in place when moved to the correct position (within a tolerance of a few pixels). Once the user has completed the puzzle, a sound will play and the finished image will be displayed in the centre of the screen. The user can exit the game at any time.

 

 

To create a puzzle, save two PNG files with dimensions of at least 1268 x 830 pixels (landscape)/830 x 1268 pixels (portrait) in the sub-folder of Games named Puzzle. Name one of the files “Puzzle12.png” (this will be used for the 12-piece jigsaw puzzle) and one “Puzzle24.png” (for the 24-piece puzzle). TigerCreate will then automatically generate the jigsaw pieces for both difficulty levels. You can also use images with larger dimensions, as long as they have the same aspect ratio.

If required, save a sound with the name Puzzle.mp3 and another named Finished.mp3 in the Puzzle folder. The first sound will play when a piece locks into place; Finished.mp3 will be played when the user completes the puzzle. These sounds are optional.

  • Memo

In the Memo game, the user has to find matching pairs in a set of cards that are lying face down. There are two difficulty levels, in which the user has to find 8 and 15 pairs respectively.

 

 

As such, you will need to choose 15 different patterns or pictures from your image material in order to set up this game. The pictures should not be too small, as the individual playing cards do not offer much space: 320 x 320 pixels (for the 8-pair difficult level) or 258 x 258 pixels (for the 15-pair difficulty level). (You can also use images with larger dimensions, as long as they have the same aspect ratio.) You may find it useful to use our Photoshop template for this task, which gives the playing cards a black border and graphic layering effects. You can download the template here. All the cards will be exported in PNG format from here. The cards must follow a specific naming convention in order to ensure that they are positioned and arranged correctly:

card_4_4_1.png, card_4_4_2.png, … card_4_4_8.png for the 8-pair game.

card_5_6_1.png, card_5_6_2.png, … card_5_6_15.png for the 15-pair game.

You can also customise the images on the backs of the cards: card_back_4_4.png and card_back_ 5_6.png. If there is no file that matches these naming conventions in the Memo folder, the default card back (blue with white dots) will be used.

  • If you wish to use sounds, these must be saved in the Memory folder:

Click.mp3 is played when the user turns over a card

Memory.mp3 is played when the user turns over a matching pair

Finished.mp3 is played when the user has found all the pairs and completed the game. These sounds are optional.

 

  • Doodle

The Doodle game is picture with defined outlines that the user has to colour in. They can choose from a range of different tools and colours to complete the task, and can also fill sealed shapes with colour with just one click.

 

 

  • Select an image and scale or trim it to 1586 x 1036 pixels (landscape)/1036 x 1586 pixels (portrait). (You can also use images with larger dimensions, as long as they have the same aspect ratio.).
  • Use a drawing program (ideally vector-based) to trace the lines you require (ideally in black) on a separate level. The rest of the image you subsequently export must be transparent.
  • Make sure that the ends of your lines meet. The user can fill sealed areas of the image with just one click using the Fill function.
  • Make sure that none of your areas are too small – the user must be able to select an area with the tip of their finger.
  • Save the finished image (just the outlines, not the template) as a PNG graphic with transparency. Name it “Doodle.png” and copy it into the Games/Doodle folder.
  • This game does not use sounds.

 

Games integrated into scenes – Mini games

You can use TigerCreate to create small games “mini games” within a scene. Unlike the three external game types – Doodle, Memory and Puzzle – these games can be launched and played individually within a scene using a touch event. This way, the user does not have to leave the story – instead, mini games act as a sort of extension to the story itself.

You can choose from the following types of mini game:

  • QuestGame   // Find 1-5 objects in the picture and tap on them.
  • QuizGame      // Answer a question on the story (multiple-choice).
  • RhymesGame        // Out of a selection of 6 words, choose the ones that rhyme with the word provided.
  • SpellGame     // Use the letters provided to make a word you can see in the picture.
  • SpotGame      // Find 5 differences between the two pictures.
  • SpotGameAR                   // Find 5 differences between this picture and the one in your book.

All these games can be configured with their own images, backgrounds and sounds.

Click on the + symbol at the top of the Project Navigator to select the game you wish to configure.

 

 

The structure of the games is more or less self-explanatory. Once you have opened a game type, a window containing various ‘tabs’ will appear. Each tab represents a different view of the game. For example, you can set a background graphic for each page and configure the game by adding your own text.

As an example, let’s look at a QuestGame:

 

 

  • Enter a name for your game.

 

 

  • Enter help texts that explain how the game works. Define whether or not you want the help to be shown as soon as the game starts and, if you wish, select your own help icon (e.g. ‘?’). You can also add a speech file to the text.

You should also add a background (JPEG, 2048 x 1536 pixels). This will appear as soon as the game is launched.

–––––

Caution: If you need to leave a blank line in your explanatory text, do not use the Space bar, as this will display as a special character on certain end devices.

The only way to avoid this is to begin the next line straight after the full-stop in the previous line, then insert a line break.

–––––

 

 

  • Enter a prompt text that explains the task to the user. Again, you can add an audio file to enhance the written text.

You will then also need to add the game itself – an image containing up to 5 objects the user must look for and tap on once found (JPEG, 1946 x 627 pixels), plus a background image.

 

  • In the imported image in the window, use the mouse to drag selection rectangles around the objects the user needs to find.

 

 

  • The final tab, ‘Results’, allows you to create various sounds and feedback effects for ‘everything correct’, ‘not everything correct’ and ‘nothing correct’. You can also select a separate background for each result.

In our QuestGame example, the preview could look something like this:

 

It doesn’t matter which scene you create the game in – in theory, you can use it in every scene. To do this, create a node as you usually would for a touch event and place it over the object or part of the background that you want to act as the trigger for the game. In the example below, the letter launches the game. Assign a touch event to the corresponding node (in the Object Inspector).

 

 

The touch event can be used to link the node to an animation and/or sound, but its most important role is to launch the game via the Start Game function under Miscellaneous.

 

 

The game will then cover the entire area of the scene itself when viewed in the Preview or Quick Test modes.

The other games are created according to the same principle: insert your own text, sounds and images in the predefined windows to configure the game.

For the QuizGame, for example, you will need to configure one question and four possible answers. The questions must not exceed a length of 140 characters, while the answers are restricted to 9 characters and must otherwise be separated with a hyphen.

 

 

For the RhymesGame, you will need to specify a word and offer a choice of 6 other words that might rhyme with it. Essentially, you are asking “Which of these words rhyme?” 2, 3 or 4 of the 6 answers could be correct rhymes. You can also add a picture to illustrate the question word.

 

 

In the SpellGame, the user has to spell words correctly. You will need to specify a word (2 – 6 letters) and, if possible, add a picture to illustrate it. To complete the game, the user must place the scattered letters in the correct order.

 

 

In the SpotGame, the user must spot 5 differences between two pictures. As such, you will need to create two almost identical graphics (JPEG, 830 x 710 pixels) that are different in 5 small ways. You will then need to mark these differences in the window by dragging rectangles around them, just as you did with the objects in the QuestGame. The program marks the differences as ‘found’ when the user taps on them.

 

 

The SpotGameAR is a variation on the SpotGame. As mentioned earlier in this manual, the AR (Augmented Reality) function acts as a virtual expansion to a physical book. As such, in this variant of the game, the user compares a page of the actual book – which is activated by the camera’s AR function – to a ‘faulty’ image with 5 marked differences.

It is essential to test all these games!

Start with the game’s built-in Preview function, then test them within the scene that will be used to launch them (see the QuestGame example above). Finally, of course, you should test them on different end devices prior to publication.

Back To Top

Testing and Publishing

Testing and Publishing

Once you have created your first animations, there’s one thing you always have to do: test, test, test!

Don’t wait until everything is finished – start testing at an early stage to see whether your animations will run as you expected on the end platform.

The Preview function offers a good first impression, and is particularly useful for testing the timing of animations and how they work with sounds. It also allows you to change language and switch between different aspect ratios so that you can see which parts of the screen are visible on different end devices. You can also set Preview mode to show the turquoise frame for the 16:9 safety zone (top right, under Options/Show Safety Zone in Preview Mode).

 

 

For the next stage of testing, you can use Quick Test to test the current scene, or the Test Build function to export one or more scenes. The Test Build function works in the same way as the normal Publish process, but can be used free of charge. It is primarily designed for testing your project or parts thereof on different end devices or in the TigerSimulator (included in the TigerCreate development package).

 

 

TigerCreate also offers one huge advantage that we haven’t even mentioned yet – it tidies up after you! When you perform an export, unused images and sounds in your project folder that are not required are simply excluded from the export. Not deleted – after all, you might need them later on – just ignored. However, everything that is on the stage or in your workspace will be exported, so it’s always a good idea to keep all your scenes “tidy”.

In order to keep file sizes down for your e-books and apps, you should always try to optimise images using external tools, such as ImageOptim, pnggauntlet.com or tinypng.com. The Export dialogue also offers you the option of activating the Compress Image feature for every scene you export.

During the export procedure, the Publish Info window will also open. This provides you with an overview of the scenes you have exported and the amount of storage space taken up by the graphics they contain (see “Other options”, below).

 

Export formats

TigerCreate generates a variety of export formats to suit all the most important distribution platforms. This means you can create an ePub for Apple iBooks, an IPA file for the Apple App Store or an Android APK file for the various app stores. Of course, you can also create a TigerFormat file for TigerBooks.

The responsibility for uploading the files to the required platforms lies with the content owner themselves: the owner must open customer or developer accounts with Apple, Google, Amazon or Samsung and sign a corresponding sales agreement.

TigerCreate currently supports the following formats:

  • TigerBooks 2.0 (for the TigerBooks platform)
  • Apple iBooks Store format
  • Apple App Store applications (for iOS devices)
  • Google Play Store applications (for Android devices)
  • Amazon Appstore applications
  • Amazon Kindle KF8

 

If you select TigerBooks as your export format, TigerCreate will generate an open ePub file that you can use for testing, plus an encrypted (protected) version that you can publish on the TigerBooks platform.

The size of your e-books will be determined largely by the number and size of graphics and sounds you include in them. Sizes of between around 20 and 70 MB are normal for ePub files.

 

 

The Publish dialogue

Whether you want to test your e-book in the iOS Simulator or publish an e-book you have already tested, you will need to use the Publish dialogue, which is almost identical for both functions.

To test an e-book or individual scenes in it, click on the Test Build button (or the Publish button, where applicable). The dialogue window shown below will appear, initially comprising three tabs. The first tab allows you to select which scenes you want to publish, the second contains options for choosing an export format and the third allows you to pick the games you want to integrate into your scenes. You can also enlarge this window to view long scene names better.

 

 

_______

Caution: The iBooks and Kindle KF8 formats do not support these games, so the Games tab is not displayed for these formats.

_______

1 – Select the format you want to publish in.

2 – The Language Selection parameters offer a range of options for multilingual titles, such as deactivating individual languages for test purposes.

 

 

3 – Different options will be available to you depending on which export format you choose. You will find these on the middle tab (see below for more information). The right-hand tab allows you to choose which games you want to integrate into your published scenes (see below).

4 – The Remember and Open Book to Last Opened Scene option is selected by default. It allows you to return directly to the last open scene in the exported e-book each time it is opened. Mark All allows you to select all your scenes at once, while Compress All activates the Compress Images function for all scenes (see below, plus First steps – Quick Start – Preparing assets – Images). Uncompress All deactivates compression for all scenes with active compression.

5 – Scenes tab: Use the checkboxes to select at least one scene from the list of all those in your project. The scenes will initially be placed in alphabetical order; this is the order they will be played in, from top to bottom. You can rearrange them by dragging and dropping.

6 – Mark Compress Images to save as much space as possible. This will compress all the images in your scene.

7 – The Next button will take you to the next step in the Publish dialogue. Before pressing this button, you should edit the parameters in the Options and Games tabs.

 

Options

The options available to you in the middle tab will vary depending on which export format you choose.

 

Games 

You can use the Games tab to integrate up to three of the standard games (Puzzle, Memo and Doodle) in your e-book. You will need to create these games separately (see Creating and Adding Games). Unlike mini games, which can be launched directly within a scene, these games need to be launched from the TigerCreate menu. This will cause the user to exit the scene. Once the game is complete, the scene will reload.

 

 

_______

Caution: The iBooks and Kindle KF8 formats do not support these games, so the Games tab is not displayed for these formats.

_______

 

Launch Options 

In the next step, the Publish dialogue will take you to the Launch Options. Here, you can select the target environment that will be used to run the exported files. When using the simplest export method – exporting in TigerBooks format – this will be our in-house software, TigerSimulator. If you have chosen the iBooks format, the program will suggest the iBooks app at this stage. The selection list will update automatically if you connect an external device, iPad, smartphone, etc.

 

Other options

Generate Publish Overview helps you to assess how much memory your e-book will take up once exported. It will show you the ATLASES that have been generated for every scene, together with how much memory and GPU capacity they take up.

An atlas compiles as many images of a scene as possible and has a maximum size of 4096 x 4096 pixels*. An atlas of this size will need 64 MB of GPU. As such, we strongly recommend using no more than one atlas for images and one for text.

* Some older Android devices do not support the 4096 x 4096 size. Lower-definition (SD) atlases with a size of 2048 x 2048 pixels are used on such devices.

Back To Top

Exporting for TigerBooks 2.0

For the TigerBooks format, you can add a different cover and brief description to your e-book for each language (if you have not already done so in the Create New Interactive Book dialogue at the start of the project). A warning message will appear if all the required details have not been provided.

 

Back To Top

Exporting for Apple iBooks

For the iBooks format, start by selecting whether the user will see the default iBooks interface or the TigerBooks user interface (“TigerCreate-UI”). Once you have done this, you can enter information on the Publisher (your company/the content provider) and Version number of the e-book.

Next, choose the active language that will be supported by default when the book is opened, and add information such as a valid ISBN number (this will be checked to ensure validity), cover, a brief description and a message to be shown while the book is loading (Wait Message).

Warning messages will appear if you have not filled in any of the required fields.

 

Back To Top

Export as an iOS app

TigerCreate can create iOS apps that can be run on an iPhone, iPod or iPad.

This is a complex process all-round, and neither TigerCreate nor the TigerCreate Support team are able to offer help with it. TigerCreate acts as a tool for creating the finished files; you must bear the sole responsibility for the app certification, the App Store management, the distribution, etc.

To publish apps via iTunes, you will first need to create a developer account with Apple for iOS development. For more information on this, please refer to the Apple website.

The Apple website and other Internet sources also contain (very detailed) information on the overall process for publishing apps on iOS. You will also need to install the Xcode software on your computer, which is available free of charge from the App Store.

In the Options dialogue, you will need to enter information on your app: Name, Version, Bundle Identifier.

Application Name is the name of the app as it will appear under the app icon on the iOS device. At the time of writing, app names cannot contain any accents or special characters!

The number entered under Version must match the version number of the app created using iTunes Connect; otherwise you will not be able to upload the app to iTunes Connect using the Application Loader. Version numbers can only contain numbers and decimal points, e.g. “1.0”, “1.1”, “2.8.6”.

The Bundle Identifier is the “App ID”, e.g. “de.oetinger.polarbearinappen”. If you are using a wildcard provisioning profile (which can be valid for multiple apps), simply enter a “*” in this field.

Select a Provisioning Profile. You can create and download this in the “iOS Certificates, Identifiers & Profiles” area of the Apple “iOS Dev Center”. Once you have downloaded the profile, double-click on it to install it in Xcode. It will then appear in this list in TigerCreate.

Use the drag and drop technique or right-click on the image area to link images for an Icon (180 x 180 pixels) and a Loading Screen (2048 x 1536 pixels). For multilingual titles, you will also need to define the default active language.

Back To Top

Exporting as an Android app

TigerCreate can create apps for “Google Play”, the Android app store. In order to do this, you will need a Google Play developer account. More detailed information on how to do this is available online.

Once you have done this, you will need to install “Android SDK” in order to export Android apps in TigerCreate. TigerCreate works with the “ADT Bundle for Mac”. If you do not have an Android SDK on your computer, select the TigerCreate/Preferences menu. There, you will find a download link, a link to a tutorial video on YouTube and an option for placing a shortcut to the Android SDK on your computer.

 

 

Enter all the required information in the Android Options screen.

 

 

Under Application Name, enter the name of your app as it will appear below the app icon on the Android device. At the time of writing, app names cannot contain any accents or special characters!

The Version name must only include numbers and decimal points, e.g. “1.0”, “1.1”, “2.8.6”.

The version Code can only include whole numbers, e.g. “1”, “2”, “5”, “17654”. This code number must be increased by at least 1 for each update.

Under Package Name, enter the package name for the app in question. This name must be clear and unique. As such, it is common practice to enter a domain name in reverse and then attach the name of the app, e.g. “en.mydomain.apps.mybook”.

Select a path for the Keystore File. This name must be created in accordance with the following instructions.

The following parameters must be set when generating the Keystore file:

  • Key Password
  • Keystore Alias
  • Key Password

Make sure you save this data, then enter it in the corresponding fields on this screen.

Public Key: You can specify a licence key to prevent the app from being copied and distributed illegally. Once you have created the app in the Google Play Developer Console, you can copy the licence key from:

MY APP –> SERVICES & APIS –> YOUR LICENSE KEY FOR THIS APPLICATION

This is a Base64-coded, public RSA key for your binary file. Once you have copied this licence key into the corresponding field in TigerCreate, please delete all the spaces from it.

Use the Loading Screen field to set a personalised loading screen (such as a PNG file) with a size of 2048 x 1536 pixels. This will be displayed as soon as the splash screen disappears.

Drag and drop or right-click in the Icon field to add a 192 x192 pixel icon for the app.

Back To Top

Exporting as an Amazon Appstore application

The Standalone Amazon Application format has very similar requirements to the Android App format. As such, please refer to the section above for further details. No Public Key (see above) is required for this format.

 

Back To Top

Exporting in Amazon Kindle format KF 8

The Kindle KF8 format requires special export tools. These are available for download from several sources, including a link in your TigerCreate preferences (TigerCreate/Preferences menu). Once you have downloaded the required tools, you can also use this area to define the path for the required KindleGen file.

 

 

_________

Caution: KF8 does not support animations. Instead, it uses the scene screenshots you have created. As such, it is especially important to make sure that your screenshots clearly reflect the story when using this format.

_________

The most important setting in the Publish dialogue’s Options tab is the Aspect ratio of the target format: 4:3 or 16:10. You should also enter the name of your company/the content provider in the Publisher field.

Next, choose the active language that will be supported by default when the book is opened, and add information such as a valid ISBN number (this will be checked to ensure validity), a cover and a brief description.

Warning messages will appear if you have not filled in any of the required fields.

 

Back To Top

(Deutsch) Export für Webbrowser

Sorry, this entry is only available in German.

Back To Top