A library for bridging CreateJS animations from Flash for use in Pixi.js. Publish Flash content like you normally would for CreateJS (with an HTML5 Canvas document), but export for Pixi.js instead. While there are some known issues with this approach, it produces fast animation playback for WebGL and is superior to using Flash's WebGL document.
Game Examples
The animation in these games has been created and exported with PixiFlash.
Examples
Animated examples are from Fizzy's Lunch Lab and used with permission from Lunch Lab, LLC
Flash Publishing
Install Publishing Helper (optional)
Install the post-publish tool by running tools/install.jsfl. This provides some error checking when publishing for PIXI Flash, including error checking images and symbol namespaces.
Flash Setup
- Make sure you use a Flash "HTML5 Canvas" document type
- Change the publishing settings under JavaScript Namespaces
- Symbols: pixiflash_lib
- Images: pixiflash_images
- CreateJS: pixiflash
- Publishing document
Running Content
Installing Library
To run content exported with PixiFlash, you must load the JavaScript library within your project. You can install using Bower or NPM:
Bower
bower install pixi-flash
NPM
npm install pixi-flash
Dependencies
Usage
Here's a example using PIXI where the images were assembled using TexturePacker. See the example folder for an example which uses the Flash SpriteSheet exporting.
var renderer = 800 500;var stage = ; // Load the atlas for the charactervar loader = ; // This atlas is created with TexturePacker from the // output individual images from Flash publishingloader;loader;loader; // Normal render;{ ; renderer;}
Known Issues
- Abutting vector shapes create a small seams which make it possible to see the color underneath (similar to EaselJS)
- Complex shapes with a negative shape inside of it only render the outer-most shape. For example, a donut shape would only render the outer circle and not the hole.
- Cannot "Test Movie" in side of Flash to preview the animation
- Flash Color Effects are supported only for Advanced style multiplicative color changes (RGB percents) by translating to PIXI 'tint' property. Additive color effects such as Tint, and the additive RGB modifiers in the Advanced Color Effect style will be ignored. The Brightness effect is only capable of darkening the symbol (Brightened symbols will be rendered darker than original). Keyframes and tweening of Color Effects are not supported.
License
Copyright (c) 2015 CloudKid
Released under the MIT License.