[vc_row][vc_column][vc_empty_space height=”50px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1448892295159{margin-bottom: -10px !important;}”]

Create an interactive photo
with rectractable flap

[/vc_column_text][vc_column_text css=”.vc_custom_1448892320673{margin-right: 5% !important;}”]

This tutorial includes videos, right-click and choose ?play?
to watch them.

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”50px”][vc_column_text css=”.vc_custom_1447773106694{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]

1. To import the first frame of the project we will click on the ?+? symbol in the toolbar on the left of the interface bar.
2. The list of importable items on the scene appears, click ?Add an Image?.
3. Image library allows you to select the image or images of your choice, a blue outline indicating which images are selected.
4. Once your choice is click ?apply? to place the image on the scene. For this example start with the sharp image.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”839″ img_size=”full” onclick=”link_image”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”875″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447774152814{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]Place the images on the scene
To place an item on the scene, you can click on it, left down the left mouse button and move or you wish.
If you want to be more precise you can return values directly to its horizontal and vertical position.
In this case the image by the size of my scene I can directly put 0 in horizontal and vertical 0, the origin of the scene is the upper left corner.
A third possibility is offered to you to subtly move an item : select it and use the arrow keys on your keyboard to move from pixel to pixel, hold down the Shift key and use the arrows to move 10 pixels in 10 pixels[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]Proceed the same way to place the two fuzzy pictures over the first.
To go faster this time select the first in the library, then holding down the Shift key, select the second and validate.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Action layers are similar to transparent buttons, which you?ll be able to add actions that will control the animation of other elements. Of course to be able to handle they are not fully transparent to the administrator, but they are invisible in the publication. You can also make them invisible in the preview folder menu in the address bar of your browser and clicking ?hide layers in actions.?

Create a first action layer by clicking the ?+? and then ?Action Layer.? Rename it in the window that appears.
Resize it by ?clicking / moving? one of its corners, and place it on the figure on the left

You can subsequently use the rotation in the properties of the action layer, to cover at best the character.
The properties of an element displayed when selected or by clicking on the icon toothed wheel in the toolbar.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

Add actions to rollover

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]You will finally be able to add interactivity!
What we want to give the impression that the photo blurs when going on a character, it is to show the blurred over the sharp image by adjusting its opacity setting picture. We obtain the same effect as when playing with the opacity slider property panel as you can see in this video.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]Two choices are available to you to add an action to an item :

1. The first is to select the item,
2. then click on the hand icon on the tool bar,
3. and finally the type of trigger that will launch the action (click, rollover?).
4. The second through the context menu available by selecting the item, by right-clicking it
5. and selecting the type of trigger

Select the layer of action, then add an action when rollover.
A window opens allowing you to add an action. A line is created with different parameters to enter. Imagine as a series of questions.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”827″ img_size=”full” onclick=”link_image”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”830″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

1. Apply: On what element you want to act or conduct
2. Parameters: Which property of the element you want to change over time
3. Values: What value do you give the property to the end of the animation (its initial value being that you gave him on stage)
4. Length: How long the property will change it from its initial state to the one you give when interacting
5. Delay: The delay is the time before which the action should be triggered
6. Effect: You can add an effect to an animation as a rebound effect eg
7. Back: Checking this box prevents you define the behavior of the element to the end of flyover in the case of an overview and in a second click in the case of a click. In both cases the action then played backwards.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”833″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]In our example we want to act on the element right-blur.jpg (1) (the image with the right side is blurred), varying opacity (2) 100% (3) over a period of 600 ms (4 ) without delay (5), no effect (6) and return (7) for image re-disappears at the end of the rollover.

It only remains for you to validate our work by clicking on ?Apply? in the lower right of the window (8) corner.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]

1. Start by creating a rectangle by opening the tool bar
2. and clicking on the ?rectangle? button.
3. Once the rectangle on the stage property panel opens automatically.
   Set the opacity to 75%,
4. and then change its position and size as follows: horizontal position 550 px ,
5. vertical position 0 px,
6. width 410 px,
7. and height 542 px.
8. Then create a text block by opening the tool bar
9. and then clicking the text block.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”839″ img_size=”full” css=”.vc_custom_1447775063492{margin-right: 5% !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”842″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

10. Move the text block above the rectangle and resize it to get slightly lower than the rectangle dimensions.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”845″ img_size=”full” css=”.vc_custom_1447775343263{margin-right: 5% !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”848″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]Double click on the text block to be able to edit it. Type your text or copy and paste it from an application of your choice.
Then select the title and then choose a font and size of your choice. You can also load other fonts in the Project tab.

Then select the current text, use another font and then selecting the entire text, change the white.

To exit text editing, double click outside the text block.
We will add a button which redirects to the website of the artist.
Import the image and place the btn_info.png like the screenshot below.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

1. Then create an action layer and position it at the top and the image size of the button.
2. We will now add a link to the website of the artist. To do this click on the string icon
3. and in the window that opens enter ?new page?
4. which will have the effect of opening a new tab rather than replacing the contents of the current window.
5. Then select ?web page? and enter the field below by entering the URL of your choice.
6. It only remains for you to validate the link.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”854″ img_size=”full”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

Create actions when clicking on the action layer.

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Then, choose the action layer covering the character, then right-click to display the context menu and add a click action.

We will take advantage of a peculiarity of Racontr. Indeed when we add actions then select an element software indicates values by default as those he has on scene.

Because we place the elements on the stage in the open position of our information pane, the default values will be those that we want.

Once the recorded actions we can put all the elements in their closed position. Thus, the animation is well to the closed to the open position.

Add an action (4), and then select the last action layer that we created (1).
Then selected as ?X? (2) parameter that corresponds to the horizontal position of the element, the value automatically to the right is updated according to the current position of the object (3).
Now add 3 actions on other elements composing our sidebar, the image of the button, the text block and the rectangle.
Validate (5).[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”857″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]Select all the layers composing our sidebar via the layers palette and then move out of the scene.

Therefore when we arrive on the scene this component is hidden and when action is click on the layer, he gets out.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

Close the menu

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Last step, the user must close the menu at the end of his reading. As can be seen in many sites, the closure of an element of this type is done by clicking outside of it.

We will create a action layer with scene size and place it under the elements constituting the information panel.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]When the user click on the action layer of the character, the side flap moves from right to left. In the same way we go, through the actions move from right to left Layer action to close the pane. To do this select the layer that covers the action figure and add a click action.

1. In the window that opens add
2. a fifth action hotlink-back,
3. let ?x? parameter and ?0? value
4. and confirm.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”890″ img_size=”full” onclick=”link_image”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]Now add actions on the ?hotlink-back? to replace it and all elements of the component outside the scene.
Already place the ?hotlink-back? outside the scene. Then, in exactly the same way as we did to open the flap, add actions on all elements of the component always with the ?X? parameter values and letting the software proposes now that the elements are in their closed position.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]