Skip to main content

Ready to market your stellar app?

Samsung Developer Program is your gateway to app monetization success.

Learn More

Samsung Developer Program

Animated Image Popup

Some UI elements (such as the lock screen background) can be set to one or more animated images that are displayed in a customized way via the animated image popup.

TS_UG_ImageControl_3.png        

To add and control the display of animated images:

  1. In a parameter with an animated image file setting (such as Home screen > Wallpaper > Wallpaper type), select Animated and click the [Image box].
  2. In the Animated wallpaper window:
    1. To add one or more base images (not affected by frame actions), click Components (+Add image) and navigate to, select, and open the file.
    2. To add frame action image file(s) that undergo cyclic display:
      1. Click Components (+Add frame action).
      2. In the Add frame action window:
        1. For each frame action image file to be added:
          1. Click [+ icon].
          2. Navigate to, select, and open the file.
        2. To remove an added image, click the [Image X icon].
        3. Set Frame duration ([milliseconds that each frame image is displayed]).
      3. To review the frame action, click TS_UG_ImageControl_4.png.
      4. To stop the frame action, click TS_UG_ImageControl_5.png.
      5. Click Save.
    3. To add/remove an effect to the entire display (images and background), toggle-click the [Effects type]:
      TS_UG_ImageControl_6.png TS_UG_ImageControl_7.png TS_UG_ImageControl_10.png TS_UG_ImageControl_11.png
      TS_UG_ImageControl_8.png TS_UG_ImageControl_9.png TS_UG_ImageControl_12.png TS_UG_ImageControl_13.png
    4. To change the display of a base image (controlled individually) or the frame action images (controlled as a group):
      1. Select the image or frame action images by EITHER:
        Click and select Components ([image name] / Frame action).
        OR
        In the animation window:
        1. Bring the image to the front via the Overlay buttons: TS_UG_ImageControl_14.png
        2. Click on the image or frame image to highlight its dimension controls.
      2. To change the image size and/or shape, EITHER:
        Drag the dimension controls of the image.
        OR
        Set the following for the image:

        Width

        Horizontal length of the selected image

        Height

        Vertical length of the selected image

      3. To change the display layer order, click the appropriate [Overlay button]: TS_UG_ImageControl_14.png
      4. To add or change a motion to a base image or the frame action:
        1. Select the base image or frame action images.
          Note: The current motion settings are only displayed for the selected image.
        2. To add up to four types of motions:
          Note: Each motion starts upon initial display of the UI screen.
          TS_UG_ImageControl_15.png
          1. Select Add > [Motion type].
            Note: To expand/collapse the settings of an added motion, either toggle-click TS_UG_ImageControl_16.png or click the [Motion's color bar].
          2. Specify the movement for the selected type:

            Position

            Moves displayed location of the image from START to END positions:

            [Start] to [End]: Moves as specified by the selection.

            Draw a motion track: Starts at the center of the image's location and moves along the red path (controlled by the box icon position):

            TS_UG_ImageControl_17.png                            

            TS_UG_ImageControl_18.png To the box end.

            TS_UG_ImageControl_19.png Back to the image's original location.

            TS_UG_ImageControl_20.png To the end away from the center.

            Rotation

            Turns the image from START to END positions:

            Customized: By the specified start and end degrees.

            Clockwise / Counterclockwise: By 90 degrees.

            Rotate at an angle: By 70 degrees.

            Scale

            Changes image size from START to END positions:

            Customized: Specified start to end percentages of original size.

            [Specified %]: Original size to selected end percentage of original.

            Alpha

            Changes image opacity/transparency from START to END percentages:

            Customized: Specified start to end percentages.

            Fade: 100% (solid) to 0% (invisible).

          3. Specify the number of loop times and the loop mode direction:

            Loop

            Number of movement iterations that are to occur.

            Loop mode

            How movement iterations are to occur:

            Restart: All iterations go from start to end.

            Reverse: Odd iterations go from start to end AND even iterations go from end to start (1. start to end, 2. end to start, 3. start to end, and so on).

            Note: Each iteration counts as 1 loop. To go from start to end AND then go back from end to start, loop MUST be set to 2.

      5. To remove a motion:
        1. Select the [Motion's color bar] (indicated by bold number text).
        2. Click TS_UG_ImageControl_21.png.
    5. To change a base image, the frame action, or frame action images:
      1. Select Components ([Base image name] / Frame action).
      2. To change it:
        1. Select it and click TS_UG_ImageControl_22.png.
        2. Make the changes in the Add frame action window (see step 2.b.ii. above).
      3. To duplicate it, select it and click TS_UG_ImageControl_23.png.
      4. To remove it, select it and click TS_UG_ImageControl_21.png.
    6. To review the currently set animation in the animation window, click TS_UG_ImageControl_4.png.
    7. To stop the animation, click TS_UG_ImageControl_5.png.
    8. Click Save.
  • Was this article helpful?