Jump to content


Animated Spritesheets exported from Flash

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Not sure if this should be Flash or JS, but its a crossover project.


I've recently been working on a big campaign, that uses a large amount of character animations, and our team was using a mixture of Flash and After Effects to achieve these great animations.


Then came the mobile placements, and I found that the actual delivery platform itself had no support for canvas or easelJS and barely any SVG support. So I ended up creating spritesheet animations using CSS and manually setting up frame by frame animations in Illustrator, the problem was now that these animations didn't match what the rest of the team was doing in Flash.


So I looked into exporting the spritesheet from Flash itself so it would capture frame-by-frame movements, but the issue was Flash Spritesheets place the character in an X and Y fashion, rather than all being on 1 line.


I played around with a Codepen to make it work and used the onUpdate ticker to make it work with an array of all the possible background positions.


Then I thought, why not make this an export option straight out of Flash?


Its a little work-in-progress, but I hope this gives an idea of what I wanted to achieve. It just exports out a HTML page that uses GSAP to animate the background position from an array dataset.


See the Pen mJbLyO by joemidi (@joemidi) on CodePen

  • Like 1
Link to comment
Share on other sites

Very cool, Joe. Thanks for sharing.


Someone recently asked how to do a spritesheet animation with a grid as opposed to a single row.

I took a slightly different approach.

  1. I use a nested loop to iterate over every x/y position of each sprite in the grid
  2. add a set() to a TimelineLite at a fixed interval with the appropriate backgroundPosition
var tl = new TimelineLite({onUpdate:updateSlider});
var count = 0;
for (var r = 0; r < rows; r++){
  for (c = 0; c < cols; c++){ 
     var xpos = -c * gridWidth;
     var ypos = -r * gridHeight;
    tl.set($target, {backgroundPosition: xpos + "px " +  ypos + "px"}, count * interval);

You can see it in action here: http://codepen.io/GreenSock/pen/NqWqzQ/?editors=001


The benefits are:

  1. a little less code
  2. by using a TimelineMax instead of a single tween as the main controller it would be possible to add labels so you could eventually do stuff like
    • tl.play("jump")
    • tl.tweenTo("jumpEnd");
    • tl.tweenFromTo("jumpStart", "jumpEnd");
    • tl.pause("sit");

A flaw in the setup of my file is that it assumes the spritesheet will have an image in each section of the grid. As your example shows its  very likely that the last row will not be completely filled. I should definitely account for that with a maxCount, but hopefully the idea of putting set()s inside a timeline makes sense.


Also, I'm not saying that my way is better than yours. Yours works great and I'm sure there are some benefits to having all the values in the Array as they can be easily accessed multiple times.. perhaps if you wanted to create individual animations based on just a starting and ending index. I just wanted to share a different approach.


I have to admit that I haven't spent much time in the Flash IDE in the past 3 years and I'm really not up to speed on the workflow aspects of the HTML5 spritesheet export or using custom JSFL scripts.  I think to sell people on the benefits of this script a very very short screencast showing the workflow would go a long away. Just a suggestion that might help it spread to more users. 


Again, thanks for sharing. Really cool to see people extending the use of our tools in this fashion.

  • Like 3
Link to comment
Share on other sites

Hey Carl, 


Thanks for feedback!


I just wanted to share with the GSAP community and to see if others were doing similar stuff. My code was really just a quick solution to a problem, as I had deadlines to meet, but I can see how useful using TimelineMax would be, especially if you were to develop this into a game, and your code is much cleaner than mine!


Unfortunately, the Flash IDE has a lot of limitations on the information you can export and doesn't really have much documentation (that I could find) on what is available. It just iterates over each frame, so creating an array with default values was the easiest option. Also the export also has an option to Stack Frames which removes frames that are duplicates, so you could make the resulting sprite sheet a little lighter in file weight.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.