Getting started with Managana - ciclope.com.br systems like Windows, Linux, MacOS, Android and iOS. It works with immediate update online via a graphical editor and through the integration

  • Upload

  • View

  • Download

Embed Size (px)

Citation preview

Getting started with Managana

creating for web and mobile devices

Written and compiled by Lucas Junqueira and Marilia Bergamo

4th Edition: August 2013 (Managana 1.6.0)

With information from



Including material written by

Álvaro Andrade Garcia

This work is licensed under the Creative Commons

Attibution-Noncommercial-Share Alike 3.0 License

To view a copy of this license, visit:


Or send a letter to:

Creative Commons

171 Second Street, Suite 300

San Francisco, California, 94105, USA


1 INTRODUCTION.................................................................................41.1 About Managana......................................................................................41.2 Why use Managana..................................................................................41.3 Environment...........................................................................................5

2 INSTALLATION...................................................................................82.1 Installing Managana.................................................................................82.2 Creating a database for Managana.............................................................92.3 Managana configuration..........................................................................102.4 Installing Managana on your local web server............................................132.5 The Managana launcher..........................................................................13

3 MANAGANA INTERFACE...................................................................153.1 Web viewer...........................................................................................153.2 App viewer............................................................................................183.3 Editor...................................................................................................18

4 STARTING YOUR FIRST MANAGANA COMMUNITY............................224.1 Configuring the community general information.........................................224.2 Who has whom?....................................................................................234.3 Upload image files..................................................................................244.4 Creating the portrait home stream............................................................254.5 Adding a banner to portrait home stream..................................................264.6 Adding texts to portrait home stream content............................................344.7 Organizing your playlists and publishing your stream..................................38

5 AUXILIARY STREAMS.......................................................................405.1 Portfolio stream.....................................................................................405.2 Interview stream....................................................................................42

6 SETTING COMMUNITY NAVIGATION................................................476.1 Home navigation....................................................................................476.2 Portfolio navigation................................................................................486.3 Interview Navigation..............................................................................50

7 CREATING LANDSCAPE HOME STREAM............................................52

8 CREATING AUXILIARY LANSDCAPE STREAMS..................................578.1 Setting interview to landscape.................................................................578.2 Setting portfolio to landscape..................................................................588.3 Setting aspect ratio................................................................................59

9 CONFIGURING YOUR VIEWER..........................................................61

10 GENERATING AN APPLICATION.....................................................6410.1 The Managana App Wizard.....................................................................6410.2 Creating an application..........................................................................66

APPENDIX I........................................................................................72


1.1 About Managana

Managana is a free cross-platform software for digital publication based on

imagination as interface. Created by the Ciclope Atelier, it allows the creation

and maintenance of communities that share interactive content on the web,

tablets, smartphones and exhibits. Each community has interactive streams

composed of clusters of audiovisual, graphics, text and external feeds.

Managana mixes and sequences playlists that can be created, displayed, and

animated at the software itself.

Managana is made for the era of cloud computing, mobile devices and the

panopticon: the Internet 3. The software, 100% free, published under the

LGPL license version 3 of the Free Software Foundation, mixes and sequences

media streams and their interaction with the main digital world platforms. It

evolved from the software called Imagination Site, made by Ciclope Atelier,

developed since 2002, having gone through five versions. The 6.0 software

version was entirely re-written using free tools and baptized as Managana.

With roots in Sanskrit, the name Managana, composed of mana and gana, and

present in the anthem of India, means “peoples minds”. The first verse of the

anthem “Jana Gana Mana adhināyaka” is officially translated into English as:

“Thou art the ruler of the minds of all people”.

You can check a small presentation video about Managana features at the

software site: http://www.managana.org/versions/

1.2 Why use Managana

Managana will help you to develop any kind of audiovisual content for cross-

platform environments without any knowledge on programming. In spite of

this, Managana is not only for non-programmers. If you know a little of

programming you also can make use of the scripts available for the software or

implement your own. A note for hard programmers: Managana is also an open-

source software that you can modify under the LGPL version 3 to develop tools

for your own customers.

Contents generated by Managana run on projections, televisions, computer

monitors, notebooks, tablets and smartphones, in various conditions and

operating systems like Windows, Linux, MacOS, Android and iOS.

It works with immediate update online via a graphical editor and through the

integration of Twitter, Facebook, WordPress and RSS feeds. Managana not only

imports content from places as also shares information on G+, Facebook and

Twitter. Interactions with mouse, touchscreen, remote controls using tablets

and smartphones, joysticks, Microsoft Kinect and various sensors are in its


Managana allows editing online via web. The content editing module allows

dynamic editing, in draft, pending, and published. Access and modification

management through administrators, editors, authors and communities is also

implemented. Easy to translate, made in an open format and file structure, it

allows third parties to include new features.

1.3 Environment

Managana is not a stand-alone software to install on your desktop computer, it

depends on a web server, which is a computer application which helps to

deliver content that can be accessed through the Internet. A web server

application can be both set on your personal computer (called a local web

server) or made available to you by a web provider. We will see more about it

at the chapter about installation.

Now you need to know how Managana works. It features two basic major

environments: the editor and the viewer. Respectively, the editor is where you

will create the content, while the viewer is where your users will interact with

it. While the editor needs to be executed from a web server, the viewer can

also be used as stand-alone applications for desktop and mobile devices.

Managana editor will interact with a web server application to generate DIS

folders (Digital Imagination Sets) which represents a community. A community

is then a group of files such as xml, jpeg, mp4, mp3 and so on that is

understood by Managana very much like “projects” at other creation softwares.

As said before, you don't need to understand those file formats, the only thing

you need to know is that, as a group, they form a Managana community, which

can be edited and viewed by Managana.

A Managana community is intended to be open by Managana viewer. Also, the

DIS format is open so developers may also provide alternative software

implementations to load it.

A Managana community can also be transformed into mobile applications. In

order to do só, Ciclope developed the stand-alone software Managana App

Creator. You can add a DIS folder (a Managana community) to the software to

generate the app. There are two ways to navigate communities as applications.

The first option is to create a stand alone app, with only one community

transformed into an application. The second is to create the app as a viewer for

your communities hosted on a web server.

The generated apps can be submitted to Apple AppStore, Google Play and

many other app stores.


This chapter will show you the process for installing Managana and setting it

up. Managana is available in easily-downloadable format from its website at

http://www.managana.org/downloads. This Getting Started document was

written using version 1.5.0. Please check on Managana website for later


There are two ways to install Managana: using a web server provider

(Internet) or creating a local web server on your personal computer (check

section 2.4 for details about it). We also provide an easy-to use windows-only

“launcher” package with everything set and ready to run, even from flash


Besides the server requirements, you'll need the Adobe Flash Player

(https://www.adobe.com/go/EN_US-H-GET-FLASH) installed at your system

for the editor. Managana require at least the version 11.1 of the player. For

Linux users, the best choice is to use the Chormium web browser.

P.S. If you need to run the viewer on older Flash player versions,

like the ones found on some SmartTVs, Managana 1.4.0 can be a

choice since it runs on Flash player version 10.1.

The Managana web player runs using a dual approach: it first looks for the

Adobe Flash Player (version 11.1 or higher) and uses it if found. On systems

that do not support the Flash Player, like mobile devices, Managana tries to use

the HTML5 canvas for rendering. Some Managana features are not available for

the HTML5 version. Check the “Getting started with Managana: creating for

HTML5” document for more information.

2.1 Installing Managana

To install Managana on a web server you need to have an account on some

third part provider (for Internet services) or install a local web server. Many

third web providers differ from country to country. Therefore the most

important thing is that it should allow you to create web applications with PHP

and a MySQL database.

P.S. If you are using a Windows computer you may want to check

out the Managana “launcher” package since it doesn't require any

installation. Go to section 2.5 to learn about it.

First you will need to upload files to your web server provider or copy them to

your local host. Download Managana-#-#-#.zip file and decompress its

content. Then upload the “managana” folder (or its content) to the www or

htdocs folder of your web server provider.

P.S. To install Managana you need to have previous knowledge

about how to create an empty database using phpmyadmin or

any other tool made available to you by your provider.

2.2 Creating a database for Managana

Create an empty database. For this document we have created a database

named “managana” using the phpMyAdmin tool, but your service provider may

have different ways to accomplish this. At phpMyAdmin, the best choice for the

database collation is utf8_general_ci.

P.S. Managana is best installed on a dedicated database, but you

may also install it on a shared one. If you do so, make sure no

other tables on the database have names starting with “dis”.

2.3 Managana configuration

After you have created a database, access the link:

http://yourwebserver/managana/install.php1. Managana will open a form to

ask you all the necessary information to install the software. If you are used to

web content management systems installations, like WordPress or Joomla, the

Managana install won't bring any news to you.

1. Fill out the fist page with the following information:

1 This link depend upon your managana install location. You must run the install.php script you just copied to your web server.

P.S. Your web server provider will provide you the information

about the database server address, user and password. Use the

name of the database you just created.

2. Click the “check database information” to continue. If the data you provided

is correct, you'll see the following form. If it is not, the installation will warn

you and you'll be prompted to enter the information again.

P.S. Provide the url of the folder you are installing Managana.

Also, the installation will need your name, e-mail and an

administrator password.

3. Click the “install Managana” button and you'll be presented all the

information you provided for review.

4. If everything is ok, click the “complete Managana installation” button to

finish the process and see the confirmation screen:

Take note of the editor and the reader URLs. You'll use them to create and

access your content.

2.4 Installing Managana on your local web server

Before installing Managana, please check the minimum requirements. You

must have a local web server that allows you to create web applications with

PHP and a MySQL database. Apache is the server of choice for most people,

but its installation and configuration may confuse initial users. On such cases,

we can suggest a list of easy-to-setup, all-inone softwares that will create a

compatible environment with Apache, PHP and MySQL:

OS recommended all-in-one packages

Linux XAMP - http://www.apachefriends.org/en/xampp.html

Windows WAMP - http://www.wampserver.com/en/XAMP - http://www.apachefriends.org/en/xampp.html

MacOS MAMP - http://www.mamp.info/en/index.htmlXAMP - http://www.apachefriends.org/en/xampp.html

Once you have installed the package at your computer, you will have a valid

local web server. Usually you access it using http://localhost/ - check your

package help information for further details. Also, the common setups set the

database server at localhost using root as the user and no password.

Remember that some of these local web servers do not automatically start

when you login into your system.

In order to install Managana at a local web server, look for the www or htdocs

folder of your package. Copy the managana folder into it as you would do for

an Internet web service (uploading).

2.5 The Managana launcher

If you are using a Windows system computer, you may find easier to use our

“launcher” package since no installation or server setup is required. Download

it from the www.managana.org site and unpack it to your computer – you can

use it even from a flash drive. Once copied, look for the “Managana.exe” file

and run it. After a quick automatic setup you'll see the following window:

First, click on the “start XAMPP” button (number 1). It will open a script

window that you must keep open (you can minimize it). Then, click on the

“start Managana editor” button (number 2) to open the editor on your browser.

After you finish using Managana, click on the “stop XAMPP” button (3) and it

will close everything needed.

If you need to access your community files, just click the “open communities

DIS folders” to access them.

While using the launcher version, the initial login is automatic. If you ever need

the user info, here it goes:

user mail: [email protected]

password: password


3.1 Web viewer

The web viewer interface (at the reader access url), is where you readers will

see your content. It has a menu bar with two icons: the Managana symbol on

the right and a timer on the left.

The right timer shows the current stream time and, if set, the total stream

time as well. This timer also acts as a play/pause button.

The left button shows the Managana logo by default and is used to show some

other playback options.

P.S. At the viewer configuration window (found on Managana

editor) you can select your own, custom icon to replace the

default one – prefer a 120×120 pixels transparent PNG file. You

can also set the viewer background color.

Click the Managana logo to access the player menu.

The upper bar buttons are, in order:

1. home: return to the current community home stream

2. full screen: show Managana in full screen (keyboard interactions are not

possible while on full screen mode)

3. sound: mute/unmute Managana

4. plus: show advanced viewer options

When the plus button is clicked, you'll see the advanced options menu:

At the advanced options menu you'll find:

share current stream on Facebook (if allowed by content creator)

share current stream on Twitter (if allowed by content creator)

share current stream on Google+ (if allowed by content creator)

search content (if allowed by content creator)

show/hide clock button

show/hide zoom buttons

show/hide notes and bookmarks button

show/hide voting options on streams

show/hide comments button

show/hide ratings button

show/hide logged user name close to logo button

allow/disallow remote control interactions

The advanced options window also displays a login button. Your users will be

able to rate or comment your content as long as they are logged in. They can

only log in if you create users for them with the editor interface, or by OpenID.

P.S. OpenID won't work on local web server and “launcher”


P.S.2 The HTML5 player version does not provide all these


3.2 App viewer

Managana provides the “AppWizard”, a tool to create mobile and desktop

applications from your creations. These apps use an interface very similar to

the web viewer, however there is one noticeable difference: instead of the full

screen button on the upper bar (apps always run on full screen) you'll find the

content manager button:

From the content manager you'll be able to check all available content

(communities) and access them directly. You'll also be able to get further

information from them and even download their files for offline access.

P.S. Content creators can choose the communities to show and

allow offline access at the content manager. They can even

choose not to use the manager at all.

3.3 Editor

The Editor interface is where you will create your content. Its interface is not

too simple, but if you have any experience creating different types of media

content, you will find some similarities on the editor interface.

At the moment you start Managana editor, a loading page will be displayed for

you. It can be either very fast or very slow depending on your web server


When editor is loaded, you will have access to the editor interface, start

logging in to be able to create communities or edit a pre-existing one.

1. Put your email and password to access the interface (the very same ones

you registered on installation).

2. Click “login” to access the interface.

3. The interface is ready to be accessed.

P.S. If you have been responsible for installing Managana, your

user is probably a “super” user. It means that your are able to

create other users with different levels of access to edit

information. You may now have realized one of the most powerful

things about Managana: it creates digital content for many

traditional web environments and mobile operational systems,

but it is not only you who can do it. An entire community of

people also can and that´s why the projects of Managana are

called “communities”.

P.S.2 If you are using the “launcher” version of Managana, this

initial login is automatic. If you ever need the initial user

information, here it is – email: [email protected]; password:



In this chapter we will learn how to create a Managana community, but first

download the files you will need to complete this task at

http://www.managana.org/files/gettingStartedFiles.zip. Once you have

downloaded the file, unzip it whenever you want on your desktop computer.

As a tutorial we will create a community to run on mobile devices. This little

community is based on some online content found over the Internet about

fashion illustration.

4.1 Configuring the community general information

Your first task is to configure your community general information. Please open

Managana Editor Interface, login as super user (the user you create over the

installation), then follow the next steps:

1. On the top menu, access Community → New...

2. Fill the information as shown in the figure below and click “create”.

P.S. A note about the resolution: because Managana was created

to adapt the content to various resolutions, its default size is

1280×720 pixels, but if your project requires other sizes you can

change it as you wish. Just remember that small resolutions may

look very strange on big screens. The final result usually looks

better across different devices if it follows the 16×9 proportion.

P.S.2 At Managana you can set two different resolutions, one for

landscape and one for portrait modes. While accessing your

content on web browsers, users will always see the landscape

version of your creations. While on mobile devices, you can set

different content for each proportion, as we'll see further at this

document. If you want to create just a single version of your

content, even for tablets and cell phones, leave both portrait and

landscape resolutions the same at the community properties


4.2 Who has whom?

Before you continue creating your first community you should try to

understand Managana organization logic. Those are simple definitions:

1. A community is the general content you will create.

2. A stream is like an animated page you put your content on.

3. A playlist is a group of files (elements of media like images, videos, audio

and texts) that you organize according to your wish. The most common

analogy to it is actually a separated library of files.

4. An instance is an element of a playlist inside a stream.

5. So, to sum it all up:

• communities have playlists → playlists have elements of media (like

images, videos, audio and texts);

• communities have streams → streams have instances.

4.3 Upload image files

You can upload images to Managana communities any time you want during

the creative processes, but here we will do it all at once.

1. Access the Community → File manager... menu.

P.S. The file manager is a new feature of the Managana 1.5.0

version. Until version 1.4.0 you had to upload one image at a


2. The File Manager window will show up. It shows all media files available to

you (personal files) and to everyone in the community (community files).

P.S. Based on information from your web server (local or over the

Internet), Managana determines the maximum file size you are

allowed to upload. To change this limit you will need to contact

your web server service provider or check your local server


3. Select “community files”, and then “pictures”.

4. Find where you unzip the images downloaded from

http://www.managana.org/files/gettingStartedFiles.zip and upload all files. The

file manager allows you to upload all of them at once.

5. Close the window after the upload is completed.

4.4 Creating the portrait home stream

We are creating a content to be seen on mobile devices, so it probably will

need different layouts for landscape and portrait.

1. Change the Managana editor aspect mode:

2. Access the Stream → Save as... menu.

3. Fill in the information as follow:

4. Click “ok and save” to save the home portrait stream.

4.5 Adding a banner to portrait home stream

Now we are going to add the content to this stream. We will create a series of

elements that will be used on the layout.

1. Click the “add picture” button on the tool window.

2. Select the image “home01.png”, fill in the element name as “home1” and

click the “add” button.

P.S. You can provide the element name as in step 2 for

organization purposes. If you do not want to do that, Managana

picks a name based on the file name.

3. All elements on Managana will be placed on the size of 160x90 pixels on the

top of the stream area.

4. Click the icon at the Property window, so the image will receive its

original size.

5. Place it as the following figure.

P.S. Note on the property window that the order of this element

is “0”. Managana use this value to organize the layers of


Before we continue on this tutorial, we will put all the images used on home on

the same playlist. So let´s start defining this playlist.

6. Access the Window → Community playlists menu.

A dialogue window will be shown. It will present information about playlists

within this community, but the first tab will only present the playlists of this

specific stream.

7. Click on the playlist that starts with the name home01.png... and change its

name to “homeBanner” then click the button “update”.

Now we are going to add more images to this playlist, and create an animated

banner for our home.

8. Click on “add picture” button inside of the playlist window.

9. Choose “home02.png” and click “add”, repeat this until you add up to the

“home05.png” picture. You will have something like the image below:

10. Click the “home1” button, it will turn blue. Change the following values

above it to time(s) = 3, and at end = next. This will make the image change to

the next image on the playlist after 3 seconds.

11. Repeat the last action to all home images at the playlist including the last

one. Choosing “next” as an action to the last element on the playlist will make

it go back to the first one.

12. Close the playlists window.

13. Click the “view stream on internal player” button on the tool bar

14. Click the “portrait” button to see your banner working.

P.S. This preview window was created to be mainly used as a

constant validation area. The tool bar also has another preview

button, the “view published stream on web player” - it will open

another browser tab and show you the most recent published

version or your stream (more about published streams further at

this document).

We will now put a decorative image over the banner. This image is previously

transparent, and will be placed over the banner.

15. Click the “add picture” button on the tool bar.

16. Now select “decorative.png”, give it a name, and let it be an image on a

new playlist.

17. When the image is placed on the stream, set it to original size, clicking the

icon at the properties window, as done before.

18. At the properties window, change the alpha value to 40.

19. Click the preview button again to check your work.

20. Now, save your stream. Access the Stream → Save menu.

P.S. It is very important to always save your work on Managana,

as it is a web software, and will, therefore, be constantly

dependent on Internet connection.

4.6 Adding texts to portrait home stream content

Now we will add text to our home stream.

1. First, click the “add artistic text” button at the tool bar.

2. At the “Add artistic text” dialogue window, write: DigitalArts in the larger

space, and digitalArts as element name, then click “add”.

3. Repeat the procedure, creating the following texts: “My_” and “Magazine”.

When finished, you will have three text instances at your stream.

Let´s change the properties of them:

4. Select the “DigitalArts” text and click on the “Text” tab of the properties

window. Select the font face “Crimson”. Then, go back to “Properties” tab and

change the size to width 700 and height 217.

P.S. Managana comes bundled with some nice looking open fonts

that fulfill most users needs. To learn more about these open

fonts, please check the Open Font Library site at


5. Select the “Magazine” text and click on the “Text” tab. Select the font face

“Crimson”, then change its color to “FF9900”. Go back to “Properties” tab and

change the size to width 300 and height 100.

6. Now, select “My_” text and click on the “Text” tab. Select the font face

“Crimson”, then change its color to “999999”. Go back to “Properties” tab and

change the size to width 300 and height 200.

7. Then, change the position of the text clicking and dragging each one until

they get more or less as the above image shows.

8. Save your stream (Stream → Save menu).

Now let's put a different type of text called paragraph text. It is different from

the artistic text because the later won't accept any information about font size,

while the former will.

P.S. Artistic text is meant for distortions: you can set the width

and height at the properties window and the text will fill the area

you set. Paragraph text, however, use the size setting as a

bounding area for its content. You can set the size of the

paragraph text characters by changing the font size at the “Text”

tab of the properties window.

9. Click the “add paragraph text” button at tool bar.

10. Then add a text to the text area. Some Lorem ipsum for convenience:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam

vehicula ac leo ut pharetra. Nunc rhoncus suscipit volutpat. In

hac habitasse platea dictumst. Phasellus sed erat vehicula,

molestie enim ac, hendrerit massa. Curabitur tristique consequat

nulla nec vulputate. Ut eu est lectus. Cras nec nisl vitae purus

pretium suscipit. Mauris vestibulum neque a accumsan sagittis.

Proin faucibus nibh nec lorem gravida dapibus.

11. Click the “add” button.

12. When the instance shows at the stream area, click on the “Text” tab os the

properties window. Select the font face “Crimson”, use 30 as font size, and

change the color to “999999”. Go back to “Properties” tab and change the size

to width 684 and height 300.

13. Place it below the banner.

14. Save your stream.

4.7 Organizing your playlists and publishing your stream

Before we go on with this document, let's stop to organize our playlists and

then publish our home portrait stream. This is important so you will have

coherent names for all your information on the community.

1. Access the Window → Community playlists menu.

P.S. If nothing is presented on the “stream playlists” you have

probably closed Managana and have not opened your home

portrait stream yet. To do so, access the Stream → Open... menu

and select the home portrait you have been working on.

2. You will see that all elements we have placed after the banner have strange

names automatically given by the software. Rename them as you wish.

Now let's publish this stream. Publishing is a very important step. Unpublished

streams won't be shared or seen by visitors of your content. They will also not

be available for linking to other streams in your community. So, once you're

through with it, publish it!

3. Access the Stream Save and Publish→ menu.


Let's create other streams for our first community. The second stream we will

create is a portfolio page that will show all the images created by the artist

whose images were placed on the banner inside our home portrait stream. The

third stream will be a page with the interview made by the journalist we have

mentioned at the home content text.

5.1 Portfolio stream

The portfolio stream will be created with pictures and a kind of navigation

menu. We will not make this navigation menu work yet, but we will place all

the imagery now.

1. Access the Stream → New... menu. If the home portrait stream is still open,

Managana will ask you if you want to overwrite the present stream. MAKE

SURE YOU HAVE SAVED home portrait stream, then click ok.

2. Access the Stream → Save menu, name the stream as “portfolio” and click

“ok and save”.

3. Click the “add picture” button of the tool bar.

4. Click on “photo01.png”, give it an element name, then click “add”.

5. The image will be placed at the top of the stream area. Select it and at the

properties window, set its width to 720 and its height to 1280. Make sure it is

at position X and Y equals to 0, so the image will fill the entire stream area.

6. Access the Window → Community playlists menu.

7. Rename the playlist as “portfolio”.

8. Add other pictures of “photo” to this playlist like you did before to banner

home. At this time, do not set any action to any element. We will do it later

when setting the community navigation.

9. Close this window.

10. Click the “add picture” button again and select “buttonback.png”.

11. When the image is placed at the stream area, click the icon at the

properties window.

12. Repeat adding the pictures “buttoncontent.png”, “buttonhome.png” and

“buttonnext.png”, always clicking the icon to bring the images to their

original sizes.

13. Select the “buttonnext” instance you placed on the stream.

14. Set position x to 433 and position y to 27.

15. Select “buttonhome” instance and set position x to 370 and y to 27.

16. Select “buttoncontent” instance and set position x to 310 and y to 27.

17. Select “buttonback” instance and set position x to 264 and y to 27.

18. Save and publish this stream.

5.2 Interview stream

The interview stream will only have navigation to home and the entire

interview content.

1. Access the Stream → New... menu. If the home portrait or portfolio stream

is still open, Managana will ask you if you want to overwrite the present

stream. MAKE SURE YOU HAVE SAVED home portrait or portfolio stream, then

click ok.

2. Access the Stream → Save... menu and name the stream as “interview”.

This stream will make use of HTML format on the text, so you can add links

and all resources available for HTML.

3. Click the “add paragraph text” button of the tool bar.

4. Select “html text” on the list (not “html code”).

5. Place a text on it. Some Lorem ipsum for convenience:

Ekaterina Koroleva: www.ekaterina-koroleva.de

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis

ante congue, dignissim sem id, porttitor tellus. Aliquam

scelerisque lobortis aliquet. Phasellus vulputate quis neque at

consequat. Pellentesque quis libero libero. Etiam pretium urna

odio, adipiscing tristique nunc rhoncus id. Pellentesque volutpat

velit eget augue pretium, quis hendrerit eros elementum. Sed eu

quam eget arcu elementum congue nec in nisi. Fusce nec ante id

lacus vehicula aliquam. In ac dui quis erat porttitor vulputate.

Phasellus mattis augue vitae ipsum commodo, sed aliquet mi

lacinia. Phasellus magna mi, porttitor nec est eu, varius feugiat

lacus. Pellentesque non lobortis arcu, nec congue libero. Integer

et sem sed ipsum vulputate interdum a hendrerit nibh.

Proin lacinia ultrices vehicula. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus

at semper neque. Sed a ultrices ligula, vel gravida ipsum.

Vestibulum nulla odio, pulvinar et leo et, interdum consectetur

leo. Aliquam vehicula nibh id cursus porta. Sed consectetur

suscipit accumsan. Maecenas velit erat, lacinia id arcu ac,

feugiat rutrum diam. Suspendisse potenti. Sed malesuada, odio ac

luctus fermentum, turpis elit sagittis nulla, nec iaculis lacus

justo ut leo. Aliquam volutpat magna nulla, vel consectetur dolor

facilisis in. Proin varius venenatis turpis eget iaculis. Sed

commodo hendrerit velit, non egestas lectus ultricies ac. Vivamus

eu nisl sed ipsum pellentesque consequat ut non libero. Nam sit

amet fermentum metus.

Sed posuere, sapien sit amet posuere congue, mi nunc malesuada

neque, non auctor arcu tellus ut enim. Curabitur ac erat sapien.

Praesent vel enim dignissim, varius magna et, iaculis tortor.

Curabitur facilisis lorem quis nunc vulputate, vel tincidunt nibh

rutrum. Morbi vitae justo neque. Morbi vitae venenatis nulla.

Donec consectetur eget nisi sodales dignissim. Etiam a risus

blandit, vulputate est id, porta orci. Etiam dolor metus,

venenatis nec risus vitae, blandit convallis arcu. Nulla elementum

aliquam congue. Suspendisse lobortis augue eget elit molestie, id

vulputate dolor sodales. In pretium velit eget felis consectetur,

eget gravida sapien gravida. Suspendisse sit amet aliquet justo,

id tincidunt sem.

Pellentesque in ante ac est tincidunt sodales. Proin ornare odio

massa, quis ultricies nisl euismod eu. In vitae gravida nisi, a

egestas lacus. Etiam a mollis est, nec gravida mauris. Duis

pulvinar convallis tempor. Aliquam accumsan est a diam volutpat

sollicitudin. Sed gravida tellus id lectus interdum, vitae

pharetra tortor condimentum. Vivamus nisl ipsum, eleifend a

laoreet at, lacinia eget quam. Curabitur in felis vitae sapien

feugiat tempus a quis nulla. Sed et metus vitae turpis ornare

luctus non sit amet purus.

Ut sed libero ante. Aliquam quis tempus nisi, in lacinia magna.

Nullam lobortis enim ut adipiscing lacinia. In sagittis tincidunt

orci, sed ornare velit pulvinar vitae. Sed pretium ligula sit amet

turpis dictum rutrum ut sed sapien. Donec quam quam, laoreet nec

nulla a, scelerisque porttitor quam. Nulla in iaculis nisl. Sed

molestie, ligula at scelerisque faucibus, felis eros hendrerit

urna, sit amet varius mi magna non ante. Aliquam facilisis arcu id

sapien porta bibendum.

Mauris iaculis mi nulla, eu vestibulum enim tempus in. Cum sociis

natoque penatibus et magnis dis parturient montes, nascetur

ridiculus mus. Maecenas eros nulla, eleifend cursus laoreet nec,

tempor eget quam. In hac habitasse platea dictumst. Quisque

pharetra enim eget turpis consequat scelerisque id sit amet

lectus. Ut eget mollis nisl, et ultricies mi. Sed eget orci

suscipit, facilisis arcu in, interdum velit. Nullam fermentum

blandit odio, sodales tempor urna tincidunt eu. Sed non pretium

justo, eu bibendum odio.

6. Select all the text and justify the paragraphs.

7. Select the artist website, and fill the right text area with the link:


8. Click “add”.

9. When the paragraph text is placed on the stream, select it.

10. At the “Properties” tab set the width to 700, height to 1000, position x to 8

and position y to 210.

11. Now let's put the home link image. Select “add picture” on tool bar

12. Select “buttonHomeContent.png” and click “add”.

13. Select the image on the stream and then click on the icon at the

properties window.

14. Set the position x to 264 and position y to 27.

15. Save and publish this stream.

P.S. Please organize your playlist names on playlist window of

both streams interview and portfolio, as you did for home stream.


Now it is time to make some interactions. We will start from home portrait


6.1 Home navigation

1. Access the Stream → Open... menu and select the “homePortrait” stream.

2. Select the image banner.

3. At the properties window, select the “Progress code” tab.

4. Select the word “STREAM” at the “Code groups” list.

5. Select the word “load” at the “Action” list.

6. Select the portfolio stream at the “Select the stream to load” list.

7. Click “add”.

8. A list of the actions will appear on the text area, as seen at the picture

below. Leave it as it is.

9. Select the paragraph text on the stream.

10. Again, at the properties window “Progress code” tab, select “STREAM” at

the “Code groups” list, select “load” at the “Action” list and the interview

stream at the “Select the stream to load” list, then click “add”.

11. Save and publish your stream.

6.2 Portfolio navigation

1. Access the Stream → Open... menu and select the portfolio stream.

2. Select the back button on the stream.

3. At the properties window, “Progress code” tab, select “INSTANCE” at the

“Code groups” list, select “photo1” at “Instances” list and “previous” at “Action”

list. Click “add”.

4. Select the next button on the stream.

5. At the properties window, “Progress code” tab, select “INSTANCE” at the

“Code groups” list, select “photo1” at “Instances” list and “next” at “Action”

list. Click “add”.

6. Select the content button on the stream.

7. At the properties window, “Progress code” tab, select “STREAM” at “Code

groups” list, load at “Action” list and select the interview stream at the “Select

the stream to load” list. Click “add”.

8. Select the home button on the stream.

9. At the properties window, “Progress code” tab, select “STREAM” at “Code

groups” list, load at “Action” list and select the home portrait stream at the

“Select the stream to load” list. Click “add”.

10. Save and publish this stream.

6.3 Interview Navigation

1. Access the Stream → Open... menu and select the interview stream.

2. Select the home navigation button on the stream.

3. At the properties window, “Progress code” tab, select “STREAM” at “Code

groups” list, load at “Action” list and select the home portrait stream at the

“Select the stream to load” list. Click “add”.

4. Save and publish this stream.

5. Click on preview window to check your interaction.


One of the interesting things about creating content for tablets is the change

from portrait to landscape screen visualization, which is done when users

change their devices position. But if the application is not ready to show

different layouts for each view, this functionality may be irrelevant.

This chapter introduces you to configuring different layouts to this community

home stream. We are assuming that you have gone through all the previous

chapters and already have your own Getting Started community. If so, open

this community on Managana editor interface.

P.S. You may choose not to have different layouts for portrait and

landscape visualizations. At this case, just set the same size for

both of them at the community properties window. If you do so,

Managana will adjust your entire content to fill the rotated area

without distorting it.

1. Access the Stream → New... menu.

2. Access the Stream → Save menu and save this stream as “homeLandscape”.

3. Press “ok and save”.

4. If your Managana editor interface is showing the stream as portrait, change

its visualization to landscape by clicking on “change edit aspect landscape <->

portrait” at the tool bar.

Now we are going to do something very useful on Managana editor. We will

reuse a previous playlist to create a different stream.

5. Access the Window → Community playlists menu.

6. Select the “Active Playlists” tab.

7. To see the active playlists of the current community, click the “refresh list”

button . If you have previously organized your playlists you will see something

like the following image:

8. Select “homeBanner” on the list and click “add to keyframe”.

9. Repeat this action to all other home elements (“my”, “DigitalArts”,

“magazine”, “decorative” and “homeContentText”).

10. Close the playlists window.

Now, let's configure each intance properties as we did for the portrait home


11. Select the “homeBanner” instance and then click the icon at the

properties window, so the image will receive its original size. Place it on the

conner of the stream.

12. Select the decorative image, place it on the same conner and put its alpha

to 40.

13. Select the “DigitalArts” text and click the “Text” tab. Select the font face

“Crimson”, then go back to “Properties” tab and change the size to width 700

and height 217.

14. Select the “Magazine” text and click the “Text” tab. Select the font face

“Crimson”, then change the color to “FF9900”. Go back to the “Properties” tab

and change the size to width 300 and height 98.

15. Select “My_” text and click the “Text” tab. Select the font face “Crimson”,

then change the color to “999999”. Go back to the “Properties” tab and change

the size to width 300 and height 205.

16. Select the home content text and place it on the left conner with width of

500, height of 300. Click the “Text” tab, select the font face “Crimson”, font

size 26, then change the color to “999999”.

17. Now, change the position of the text clicking and dragging each one until

they get more or less as the following image shows:

18. Select the content text and, at the properties window, go to process code

tab. Select “STREAM” at “Code groups” list, “load” at “Action” list and select

the interview stream at the “Select the stream to load” list. Click “add”.

19. Select the banner image and, at the properties window, go to process code

tab. Select “STREAM” at “Code groups” list, “load” at “Action” list and select

the portfolio stream at the “Select the stream to load” list. Click “add”.

20. Access the Stream → Properties... menu.

21. Select the “Aspect” tab. At the “Landscape aspect stream” list leave “this

stream” selected, at the “Portrait aspect stream” list, click on “homeportrait”.

22. Click “ok and publish” to save and publish your stream.

23. To end this chapter, go back to homeportrait stream: access the Stream →

Open... menu and select homeportrait.

24. Select the Aspect tab at the stream properties and, at the “Landscape

aspect stream” list, select Home Landscape, at the “Portrait aspect stream”

list, click on “this stream”.

25. Save and publish this stream.


Now we have to create landscape versions of the other streams. This time we

will make it simpler. We will make a copy of each auxiliary stream, and only

modify its instances.

8.1 Setting interview to landscape

1. Access the Stream → Open... menu.

2. Open the interview stream.

3. Access the Stream → Save as... menu.

4. Save this stream as interviewLandscape.

5. Change the editor interface aspect ratio to landscape if you haven't done it


6. Select the text content instance and change its width to 1240, height to

600, x position to 22 and y position to 70.

7. Select the home button instance and change its width to 164, height to 99,

x position to 1099 and y position to 0.

8. Save and publish this stream.

8.2 Setting portfolio to landscape

1. Access the Stream → Open... menu.

2. Open the portfolio stream.

3. Access the Stream → Save as... menu.

4. Save this stream as portfolioLandscape.

5. Select the image instance and change its width to 394, height to 720, x

position to 450 and y position to 0.

6. Leave the buttons where they were.

7. Save and publish this stream.

8.3 Setting aspect ratio

1. Open the landscape portrait stream.

2. Open the stream properties window,access the “Aspect” tab and configure

landscape/portrait streams as the image below:

3. Save and publish this stream.

4. Open the landscape portfolio stream.

5. Open the stream properties window, access the “Aspect” tab and configure

landscape/portrait streams as the image below:

6. Save and publish this stream.

You now must open the original, portrait versions of these two streams

(interview and portfolio). After that, check the stream properties and set the

appropriate landscape view for each one at the aspect tab. Remember to save

and publish them after doing any changes.


Now let's finish our community configuring the viewer properties. We will have

to do two basic things. Setting our home stream as home for viewer, and

configuring Getting Started community as the first community that Managana

viewer will open.

1. Access the Community → Properties... menu.

2. Open the “Home stream” tab, select our “Home Portrait” stream and save.

3. Now, access the Configuration → Viewer... menu.

P.S. This menu is only available to super users.

4. At the “Features” tab, look for the “index community” list, select the

“Getting Started” one and click “save”.

5. Managana will warn you that your configuration has been changed. Click


To see your final community, open your reader access url (such as


If your content is intended to be viewed on the web, you're now done. Just

provide the reader URL to your users and they will be able to access your

creation. This, of course, will only work if you installed Managana on a true

web server (not a local server or the “launcher”).

While on the web, only the landscape version of your streams are displayed –

the portrait ones are exclusive for the mobile devices.


Managana content can be packaged into applications for various systems,

including mobile ones: Android, iOS (iPhone/iPad), Windows and OSX (Mac).

This content can be packaged together with you app for offline access or it can

be accessed using a web connection.

When the content is accessed from the web you are even able to update it at

any time. Also, if you allow to, users can download it after the app is installed

using the “content manager” for offline access.

P.S. Some app stores, like the Google Play, limit the application

file size. This size considers only the apk file itself, not content

downloaded after it is installed.

P.S.2 Some cool Managana features like commenting, rating and

sharing will only work for content over the Internet.

To create an application you will need to download the Managana AppWizard, a

Windows-only software. The AppWizard also capable of creating mobile remote

controllers connected to your Managana-based website (an advanced feature

not covered by this document).

Download the Managana AppWizard at Managana website:


10.1 The Managana App Wizard

After you've downloaded it, you have to install it on a Windows computer.

1. Go to the folder you've downloaded the file and double-click it to install.

Managana App Wizard will start the install process, Windows may alert you

that this is not a recognized program, and some antivirus software may also

tell you the same. Ignore it! Also, the AppWizard requires the Adobe AIR

runtime to work. You'll be prompted to download it during the installation if

you haven't already done so.

2. After Managana AppWizard is installed you will see an interface such as the

following image:

Managana needs to access some libraries that are originally designed for

application development environment. Those libraries must be downloaded and

installed on your computer. If you don't have those libraries click on the button

aside to get information and download them.

P.S Go to Appendix I to learn about JDK and AIR installations

3. Set the JDK directory by clicking on the magnifier icon to find the place on

your windows computer directory.

4. Set the adobe AIR SDK directory by clicking on the magnifier icon to find the

place on your windows computer directory.

5. Click on “close and save”.

You will see the Managana App Wizard program interface, as presented on the

image bellow. If you change the JDK or AIR SDK directory in the future just

click the “configuration” button to go back to the directories setting again.

10.2 Creating an application

The first thing you need to do is create an app project, which is the main

information to built your application. For our first app, let's create an app with

all content already packaged.

1. Click the “manage app projects” button.

2. Enter the requested app information: its title (the name shown on listings or

with the app icon) and the app id.

P.S. The app id must be unique if you intend to distribute it on

app stores like the Google Play or the Apple Appstore. Usually

this id is given by your reversed website addres plus the app

name like “org.managana.player”.

3. Choose the application type: the player to show your content or the remote

control. Here we will only cover the creation of a player app. If you want to

learn more about remote controllers, check the Getting started with

Managana: it's showtime! document.

4. Click on “create app project”. You'll see the following window with further

app details to provide.

P.S. You can re-open a created app at any time by clicking the

“manage app projects” and selecting it from the list.

5. You can scroll down and provide as much information as you want and save

it. Here are some tips:

• The server url is only valid if the app can access it from the Internet (no

local installations). For the getting started example no server url is


• The index community id must be provided since it tells the app the

content to load at first. For the getting started example we must provide

“gettingStarted” - it's the DIS folder name without the ending “.dis”.

• The other display options tell the app what to show as it's default

interface. Since there will be no web connection for advanced features

and no video for time counting, let's uncheck them all.

6. After saving the configuration click the “offline communities” button. You'll

see the following window:

We'll copy our getting started DIS folder (our recently created community) to

the app community folder to pack it together with the application.

7. Click the “open the application community folder” button. You'll see a

standard windows explorer window. Now you'll need to copy the

“gettingStarted.dis” folder to it.

P.S. If you are using the Managana “launcher”, just click the

“open communities DIS folders” to find the “gettingStarted.dis”

folder. If you are using a local web server installation, check the

“community” folder inside the path where you copied your

Managana installation (usually the htdocs or www folder of the

server). If you installed Managana on a true web server you'll

need to download your content using FTP.

P.S.2 The DIS folder copy is necessary because we acre creating

an app that will not have access to the web at all. If your content

will be accessed over the web (providing a valid server url), this

is not required.

P.S.3 There are also some other possible configurations like the

interface language, the extra fonts used and the app icons. Let's

keep the default ones for now. You can go back to them later to

learn more about customizing your application.

8. Now, everything is set to create your application. Let's start with Android.

Click the “Android” button.

P.S. Every application needs a certificate file. For most of them

you can create your own, self-signed one. Check the AppWizard

text about the certificate and create one to sign your first Android


9. Provide your certificate password and click the “create Android application”

button. The AppWizard will start the process (it may take some time). After

everything is done you just need to click the “open packaged apps folder” and

look for a file with en “.apk” ending: that's your first Android app.

P.S. This apk file is ready for both testing on actual devices and

sending to app markets like the Google Play or the Amazon

Appstore. If you intend to use it on your own Android device,

remember to check its configurations to allow app installation

from unknown sources (other than Google Play).

10. In order to create installable apps that run on Windows and OSX (Mac),

Managana relies on the Adobe AIR – your users will need to install it just like

you did to run the AppWizard itself (the AIR runtime, not the full AIR SDK).

The proccess of creating the applications – presented as “.air” files – is very

similar to the one used for Android. Click the “AIR desktop” button” to learn

more about it.

P.S. The “.air” files are just like standard installers that run if

Adobe AIR is found on the computer.

11. Another possible application kind the AppWizard can create is the Windows

stand alone one. These apps do not need any other software on the system

(they won't need Adobe AIR) and are not installed – they run from an all-in-

one folder, even from flash drives. The creation process is very similar to the

Android one: click the “Windows stand alone” button to check it out.

12. The last app kind is the one for iOS devices like the iPad, the iPhone and

the iPod touch. The process is similar to the ones before, but the certificates

can only be provided by Apple itself. Click the “iOS” button to learn about how

to get them and create your apps.


Setting up an environment to create mobile applications may look very

frightening when you go to the necessary download pages. There are so many

information that anyone can get very lost. Let us help you then.

1. Click on the “download JDK” button on the App Wizard configuration page,

or go to this web address:


2. Download the latest JDK 7 version (the one tested with the App Wizard).

Check the yellow-selected links on the following pictures:

3. You must download the Windows 32 version (usually listed ad “windows

x86”) even if you are using a Windows 64 bits computer. You'll need the JDK,

not the JRE.

4. After installing, it will probably be placed at “C:\Program

Files\Java\jdk1.7.0_##”. On App Wizard configuration, find this path.

P.S. If you're using a Windows 64 bits it will probably be located

here: “C:\Program Files (x86)\Java\jdk1.7.0_##”.

Now, let's download AIR SDK, and unpack its folder.

1. Click on the “download AIR SDK” button on the configuration page, or go to

this web address:


2. Download the Windows version. Managana AppWizard was tested with the

3.8 version.

3. Unpack the content of the folder. For example, you can create a folder called

on AdobeAir on the C:\ root of your computer. Int this case your path will be

C:\AdobeAir. Just tell Managana App Wizard where the unpack folder is, and

you will be fine.