Squall.no

Squall. AE to iOS

Squall is a tool to read vector animations from After Effects and reconstruct those animations in code. Since it operates on vectors only (with very few exceptions) effects are generally not supported.

Squall consists of three pieces: the After Effects extension, the SDK and the app.

After Effects Extension

The After Effects extension reads the active composition and outputs any relevant animation data to a sqa file. The sqa file can later be used in conjunction with the SDK to build a production-ready, code-based animation.

The Squall extension also manages the communication with your iOS device. It allows you to quickly preview animations in either the Squall app or your own app running the Squall SDK.

SDK and App

The Squall SDK uses the output sqa files to construct production-ready animations. It can also communicate with the After Effects extension and preview any AE animations live in the context of your app.

The Squall app provides a quick way to get up and running and to preview animations on your iPhone or iPad.

Installation

For help on installing the SDK, click here.

Get the Extension + SDK Get the App

The Squall extension requires at least After Effects CS 2015 (Win/Mac). The SDK and app will run on iOS 8.0 and up.

Trial Mode

The trial version of the extension and SDK is limited to one second previews. The clipboard functionality is not restricted.

After Effects

The extension needs network access to connect to your iOS device and it needs be able to output animation files. Go to

Preferences -> General and check "Allow Scripts to Write Files and Access Network".

You will find the extension in Window -> Extensions -> Squall.

Add License Key

Click the key icon in the extension and paste-in your license key to unlock Squall.

Interface

Connecting your iOS Device

The Device field lets you connect to your iOS device. Your device must have the Squall companion app installed and running. Alternatively you can also preview your animation in an app running the Squall SDK with live preview enabled.

Enter the name or IP address of the device you want to connect to. The companion app or the SDK will provide you with the relevant information on startup. Note that on Windows only the IP address will work.

Press enter to connect. A blue icon will indicate if the connection succeeds.

Trouble connecting

Should the connection fail the icon will turn red. In that case double check the address of your device, make sure that the device and your computer are running on the same Wifi network and that your router and any program (e.g. anti-virus software) you might have installed do not interfere with or block port 8080.

Output

The ouput field lets you specify a location for the sqa file written by the plugin. The sqa file can later be imported into Xcode and used in conjunciton with the Squall SDK to play or edit your animation in a production-ready app. The file can be used to construct both Squall and Core Animations; the settings toggle only applies to the preview. It will be updated whenever you press the preview button.

An output file is not necessary for previewing alone.

Render

Clicking render will cause Squall to parse the currently active composition and construct animation data to be read and interpreted by the SDK. The data will be stored in file specified by the output field and sent to any connected device. Depending on your network and the size of the composition as well as any nested compositions you should see the results almost instantaneously. Image assets will show up with a delay.

Analyze

The analyze feature will look through the active composition and flag any possible conversion problems. Some problems may be ignored, for others the analyzer will float suggestions as to how your can improve conversion.

While it won't catch every possible roadblock (especially with dynamic expressions) it should help resolve the most glaring ones.

Tools

Presets

Select a preset to build a composition tailored to the most common iOS devices.

Dynamic Expression Tools

Dynamic expression tools will add a null with expression controls to your composition. These controls represent a set of iOS device inputs (such as accelerometer or touch input) that you can reference or pick-whip from any expression in your composition.

When you preview your composition with the companion app, Squall will substitute these values and evaluate the expressions on the device.

Note: These features will only work when you are using the Squall companion app. But you can easily set this up for your own app and do a lot more. Check out the Squall github repo and reference section for examples.

Settings - Rendering

Render settings will change what is written to the sqa output file and can limit or enable certain functionalities when you later reference it in your app.

Dynamic Expressions

Squall can evaluate expressions in two different ways: On your computer when your render the file. Or dynamically on your device when you play the animation.

Dynamic expressions are a great way to make your animations more interactive. It does, however, mean that Squall will evaluate expressions whenever the animation is played which can be very CPU intensive. See the expression section below to find out pros and cons.

Include Hidden Properties

By defaut Squall will skip evaluating hidden properties. You can force Squall to evaluate them and include them in the file.

Include Hidden Layers

Squall will also skip evaluating hidden layers by default (except for guide layer or alpha mattes). If you are referencing hidden layers from any expressions or using them as parents for visible layers you can force Squall to evaluate them and include them in the file.

Settings - Misc

Core Animation (Limited)

Squall supports two types of animations. The core animation toggle can force the SDK to interpret the data as a regular core animation. The toggle does not influence what is written into the output file. See the discussion below to see if this might make sense for you.

Auto Update

Auto update will ensure that the Squall After Effects extension is always up to date.

To update the extension manually go to credits pane in the extension and click "Check for Update". You can also download the latest installer from the Squall website.

Send Animation with Crash Reports

If you encounter a crash in the companion app, Squall can send your animation data along with any reports. This helps us identify the source of these crashes and prevent them in the future.

Squall will only send this data if you have the "Send Animation with Crash Reports" toggle enabled. You will also need to make sure that crash reporting is enabled in the companion app (via the cog icon).

Clipboard

The clipboard feature allows you to generate quick and easy code without the need for external files or the SDK.

To generate an animation, select an animated layer property and click "Clip".

Click the camera icon to generate a static, simplified snapshot of the composition.

The snapshot and clip feature will not capture all the intricacies of your composition or support all possible animations. For very complex compositions you should render to a sqa file instead.

Supported Features

This section will present a list of After Effects features that can be translated to Squall or Core animations.

Animation

The standard After Effects interpolation types are supported. Currently Core animations does not, however, support mixing hold interpolations with the other interpolation types within the same property.

Squall Animation

Core Animation

Linear Interpolation

Bezier Interpolation

Hold Interpolation

Layers

Squall supports 3D animations for most properties but the perspective for 3D animations can currently deviate quite a bit from After Effects. Spatial interpolation (moving along a path) is supported but Core animations will display inaccuracies for certain types of path animations.

Squall Animation

Core Animation

Transform Anchor Point

Transform Position

Transform Position Separated

Transform Scale

Transform Rotation

Transform Opacity

Visibility

Shape Layers

Merging paths is supported in so far as to support converted text and Illustrator files. Paths within the same scope (i.e. group) are always merged.

Path trimming is implemented as animating the stroke only (it is not actually trimming the path). When using path trimming in conjunction with merged paths, the merged paths are treated as one. Offsetting a trimmed path only operates on the last path that was merged in.

Squall Animation

Core Animation

Path

Merge Paths

Merge Only.

Trim Path Start

Stroke Only.

Stroke Only. Inaccurate.

Trim Path End

Stroke Only.

Stroke Only. Inaccurate.

Trim Path Offset

Rectangle (All)

Ellipse (All)

Polystar (All)

Stroke Color

Easing is ignored.

Stroke Width

Line Cap

Line Join

Stroke Dash

Stroke Gap

Stroke Dash Offset

Fill Color

Fill Opacity

Gradient Type

Gradient Start Point

Gradient End Point

Gradient Colors

Save project before previewing.

Gradient Highlight Length

Gradient Highlight Angle

Transform Anchor Point

Transform Position

Transform Scale

Transform Rotation

Transform Opacity

Text

Squall supports simple text fields. Please note that only fonts available on the iOS version the Squall SDK is running on will be faithfully represented. iOSFonts.com provides an up to date lists of the available fonts. Missing fonts that may be available on your computer but not on the device will be replaced with the iOS system font.

Text placement is not pixel-perfect accurate but very close to.

Squall Animation

Core Animation

Color

Font

As available on iOS

Font Size

Alignment

Tracking

Text Animations

Text animations are only supported for Squall animations. The randomizer will produce different randomized orders than AE.

Squall Animation

Core Animation

Start/End/Offset

Units

Based on

Mode

Add/ Subtract

Amount

Shape

Smoothness

Ease High/Low

Randomize Order/Seed

Order differs from AE

Opacity

Position

Scale

Rotation

Anchor Point

Tracking Type

Fill Color

Fill Opacity

Fill Saturation

Fill Hue

Fill Brightness

Masks and Mattes

Masks and simple alpha track mattes are supported. Support for nested masks or masked layers with track mattes is currently limited. All masks are treated as additive.

Squall Animation

Core Animation

Alpha Matte

Masks (Add only)

Expressions

Squall can evaluate expressions in two different ways. It can preevaluate ("bake") them on your computer when you render the animation. Or it can evaluate them dynamically on your device while playing the animation.

While baking takes long to render it has the advantage that baked expressions are performant when you play the animation. But once an expression is baked it cannot be changed. Also baked expressions are guaranteed to serve the values that you see in After Effects.

Dynamic expressions are evaluated on the device. They react to changing values and are an easy way to use device input for your animation. But the more complex the expression the worse it will be for performance. Short dynamic expressions, however, can be as or even more performant than baked expressions.

It should be noted that dynamic expressions are in still in beta and may yield incorrect results.

For dynamic expressions, Squall also does not support every expression function or value that After Effects supports. Some values and functions may make sense for a motion graphics authoring software such as After Effects but less so for a real-time animation framework on mobile (e.g. color depth). Things like camera or lights are disregarded as well since they are not supported and therefore their property values are not written to the output file.

In general, baked expressions are recommended if you do not need interactivity or want Core Animation support.

Please note that devices running iOS 10 will be able to resolve more edge cases of dynamic expressions. So be sure to test devices running iOS 10 as well as iOS 9 or older if you intend to deploy an animation with dynamic expressions.

Baked Expressions

Dynamic Expressions (Beta)

Interactive

Core Animation Support

Render Time

File Size

Performance

Accuracy

Parenting and Nulls

Parenting and nulls are supported for both Squall and Core animations.

Images

Squall supports previewing images of common bitmap formats (png, jpg etc.) embedded in the After Effects composition. When previewing the images do not have to be on the device or be part of the app.

When parsing an sqa file with the Squall SDK, however, the SDK will look for the images in the main bundle of app. They are not embedded in the sqa file.

Illustrator files (.ai) are not supported but can be converted to shape layers in After Effects and will then be embedded in the animation and sqa file.

Squall vs. Core Animation

Squall currently supports Core animations as an experimental feature.

The main difference between Squall and Core animations is that Squall Animations are calculated on every frame while Core animations are (typically) setup once and then run.

Having frame-by-frame control allows for more complex animations, composite properties and therefore is typically more faithful to the After Effects original. Core animations, however, are less susceptible to stalls on the main thread which makes them suitable for animating when the main thread is under heavy load, e.g. spinners or interface transitions. They are also less CPU-intensive.

Position keyframes in Core animations with enabled spatial interpolation (drawn out path curves between keyframes) can diverge noticeably from the After Effects original. Squall animations will usually deliver a better result. Alternatively you can also attach an empty expression to the affected property and force the values to be baked in.

Overshoot and Undershoot

Core animations do not support overshooting or undershooting a value (see image).

The curve handles always have to stay within the rectangle formed by two consecutive keys.

Squall animations support both over- and undershooting.