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 touches 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

Videos

  •  TigerCreate supports the embedding of video files, which can also be animated.

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 projects are child’s play with TigerCreate. TigerCreate will help you every step of the way.

A TigerCreate subscription 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 a 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.

System requirements

TigerCreate 2.0 only runs on Apple® computers and requires at least macOS OSX 10.12 Sierra. Your computer will need 8 GB of RAM and approx. 500 MB of hard disk space to run TigerCreate, also an Intel Core i5 CPU (or higher) with at least 2.5 GHz. Your Display should have a minimum resolution of 1440×900 pixels.

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
  • Webbrowser

We are currently working on formats for other platforms.

The size of your final Apps will be determined largely by the number and size of graphics and sounds you include in them, and the number of scenes they contain.

Back To Top

Overview

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

TigerCreate allows you to create interactive projects in special formats, e.g. TigerBooks format, iBooks format or as independent apps for various platforms. A project 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 project 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 project, 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 PNG files without transparency and ideally have the size of the stage itself (2048 x 1536 pixels for landscape stages/1536 x 2048 pixels for portrait stages).

However, you can also create wider backgrounds if you want to support super-widescreen devices such as the iPhone X and the Samsung S8.

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, it’s not allowed to use images with dimensions greater than 4048 x 4048. However, different rules apply for graphics in the iBooks format. These must not exceed the maximum sizes of 2048 x 1940 for landscape projects and 1940 x 2048 for portrait projects.

TigerCreate will display corresponding warnings in the Project Navigator and the export dialogue.

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.

In order to improve performance and save memory usage on the end device, you should use mono sounds rather than stereo ones.

_____

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.

TigerCreate will automatically mark the affected files with a warning notice.

_____

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 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 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).

 

     

 

You should check the Support Super Wide Display checkbox if you are planning to support devices with a super-widescreen display, such as the iPhone X or the Samsung S8. However, you can also change this setting at any time in the project settings.

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 Project 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 rectangle (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. You can also drag and drop the background images onto the background image field directly from the Image folder. 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.

 

Ambient sounds are automatically played on an endless loop. If you do not want them to do this, e.g. if you only want them to be repeated a set number of times, do not link the sound to the Ambient Sound field.

 

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 61 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 0 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 0 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 0 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 a project 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 71 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. 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.
  2. 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*: In the Generic Properties category in the Object Inspector, you will find the Is Touchable option.

– – – –

* It is good practice to place all touches (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 touchable objects, 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 and install the app first. However, this can be done quickly and automatically with just a few clicks.) 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.

 

 

  • You have also the option to start a Quick Test for the iBooks format. Just click and hold the Quick Test button to open a small menu where you can change between Mobile (TigerSimulator) and iBooks.

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

Menu Bar

The top menu bar in TigerCreate 2 offers a number of different functions.

 

TigerCreate 2 here you will find general information and settings. The two most important options here are Preferences and Subscriptions.

 

  • About TigerCreate 2 displays general information on the software, including the current build number, contact information, a link to the software licence agreement and copyright information.

 

  • Preferences… opens a window for settings that apply to all projects. Keyboard shortcut: ⌘, (cmd + ,)(You can find more information on preferences here: Interface/ Settings for alle projects – Preferences
  • Subscriptions opens a separate window that lists all the available subscription models for TigerCreate 2. You can also use this option to set up a new subscription or restore an existing one.

 

  • Hide TigerCreate 2 hides all TigerCreate 2 windows. Keyboard shortcut: ⌘H (cmd + H)
  • Hide Others hides all windows apart from TigerCreate 2. Keyboard shortcut: ⌥⌘H (alt + cmd + H)
  • Show All shows all hidden windows again.
  • Quit TigerCreate 2 exits TigerCreate 2. Keyboard shortcut: ⌘Q (cmd + Q)

 

File contains functions relating to creating and opening projects and scenes. Some of these options are situation-specific, and are greyed out when they cannot be used.

 

  • New Project opens the Create project dialogue. Keyboard shortcut: ⇧⌘N (shift + cmd + N)
  • New Scene creates a new scene in the currently open project. If no project has been opened yet, you will be prompted to select the corresponding project folder. By default, new scenes always open in a new window. Keyboard shortcut: ⌘N (cmd + N)
  • Open… opens a window where you can select a scene or project to open. Keyboard shortcut: ⌘O (cmd + O)
  • Open Recent shows a list of recently opened scenes. It also has a Clear Menu option, which allows you to delete this list.
  • Close closes the currently active scene. Keyboard shortcut: ⌘W (cmd + W)
  • Save… saves the current scene. Keyboard shortcut: ⌘S (cmd + S)
  • Duplicate duplicates the active scene in a new window, where it can be saved under a new name. Keyboard shortcut: ⇧⌘S (shift + cmd + S)
  • Revert to Saved undoes all the changes made to a scene since it was last saved.

 

Edit This menu contains important commands for working in a scene, including Undo, Paste and Copy. As in the File menu, only the options in this menu that can actually be used are active. For example, if there are no objects on the clipboard, the Paste option will be greyed out and you will not be able to use it.

 

  • Undo undoes the last action you took. Keyboard shortcut: ⌘Z (cmd + Z)
  • Redo repeats actions that have been undone using Undo. Keyboard shortcut: ⇧⌘Z (shift + cmd + Z)
  • Cut cuts the currently selected object out of the scene. Keyboard shortcut: ⌘X (cmd + X)
  • Copy copies the currently selected object to the clipboard. Keyboard shortcut: ⌘C (cmd + C)
  • Paste pastes an object you have cut or copied into the scene. Keyboard shortcut: ⌘V (cmd + V)
  • Duplicate duplicates the selected object and inserts it in the same position as the original. Keyboard shortcut: ⌘D (cmd + D)
  • Delete deletes the selected object from the current scene, but not from the project folder. Keyboard shortcut: ⌫ (Backspace)
  • Select All selects all the objects on the stage. Keyboard shortcut: ⌘A (cmd + A)
  • Cut Key cuts the selected key frame out of the timeline. Keyboard shortcut: ⌥⌘X (alt + cmd + X)
  • Copy Key copies the selected key frame in the timeline to the clipboard. Keyboard shortcut: ⌥⌘C (alt + cmd + C)
  • Paste Key pastes a cut or copied key frame from the clipboard into the timeline. Keyboard shortcut: ⌥⌘V (alt + cmd + V)
  • Delete Key deletes the selected key frame from the timeline. Keyboard shortcut: ⌥⌘⌫ (alt + cmd + backspace)

 

View provides options for adjusting the display in TigerCreate 2, together with control options for animations and 3D mode.

 

  • Show Tab Bar shows a bar in TigerCreate 2 that displays all the open scenes on different tabs. You can create a new scene by pressing the + symbol at the end of this bar. This bar is hidden by default. New scenes will then be automatically added to this bar, rather than opening in a new window.Keyboard shortcut: ⇧⌘T (shift + cmd + T)
  • Show all Tabs/Exit Tab Overview opens an overview of all tabs that are currently opened and you can switch between them. By pressing the + icon in the overview you can create a new scene.Keyboard shortcut: ⇧⌘\ (shift + cmd + \ ) – You can close this overview again with the same shortcut.

 

  • Show Messages opens a window that is used to display messages. This is used by the development team to keep you up to date on news relating to TigerCreate.
  • Hide Toolbar/Show Toolbar can be used to hide or show the toolbar, which contains the Quick Test, Publish and Project Settings functions. Keyboard shortcut: ⌥⌘T (alt + cmd + T)

 

  • Toggle Edit/Preview toggles between the Edit and Preview modes. Keyboard shortcut: ⌘P (cmd + P)
  • Reset Camera re-centres the stage to its default view, in the middle of the workspace. Keyboard shortcut: ⌘R (cmd + R)
  • Toggle Record activates/exits Record mode for animations. Keyboard shortcut: ⌃R (ctrl + R)
  • Jump to First Frame in First Animation jumps to the first key frame set in the active top animation. In order for this option to work, the slider in the timeline must not be set to the first frame. Keyboard shortcut: ⌃1 (ctrl + 1)
  • Jump to Previous Frame in First Animation jumps to the previous key frame based on the slider position in the animation timeline for the top animation. Keyboard shortcut: ⌃2 (ctrl + 2)
  • Toggle Play/Stop starts/stops the animations that are currently active in the Editor. Keyboard shortcut: ⌃3 (ctrl + 3)
  • Jump to Next Frame in First Animation jumps to the next set key frame based on the slider position in the animation timeline for the top animation. Keyboard shortcut: ⌃4 (ctrl + 4)
  • Toggle Pin on First Animation pins/unpins the top active animations. Keyboard shortcut: ⌃P (ctrl + P)

You can find more detailed information on the Record mode, pinning groups and animations here: Working with TC/Working with animations

  • Toggle Local/Global toggles between the local and global values in the Default Transformation Properties Inspector. You will only notice changes in the values if you are dealing with the children of nested parent-child objects. Keyboard shortcut: ⌃L (ctrl + L)You can find more information on local/global values and parent-child objects here: Working with TC/Working with animations/Animations of nested objects (parent-child objects)
  • Toggle 2D/3D switches 3D mode on/off in a scene. (Only if 3D Mode is activated for the scene.) Keyboard shortcut: ⌃D (ctrl +D)
  • Toggle 3D Tool toggles between the 2D and 3D editing tools for the selected object. In order for this function to work, 3D mode must first be activated in the scene so that objects can be positioned and edited in 3D spaces. Keyboard shortcut: ⌃T (ctrl + T)For more detailed explanations of TigerCreate’s 3D functions, see: Working with TC/Using 3D
  • Enter Full Screen/Exit Full Screen toggles between window and full-screen mode. In full-screen mode, the menu bar and dock are hidden. You can hover the cursor over the top or bottom edge of the screen to show the menu bar and dock.

 

Create lists the options for creating Nodes, Bezier curves, Text and Text Blades.

 

Project lists the same options as the TigerCreate toolbar.

 

  • Quick Test exports only the current scene and opens it in TigerSimulator or iBooks (Click and hold the Quick Test button to switch between Mobile and iBooks export).
  • Publish can be used to test and publish your project in one of the supported formats. You should not perform final publication until you have tested your project thoroughly in various different environments.
  • Settings opens the Project Settings window. You can find more information on settings here: Interface/Project settings – Project settings

 

Window shows control options for all the active TigerCreate windows.

 

  • Minimize minimises the front active TigerCreate window to the dock. Keyboard shortcut: ⌘M (cmd + M)
  • Zoom expands the currently active window to fill the whole screen; unlike full-screen mode, this option does not hide the top menu bar or the dock.
  • Show Previous Tab switches to the previous tab in the tab bar, providing the tab bar is active and more than one tab is open. Keyboard shortcut: ⌃⇧⇥ (ctrl + shift + tab)
  • Show Next Tab switches to the next tab in the tab bar, providing the tab bar is active and more than one tab is open. Keyboard shortcut: ⌃⇥ (ctrl + tab)
  • Move Tab to New Window opens the active tab in a new window and removes it from the tab bar. If there are only two tabs in the bar and both are converted back into windows, the tab bar will automatically be hidden again.
  • Merge all Windows merges all the open windows into one window and automatically hides the tab bar. The previous windows are converted into tabs accordingly. This does not affect minimised windows, which will still be displayed as separated windows when you activate them again.
  • Bring all to Front brings all the open windows that are not minimised to the front.
  • Scene name | Project name – Edit status displays all the open scenes, which projects they belong to and whether they have any unsaved changes. This part of the drop-down menu is only displayed if at least one scene has been opened.

 

Help offers the functions Online Manual, Video Tutorials and Forum. Online Manual and Video Tutorial can also be found in the start dialogue. Both options open a link in the web browser.

 

The Contact Support option can be used to open a dialogue via which you can contact the TigerCreate team directly to send them questions, feedback, feature requests and error messages.

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 or iBooks (Click and hold the Quick Test button to switch between Mobile and iBooks export).
  • Publish can be used to test and publish your project in one of the supported formats. You should not perform final publication until you have tested your project thoroughly in various different environments.

Back To Top

Preferences

The settings applied to all projects can be found in the menu bar under TigerCreate 2 -> Preferences.

 

General offers the option to reset “Don’t show this again” warnings. These include explanation pop-ups that appear when 3D or AR functions are activated, for example. These pop-ups contain a checkbox that allows you to deactivate them so that they do not appear every time the functions in question are activated. You can reset this option later on under General if you need to.

 

Publishing Here you will find an overview of all tools that still need certain programs or files for a smooth export.

 

  • Publishing Tools requires a file path to an empty folder where TigerCreate can store various files for the publishing process. This is necessary for the internal simulator and for exporting iBooks, amongst other things.
  • Android lists all the steps you need to follow in order to subsequently export your projects as Google Play Store and Amazon App Store applications. TigerCreate will explain all the steps you need to follow, from downloading the right tools to entering the correct file paths once you have installed the Android SDK. You can find more information on installing and downloading these tools in the Testing and publishing/ Exporting as a Google Play Store application (Android app) area.
  • Kindle lists all the steps you need to follow in order to subsequently export your projects as Amazon Kindle KF8 files. TigerCreate will explain all the steps you need to follow, from downloading the right tools to entering the correct file paths once you have completed the download. You can find more information on downloading Kindle export tools in the Testing and publishing/Exporting in Amazon Kindle format KF8 area.

 

Text allows 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 project is displayed 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 scrollbar text.
  • The Wrap Delimiter function helps you to define how words are broken up at the end of a line. If you have placed block delimiters at the corresponding points in the text, words will be split and broken up based on the positions of your block delimiters when the text box is shrunk.

    As such, block delimiters must first be set in order for the Wrap Delimiter option to work. If the “Wrap Delimiter” option is not activated, words will be kept whole and moved to the next line rather than being broken up.

    For more information on block delimiters, see Working with text/Block delimiters.

_________

Caution: If necessary, you may need to add hyphens by hand. The Wrap Delimiter does not automatically add hyphens, as it is also used to split individual characters in situations where hyphens are not used, e.g. in Asian languages.

_________

  • The area below allows you to define several settings, including the default font, size, colour and style (bold, italic), the line spacing (Line Height Multiplier) and the paragraph alignment.
  • Scrollbar Settings: 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.)

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.
    • Support Super Wide Displays: Check this box if you want to support devices with wider displays, such as the iPhone X and the Samsung S8.

 

 

  • 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/Is Touchable).
    • Transition: This option is only displayed when the above checkbox is checked. If this is the case, you can choose how the system transitions look 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 minimum dimensions of 160 x 160 up to a maximum of 256 x 256 pixels is required for this.

 

 

  • Hints are flashing information symbols that, by default, appear every few seconds to indicate where there is something the user can tap. Please note that all hints are shown simultaneously.
    • 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 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 nested (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 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 between the keyframes), 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’t 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 Tag Actions button allows you to select one or more Tag 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 tag 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).

  • Console: Opens the TigerCreate Console on the bottom of the window. The console logs debug information including export logs. You have the ability to save those logs, via the Options button, if they are needed for troubleshooting. There you can also manage which kind of log messages you want displayed. You can also search for specific log entries with the search bar and remove all logs from the console with the Clear button.

 

 

  • 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, Memo and Puzzle – these games can be launched individually within a scene using a touch, 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.

 

 

If you want to add new asset to your project, you don’t necessarily need do this using just the Finder – you can also drag assets directly from the Finder onto the directory structure in the Project Navigator. The assets will then automatically be copied into the selected folder. No folder is generated for videos during the Create Project process; however, one will be generated automatically as soon as you drag video files onto the Project Navigator.

If any of the copied files are duplicates of those that are already in the project folder, TigerCreate will display a message notifying you of this and providing several options for what to do with the duplicate objects.

  • Cancel: Cancels the remainder of the copying procedure without adding any further files to the folder
  • Skip: Skips the file in question without copying it and then continues the copying procedure
  • Replace: Replaces the duplicate file already in the project folder and then continues copying the remaining assets

 

 

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. 128 x 128 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 project (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 application. 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 project, 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).

Text blades cannot be animated, though an animation can be added (Text Blade Audio) in the Animations Inspector that can contain 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 always 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
  • Editor 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”.

 

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.

Is Touchable defines whether or not it is possible to click on an object. This option must be checked for animations that are designed to be started by touch. It is also needed for the Drag Along, Free Drag and Is Scratchable options.

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.

Show Hint defines whether a hint is displayed for the currently selected object if it is touchable (for more information on touchable objects, see below: Touch Properties). This checkbox is checked by default, meaning that the hint will be displayed. Uncheck this box if you do not want the hint to be shown. You can adjust the hint behaviour for all projects using the Project Settings (see Project Settings/Hints).

Show Hint At Anchor defines whether the hint flashes up at the anchor point of the object (for more information on anchor points, see below: Default Transformation Properties/Anchor xy). If this checkbox is not checked, which is the default setting, the hint will always flash up over the exact centre of the object, regardless of where the anchor point is positioned. If the box is checked, you can set the hint to appear in any position by moving the anchor point. (Please note: moving the anchor points of animated objects can cause the object in question to jump, as the anchor point also affects the position of the object. This is one of several reasons why we recommend only using nodes – and not image assets – as objects with is touchable active (for more information on nodes, see  Asset Management/Nodes; for more information on touchable objects, see below: Touch Properties).)

 

Editor Properties

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

      

 

Outline Color (debug) opens the colour selection options. The colour you set here will only be applied to the current object’s outline. 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.
  • 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 offers the following options:

  • 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 a puzzle game
  • Start AR mode for this scene
  • Open a hyperlink
  • add UI actions

More details on these options are provided below.

 

 

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 default state
  • 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
  • Start And Stop Again – Stops all animations in the list and resets them to their default transformation starting point and  then starts playing all animations in the list from the beginning again

 

 

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 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 square 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.

 

 

If you wish, you can also use a checkbox in the Go to Scene function to add a Parental Gate for extra security (requires a paid TigerCreate 2 subscription; not available in the free Indie version). The Parental Gate takes the form of a pop-up in which the user is required to solve alternating calculation exercises. The exercise must be solved correctly in order to view the scene in question.

 

The Parental Gate is very important when creating apps for the Apple App Store. All links to external sites (e.g. to your other apps in the App Store) must be hidden behind a Parental Gate, otherwise you will not be able to publish your app in the “Kids” category. The Parental Gate used here is practical, as it does not contain any text that needs to be localised for the international version.

 

  • Start Mini-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 Puzzle launches a normal jigsaw puzzle or a MOVIEPUZZLE at the click of a button. When you check this box, a sub-menu will open so that you can add all the assets you need for the puzzle.

_________

Caution: A paid TigerCreate subscription is required in order to create MOVIEPUZZLES. You can find more information on MOVIEPUZZLES under Creating and adding games/MOVIEPUZZLES.

_________

_________

Tip: Unlike when you create puzzles or MOVIEPUZZLES using the Publishing dialogue and start them via the main menu or the corresponding UI command (see Working with TigerCreate 2.0/Creating and adding games and UI Actions below), this function allows you to add as many puzzles or MOVIEPUZZLES as you want to your scene and project. However, you should be careful not to generate quantities of data that might be too large for the end devices of your target audience – always keep testing you project on the end devices you want it to run on.

_________ 

The Medium (default) level in a normal jigsaw puzzle game requires an image file (.png without transparency), MOVIEPUZZLE requires a video file (.mp4, H264-encoded), and both require two sound files (.mp3, constant bit rate) for Click and Finish Sound. You can drag and drop these files from the Project Navigator (you need to be in the project folder in order to do this). The image and video files can also be assigned using the chain link symbol.

As soon as a file has been set for Medium, two further fields will appear for the Easy (optional) and Hard (optional) difficulty levels. If you want to use different patterns for each difficulty level, you can now add them for Easy and Hard. By default, the pattern set for Medium will be used for all difficulty levels if no other files are added.

The recommended dimensions for the image/video are 1280 x 720 pixels for landscape format and 720 x 1280 pixels for portrait.

You can also use images or videos with larger or smaller dimensions, as long as the aspect ratio is between 16:9 and 4:3 (for landscape) or 9:16 and 3:4 (for portrait).

However, you should always take into consideration the memory of the various devices on which you want your project to run; large image or video files can cause problems, especially on older devices. As such, we recommend testing the finished puzzles on the different end devices you want it to run on.

The Fade Lines option defines whether the lines between the individual jigsaw pieces are hidden once the puzzle is complete.

 

  • 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 image the scene is based on – 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 (default) 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 application using the task menu in Android or the “Back” button at the top left in iOS.
    Once the default link has been entered, a further sub-menu opens. This allows you to set additional adapted links depending on which platform the project runs on. However, these fields do not have to be filled in; if they are left empty, the default link will simply be used.

_________

Please note: If you use this function in a multilingual project, all the links must be set for each language.

_________

Note: The link to a web address must always start with “http://” or “https://”. TigerCreate will display a warning if this is not the case.

_________

Just like Go to Scene, Open Link can be secured with a Parental Gate (however, this also requires a paid TigerCreate 2 subscription and is not available in the free Indie version).  For more information on the Parental Gate, see the “Go to Scene” section above.

 

  • UI Actions allows you to control certain elements of the UI directly using objects with Is Touchable enabled. These actions are especially useful if you want to build your own UI that is separate from the default UI provided by TigerCreate, for example. You can use UI Actions to control all the functions that are available in the default menu without having to open the menu.
    • Show Thumbnails displays the Thumbnail menu immediately without showing the top menu. (This function can only be tested in the simulator and on the end device, and does not work in the iBooks and KF8 formats.)
    • Turn On/Off Narrator switches the narrator on/off.
    • Turn On/Off Word-Highlighting switches word highlighting on/off.
    • Turn On/Off Sounds switches the background noises in the scene on/off.
    • Show/Hide Audio Recorder opens/closes the audio recorder (this function can only be tested in the simulator and on the end device, and does not work in the iBooks and KF8 formats).
    • Show/Hide Hints switches the flashing hints in the scene on/off.
    • Show Languages displays the selected language without showing the top menu. Only functional in multilingual projects. (This function can only be tested in the simulator and on the end device, and does not work in the iBooks and KF8 formats.)
    • Open Doodle Game directly opens the doodle game that has been added to the project via the Publishing dialogue (this function can only be tested in the simulator and on the end device, and does not work in the iBooks and KF8 formats). You can find more information on creating and adding games under Working with TigerCreate 2.0/Creating and adding games.
    • Open Memory Game directly opens the memory game that has been added to the project via the Publishing dialogue (this function can only be tested in the simulator and on the end device, and does not work in the iBooks and KF8 formats). You can find more information on creating and adding games under Working with TigerCreate 2.0/Creating and adding games.
    • Open Puzzle Game directly opens the puzzle game that has been added to the project via the Publishing dialogue (this function can only be tested in the simulator and on the end device, and does not work in the iBooks and KF8 formats). You can find more information on creating and adding games under Working with TigerCreate 2.0/Creating and adding games.
    • Browser Fullscreen On opens the web player in a fullscreen window. This function is only available for web browser exports.
    • Browser Fullscreen Off closes the web player when it’s running in a fullscreen window. This function is only available for web browser exports.
    • Browser Stop Player stops the currently opened scene and reloads the whole web player, so that the user can start again from the beginning. This function is only available for web browser exports and can be tested in the Simulator.

– – – – –

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:

 

The top section contains the usual setting options for font, size, colour, style (bold, italic, etc.), line height and alignment.

  • Automatic Font Scaling allows you to ensure that text in text boxes is scaled automatically when the exported project 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 under TigerCreate 2 → Preferences -> Text. (See Interface/Preferences for more details.)
  • The Add Block Delimiter button allows you to split a word into several segments and format each of these segments differently. Normally, each whole word is counted as a block and formatting is applied to the whole block. However, the block delimiter can be helpful if you want to make the first letter of the word bigger than the rest of it, for example. Simply place it between the first letter and the rest of the word, and you will be able to use separate formats for the two different parts of the word (using the properties under Text Properties and Block Offset (see below).In order to remove a block delimiter after it has been inserted, delete it from the word as you would an additional letter (using the Delete or Backspace key).
  • The Wrap Delimiter function helps you to define how words are broken up at the end of a line. If you have placed block delimiters at the corresponding points in the text, words will be split and broken up based on the positions of your block delimiters when the text box is shrunk.As such, block delimiters must first be set in order for the Wrap Delimiter option to work.If the “Wrap Delimiter” option is not activated, words will be kept whole and moved to the next line rather than being broken up.You can find more information on Block Delimiters above.

    _________

    Caution: If necessary, you may need to add hyphens by hand. The Wrap Delimiter does not automatically add hyphens, as it is also used to split individual characters in situations where hyphens are not used, e.g. in Asian languages.

    _________

  • Block Offset allows you to move the selected section of text both horizontally (first field) and vertically (second field). Check the Impacts Following checkbox to ensure that the offsets are transferred from word to word (of the highlighted text)
  • The settings in the Scrollbar section 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 refer to the default text box formatting. This is usually set in TigerCreate 2 → Preferences → Text, 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 Interface/Preferences/Text). By pressing the Save As Defaults button, you can save the current formatting of your text box as the default, thus overwriting the text settings in the preferences. Likewise, if you have changed the formatting of the current text box, you can press the Load Defaults button to restore the default settings. This means that you only need to save your formatting once, and it will be automatically applied to text in other scenes.

You can find more detailed information on working with text boxes in the Working with Text chapter.

 

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.
  • 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 – this allows you to set how close you want the actual text box to be to the side (first field) and top (second field) edges of the text blade.

 

You can find more detailed information on working with text blades in the Working with Text chapter.

 

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 when the scene starts. Of course, start animations can also be stopped/paused/restarted/etc. by using touches. 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 (framed + symbol and the adjacent framed 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:

 

  • Tags: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 TigerCreate/Animations). In order to make it easier for you to work with several animations at once, pinned animations can be bundled together in a Tag Group.

    In this area of the Animations Inspector, you can define a new tag group by clicking on the + icon (left) and then, in the pop-up window that appears, clicking configure tags to open the tags menu. You can also find this menu under Project Settings.

    To create a new tag just click the + icon on the bottom left. After creating a tag give it a name by double-clicking on the tag itself and confirming it with the enter key. You can remove tags with the button that is located next to the + button. You can save your changes by pressing save or discard them by pressing cancel. In both cases the window is closed.

After creating your tags open the small pop-up menu in the tags section again. Your new tags should show up in a list. Choose the one you need and add it to your animation. This animation will then always be played together with the group’s other animations in Editor mode.

   

If you want to remove a tag from an animation just press the – symbol in the tags section.

Caution: Tags created in the Project Settings can be used in the whole project not just per scene. So if you want to create a tag that is only used in one particular scene it is sensible to give it a clear name that you can easily attribute to the correct scene (e.g. S03_Jump_Animation).

 

  • 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 FramesHow many frames do you want the animation to run for? The lower the frame rate, the less refined your changes will look.
  • Loop Time (sec) and Time Steps: How many seconds do you want the animation to run for when it is played one full time? We can also enter the Time Steps value Under “Loop Time”. This value is required for the delay steps. The time steps are calculated by dividing the loop time by the number of frames.

__________

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

When the padlock is unlocked, you can adjust the two properties independently of one another. For example, if you increase or reduce the Number of Frames, the Loop Time will remain unchanged. This means that the total time the animation runs for will remain the same, but if you have created an animation in one of the previous frames, this will now run faster or slower.

Caution: The Number of Frames can only be reduced if there is no key frame on the last key. As such, if you want to reduce your number of frames, you first need to move your key frames accordingly in order to make your change.

Example 01: Imagine you want to animate an object that moves from left to right, such as a ball.

The animation you create has 30 frames and takes one second. You then decide to increase the number of frames to 60 while keeping the loop time to one second.

If you play the animation after making this change, the animation of the ball will run faster, as the animation still takes place in the first 30 frames. As a result, the movement is now completed within half a second. The last 30 frames are still played as well, of course, but since the animation ends at frame 30, it is followed by 30 frames of empty animation where nothing happens.

Of course, you could use these new frames to continue the animation, e.g. by making the ball jump or roll back in the opposite direction.

However, if you adjust your 30-frame animation to the new 60 frames and place the last key frame at 60 again, the animation will play at the same speed as it did before, when you were using one second and 30 frames.

Example 02: You want your ball animation to run faster, but you don’t want to add any additional animation to the end of it. In this case, you will need to leave your number of frames as it is and only alter the Loop Time.

When the padlock is locked, the two properties are linked. This means that if you adjust one value, the other will be altered accordingly.  For example, if you double the number of frames, the Loop Time will also be doubled.

Example: Imagine you have an animation that you want to link to a sound file, but the sound file is longer than the animation.

As soon as the animation is played, the end of the sound is cut off, as the sound ends at the same time as the animation. However, you want to play the entire sound without altering the speed of the animation.

In this case, you need to link the Loop Time and Number of Frames values by clicking the padlock symbol to lock it.

Next, enter the full duration of your sound file under Loop Time. TigerCreate will then automatically add the extra frames you need at the end of the timeline.

However, since the animation still ends on the same frame and has not been moved, it still has the same speed as before.

The additional “empty” frames at the end now allow the sound to be played in its entirety without being cut off prematurely.

__________

 

  • Delay (time steps): Do you want the animation to start straight away (0), or only after a brief pause (in time steps)? You can calculate the exact duration of a time step by dividing the loop time by the number of frames. TigerCreate automatically displays this value under Loop Time.As soon as you set a delay for an animation, another option appears under Delay: Start from Default.

When you set a delay for an animation, the values of the current animation are not altered until the delay has elapsed and the animation reaches the first key frame you have set. If you activate this option, the animation will be reset to its default transformation values at the start of the delay phase.

Example:

Say a butterfly has a default transformation value of x=100 for its position. Animation (A) has no set delay, and moves the butterfly from position x=100 to x=150. Animation (B) has a total delay of 5 seconds, and the first position key sets the butterfly to x=200.

Once animation (A) has been started, the butterfly’s position is x=150.

If you then start animation (B), the following events will occur:

  1. If Start from Default is not checked: The position of the butterfly will not change during the delay for animation (B). The butterfly will remain in position x=150. Once the 5-second delay has elapsed and the first position key has been reached, the position will eventually change to x=200.
  1. If Start from Default is checked: During the delay for animation (B), the position of the butterfly is reset to its default transformation value position of x=100. Once the 5-second delay has elapsed and the first set position key has been reached, the position will then change to x=200.

__________

  • Loops: How often do you want your animation to be repeated?
  • Ping Pong: Do you want your animation to be played backwards again when 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.
  • 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 expandable 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 repetitions, 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 is marked as Is Touchable. This means that you need to activate Is Touchable for the object in question in the Object Inspector and link the corresponding animation in Touch Properties/Animations.

If a Delay 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, click and hold 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. If you have not set Is Touchable under Free Drag, TigerCreate will display a warning.

 

 

  • 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 Is Scratchable active – 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 soon as the object has been completely erased, it will stay gone; any animations on it will not be restarted or continue playing.

 

 

__________

Caution:

In order to use Is Scratchable, an animation must be set as a Start animation (see above) and as Is Touchable. To do this, you must again set the Delay to 0 before selecting Is Scratchable. If you have not set Is Touchable to active TigerCreate will display a warning above Is Scratchable.

You can also start scratch animations by clicking on them; in such cases, no start animation is required. For this to work you have to add the required animation under Touch Properties/Animations to the scatchable object.

__________

 

  • Animation Sounds: This is another way of linking an animation to a sound; the first is by linking a sound to a clickable object. However, while an animation can, in theory, be started via several touches– 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 in Touch Properties/Animations.

 

 

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 framed + icon 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.

Sounds are only played in their entirety if the loop time is at least as long as the linked sound file. If the animation is shorter than the linked sound file, the sound file will be cut off prematurely.

__________

 

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 Colour: 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.
  • How the background image is displayed. TigerCreate offers two different Zoom Modes for displaying the background image. In Scale mode, the entire background image area (2048 x 1536 for landscape, 1536 x 2048 for portrait) is filled. This mode ignores the aspect ratio of the graphic you add. As such, the background image may end up being squashed in this mode if the size of the graphic does not match that of the stage.In Cover mode, the background image is still enlarged to fill the entire background image area, but the original aspect ratio of the graphic is also taken into account. The parts of the image that extend beyond the visible area are then cut off and not displayed in Preview mode or during the final export. A red frame in the Background Image window is used to indicate the visible area.

    Cover mode is especially useful if you are planning to support devices that do not have a 16:9 aspect ratio, such as the iPhone X or the Samsung S8. (In order to do this, you must activate the “Support Super Wide Displays” option in the Project Settings.)

* 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 Screenshot button to create a screenshot of the scene in its current condition.
  • If you need a screenshot of a specific point in an animation, you will need to switch to Preview mode. Create Screenshot always creates a screenshot of the first key frame, even if you move the slider to a different point on the timeline.In Preview mode, let your scene run up to the point you need a screenshot of. Then, pause the scene at this point and use the Make Screenshot button on the top left to take the screenshot you need.

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 action 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.

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.

An animation is a visible change to an asset that takes place on the timeline.

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 101 frames (frame rate: 25 frames/second).

 

 

___________

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

When the padlock is unlocked, you can adjust the two properties independently of one another. For example, if you increase or reduce the Number of Frames, the Loop Time will remain unchanged. This means that the total time the animation runs for will remain the same, but if you have created an animation in one of the previous frames, this will now run faster or slower. 

Caution: The Number of Frames can only be reduced if there is no key frame on the last key. As such, if you want to reduce your number of frames, you first need to move your key frames accordingly in order to make your change.

 

Example 01: Imagine you want to animate an object that moves from left to right, such as a ball.

The animation you create has 30 frames and takes one second. You then decide to increase the number of frames to 60 while keeping the loop time to one second.

If you play the animation after making this change, the animation of the ball will run faster, as the animation still takes place in the first 30 frames. As a result, the movement is now completed within half a second. The last 30 frames are still played as well, of course, but since the animation ends at frame 30, it is followed by 30 frames of empty animation where nothing happens.

Of course, you could use these new frames to continue the animation, e.g. by making the ball jump or roll back in the opposite direction.

 However, if you adjust your 30-frame animation to the new 60 frames and place the last key frame at 60 again, the animation will play at the same speed as it did before, when you were using one second and 30 frames.

 

Example 02: You want your ball animation to run faster, but you don’t want to add any additional animation to the end of it. In this case, you will need to leave your number of frames as it is and only alter the Loop Time.

 When the padlock is locked, the two properties are linked. This means that if you adjust one value, the other will be altered accordingly.  For example, if you double the number of frames, the Loop Time will also be doubled.

 

Example: Imagine you have an animation that want to link to a sound file, but the sound file is longer than the animation.

As soon as the animation is played, the end of the sound is cut off, as the sound ends at the same time as the animation. However, you want to play the entire sound without altering the speed of the animation.

In this case, you need to link the Loop Time and Number of Frames values by clicking the padlock symbol to lock it.

Next, enter the full duration of your sound file under Loop Time. TigerCreate will then automatically add the extra frames you need at the end of the timeline.

However, since the animation still ends on the same frame and has not been moved, it still has the same speed as before.

The additional “empty” frames at the end now allow the sound to be played in its entirety without being cut off prematurely.

___________

 

  • 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 0 (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 0 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. If there is no animation or change of state between two key frames, the background between the frames in question will appear grey. As soon as a change takes place between the two key frames, the area between them will turn turquoise.

 

 

  • 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 125 time steps in the Delay box further down the screen; this corresponds to a total of 5 seconds. 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 application.

 

 

  • If you do not want the animation to start automatically at all, you will need a trigger element, which must be marked as Is touchable. You can check this option under Generic Properties in the Object Inspector. Before you do so, however, it is important to note that there are three ways of making an animation start with a Click:
  1. a) Mark the object itself as Is Touchable. When the user clicks on the touchable object, the animation which 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) Assign Is Touchable to 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.
  3. c) Experience has demonstrated that it is good practice not to link touches 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 application. (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 41 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 0 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.

 

 

  • Check the Is Touchable checkbox under Generic Properties in the Object Inspector. 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 animation-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 81 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 0 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 141 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 0, 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 (the so-called default position).Every object has a default position; this is where it will be located when it is not selected/marked and none of its animations are pinned. In addition to this, every animation has a starting position. This is not necessarily identical to the default 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, 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 curves 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 Is Touchable  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: In order to use Is Scratchable, an animation must be set as a Start animation and as Is Touchable under Generic Properties. If the Scratch Animation has been assigned an animation under Touch Properties/Animations, it does not need to be marked as a start animation.

__________ 

 

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 squares 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 squares 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.

__________

 

  • Tags

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 tags. 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 Tag 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.
  • Next, click on the + symbol next to the Tags field, further down in the Animations Inspector. A new expandable list will appear that shows all existing tags.

 

 

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 Tags 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 Tag Actions. If we select our ‘Cat-Walk’ tag, all the animations associated with it will be pinned and listed one after the other.

 

 

  • Use the same method to create another Tag for all the jumping animations. Name this tag ‘Cat-Jump’. Once you have done this one click in the Animator is all you need to switch the Tag 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 – Tags section in the Animation Properties Inspector

5 – The + icon opens a menu in the Animations Inspector; used to assign an animation to a Tag group or to open the Configure Tags menu

6 – Tag Actions drop-down menu in the Animator; used to activate and deactivate tagged groups. Extra tip: the Unpin All Animations with Tags and Unpin All Animations functions make it easy for you to deactivate all the active 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 tag 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 tag 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 tag group.

This is displayed as follows in the Tag 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 tag 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. Tag 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 always 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.

_______

Caution: If you turn an object that already has an animation into a parent, the parent’s transformation values will be applied to the child object. Since the parent object may have two different transformation values (its original (default) transformation values, which apply as long as there is no active animation, and the transformation values of the animation), you will need to decide which of these values are applied to the new child object. The easiest way of doing this is to hold down the alt key while nesting the objects. This will open a small selection window that allows you to choose one of the available options. If you do not hold down the alt key during nesting, TigerCreate will use the default transformation values of the parent object unless an animation assigned to the parent is pinned. In such cases, the animation’s transformation values will be applied to the child object.

As a rule, we always recommend that you carry out all your nesting and create all your parent-child hierarchies before animating your objects. Nesting objects that have already been animated often leads to unexpected – and usually unwanted – side-effects.

_______

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’ tag 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 tag 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.

 

  • ‘Tagging’ 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 tag 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 tag 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 Tag 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 the state Is Touchable (e.g. ‘Start’) to the node in the Object Inspector as usual, then link all the required animations from the nested object to this touchable object. 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 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 project. 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:

 

 

 

The top section contains the usual setting options for font, size, colour, style (bold, italic), line height and alignment.

  • The Auto 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).

  • The Add Block Delimiter button allows you to split a word into several segments and format each of these segments differently. Normally, each whole word is counted as a block and formatting is applied to the whole block. However, the block delimiter can be helpful if you want to make the first letter of the word bigger than the rest of it, for example. Simply place it between the first letter and the rest of the word, and you will be able to use separate formats for the two different parts of the word (using the properties under Text Properties and Block Offset (see below). In order to remove a block delimiter after it has been inserted, delete it from the word as you would an additional letter (using the Delete or Backspace key).
  • The Wrap Delimiter function helps you to define how words are broken up at the end of a line. If you have placed block delimiters at the corresponding points in the text, words will be split and broken up based on the positions of your block delimiters when the text box is shrunk.

    As such, block delimiters must first be set in order for the Wrap Delimiter option to work. If the “Wrap Delimiter” option is not activated, words will be kept whole and moved to the next line rather than being broken up.

    You can find more information on Block Delimiters above.

_________

Caution: If necessary, you may need to add hyphens by hand. The Wrap Delimiter does not automatically add hyphens, as it is also used to split individual characters in situations where hyphens are not used, e.g. in Asian languages.

_________

  • Block Offset allows you to move the selected section of text both horizontally (first field) and vertically (second field). Check the Impacts Following checkbox to ensure that the offsets are transferred from word to word (of the highlighted text).
  • The settings in the Scrollbar section 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 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%).
  • 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).

 

     

 

Text blades cannot be animated. However, the Animations Inpsector can be used to add an animation (Text Blade Audio) that contains a linked speech sound and word highlighting data, which can be imported if necessary. (For more detail, 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.
  • 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 (either using the Volume slider or by entering a number in the field below it).

 

 

_________

Caution: As soon as an audio sound has been added to a text box, it is no longer possible to adjust the Loop Time and Number of Frames values. Instead, these values are automatically hidden, as they are defined by the sound that has been added. For text blades, these options are disabled right from the start, as text blades can only contain pure sound animations.

_________

 

  • As soon as you assign an audio file to the animation of a text box, an additional line marked Speech is added below the animation in the timeline (text blades only have the Speech line). This also shows the speech file in the form of a curve, which can help you to make out the individual words of the speech. Start Record mode by pressing the round, blue button on the left of the timeline. The button will turn red.
  • Create your first key image (key) in frame 0. The word that is highlighted at this point is displayed below the key.  Next, move the Slider (the red vertical line) in the timeline to the right until it leaves frame 0. You will see that the first word in the text is now highlighted. You can modify the colour itself using the Highlight Color option in the Animations Inspector.

 

 

  • 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 Next Speech function allows you to link another text box that also contains an animation with a speech sound (with or without word highlighting). This will be played automatically as soon as the first text box comes to an end. This allows you to play text that is split across multiple text boxes in the correct sequence, together with the associated speech sounds and word highlighting.

Caution: Start animations cannot be used for sound animations that are linked using Next Speech!

 

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 (Import Highlight Data) 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.

 

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 and text blades 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 and text blades 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 project, 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 project 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.

However, if you have saved your formatting in the German version as the default, for example, this formatting will also be applied to your other languages.

*You can view the default formatting under ProjecTigerCreate 2 → Preferences → Text. This defines how text boxes and text blades are formatted by default.

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.

In order to improve performance and save memory usage on the end device, you should also consider using mono sounds rather than stereo ones.

TigerCreate will automatically mark the affected files with a warning notice.

 

_____

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 the squares on the right and the arrow symbol in the squares 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 Audio 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 Audio 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. The object that starts the sound must also be marked as Is Touchable. This means that you do not need to link a separate animation to it in order for the sound to start when it is clicked.

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

Adding Videos

Working with video files in TigerCreate

As well as images and sound files, you can also add video files to TigerCreate scenes. You can add these files to your project folder in the same way as image and sound files.

Simply select the video files you want to use in the Finder and drag them onto the Project Navigator in TigerCreate. It doesn’t matter what folder you drag the video files onto – TigerCreate will recognise them as video files and automatically create a new folder to save them in, entitled “Movies”.

Note: Video files must be in .mp4 format and have H.264 encoding in order for TigerCreate to be able to process them. The maximum size for video files is 2048 x 2048 or, in iBooks projects, 2048 x 1940 for landscape and 1940 x 2048 for portrait. If a file is the wrong size or is not encoded correctly, TigerCreate will display a corresponding error message in the Project Navigator.

 

 

You can use video files in almost exactly the same way as image files, with a few exceptions.

Things to remember when working with videos 

  • Videos cannot be added as start animations; they must always be triggered by a click. In order for this to work, the video must be assigned an animation in the Animation Inspector that is triggered by another asset, such as a node, using the “Is Touchable” function.

For this reason, videos do not autoplay when you start a scene in Preview mode or the Quick Test. They must always be triggered by a click.

  • The length of a video animation’s timeline is automatically adjusted to match the length of the video itself. As such, it is not possible to adjust the Loop Time or Number of Frames for a video.
  • Only the Position, Rotation, Scale and Opacity can be animated for videos in the timeline.
  • The Ping Pong, Drag Along, Free Drag and Is Scratchable options cannot be used for video animations.
  • Since video files usually come with built-in sound, it is likewise impossible to assign an Animation Sound to them. As such, Volume Key animations are also impossible. Instead, video files have a Movie Volume option, which can be used to control the volume for the entire video.
  • At the moment, only one video is permitted per scene. TigerCreate will display a warning if you attempt to add more than one video to a single scene.

 

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 project, 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 orange. 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 Is Touchable set to active. This means that you need to activate Has Is Touchable 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 with the 2D-object-manipulation-tool, 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. In addition, there is now a large yellow circle that allows the object to rotate around several axes at the same time and always rotates the selected object from the camera’s point of view. The rotation takes place around the axis that is perpendicular to the camera view at the time of manipulation.

In addition, there are now two more small squares at the center of the object for moving the object, in addition to the yellow square already known from the 2D-object-manipulation-tool, which allows simultaneous moving along the x and y axes. The purple square is now available for moving along the x and z axes, and the turquoise square for moving along the y and z axes.

For scaling the object along a certain axis, the blue square is now also available for scaling along the z-axis. Note that all your assets are of course still 2D objects that do not have a third dimension and can therefore not be scaled visibly along the z-axis. However, z scaling is important as soon as the object is a parent (or one that is to become a parent). Because a child object „inherits“ (i.e. takes over) the properties of its parent. If the parent object is scaled, the scaling factor for z must always be the same as the scaling factor for the x- and y-axis. If this is not the case, there can be unexpected and unwanted distortions in the child-objects, especially if they are rotated.

Otherwise, the functionalities are the same as for the 2D manipulation tool.

 

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. However, TigerCreate will remember the settings for the 3D scene, so you will not need to adjust them all again if you reactivate the 3D option later on. This means that you can switch between 2D and 3D mode without any problems.

  • 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 media 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 project. You can also set AR mode to be active as soon as a scene loads, or create a touches 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, a photo, or a postcard. 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 project using the Quick Test and test builds that can be exported via the Publish dialogue. Only for the final project export 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 projects

TigerCreate supports multilingual projects. 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. The language-specific identifier can be found in an info text in Project Settings, under the language you have added.

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 project that is formatted to Helvetica, 64 points, justified right and light green, the same text box in the other language versions of your project 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 in the menu bar under TigerCreate/Preferences/Text. 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 exported project, in the form of national flags.

*In order to use correct endings for the different languages, we refer mainly (with few variations) to ISO 639 standard two-letter codes.

  • 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
  • Croatian 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

TigerCreate also offers you the possibility of adding up to five so called Custom Languages.

  • Custom Language 1 C1
  • Custom Language 2 C2
  • Custom Language 3 C3
  • Custom Language 4 C4
  • Custom Language 5 C5

 

These allow you to add unsupported languages or regional dialects for example. There is just one more thing to consider when adding Custom Languages. You will need to add a flag icon in the Project Settings/Options when using a custom language. The image needs a size of 160 x 160 pixels and the format .png with transparency. You can either drag and drop an image from finder or right click on the field and use the Select File… option.

TigerCreate will show you a warning message if a flag icon is still missing.

 

 

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 touchable object 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.

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 Screenshot button to create a screenshot of the scene in its current condition.
  • If you need a screenshot of a specific point in an animation, you will need to switch to Preview mode. Create Screenshot always creates a screenshot of the first key frame, even if you move the slider to a different point on the timeline. In Preview mode, let your scene run up to the point you need a screenshot of. Then, pause the scene at this point and use the Make Screenshot button on the top left to take the screenshot you need.

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

With TigerCreate, you can add games to your project 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 project, thus interrupting the currently opened scene, and internal games that can be launched and played within a scene, without actually exiting it.

__________

Tip: Instead of using the main menu, stand-alone games can also be triggered by clicking on a button. For more information on this, see Object Inspector/UI Actions.

__________

 

Stand-alone games

The external game options are made up of three standard games, which can be selected in the Publishing dialogue: a puzzle or MOVIEPUZZLE, a memo game and a doodle – a picture with defined outlines that the user can colour in.

__________

Tip: If you want to add more than one puzzle or MOVIEPUZZLE or a scene or your project, you can do this using the Start Puzzle function under Touch Properties in the Object Inspector. This allows you to add as many puzzles as you want to your project and scene. However, the game will interrupt the current scene, just like puzzles that are started via the menu. The section below describes the traditional method of adding puzzles via the Publishing dialogue. You can find more information about adding puzzles via Start Puzzle under Object Inspector/Touch Properties/Start Puzzle.

__________

No matter what type of game you choose, it is helpful to use elements from the project itself in order to ensure consistency.

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 (Memo or Doodle in the Games folder). For the Puzzle game, you can simply save PNG files (Video files for MOVIEPUZZLES) with the correct dimensions and naming conventions in the Puzzle sub-folder (for more information about puzzles/MOVIEPUZZLES see below). TigerCreate will take care of everything else.

When you publish your project, 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 can contain either a static image (in png format, without transparency) or a video (MOVIEPUZZLE), and is always generated in three difficulty levels: EASY, MEDIUM and HARD. 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 or video will be displayed in the centre of the screen. The user can exit the game at any time.

 

_________

Caution: As mentioned above, you can create a puzzle using either an image file or a video file (see below for more information on “MOVIEPUZZLES”). Image puzzles are included in the Indie version of TigerCreate, but a paid TigerCreate subscription is required in order to create MOVIEPUZZLES.

_________

To create a puzzle, open the Games tab in the Publish dialogue and select Puzzle under First Game Type, for example. You can then add the files you need for the puzzle.

First, you will need a pattern for your puzzle. This can take the form of either a .png image file (without transparency) or, for a MOVIEPUZZLE, an .mp4 video file (H264-encoded). To add the file, click the Medium (default) field. This will open a file browser where you can select the file you want to use (the file must be in the project folder already).

As soon as a file has been set for Medium, two further fields will appear for the Easy (optional) and Hard (optional) difficulty levels. If you want to use different patterns for each difficulty level, you can now add them for Easy and Hard. By default, the pattern set for Medium will be used for all difficulty levels if no other files are added.

The recommended dimensions for the image/video are 1280 x 720 pixels for landscape format and 720 x 1280 pixels for portrait.

You can also use images or videos with larger or smaller dimensions as long as the aspect ratio is between 16:9 and 4:3 (for landscape) or 9:16 and 3:4 (for portrait).

 

However, you should always take into consideration the memory of the various devices on which you want your project to run; large image or video files can cause problems, especially on older devices. As such, we recommend testing the finished puzzles on the different end devices you want them to run on.

You will also need two sound files (in .mp3 format with a constant bit rate) for the Click Sound and the Finish Sound. The first sound will play when a piece locks into place; the second sound will be played when the user completes the puzzle. The sound files must be saved in the Sounds folder for your project in order for you to select them.

The Fade Lines on Finished option defines whether the lines between the individual jigsaw pieces are hidden once the puzzle is complete.

 

  • MOVIEPUZZLE

MOVIEPUZZLES are our latest technological development. They allow you to split H264-encoded mp4 videos in into jigsaw pieces and add them to your own TigerCreate project. This innovative technology is only available to users with a paid TigerCreate subscription.

MOVIEPUZZLES are created in the same way as normal puzzles, but they require an .mp4 video file with H264 encoding to be saved in the project folder.

To create a puzzle, open the Games tab in the Publish dialogue and select Puzzle under First Game Type, for example. You can then add the files you need for the puzzle.

 

To add the required video file, click the Medium (default) field. This will open a file browser where you can select the file you want to use.

As soon as a file has been set for Medium, two further fields will appear for the Easy (optional) and Hard (optional) difficulty levels. If you want to use different videos for each difficulty level, you can now add them for Easy and Hard. By default, the pattern set for Medium will be used for all difficulty levels if no other files are added.

The recommended dimensions for MOVIEPUZZLES videos are 1280 x 720 pixels for landscape format and 720 x 1280 pixels for portrait.

You can also use images or videos with larger or smaller dimensions as long as the aspect ratio is between 16:9 and 4:3 (for landscape) or 9:16 and 3:4 (for portrait).

However, you should always take into consideration the memory of the various devices on which you want your project to run; large video files can cause problems, especially on older devices. As such, we recommend testing the finished puzzles on the different end devices you want them to run on.

 

Note: The maximum permissible size for video files in TigerCreate is 2048 x 2048. However, this does not apply to the iBooks format, which allows 2048 x 1940 for landscape and 1940 x 2048 for portrait.

You will also need two sound files (in .mp3 format with a constant bit rate) for the Click Sound and the Finish Sound. The first sound will play when a piece locks into place; the second sound will be played when the user completes the puzzle.

The sounds must be saved in the Sounds folder for your project. They can then be dragged and dropped into the corresponding field.

The Fade Lines on Finished option defines whether the lines between the individual jigsaw pieces are hidden once the puzzle is complete.

 

We have created several MOVIEPUZZLES apps for you to download from the Mac App Store and the Google Play Store: “Landscapes”, “Under the sea” and “Wild animals”.

 

  • 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 1600 x 900 pixels (landscape)/900 x 1600 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 touchable object. 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 template.

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 Is Touchable to the corresponding node (in the Object Inspector).

 

 

The Touch Properties area 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 Mini-Game function under Miscellaneous. Is Touchable must be activated for the node in order for this to work.

 

 

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 template. As such, in this variant of the game, the user compares an actual image – which is enhanced by the camera’s AR function – to a ‘faulty’ image with 5 marked differences inside the application.

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). This option is activated by default.

 

 

For the next stage of testing, you can use Quick Test to test the current scene, or the Publish function to export one or more scenes. In addition to performing the final export, the latter option can also be used to test the project or parts thereof on various end devices or in the TigerSimulator, which is part of 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 final applications, 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.

One of the options available to you during the export procedure is Generate Publish Overview. If you activate this option, the Publish Info window will also open after the export. 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 (for more detailed information on this, see “Other options”, below).

_______

Please keep in mind: If you export AR scenes via the Publish function, Vuforia will charge licence fees. You must then purchase a licence from Vuforia for each title that you export via „Publish“ and that contains AR scenes. (This does not apply to Quick Test, only for the final export using the „Publish“ button.) More information about licences and fees can be found on the vuforia.com website.

_______

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 TigerBooks 2.0 file for TigerBooks app.

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
  • Web browser

 

If you select TigerBooks 2.0 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 in the TigerBooks app.

The size of your final exported projects 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 for example.

 

 

The Publish dialogue

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

Click the Publish button to test the whole project or individual scenes. The dialogue window shown below will appear, initially comprising two to six tabs depending on which export format you have selected. The AR Scenes tab is only displayed if the project has AR scenes. The first tab allows you to select which scenes you want to publish, the second the AR scenes you want to publish. In the third tab, you can adjust the options for the selected format, while the fourth allows you to add games. The fifth allows you to adjust the menu options. The sixth tab, Rate App in Store, is only available when you are exporting Google, Apple or Amazon apps and also have a TigerCreate 2 subscription. You can also enlarge this window to view long scene names better.

 

 

_______

Caution: The iBooks and Kindle KF8 formats do not support games or menu options. As such, the Games and Menu Options tabs are not displayed for these formats. The Rate App in Store function is only supported by the Apple App Store Application, Google Play Store Application and Amazon App Store Application export formats. As such, this tab is only displayed for these formats. Furthermore, the Rate App in Store function is only available to users with a paid TigerCreate subscription.

_______

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 Options tab (see below for more information). A round, red warning (notification) on this tab indicates the number of errors that need to be resolved in the export options before you can start an export. In the tab to the right of this, select the games you want to add (see below). In the penultimate tab, you can adjust the menu options. The tab on the far right allows you to define whether you want a pop-up prompting users to rate your app in the App Store to appear in your final app.

4 – The Remember and Project to Last Opened Scene option is selected by default. It allows you to return directly to the last open scene in the exported application 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. This tab also offers an overview of the total number of animations in each scene, as well as whether each scene is in 2D or 3D.

6 – AR Scenes tab: This offers the same options as the Scenes tab, but for AR scenes. Likewise, this tab is only shown in the Export dialogue if AR scenes have been created for the project. You can use the checkboxes to select whether you want the scenes in question to start in AR mode straight away, and whether you want the AR button to be shown in the menu. You must also save the licence key provided by Vuforia here in order to be able to export your project. If you just want to test your project, you will only need the free licence key with the watermark. However, a paid licence is required for final publishing.

 

7 – Scene Warnings are displayed under the corresponding scene, indicated by orange text and a yellow triangle with an exclamation mark in it. Scene warnings will not prevent you from carrying out the export, but they should be resolved before final publishing. Clicking on the triangle will open a window containing more detail on the warnings. Most of these will be messages that certain graphics are not divisible by four. In such cases, TigerCreate will show you the next closest size that is divisible by four.

 

8 – Like scene warnings, Scene Errors are shown under the scenes to which they refer. However, they are indicated by red text instead of orange. Scene errors will prevent you from exporting, and must thus be resolved immediately. Clicking on the error symbol will open a window listing the errors in more detail. If you have resolved all the errors but TigerCreate is still reporting some of them, it can help to save the scene in question and then re-open it.

 

9 – Mark Compress Images to save as much space as possible. This will compress all the images in your scene. However, you will need to check whether all the scenes actually look right once you have exported them. For example, if certain colours are not displayed correctly after compression, it is a good idea to deactivate the Compress Images option for the affected scenes.

10 – The Next button will take you to the next step in the Publish dialogue. Before you press it, work through the Options, Games, Menu Options and Rate App in Store tabs (where applicable).

 

Options

The options available to you will vary depending on which export format you choose. For more information, please refer to the respective export formats further below.

 

Games 

 You can use the Games tab to integrate up to three of the standard games (Puzzle, Memo and Doodle) in your project. 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 export formats web browser, iBooks and Kindle KF8 formats do not support these games, so the Games tab is not displayed for these formats.

_______

 

 

Menu options

 Here, you can define which menu icons are displayed in your final export.

_______

Caution: This function is not supported by the Kindle KF8 and iBooks export formats. As such, the Menu Options tab is not displayed for these formats.

________

 

 

Rate App in Store

If you have a paid TigerCreate 2 subscription, you can set up pop-ups to enable users to rate your app. If you do this, your users will receive an in-app pop-up asking them if they want to rate your app in the store.

All the text used in rating pop-ups can be localised.

First, use the “Language” drop-down menu in the top section of the tab to set the language in which you want to write the text for your app rating pop-up window. The text must be entered separately for each language you want to export.

In the fields below, enter the text for the window heading (“Title”), the main body of text (“Message”) and the labels for the “Rate now”, “Rate later” and “Don’t ask again” buttons (“Rate Button Title”, “Postpone Button Title”, “Reject Button Title”). If you do not enter any text for “Reject Button Title”, this button will not be displayed.

 

The following settings are available in the bottom section of the tab:

The URL is the link to your own app in the store in question (in our example, we have used the Google Play Store). N.B.: Until the app has been published for the first time, you will need to create the link manually (as the app will not yet be live). The links are composed according to the following structures:

Apple App Store: https://itunes.apple.com/app/id + App ID, e.g. 1284865328

Google Play Store: http://play.google.com/store/apps/details?id= + package name, e.g. com.mywebsite.myapp

Amazon App Store: amzn://apps/android?p= + package name, e.g. com.mywebsite.myapp

 

The Allowed Scene(s) list defines the scenes in which the pop-up is allowed to appear.

Delay After Install defines how many seconds of app runtime must expire before the pop-up appears for the first time. Postpone Cooldown defines the minimum real time that must expire before the next time the app appears. A few special rules apply for Apple apps; you can view these by clicking on the Help (?) icon in the menu.

In the apps themselves, your pop-ups will look something like this, depending on which operating system version the user is running:

Example of a rating pop-up on Android devices.

 

Example of a rating pop-up on iOS devices.

_______

Caution: The Rate App in Store function is only supported by the Apple App Store Application, Google Play Store Application and Amazon App Store Application export formats. As such, the Rate App in Store tab is only displayed for these formats.

_______

Fixed 4:3 Aspect Ratio

The purpose of the Use Fixed 4:3 Aspect Ratio option is to force the application to be displayed in 4:3 aspect ratio, regardless which aspect ratio the targeted devices actually have. Black bars will then be inserted at the sides to fit the devices‘ native format e.g. 16:10 or 16:9. This is especially useful for projects where too much of the scene would get cut off by the safety region on certain devices.

To activate the Use Fixed 4:3 Aspect Ratio option navigate to the Options tab for the chosen format and click the checkbox next to it.

_______

Caution: This option is not available for iBooks (default size is always 4:3) and Kindle KF8 exports.

_______

Back To Top

Exporting for TigerBooks 2.0

The TigerBooks 2.0 format is an export format for use in the TigerBooks app. Here you can add a different cover and brief description to your e-book for each language.

For the option Use Fixed 4:3 Aspect Ratio please refer to the Testing and Publishing chapter above.

A warning message will appear if all the required details have not been provided.

 

Back To Top

Exporting for Apple iBooks

For the iBooks (Books under iOS Mojave) 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.

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), page name (add the word for “page” for each supported language), cover, a brief description and a message to be shown while the book is loading (Wait Message).

For the option Use Fixed 4:3 Aspect Ratio please refer to the Testing and Publishing chapter further above.

 

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

OSX 10.9.x must be installed on your computer as a minimum requirement for the iBooks format, as this is the only system that can open iBooks files.

 

Back To Top

Exporting as an iOS app

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

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. The whole process is very complex, neither TigerCreate nor the TigerCreate support can offer help in this matter.

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.

 

For more information on exporting iOS apps with TigerCreate, you can also watch the detailed export video tutorials on our website.

 

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! You have to set the app name for every language that your application supports. You can switch between languages with the Active Language drop down menu. For multilingual titles the Active Language also defines in which language your application will start if no language that is identical with a device’s system language is found.

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”.

Bundle Identifier is the “App ID”, e.g. “com.mycompany.my-app-name”, or “com.mycompany.*” in situations that use a wildcard bundle identifier.  Incidentally, TigerCreate automatically sets the bundle identifier as soon as you have set the correct Provisioning Profile for your project.

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 Appstore Marketing Icon (1024 x 1024 pixels) an Icon (180 x 180 pixels) and a Loading Screen (2048 x 1536 pixels). The rounded corners of the app icon are generated automatically during the export process, and do not need to be incorporated into the icon graphic.

If you have a paid TigerCreate 2 subscription (i.e. if you are not working with the free Indie version), you can insert a Custom Splash Screen. This will be shown on the device immediately after the user taps on the app icon, then replaced after a short time with the Loading Screen.

The Custom Splash Screen is the ideal location for a logo. It must be 2048×2048 pixels in size, and will be cropped differently depending on the orientation of the app (landscape or portrait) and the aspect ratio of the device. As such, you should take care to ensure that your logo is centred, and that it is not too large.

In landscape format on a 16:9 device, for example, the Custom Splash Screen will be cropped to a final size of 2048×1152 pixels from both the top and the bottom of the screen.

The TigerCreate splash screen is used by default. If you want to change the splash screen, right-click on the preview graphic and select the “Select file…” option. You can also drag and drop the graphic you want to use into the splash screen area. If you want to remove your own splash screen and restore the default setting (TigerCreate splash screen), right-click on the preview graphic and select the “Delete” option.

If you do not have your own splash screen, or you have added a separate loading screen, a graphic bearing the TigerCreate logo will appear when the app is opened instead.

If you do not add a small app icon (180 x 180 pixels) TigerCreate will automatically use the marketing icon for the export.

The app requires access to the device’s microphone in order for the audio recorder function to work. The first time the audio recorder is launched, the user will be asked whether they want to allow the app to use the microphone.

You can alter the text shown in this dialogue for every language during the export process under Microphone Usage Description. If you do not do this, the German text for the “audio recorder” function will be used for all languages.

The export process also allows you to define whether you want your app to support swiping between pages. To activate this option, simply check the Allow Swiping box.

For the option Use Fixed 4:3 Aspect Ratio please refer to the Testing and Publishing chapter further above.

_______

Important note: If you experience problems or even failure of iOS exports after performing an Xcode update, open the Xcode program itself and accept the terms and conditions of use.

_______

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.

For more information on exporting Android apps with TigerCreate, you can also watch the detailed export video tutorials on our website.

For exporting Android apps with TigerCreate you need at least the Java 8 JDK. If you do not yet have it installed on your Mac please open TigerCreate/Preferences and the tab Publishing.

There you find a download link for the Java 8 JDK under the Android section point “1.”. In addition to that you also need the current version of the “Android SDK” or “Android Studio” respectively. You can find a download to the Android SDK under TigerCreate/Preferences/Publishing in the Android section under “2.”.

There is also the possibility to set a path under “3.” to the location of the Android SDK on your computer. If you install “Android Studio” with the default setting the file path is as follows: Users/*USERNAME*/Library/Android/sdk (inside the folder you have to open “tools” and select the “android”- file for the path to get accepted by TigerCreate.).

 

Once you have done this, enter the path for the SDK folder itself under “4.”. This will usually be as follows:

User/*USERNAME*/Library/Android/sdk (in this case, you will need to select the folder yourself).

After you finished all your preparations listed above add all required information in the Google Play Store Application Options mask in the publish dialogue of TigerCreate.

 

 

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! You have to set the app name for every language that your application supports. You can switch between languages with the Active Language drop down menu. For multilingual titles the Active Language also defines in which language your application will start if no language that is identical with a device’s system language is found.

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.myapp”.

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.

 

If you have a paid TigerCreate 2 subscription (i.e. if you are not working with the free Indie version), you can insert a Custom Splash Screen. This will be shown on the device immediately after the user taps on the app icon, then replaced after a short time with the Loading Screen.

The Custom Splash Screen is the ideal location for a logo. It must be 2048×2048 pixels in size, and will be cropped differently depending on the orientation of the app (landscape or portrait) and the aspect ratio of the device. As such, you should take care to ensure that your logo is centred, and that it is not too large.

In landscape format on a 16:9 device, for example, the Custom Splash Screen will be cropped to a final size of 2048×1152 pixels from both the top and the bottom of the screen.

The TigerCreate splash screen is used by default. If you want to change the splash screen, right-click on the preview graphic and select the “Select file…” option. You can also drag and drop the graphic you want to use into the splash screen area. If you want to remove your own splash screen and restore the default setting (TigerCreate splash screen), right-click on the preview graphic and select the “Delete” option.

 

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. If you do not have your own splash screen, or you have added a separate loading screen, a graphic bearing the TigerCreate logo will appear when the app is opened instead.

Drag and drop or right-click in the Icon field to add a 192 x192 pixel icon for the app. The Android export supports PNG graphics with transparency as icons. For example, if you want your Android app icon to have rounded corners, you will need to add them to the icon graphic – they will not be generated automatically during the export.

 

The export process also allows you to define whether you want your app to support swiping between pages. To activate this option, simply check the Allow Swiping box.

 

For the option Use Fixed 4:3 Aspect Ratio please refer to the Testing and Publishing chapter further above.

You can also export all Android and Amazon app exports directly to a connected device. To do this, simply select the target device from the drop-down menu under Launch Options, then click Next. In order to ensure that the export to a device connected to the computer is completed successfully, the device must be unlocked and not in standby mode.

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.

 

 

You can also export all Android and Amazon app exports directly to a connected device. To do this, simply select the target device from the drop-down menu under Launch Options, then click Next. In order to ensure that the export to a device connected to the computer is completed successfully, the device must be unlocked and not in standby mode.

 

Back To Top

Exporting in Amazon Kindle format KF 8

For the Kindle KF8 format you need a special Export Tool, the so-called “Amazon KindleGen Tool”. You can find a download link to the Amazon KindleGen Tool in the TigerCreate Preferences (menu TigerCreate/Preferences) under the tab Publishing under “1.” in the Kindle subsection. Under “2.” you can set the path for the required “kindlegen” file inside the downloaded folder.

If you downloaded the “Amazon KindleGen Tool” with the default settings the KindleGen folder containing the “kindlegen” file will be located in your Downloads folder. If necessary move the folder to a location of your choice and then enter the path to the “kindlegen” file in its current location.

 

 

_________

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

Exporting for Webbrowser

A total of three tabs are displayed for web exports. As in all other export procedures, the Scenes tab allows you to select which scenes you want to export.

There is also a Menu Options tab, which allows you to define which menu icons are displayed in your final export and a tab for Web export specific options.

 

With a TigerCreate subscription you have the option to add a custom Play Button that is shown before the content is played. This needs to be a 24-bit .png file with transparency and the dimensions 256 x 256 pixels.

 

The option for Show Default Fullscreen Button determines if a button for switching to fullscreen mode is shown in your export. You can turn it on or off with the checkbox.

 

The Default Stop Player Button will only show in the scene when the web player is implemented via an iFrame. If you don’t wish for the button to show up you can uncheck the box next to Show Default Stop Player Button.

This button is especially useful if you plan to integrate more than one webplayer at the same time on a webpage.

If you wish you can disable the Play Button or Preload Overlay, but you should only uncheck this checkbox if you are really sure that your scene does not include sounds that are supposed to start automatically. You can get more information about disabling this button when pressing the question mark button directly next to the checkbox.

 

For the option Use Fixed 4:3 Aspect Ratio please refer to the Testing and Publishing chapter further above.

_________

Caution: The web export does not support the audio recorder function. As such, there is no icon to display this function in the menu.

The web export does not currently offer support for games. As such, this tab is not displayed here.

The web export does not support the AR function.

_________

Once the export has been completed, you will find a Readme file (a .txt file, available in both German and English) in your export folder. This contains detailed information on how to use your web export.

 

 

The Readme file provides information on offline testing, hosting, and the various methods you can use to embed the web player in a website. It also tells you which browsers it supports and provides solutions for common problems.

If you want to read the Readme file before performing the export, you can download it as a PDF (last update: January 2018) here: English | Deutsch

Back To Top

Launch and other options

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.

 

Other options 

Generate Publish Overview helps you to assess how much memory your project 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