My Creative Cloud Workflow Contest: 8 Way Character Animation

Posted on March 21, 2013 | 4 comments


I am getting feedback from pure creatives about not knowing how to do the dev part of the contest. It is ok to reuse and modify the example code I provided, so if you are a creative or dev but not sure how to do the other part of the contest make use of the examples provided. Hopefully you will learn something in the process and provide some insight in how you do your part of the task.


You must use one of the Adobe Creative Cloud products from: You can use any other technology in completing the themed task as long as one Adobe Creative Cloud product is used.

Create a video of how you accomplished the contest theme. The video must explain clearly how the task was completed, from creation to running the final code (See example videos below). Preferably the video will be around 5 minutes. All prizes are selected randomly so do not worry about the contents of the video affecting your chances of winning.

Once the video is published on a publicly accessible website, submit your entry to here.

All submissions will be reviewed and then posted to the contest page. I will also be tweeting them with the #myccflow tag, please use this tag when sharing your videos. All entries listed on the contest page are then entered into the prize drawing. The winner will be selected randomly within a few days after the entry deadline and posted on the contest page. You can submit as many different videos as you want but each video must use different tools and technology to be considered.

Prize and Entry Deadline

$100 Amazon Gift Card
Entry Deadline: April 30th, 2013 12:00 midnight +8 GMT (Pacific Standard Time)

Contest Theme: 8 Way Character Animation

Create the assets and code to render a character animation in eight directions (north, north-east, east, south-east, south, south-west, west, north-west). The animation must have at least 4 frames per direction. Can be 2D or 3D but must follow rules above.

Here is an image showing what I mean by the eight directions:
Eight Way Character Directions

Example Video Submissions:

Using Adobe Fireworks and Loom:

Using Adobe Illustrator and pixi.js:

Using Photoshop’s new Creative Cloud feature and CSS translate3D:

Using Flash Professional’s Generate Spritesheet feature and Starling:

Other Info and Links:

Adobe Creative Cloud
Source code on github for both video examples above.
A zip of all the examples above
If you have any questions or comments you can use the comment box below.
Free ways to do screen recording: On Windows CamStudio, and on Mac QuickTime


  • Franck Payen

    “At least 4 frames per direction”

    May I be lazy, only have two, and still compete ? I like the exercise, but since i won’t need it, spending too much time on the graphics will take me away from using it…

    • renaun

      As long as you talked about how you created the 2 frames of animation in the 8 directions that should be fine.

      • Franck Payen

        Should be ink and paper, at first, then Ideas + Ai i guess. Will see. Rest will be in Animate.

        • renaun

          Looking forward to seeing it.

  • Pingback: Creative Cloud Workflow Contest: 8 Way Character Animation | San Diego Adobe Developer User Group