Moving Graphic Component

Article that goes over how to use the Moving Graphic Component

Jesse Daniels avatar
Written by Jesse Daniels
Updated over a week ago

The Moving Graphic Component is a dynamic element integrated into DIGIDECK, designed to add visually engaging animated graphics to presentations. This guide provides developers and users with essential information on its functionalities and usage.

Features:

  1. Resizable and Movable: Easily resize and move the component within DIGIDECK for flexible placement.

  2. Record Button: Initiate animation recording by defining paths using cursor interaction or point-click.

  3. Settings Button: Customize various parameters such as media type and animation options.

  4. Animation Path Creation: Interactively draw animation paths during recording for graphic movement.

  5. End Recording: Right-click to stop recording, triggering automatic animation playback.

  6. Save/Revert Dialogue: After recording, choose to save or revert animation paths.

Adding the Component to your Slide

Step 1: Navigate to Layout mode in the bottom left corner of the screen and then select the "+" Button on the top right to add a new component.

Step 2: Search for the Moving Graphic Component and select it to add it to your slide.

Step 3: Adjust and resize the area in which you will be using this component by using the draggable corners.

Using and Customizing the Component

Navigate to the settings on the component when you are still in layout mode. You can either click the "Settings" option on the top left or the "Gear" icon on the top right to open up the menu.

Step 1: Add an icon or image from the Icon Gallery that you want to animate. You can use the slider at the top to swap between an icon or any image you want to use from your library.

Step 2: Adjust the size, duration, transition, and if the animation will loop or alternate. You can also lock the animation once drawn so it does not get accidentally changed.

Step 3: The next step is to draw and animate your image or icon. To do this, switch back into "Edit" mode on the bottom left and hover over the component. You should see a "Record" button and a "Settings" button pop up when you do.

Step 4: Click the red "Record" button and a purple box will pop up that shows your drawing area. Once that is enabled, you can now draw the animation you want your image to follow. You can either hold down your "Left-Click" and draw curved lines or click to a specific point that will draw a straight line.
​

Animated GIF

Once your line is complete, you can "Right-Click" and end the recording. This will set in stone your animation.

Step 5: View your image during its animation and watch it follow the line you just created. This would either be a good time to test the size, duration, transition, and if the animation will loop or alternate back in the settings.
​

Animated GIF


​

Did this answer your question?