Get answers to your questions here.
Use the search option of your browser (i.e. cmd+F) to find keywords.
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.
We have made a wide range of improvements for creating and managing animations:
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:
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.
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:
*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.
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.
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).
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).
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.
There are two ways of moving the ball:
– – – –
* 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.
– – – –
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.
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.
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.
Generally speaking, the TigerCreate program interface can be divided into the following areas:
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.
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.
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.
View provides options for adjusting the display in TigerCreate 2, together with control options for animations and 3D mode.
You can find more detailed information on the Record mode, pinning groups and animations here: Working with TC/Working with animations
Create lists the options for creating Nodes, Bezier curves, Text and Text Blades.
Project lists the same options as the TigerCreate toolbar.
Window shows control options for all the active TigerCreate windows.
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.
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:
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.
Text allows you to adjust the universal settings for how text is displayed.
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 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:
*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.
There are various buttons above the workspace that affect the view of the current scene.
These are described briefly below, from left to right:
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).
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:
You can choose from the following types of game:
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.
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:
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
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:
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:
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.
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:
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 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.
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 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:
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:
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 Mode option allows you to define how a selected animation is played:
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:
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.
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.
_________
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.
_________
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.
– – – – –
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.
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.
_________
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 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:
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:
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).
__________
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.
__________
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:
__________
__________
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.
__________
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.
__________
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.
__________
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:
__________
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:
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:
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:
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.
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.
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:
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.
___________
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.
___________
Start animations – Dependent animations
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.
Working with nodes as buttons
There are many benefits to using nodes as buttons for animations.
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.
*Further Mode options for Touch Properties are described in the Object Inspector/Touch Properties section.
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:
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.
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.
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 😉 ).
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.
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.
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.
_________________
_________________
You will notice that we still need to make two aesthetic improvements:
Special animations
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.
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.
_____
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.
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.
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.
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.
__________
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.
__________
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:
__________
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.
__________
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:
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.
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:
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.
Nested objects are easy to create:
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:
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.
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.
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.
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:
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.
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.
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.
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.
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.
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).
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.
_________
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:
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:
_________
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.
_________
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.
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.
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:
* 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
(Note: animations will only be shown here if an object with animations assigned to it is selected on the stage.)
(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.)
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:
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 …
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.
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
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.
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.
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).
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:
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.
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.
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 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.
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:
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.
_______
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
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.
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 Position, Angle and Scale:
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.
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
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:
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:
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.
TigerCreate also offers you the possibility of adding up to five so called Custom Languages.
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 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 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.
_______
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):
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.
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.
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.
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”.
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.
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.
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.
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:
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:
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.
–––––
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 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.
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:
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.
_______
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.
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.
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.
_______
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:
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.
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.
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.
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
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.