You can also add interactivity to reports and financial documents! Create animated graphics and arrange your content for a tablet-optimized reading.


This application is composed of 3 screens, corresponding to the different sections. The menu has been created in the foreground in order to realize an opening effect.


1. The foreground and background

Even if state 1 looks empty, a foregound has been assigned. This is where you will find the menu.

The foreground is composed of 4 different states.

State 1 contains two horizontal Scrolling Areas (scroll - scroll and top - bottom), which are synchronized in "x" with a reverse scrolling (button in the component Properties window). In each area, a default marker is placed to ensure the area is always displayed at the same position (Edition window). In the upper component (scroll - top), three markers were placed when the image comes to the center:

  • The first marker controls a Multi-state component (hera, status display 1: empty)

  • The second displays the second state of the same component, which includes the text. It has also another action: move (a few pixels only) the scrolling area until the third marker.

  • The third marker creates the transition: it enables the change of foreground and background.

The other states in the foreground represent the different layouts of a menu. State 1 scrolling areas are hidden above and below the visible space in order to create an opening effect with automatic transitions. Interactive areas were placed on top of each category to redirect to the right screen. A flag represents the language of the application: in a Multi-state component are an English and French flags. An Interactive Area was placed above: when tapping, the Multi-state component changes state and the application language changes according to the displayed status (action "change language").

Background 1 is a color background. It is the default display when the animation of the foreground is played. When the third marker is on, foreground changes to a neutral white background, used throughout the rest of the application.

When foreground 2 displayed, there is the switch to state 2.


2. Activities (state 2)

State 2 is only composed of a full-screen vertical Scrolling Area.

When this state is diplayed, there are new data showing up one after another. The first statistics (top) are contained in a Multi-state component (statistics 1): figures appear as its states are displayed: the fourth state displays all the figures. This component is empty by default, ie displayed state 1. When displayed state 1, state 2 appears and so on, until state 4. A 0.7 seconds duration was set.

The graph ("Number of stores") has 5 Multi-state components, each containing two states to animate the annual bar. The first multi-state (Component Graph 1-2010) is empty by default (state 1), but automatically changes to state 2 in a duration of 0.8 seconds. It's the same for the other 4 components, but a delay was set to be able to create this sequence of actions.

Statistics below (2 statistics) are contained the same way as other statistics and have the same animation.

The two two graphs (graph 1 and graph 2) get alive with the tap of the user to trigger the state 2. Here, all bars are contained in the same multi-state, and displayed simultaneously.


3. Results (screen 2)

This graph is kind of the same as the graphics of screen 1, but more states were created to better decompose the data apparition. There are automatic transition at each state display.

The map is composed of many multi-state: the ones representing the buttons, and the ones including the information to make appear. Take the example of North America. The component "tap - north america" ​​includes two states, each with a more or less large circle. When displaying state 1, state 2 is displayed and even between state 2 and state 1: it's a loop. If I tap on the multi-state, it shows the second state of another multi-state (north america) including the line: its first state was empty. It automatically redirectes to the third state with all the information.

To open the Press Releases, simply assign an external action to tap on the icons: open the URL. It's a full screen display.


4. Statists (screen 3)

This screen includes three states that represent the three sectors. Interactive Area components were placed above the three legends: when you tap them, you are redirected to the state corresponding to the selection.

The upper curve (multi-component state) is automatically displayed little by little based on the same principle of automatic transitions between states. The first state of the component was set as the default state, only on state 1. In fact, if you make it the default one on all states, animation restarts at zero each time you switch sector.

The effect of the diagram is possible with a Multi-state component containing two states. The first states seems empty but no! Images (3-1, 3-2 and 3-3) have an opacity to 0%, and are rotated to be on top of each other. When displaying state 1, there is an automatic transition with state 2.

Learn more:

Was this article helpful?
0 out of 0 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation