Below is the video version if you don’t want to read the documentation…

The Basics

Composing SKActions from the property list is incredibly easy, and the kit provides plenty of example to copy and paste from.

Below is an example of how to compose an action to show animated textures on an Element…

Note that the AirplaneAction dictionary will be the name of the action we’ll refer to when running (or stopping) the action. The AirplaneAction dictionary is inside of a dictionary called Actions, which can be included on every one of your pages, and include an unlimited number of potential Actions to use.

If your Actions will be used on multiple pages, you can include an Actions dictionary in the Root of the property list…

Running the Action

The events to run actions composed with the property list or composed in action files are identical. In the example below, you can see we have a dictionary named RunAction (in this case, within the Events dictionary of the page). Inside the RunAction dictionary, you can list as many actions that you need to run. Each has their key set to the action name (in this case it is AirplaneAction), and the value can be either a single String value or an Array. In the example below, the value is an Array which lists two Elements (Vehicle, Vehicle2) to run the action on.

Common Properties for Actions

The example action in the previous screenshots is a bit different than most, because it involves animating textures. The other actions, which you’ll see in a moment, share the following properties. We’ll describe them all here so we don’t need to repeat ourselves too much.

Wait – a number value for the amount of time to wait before running the action. The default is 0.

Duration – how long the action event will occur, for example, a value of 2 would run the action for 2 seconds. The default is 1.

Reverse – A bool value. YES will reverse the action after the initial action runs. This only has an effect on some actions.

Repeat – How many times the action will repeat. -1 will repeat it forever. 0 will run the action once, then stop. The default is -1.

Events – this is a dictionary to run an unlimited number of events after each action event. If the action repeats, the events dictionary will be run again. This could be useful for doing something as simple as playing sounds with each cycle of the action, or you could even run other actions. Running other actions gives you the option to create lengthy action sequences.

Scale / Resize Action Example

You have four options for scaling nodes…

ScaleTo – A number value to scale the node to. 2 would be 200%. 1 would bring the node back to 100% (it’s original size). 0.5 would scale it to 50%.

ScaleBy – A number value to scale the node by an amount. For example. 0.5 would scale it by 50%.

ResizeToWidth – a number value to resize only the width to an exact size.

ResizeToHeight – a number value to resize only the height to an exact size.

Rotation Action Example

You have two options for rotating nodes…

RotateTo – A number to rotate the node to an exact amount (in degrees)

RotateBy – A number to rotate the node by an amount (in degrees). For example, rotating it by 360 would make the node do a complete rotation. This is reversible.

Move Action Example

You have two options for moving nodes…

MoveTo – a string value in {x , y} format to move the node to.

MoveBy – a string value in {x , y} format to move the node by. For example, {0,50} would move the node from its current location by 0 points on the x axis and 50 points on the y axis. This is reversible.

Fade Action Example

You have two options for fading nodes (which affects the alpha property of the node)…

FadeTo – A number to fade the node to. The range would be a decimal value from 0 to 1, with 0 being 0% (completely transparent) and 1 being 100% (non-transparent)

FadeBy – A number to fade the node by, from whatever it’s current alpha value is.

Animated Textures Examples

Animating the textures of an Element is done through the following properties…

AnimateTextures – an Array containing image names to use as textures for the animation. These images do NOT need @2x.png in their entries.

FPS – the frames per second for the animation. So any value from 1-60. If excluded, the default is 60.

Resize – a Boolean YES or NO value to resize the textures to the size of the Element. If excluded, the default is YES.

Restore – a Boolean YES or NO value to restore the original texture of the Element after the animation has finished. If excluded, the default is NO.

If you stumbled onto this article, it is part of our documentation for the Story Tellers iOS Starter Kit 2. The kit enables you to make children’s book apps and games without writing any code! But it is Swift 2 based and compatible with iOS9 (or higher) and Xcode 7 (or higher), so kit buyers can even extend the functionality to fit their needs further. Some of what we cover in the kit documentation may apply to Xcode in general, so this article could be worth a read even if you aren’t a user. You can purchase Lifetime Updates the kit here, or subscribe Yearly to CartoonSmart and get the latest version, plus access to all of our other kits / tutorials.

We’ve also created an iBook to document the very latest properties in the kit, so be sure to download that as well.