[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_1446803632570{margin-bottom: -10px !important;}”]

Create actions

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

Create actions to generate interactivity with Racontr.

You can also visit our further tutorial about the “interactions” menu to complete the course.[/vc_column_text][vc_column_text letter_spacing=””][/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1446804679000{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 letter_spacing=””]For our example, we imported two images: “A” (the blue square) and “B”, (the black square).

It is from these two media that we are going to work.

The goal is to understand how to create a very simple actions between different elements on Racontr.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5630″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463664396266{margin-right: 5% !important;}”][/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 letter_spacing=””]Select the item who will be clickable and will generate some action.

We will configure the actions that will take place on “click” or “tap” to “A”.

Here we will apply an action to “A” will change the opacity of “B” to 20%.

1. Click “A”, then in the action panel (the little hand), select “Click / Tap” (adding an action to click / tap on “A”).
2. Create your action: here we apply to “B” a 20% opacity setting, with a duration of 0.6 seconds with a return action (case “back” checked to repeat the action in the reverse).

Once you have created an action, confirm.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5624″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463664413953{margin-right: 5% !important;}”][/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 letter_spacing=””]The principle is the same as adding an action to click!

1. Click on the item of your scene you want to add a rollover action (here, the “B” part), then in the settings, select “roll-over”.
2. In our case, we will apply the item “B” (on itself) an action of “rotation” of 4%, for a period of 6 ms, with a return effect. We also apply an action to “A”, scale, a 1.04x value of 6ms duration, with a return effect.
3. You can add roll-out actions with this tab.

You just have to validate and launch your preview !

Now you can imagine lots of ways to create action on your media: opacity, position, scale, rotation, and more ![/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5627″ img_size=”full”][/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]