Office hacks: making diffusion menu slides

The presentation of the menu in the slide does not make sense, it will take up too much slide space. If the menu is made into a diffusion type, when the mouse hovered over the main menu when the sub-menu to eight expansion, the mouse left the main menu when the sub-menu contraction, so the menu presentation will take up less space. Using Articulate Storyline 3 software, only two layers plus a trigger, you can achieve this effect (Figure 1).

1813A-KSCD-1

1. Build the menu style

Open Articulate Storyline 3 and create a new project. Double click on the untitled slide and right click to set its background color. At the slide layer on the right side of the window, right-click on the base layer and select “Rename” to name it “Main Menu”. Use the “Insert” tab “Shape” in the ellipse in the slide to draw a positive circle, right-click the rectangle, select “Edit Text”, enter the content of the main menu, set the font, font size and color. font, font size and color, etc. In this square circle around the number of sub-menus according to the need to draw the corresponding diameter smaller than this square circle of other square circles, enter the sub-menu content. Next, click “New layer” at the slide layer, the new layer named “submenu expansion”; then switch to the base layer, select all the positive circles, copy, select the new layer, paste, so that the new layer of the large circle and the base layer of the large circle is fully aligned; and then Create a new layer, the new layer named “sub-menu contraction”, the same will be the base layer of all the positive circles pasted into this new layer, so that the new layer of large circles and the base layer of large circles fully aligned; switch to the base layer, delete the other small circles in addition to large circles. In this way, the menu style is built (Figure 2).

1813A-KSCD-2

2. Set submenu animation

Switch to the “Submenu Expand” layer, right-click the big circle as the main menu, and place it on the top layer. Select the small circle of “Submenu 1”, choose “Animation” tab, click “Add Action Path→Line”, then click ” Up”, drag the green endpoint of the path to the center of the large circle in the slide, and drag the red endpoint to align with the original figure. Similarly, add line animation paths for other small circles, drag and drop the green endpoints to the center of the large circle, and align the red endpoints with the respective original shapes. Switch to the “submenu contraction” layer, add a line animation path for each small circle, drag and drop the green and red endpoints to the center of the large circle, the green endpoints are aligned with their original graphics. In this way, the sub-menu expansion and contraction of the animation effect is complete (Figure 3).

1813A-KSCD-3

3. Add interactive effects

Switch to the base layer, click “New Trigger” in the Trigger panel, select “Show Layer” at the pop-up window action, select “Submenu Expand” at the layer, select “User Click” at the time, and select “Oval 1” at the object. “User Click”, select “Oval 1” at the object (that is, labeled “Main Menu” square circle). Switch to the “submenu expansion” layer, add a new trigger, select “Show Layer” at the pop-up window operation, select “submenu shrinkage” at the layer, choose the time “User Click”, select “Oval 1” at the object. Switch to the “submenu contraction” layer, add a new trigger, select “Show Layer” at the pop-up window operation, select “Submenu Expand” at the layer, select “User Click” at the time “user click”, the object of choice “oval 1”. In this way, the submenu between the expansion and contraction of the switch is set to complete (Figure 4).

1813A-KSCD-4

Finally, click “Publish”, set the publish folder, and click “Publish” button.

Leave a Comment