Warm Forest Flash Blog » ActionScript 3

Free AS3 Scrollbar: Fullscreen and Resizable

warmforest — Wed, 22 Apr 2009 16:12:16 +0000

In coincidence with the launch of my new Aspen template, I’ve decided to release for free the source code for the scrollbar I’ve been using in my other Flash templates. The scrollbar is coded in AS3 and will automatically resize according to the amount of content, unlike a lot of other Flash scrollbars. You can set the track color, grabber color, grabber press color, grip color, track thickness, grabber thickness, ease amount and whether or not the grabber is “shiny”.

Update [6-21-2009]: Now supports mouse wheel scrolling on the Mac using SWFWheel.

Here is a demo of the scrollbar in use. You can click “Add Copy” to see how it resizes:

You can also view a demo of it being used fullscreen in my Sycamore template.

Here is the usage for the scrollbar class:

// Arguments: Content to scroll, track color, grabber color, grabber press color, grip color, track thickness, grabber thickness, ease amount, whether grabber is “shiny”

_scrollBar = new FullScreenScrollBar(_content, 0×222222, 0xff4400, 0x05b59a, 0xffffff, 15, 15, 4, true);
addChild(_scrollBar);

» Download the demo and source code

Feel free to use this code in any way you want other than selling it.

Enjoy!

–

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

warmforest — Tue, 24 Mar 2009 01:55:42 +0000

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:

import flash.events.KeyboardEvent;

var framesToSkip:int = 30;
var isPaused:Boolean = false;
function arrowControl(event:KeyboardEvent):void {
if (event.keyCode == 38) {
gotoAndPlay(1);
}
if (event.keyCode == 40) {
if (isPaused == true) {
play();
isPaused = false;
}
else {
stop();
isPaused = true;
}
}
if (event.keyCode == 37) {
gotoAndPlay((currentFrame – framesToSkip));
}
if (event.keyCode == 39) {
gotoAndPlay((currentFrame + framesToSkip));
}
}
stage.addEventListener(KeyboardEvent.KEY_DOWN, arrowControl);

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

» Download the sample zip file

AS3 Dotted Line Class

warmforest — Thu, 15 Jan 2009 03:51:39 +0000

Here is an ActionScript 3 class I use all the time to draw pixel perfect dotted lines in Flash. You can set the line width, line height, color, alpha, dot width, and dot spacing. Simple but useful!

Dotted line preview:

Dotted line usage:

import com.warmforestflash.drawing.DottedLine;
var s:Shape = new DottedLine(630, 1, 0×603120, 0.9, 1, 2);
addChild(s);

Dashed line preview:

Dashed line usage:

import com.warmforestflash.drawing.DottedLine;
var s:Shape = new DottedLine(630, 1, 0×603120, 0.9, 10, 8);
addChild(s);

» Download the zip containing the class and the above samples

Feel free to use it in whatever way you see fit.

Top 8 Resources for Learning ActionScript 3

warmforest — Thu, 08 Jan 2009 14:31:35 +0000

After having made the switch to AS3 about a year ago I have to admit it was a huge pain for me to upgrade from AS2. A lot of that was due to the wrong approaches I took (reading a 900 page book straight through is not recommended, for one). So keep reading and learn from someone who has made the switch. And in the end learning AS3 really will make your life easier. And note this is coming from someone with a design background so I’m not some super-genius computer nerd who has been programming in BASIC since he was three. It is possible for non-coders to learn AS3.

Update: The ActionScript 3.0 Quick Reference Guide by David Stiller, Rich Shupe, Jen deHaan and Darren Richardson has been recommended to me by several readers. I haven’t personally read it but it is supposed to contain some good info on transitioning from AS2 to AS3, so I thought it deserves an honorable mention.

8. Essential ActionScript 3.0 by Colin Moock

This is the Bible for ActionScript 3. I saw it recommended in so many places and with so much enthusiasm that I figured it was all I needed. “If I read this book straight through I’ll be an AS3 expert”, I remember thinking. So I mustered all my will power and actually read the book cover to cover. It took two months for me to finish it. Was I instantly an AS3 expert afterwards? Hardly. Granted it did give me a good exposure to pretty much everything you’d ever need to know in AS3 but it was just so much information at once that it kind of scrambled my brain. The book goes into extreme detail about every topic in AS3. Way more than I needed to know.

Not that it’s not a great book though. It still has a permanent place next to my computer and not a day goes by programming that I don’t look up something in its sprawling 900 pages. Great for a reference book, yes, but not so great to start learning from. Which brings me to…

7. Learning ActionScript 3.0 by Rich Shupe with Zevan Rosser

Ok this is much better. Why didn’t I start with this book? Very easy and quick to read. It lacks the level of detail of Essential ActionScript 3.0 but really you can look up the details when you actually need them. It’s all in color too which makes it much more pleasurable to read, especially for a designer.

6. Lynda.com

Lynda.com has a nice collection of videos on AS3. I actually haven’t watched any of their videos on AS3 but I used their videos quite often when I was first learning AS2. You do have to pay for them but they have always been pretty high quality. You can get an annual subscription to watch all their videos for a year for $250 but it’s probably a better deal to do the $25 a month plan and try to watch all the AS3 titles in the first month or two.

5. Senocular’s Getting Started with ActionScript 3.0 in Adobe Flash CS3 Tutorial

Although Senocular states it’s still “a work in progress” this tutorial contains a ton of awesome info on learning AS3. The fifth page of the tutorial is particularly good as it gives a nice overview of classes for someone new to Object Oriented Programming. Probably the best first site you’ll want to read through for a good overview of AS3.

4. Senocular’s ActionScript 3 Tip of the Day

Senocular makes the list again with his never-ending forum post of ActionScript 3 tips. Even though some of the tips are from 2006 they are still completely relevant today. I always learn something new whenever I skim through the pages.

3. gotoAndLearn()

Lee Brimelow is a great man. He spends his days creating videos showing you how to do things in Flash. And it’s not boring, irrelevant stuff either. It’s cool, useful stuff like using Papervision3D and Tweener. And best of all it’s completely free. Highly recommended.

2. Flash Help Documentation

The help documentation inside Flash is probably the most overlooked resource. Everything you need to know is right there and it’s written surprisingly well for a help file. Lots of examples are given showing actual code usage. I constantly see people posting on forums asking how to do things when a simple search in the help file would tell them everything they wanted to know. Need to know how the drawing API works? Just look it up! It’s all there. You can even view it online.

1. Google

This might sound stupidly obvious but honestly just searching on Google for what you immediately need to know is the best way to learn AS3. There are so many random blogs out there and forum postings just filled with great info about whatever you need to know. Instead of going to a specific website or picking up a certain book I always find myself just going to Google time and time again.

I always thought once I became a good programmer I would just automatically know everything off the top of my head and I’d be able to just write programs straight through without referencing anything. I keep expecting that day to come but it never has. And it probably never will. Learning really is a never ending process. No matter how much you know you will constantly be thinking “What’s the best way to do this?”, “Is this even possible to do?” and “How have others solved this problem?”.

The best advice I can give is to just start creating a project in AS3 and figure it out as you go. My experience is if I need to know it to complete a project I’ll learn it – if I read it in a book I’ll just glaze over it and have to look it up again later. So if you wait until you “know” AS3 before taking on a AS3 project you’ll never do it. The right time to make the switch will never come. So just jump in and do it using the resources above as your guide.