Image Components

Before you can use an image in your layout, you must load the image file into the projects assets folder. There are two ways you can load an image:

To insert an image into a layout:

  1. Select the stage or the group where you want to add the image and choose Insert > Component > Image.
  2. Set the URL property of the image to the path of the image you want to display. To use an image from the project's assets folder, drag the image from the folder to the URL property. To use an image from the Web, specify its full URL.

To insert an animated image into a layout, you create an image that contains a list of frames to be displayed to animate the image, as follows:

  1. Select the stage or the group where you want to add the image and choose Insert > Component > Image.
  2. With the image component selected, set its Frame Animator property to TRUE.
  3. For the Frames property, click Add until the number of frame fields is the same as the number of frames in your animation.
  4. For each frame, specify the image to be displayed. To delete a frame, hover over the field until a minus sign appears, then click the minus sign.

If you want the first frame in the animation to display when the image is not animating, use the same path for URL and the first frame. To run the image automatically when the page loads, set Active to TRUE. By default, the animation rins once. To cause the animation to automatically repeat, set Loop to TRUE. To cause the animation to run depending on the state of particular data or a property, bind a Boolean property or data metric to Active. To trigger an event when the animation finishes, bind On Complete to the trigger.

Solution Builder can decompose SVG (scalable vector graphics) images into their component vectors, which you can then edit. To decompose an SVG image:

  1. Select the image component that contains the SVG file.
  2. In the Property Inspector, under SVG, find Break Apart and click the Invoke button. The image is decomposed into vectors.
  3. To view and edit the individual vectors, use the Outline to display the children of the image component, as shown in the following screen shot. You might need to browse several layers deep to access all the child vectors of the SVG image.

Return to Atrius Developer Portal Home Page