Add special items in InDesign

The Special Items are plugins that you can include in InDesign to bring the interactivity of your App to the next level.

These items allow you to add features that would not be possible only with InDesign.

Índice

  1. How to add a Special Item
  2. WebZip
  3. Gallery
  4. Panorama 3D
  5. Touch Image Sequence
  6. Animated Image
  7. Puzzle
  8. Canvas

How to add a Special Item

First of all, make sure you create a container in the InDesign document with the size you need. Once created, name it from the Layers tab.

To add an special item, you must first have the InDesign content added to the App.

  1. Once the content has been added, unfold it from the tree on the left. A tab called “Special Items” will appear.
  2. Right click on the tab and select “Add Special Item”.
  3. Select the Special Item you want to add and the configuration will be opened.
  4. WebZip

    The special item WebZip allows you to add HTML code to your InDesign content.

    Once you have it added you will see several options:

    Container

    Here you have to select the container you created earlier in InDesign.

    WebZip

    In this option you select the .zip file that contains the HTML code.

    Things to keep in mind:

    • The zip file must contain an index.html file.
    • The zip should have the files in the root, so the hierarchy should look like this: file.zip/index.html.
    • The WebZip can contain CSS, Javascript, Jquery, HTML5 and any language that does not depend on a server.

    Preload (iOS)

    This allows the webzip to load when the user open a page before or after the page containing the special item.

    It is not recommended to activate this option if the webzip contains animations since they will begin to reproduce prematurely.

    Enable transparency

    It activates the transparency in the container of the extra element. If the html code contains some transparent element, it will also be transparent in the App.

    Gallery

    With the special item gallery, an image will be displayed and by swiping your finger on it you will switch to the next image.

    Once you have added it in your App, you will see several options:

    Container

    Here you have to select the container you created earlier in InDesign.

    Images

    In this part you have to select all the images that you want to add to the special item.

    The images must meet several points:

    • All images must have the same dimensions or proportional dimensions between them.
    • The size of the images must be equal to or proportional to the size of the InDesign container.
    • Images must be in JPG or PNG format.

    Panorama 3D

    With this special item you can create a 3D Panorama that the user can explore by sliding the finger.

    If you want to add a panorama to your App, you will need 6 images forming a cube. These can be obtained from 3D cameras.

    To better understand what a 3D panorama is, I invite you to watch this little video:

    Once you have the extra element added, you will see several options:

    Container

    Here you have to select the container you created earlier in InDesign.

    Images

    Here you have to select the 6 images. Each will be one side of the cube including the top and bottom.

    Touch Image Sequence

    With this special item you can add an image that changes when you slide your finger on it. This way you can make “manual” animations.

    You will need an image of each frame of the animation, all images must be in the same size and format.

    Once you have the extra element added, you will see several options:

    Container

    Here you have to select the container you created earlier in InDesign.

    Loop

    Activate this option if you want the animation to play infinitely.

    Direction

    Choose which direction you can slide your finger on.

    Images

    Here you will have to add the frames of the animation. They will have to be in order for them to look correctly in the App.

    Animated Image

    The special item “Animated Image” is an animation that consists of several images. It is an Extra element similar to the sequence of images but it runs automatically.

    You will need an image of each frame of the animation, all images must be in the same size and format.

    Once you have the extra element added, you will see several options:

    Container

    Here you have to select the container you created earlier in InDesign.

    Step

    Specifies how long the entire animation will last. The less time you put in, the faster you will go.

    Loop

    Activate this option if you want the animation to play infinitely.

    Images

    Here you will have to add the frames of the animation. They will have to be in order for them to look correctly in the App.

    Puzzle

    The extra Puzzle element allows you to easily create a sliding puzzle game.

    You can customize the puzzle with the image you want and choose the number of pieces.

    Once you have the extra element added, you will see several options:

    Container

    Here you have to select the container you created earlier in InDesign.

    Image

    Here you have to add the image that will be divided into the different pieces of the puzzle.

    Number of pieces

    Choose the number of pieces in which the image will be divided.

    Canvas

    The special item “Whiteboard” is a space on the InDesign page in which we can draw as on a canvas. In addition, we will be able to change the thickness and color of the stroke.

    Once you have the extra element added, you will see several options:

    Container

    Here you have to select the container you created earlier in InDesign.

    Show Toolbar

    It shows a bar at the top where the user can change the color and size of the stroke.

    Default stroke width

    It is the size in which the user will draw unless he change it from the top bar.

    Default stroke clour

    The color in which the user will draw unless he changes it.

Ir al Foro