Simple Sanity-Saving Tip for All Timeline-Based Flash Projects

Here is a simple code snippet to use with any timeline-based Flash project that will save you from pulling your hair out. If you are like me you still occasionally find yourself doing Flash projects that are strictly timeline-based. No matter how much you love doing class-based AS projects, there are certain projects that just make sense to do with the timeline. Think banner ad animations and linear “Flash commercial” type projects, where it’s just two minutes straight of animation.

Testing these projects inside of Flash is a pain. If you are testing the movie and there is a certain section of the movie you want to review, you always end up having to sit through parts of the movie waiting for the part you want to come up. Anyone who has had to work with a 3,000 frame timeline knows what I am talking about.

The solution is simple but I can almost guarantee that once you use this trick you will start using it every single time you are working with a timeline.

The trick is to add keyboard arrow controls to the movie.

Up restarts the movie.

Down pauses/unpauses the movie.

Left jumps back 30 frames.

Right jumps forward 30 frames.

Now when you are testing you can just press the arrows to jump through the movie to get to the different parts.

So if you want to review how a certain text transition looks, or pause the screen to double check you have the correct copy, or skip ahead to a certain part of the movie to review, just use the arrows.

Add this script to the first frame of your animation and you are all set:

  1. var framesToSkip:int = 30;
  2. var isPaused:Boolean = false;
  4. function arrowControl(event:KeyboardEvent):void {
  5.  if (event.keyCode == 38) {
  6.   gotoAndPlay(1);
  7.  }
  8.  if (event.keyCode == 40) {
  9.   if (isPaused == true) {
  10.    play();
  11.    isPaused = false;
  12.   }
  13.   else {
  14.    stop();
  15.    isPaused = true;
  16.   }
  17.  }
  18.  if (event.keyCode == 37) {
  19.   gotoAndPlay((currentFrame – framesToSkip));
  20.  }
  21.  if (event.keyCode == 39) {
  22.   gotoAndPlay((currentFrame + framesToSkip));
  23.  }
  24. }
  26. stage.addEventListener(KeyboardEvent.KEY_DOWN, arrowControl);

Feel free to download the example and use it however you like.

ยป Download the sample zip file


Related posts:

  1. AS3 Dotted Line Class
  2. Accessible Flash Nav: Right-Click Links to Open in New Window Using AS3
  3. Free AS3 Scrollbar: Fullscreen and Resizable
  4. Flash AS3 Contact Form Using PHP
  5. Top 8 Resources for Learning ActionScript 3

10 Responses to “Simple Sanity-Saving Tip for All Timeline-Based Flash Projects”

  1. 1 samBrown

    I know exactly what you mean…previewing long animations over and over gets old. Never though to add this type of functionality – thanks for the insight!

  2. 2 nuinosis

    Thank you for the tip!

  3. 3 ender

    I added something like this to a couple of the longer animations I’d done – but for some reason it didn’t occur to me to code the arrow keys. Instead, I made a little navigation bar that I inserted into movies I was working on/testing – of course then I had to press buttons instead of using the handy keystrokes. this is a much better solution!

  4. 4 Lindsey

    If I won the Aspen Flash template, I’d use it for our non-profit film and art school we pioneered that offers free CG modeling, video camera, lighting, & editing skills for at-risk youth

  5. 5 Ann E.

    If I could reach your feet, I would fall down and slather them with grateful kisses. I’m working on a 4+ minute slideshow, and trying to preview beyond the first 30 seconds has been driving me nuts. This is an AWESOME solution!!!!!!!!!!!!!

  6. 6 Erik Wallace

    Nice suggestion, I could have used this for an animation I did recently. I was using a simple gotoAndPlay(); action but this is a more elegant solution

  7. 7 bruno

    Clever! my hair will remember you when the time comes… :)

  1. 1 Simple Sanity-Saving Tip for All Timeline-Based Flash Projects - Creattica Daily
  2. 2 Simple Sanity-Saving Tip for All Timeline-Based Flash Projects | Programming Blog
  3. 3 Simple Sanity-Saving Tip for All Timeline-Based Flash Projects | Best Web Gallery - Flash Gallery - CSS Gallery - Web Design Inspiration - CSS Web Gallery - Designing Gallery

Leave a Reply