General Animation Snippet

[Scott Ferguson]

Demonstration video > here <.

Use the NextFrame procedure with result to set images, colors, text or other component properties to values stored in a list one-after-the-other.

If  'Current' is not in the list, or is the last item in the list, then the first item in the list will be returned.

Otherwise, the next item in the list will be returned.

Copy NextFrame to Backpack from this demo project then drag it from Backpack into a screen of your project. It is self-contained.

Insert it in a Clock Timer event block and configure it as shown in this demo project.

Note: THIS METHOD REQUIRES THAT ALL LIST ITEMS BE DIFFERENT.

That is because 'index in list' only matches the first item in a list.

So if you have duplicate items, use a different method than this one.

Usage:

'Property' is one of <Picture|Image|TextColor|BackgroundColor|...>

set <Component>.'Property' to [call NextFrame Current [<Component>.'Property'

                                              Frames  [<list of colors or image names>

NextFrame Returns:

The next color or image in the list

If Current is not in the list, then the first color or image in the list is returned.

---

Video demonstration transcript:

Hello App Inventors

This is a quick walkththrough of the GeneralAnimationSnippet project.

It contains examples using a general procedure to display animations for buttons, image components, and an ImageSprite

The animation procedure can be used with any components that can display colored text, background colors or images.

(Designer window visible)

Here I have the app loaded in the emulator.

when I click the Start Animation button, (describe what you see)

The ClockAnimation component's Timer event block is used to either cycle through lists of image names stored in the Media folder or through lists of colors.

(Stop the app)

Let's switch to the Blocks viewer:

When the Start Animation button is tapped, the ClockAnimation Timer is started.

Inside the when ClockAnimation.Timer event block are the blocks to display the Pictures and colors you saw.

Notice that each component's color or picture property is 'set' by the result of a call to the NextFrame procedure.

Attached to the NextFrame proceudure are two arguments:

Current which has a getter block for the component's picture or color

and Frames which has a list of picture names or colors attached.

Button3 has a list of colors (expand/collapse)

and Image1 has a list of picture names (expand/collapse)

To use the NextFrame procedure with result in your projects, right-click on the NextFrame procedure and choose Add to Backpack from the popup menu.

Switch to you project and drag NextFrame out.

Place (edit: a call block to) it inside a Clock Timer event block and set it as seen with these examples.

Well that's about it for now.

Until next time---

Happy Inventing!

---

sf