Image
The Image component allows supported image formats to be easily imported into your scene. Images are useful for adding visual elements but can also be utilized as buttons or UI components, as they fire on tap events upon user interaction.
Supported Image Formats
Zapworks Designer supports images in the following formats:
- .png
- .jpg
Images must be under 10 MB in order to be successfully uploaded into the system. If you have an image that is larger than 10 MB, try resizing it in a image editor of your choice.
Adding an Image
To add an image to your scene, select the image icon from the Components Panel, import your image and drag it onto your canvas.
Editing an Image
When you select your image in the canvas, the properties are editable via the Properties Panel.
Here, you can edit the following:
| Property | Description |
|---|---|
| Content | Replace the Image with another image you have uploaded to the Media Library. |
| Transforms | Edit the Size (Width and Height), Position (X/Y/Z coordinates), and Rotation (degrees on the X/Y/Z axes) of the Image. You can also Mirror the Image and change the component's layer Order (forwards or backwards) relative to other scene components. |
| Curve | Add a curve to the Image and choose whether its curve direction is None, In or Out, as well as the degree of Curvature. You can also have it Wrap around a curved target if there is one present. See the Curved Image Tracking documentation for more. |
| Appearance | Edit the Opacity, add a Frame and change its Corner Radius. You can also add a border to the Image and change the Border Width and Border Color. |
| Actions | Create interactivity by adding an on tap Action to the Button. |
| Transition Effects | Add an Enter or Exit transition effect to the Image. |
To learn how to add interactivity to Image components, check out our Actions article.