Flarling

A Starling 2 animations converter and player

Description

Flarling allows you to export an animation from native Adobe's .FLA file format. It supports a limited list of animatable parameters only:

• position
• rotation
• alpha
• scale
• blendMode
• key frames may have different Transition modes
• Flarling uses Starling juggler to animate elements so it can be paused as other animatables

Flarling requires a specific .fla files which follow the following guidelines:

Guidelines

• Create a .fla file and add the graphic assets you will use in the library (preferably in a separate folder called "assets"). FLA files of future versions of Adobe Animate (2018 and later) might not be supported.
• Put each graphic assets element in a separate Sprite and drop these sprites into another folder (you may call it 'atlas' if you want to convert them into an atlas later).
• Create a number of MovieClips (preferably in a separate folder, too).
• Each animation movieclip should have an empty layer with keyframes labelled as you want ('idle', 'walk', etc.)
• Place the graphic assets sprites from the folder "atlas" on a separate layers of the animation movieclips, one per layer, and animate them. You can use classic tweens to animate objects smoothly. You can give a key frame a label equal to the one of Transitions so the sprite would be animated with a transition function specified. If may also add an empty keyframe to hide an element.
• (optional) right - click the folder "atlas" in the library and generate an atlas.
• Launch Flarling tool.
• (optional) Drag-and-drop .atf or .png atlases files you will use in your project (if you have any).
• (optional) Drag-and-drop .xml atlases files you will use in your project (if you have any).
• Drag-and-drop .fla file to be converted. Flarling will convert animations found in this file in into a .json file and save it in the same folder.

On the image below you can see an animation called "animation1" which has two keyframes ("idle" and "walk"). It consists of two images - "bubbles" and "star". Star has a custom pivot point and some of its keyframes have custom easing functions.

Using Flarling in your project

• Include flarling.swc in your project.
• Include .json file generated by Flarling tool in your project by embedding it.
• Initialize Starling AssetManager or its extension as usual.
• Point Flarling to the AssetManager to let it load the assets:

  Flarling.assetManager = AssetMan.INSTANCE;//for a custom AssetManager extension, or any other starling.utils.AssetManager instance

• Point Flarling to the animation file you've generated with the Flarling app:

  var convertedAnimations:Object = AssetMan.INSTANCE.getObject('animationsObject');
  Flarling.addAnimations(convertedAnimations);

• Create animations as usual:

  var animation:FlarlingAnimation = Flarling.getAnimation('animation_1');
  animation.gotoAndPlay('walk');
  addChild(animation);

Timing

Flarling will use your project's FPS so you will see 50 or 60 FPS animations with the same timing. That means, you can have your FLA running on 12 FPS and your mobile project running on 60 FPS.

Blend modes

Don't forget to register missing Starling blend modes before adding an animation which is using them.

Transitions supported

• easeIn
• easeInBack
• easeInBounce
• easeInElastic
• easeInOut
• easeInOutBack
• easeInOutBounce
• easeInOutElastic
• easeOut
• easeOutBack
• easeOutBounce
• easeOutElastic
• easeOutIn
• easeOutInBack
• easeOutInBounce
• easeOutInElastic
• linear

Texture atlas

You may use the same MovieClips to create a texture atlas to use with Flarling OR use another atlas with the same subTexture names including four zeroes "0000" suffix.

Pivot points

Starling AssetManager doesn't use pivot points from the atlas by default. To use them, download AssetMan extension class from the repository. Flarling lib detects if the AssetManager has property 'pivots' of class Dictionary and loads pivot points from it.