# Gif Maker / Convertor

## Introduction

Use your Webcam, a Video or Still Images to create GIFs with Filter Effects & Text - options are endless from a laugh to serious ID Capturing or Clip/Image Editing.

## Plugin installation

Place element on the page

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYYyvbtrJpBoSpeaeC%2F-MjYi7_rnmtaHnLWQvsF%2Fimage.png?alt=media\&token=3dff5e03-402a-4c9f-95f3-b4309a7163b4)

Use Actions for making GIFs

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYYyvbtrJpBoSpeaeC%2F-MjYiFw5IK-oZJAB3LCQ%2Fimage.png?alt=media\&token=c047c864-abbd-4999-968b-da82b04ac09e)

## Plugin element "About a GIF"

The element has no fields and has 3 actions.

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYExXlobWiYBdOqaah%2F-MjYFy49n93iYNUGVyzc%2Fimage.png?alt=media\&token=79a342f1-22c0-41b3-9bcd-87ceec24996e)

### Exposed States

| Title         | Description | Type |
| ------------- | ----------- | ---- |
| Base64 Output |             | Text |
| New URL       |             | Text |
| Base64 URL    |             | Text |

### Events

| Title             | Fires when                                 |
| ----------------- | ------------------------------------------ |
| Upload Successful | File successfully attached to the thing    |
| Upload Failed     | An error occurred while attaching the file |

### Actions

{% tabs %}
{% tab title="Create Gif" %}
This action creates a gif from a list of images, videos, or webcam.

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYExXlobWiYBdOqaah%2F-MjYLacydPhGybtWQbe2%2Fimage.png?alt=media\&token=f05e82a9-72f4-479e-9556-72542e67216c)

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYExXlobWiYBdOqaah%2F-MjYLeYNsvjahsAsAavh%2Fimage.png?alt=media\&token=6e9c7dfb-959f-460b-aa66-9d1a4fcdb664)

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYExXlobWiYBdOqaah%2F-MjYLjqYR5aZck0PxEwz%2Fimage.png?alt=media\&token=a2a72cf4-594e-4153-81c8-0faffed486cc)

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYExXlobWiYBdOqaah%2F-MjYLoIYM4ARVo6Mh6Oc%2Fimage.png?alt=media\&token=9169c6ec-6b78-420b-8cb3-81d328109414)

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYExXlobWiYBdOqaah%2F-MjYLsOTWZpwjuTgJT-H%2Fimage.png?alt=media\&token=cecfee2c-4298-4a62-88b0-f9ec6db4bbda)

**Fields**

| **Title**              | Description                                                                                                                                       |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Make GIF Using         | The mode responsible for what source will be used to create the GIF                                                                               |
| Name                   | GIF name                                                                                                                                          |
| Images (Image Mode)    | List of pictures to create GIFs. Data will be taken from this field only if the Image mode is selected                                            |
| Video URL (Video Mode) | Video to create GIF. Data will be taken from this field only if the Video mode is selected                                                        |
| Attach To Type         | The data type to which to attach the gif                                                                                                          |
| Attach To              | The thing to which to attach the gif                                                                                                              |
| Number of Frames       | The number of frames to use to create the animated GIF. Each frame is captured every 100 milliseconds of a video and every ms for existing images |
| Time Per Frame         | The amount of time (10 = 1s) to stay on each frame                                                                                                |
| Interval               | The amount of time (in seconds) to wait between each frame capture                                                                                |
| Font Size              | The font size of the text that covers the animated GIF                                                                                            |
| Font Family            | The font family of the text that covers the animated GIF                                                                                          |
| Color Tool             | Colorpicker to get color code                                                                                                                     |
| Font Color             | The font color of the text that covers the animated GIF                                                                                           |
| Text                   | The text that covers the animated GIF                                                                                                             |
| Font Align             | The horizontal text alignment of the text that covers the animated GIF                                                                            |
| Baseline               | The vertical text alignment of the text that covers the animated GIF                                                                              |
| Enable Blur            | Use blur                                                                                                                                          |
| Blur                   | Blur value (in Pixels)                                                                                                                            |
| Enable Brightness      | Use brightness                                                                                                                                    |
| Brightness             | Brightness value. 200 - max brighter, 0 - max darker.                                                                                             |
| Enable Contrast        | Use contrast                                                                                                                                      |
| Contrast               | Contrast value. 0 - Completely gray, 200 - max contrasts                                                                                          |
| Use Drop-Shadows?      | Use Drop-Shadows                                                                                                                                  |
| Horizontal Drop-Shadow | Can be number                                                                                                                                     |
| Vertical Drop-Shadow   | Can be number                                                                                                                                     |
| Drop-Shadow Blur       | Can be number                                                                                                                                     |
| Drop-Shadow Color      | Color of shadow                                                                                                                                   |
| Enable Grayscale?      | Use Grayscale                                                                                                                                     |
| Grayscale              | Grayscale value. 0 - without filter, 100 - completely grey                                                                                        |
| Enable Hue Rotate?     | Use Hue Rotate                                                                                                                                    |
| Hue Rotate             | Angle of rotate                                                                                                                                   |
| Enable Invert?         | Use Invert                                                                                                                                        |
| Invert                 | 0 - no invert, 1 - full invert                                                                                                                    |
| Opacity                | Opacity value. 100 - without opacity                                                                                                              |
| Saturate               | Saturate value.                                                                                                                                   |
| Enable Sepia?          | Use sepia                                                                                                                                         |
| Sepia                  | Sepia value                                                                                                                                       |
{% endtab %}

{% tab title="Clear Gif" %}
Clear all data in exposed states.
{% endtab %}

{% tab title="Create SnapShot" %}
This action creates a snapshot from a list of images, videos, or webcam.

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYYyvbtrJpBoSpeaeC%2F-MjYho3fCKveRrJj0Wk-%2Fimage.png?alt=media\&token=a0fef829-caf9-4fc6-a299-e0cde34898c4)

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYYyvbtrJpBoSpeaeC%2F-MjYhrYaObJLO67jxp89%2Fimage.png?alt=media\&token=823b24ef-b59a-4d54-8bb1-5c9bf2b2461a)

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYYyvbtrJpBoSpeaeC%2F-MjYhvBnejmQY4VoJR84%2Fimage.png?alt=media\&token=d9bddcb6-d852-424f-ace7-156a0395237e)

![](https://3252157027-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MW450HQkKqYSR06lFVV%2F-MjYYyvbtrJpBoSpeaeC%2F-MjYi-3g0c5f3M50rDKP%2Fimage.png?alt=media\&token=333d3573-cf9c-449d-9fc5-e4e9740b3953)

**Fields**

| **Title**              | Description                                                                                                                                               |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Make GIF Using         | The mode responsible for what source will be used to create the snapshot                                                                                  |
| Name                   | snapshot name                                                                                                                                             |
| Images (Image Mode)    | List of pictures to create snapshots. Data will be taken from this field only if the Image mode is selected                                               |
| Video URL (Video Mode) | Video to create a snapshot. Data will be taken from this field only if the Video mode is selected                                                         |
| Attach To Type         | The data type to which to attach the gif                                                                                                                  |
| Attach To              | The thing to which to attach the gif                                                                                                                      |
| Number of Frames       | The number of frames to use to create the animated a snapshot . Each frame is captured every 100 milliseconds of a video and every ms for existing images |
| Time Per Frame         | The amount of time (10 = 1s) to stay on each frame                                                                                                        |
| Interval               | The amount of time (in seconds) to wait between each frame capture                                                                                        |
| Font Size              | The font size of the text that covers the animated snapshot                                                                                               |
| Font Family            | The font family of the text that covers the animated snapshot                                                                                             |
| Color Tool             | Colorpicker to get color code                                                                                                                             |
| Font Color             | The font color of the text that covers the animated snapshot                                                                                              |
| Text                   | The text that covers the animated snapshot                                                                                                                |
| Font Align             | The horizontal text alignment of the text that covers the animated snapshot                                                                               |
| Baseline               | The vertical text alignment of the text that covers the animated snapshot                                                                                 |
| Enable Blur            | Use blur                                                                                                                                                  |
| Blur                   | Blur value (in Pixels)                                                                                                                                    |
| Enable Brightness      | Use brightness                                                                                                                                            |
| Brightness             | Brightness value. 200 - max brighter, 0 - max darker.                                                                                                     |
| Enable Contrast        | Use contrast                                                                                                                                              |
| Contrast               | Contrast value. 0 - Completely gray, 200 - max contrasts                                                                                                  |
| Use Drop-Shadows?      | Use Drop-Shadows                                                                                                                                          |
| Horizontal Drop-Shadow | Can be number                                                                                                                                             |
| Vertical Drop-Shadow   | Can be number                                                                                                                                             |
| Drop-Shadow Blur       | Can be number                                                                                                                                             |
| Drop-Shadow Color      | Color of shadow                                                                                                                                           |
| Enable Grayscale?      | Use Grayscale                                                                                                                                             |
| Grayscale              | Grayscale value. 0 - without filter, 100 - completely grey                                                                                                |
| Enable Hue Rotate?     | Use Hue Rotate                                                                                                                                            |
| Hue Rotate             | Angle of rotate                                                                                                                                           |
| Enable Invert?         | Use Invert                                                                                                                                                |
| Invert                 | 0 - no invert, 1 - full invert                                                                                                                            |
| Opacity                | Opacity value. 100 - without opacity                                                                                                                      |
| Saturate               | Saturate value.                                                                                                                                           |
| Enable Sepia?          | Use sepia                                                                                                                                                 |
| Sepia                  | Sepia value                                                                                                                                               |
{% endtab %}
{% endtabs %}





