Using actions to enable multi-way spinning of images

Overview

This component will allow for the simultaneous spinning of multiple images with the use of an Action.

Prerequisites

  1. Umajin App Creator downloaded and installed.
  2. Any text editor.

Pro Tip: using Visual Studio Code as your editor will allow you to integrate debugging.

Instructions

Step 1) Create a new blank app in the Umajin App Creator to use for the new tutorial project that we are about to create. It is always best to use a descriptive name for the project so you remember it later, such as “Image Spinner Tutorial”.

Step 2) Create a new JavaScript document and call it ‘imageSpin.js’ and place it into the scripts directory of your app’s Resources Folder.


NOTE: In order for this component to be available for use, simply reload the page.

Step 3) Open your imageSpin.js file in your preferred text editor.

Step 4) We first will want to register the Action. The first parameter will contain the name of the function that will be called. Our function will be called “spinImage”, and we will write the function later on. The second parameter will hold the name of the image that will be used as an icon. This will be left blank for now. The following parameter contains the desired name of your action. The name is what appears when you opt to add an Action in Umajin. The final parameter required to register your Action will be a list of components that you wish to use. For our purposes, we will be using three components: one image, one angle, and a time parameter measured in milliseconds that will be put in as a string.

Step 5) Now we will write the spin image function. The function will take in three parameters: an image, an angle, and a time parameter measured in milliseconds.

First, we need to get the position information of the image. This information will be needed to establish the origin and properly rotate. We will get both the x and y coordinates of the image as well as the height and width measurements.

Now we will establish the origin to be at the center of the image. This is because the default image origin is located at its top left corner and we want the image to spin about its center. We complete this with an ‘if’ statement. If the origin is located at its top left corner, we change its location. We use the value 0.5 in the setProperty calls because we would like the origin to lie halfway down the image and halfway to the right. If you would like the image to rotate about the upper left corner, you may omit this ‘if’ statement.

To complete the function, we will use the setPropertyInTween function to rotate the image in the fashion specified by the parameters. The first call visually rotates the image sImage by the angle sAngle in time ms. The second call rotates it back to the original position.

Step 6) Now the Umajin app can be setup for testing. We will be using the following two images, which can be added to the image list using the finder.

To add the images to the app, click the (+) button → Image → Select the desired image to add

Now, we will want to add a Button Component that will correspond the the action call.

You can position your images and buttons in whatever way you want. You can place an appropriate label on your button. Ours looks like this:

To implement the Action, select your Button Component, and go to the Action tab on the right of the screen panel.

You will need to add an multiple imageSpin actions for the Button corresponding to how many images you would like to spin. The details of ours are displayed below. Our two images will rotate in opposite directions with a duration of 2 seconds.

Now you may go ahead and test out your new imageSpin component by pressing the play button.