Like what you see? Buy the book at the Focal Bookstore How to cheat in Adobe Flash CS3 Chris Georgenes ISBN 978-0-240-52058-2 How to Cheat in Flash The default layout for Flash, above, is suitable for most users, but in time can become limiting. The addition of a few custom extensions and commands, right, can add a whole new toolset to Flash and an enhanced workflow. 226 ch12.indd 226 7/9/2007 11:13:36 AM in Flash Extending Flash 12FLASH OFFERS A WIDE ARRAY of features for designing and animating. As great as it is, Flash can sometimes lack some of the functionality that you might benefit from. There always seems to be some drudgery that ought to be automated or some desperately needed tools that simply don’t exist. Other than petition Adobe for these coveted new features, what’s a poor “Flasher” to do? Thankfully, since Flash MX 2004, the curious and proactive Flash user has an alternative: Flash JavaScript, or JSFL for short. JSFL is a scripting language that interfaces directly with the Flash authoring environment. In a nutshell, it allows you to create your own Flash extensions. 227 ch12.indd 227 7/9/2007 11:13:36 AM ExtendingExtending Flash Flash 12 Introduction to JSFL Contributed by Dave Logan www.dave-logan.com Select the Rectangle tool r and draw a rectangle. As 1 you can see, the History panel behaves like it does in most Adobe programs, compiling a list of your actions. N EXTENSION is basically Aa plug-in, something that is added to Flash and extends its functionality. JSFL only affects the Flash authoring environment (i.e. Flash CS3) and has no effect on published Flash Player files (i.e. .swf files). The best part about JSFL is that anyone can use it to speed up and improve their workflow. JSFL is based on the ECMAScript standard, which means it’s very similar to other languages based off the standard, such as JavaScript and ActionScript. If you don’t know anything about programming, you’re still in luck. You can create custom commands without touching a line of code. The best way to dive into JSFL is to play around with the History panel. To open the History panel, go to Window > Other Panels > History. Now go to the Commands menu, and lo and behold, 5 there it is! Your very first Flash command. You can make all kinds of simple commands like this. If you find yourself doing some simple action over and over, create a command for it! 228 ch12.indd 228 7/9/2007 11:13:38 AM How to Cheat in Flash Select the Rectangle and delete it. Select the first event, Rectangle, Now let’s make it into a command. 2 You’ll see each action added to the 3 which popped up when you drew 4 Click the floppy disk icon in the History panel. the rectangle. Press the “Replay” lower right-hand side of the History button. Voila! The original rectangle panel to save this command. Name it reappears. something like “Create Rectangle”. HOT TIP To add your own shortcuts, you have to create your own shortcut set. It’s easy. In the Keyboard Shortcuts window, click the little Duplicate Set button with two pieces of paper and an arrow at the top right. Name your set (it doesn’t matter what) and press OK. Now you can modify and Afterwards, you can access the There is a catch, however. Use the Brush tool to draw something on the stage. add your own 6 command even more easily by 7 Look in the History panel. Notice the little red X next to the Brush event? That shortcuts. assigning it a shortcut by going to Edit means that you can’t use it in a command. To put it simply, Flash treats some tools > Keyboard Shortcuts. a little bit differently than others, and because of that you can’t use them in your SHORTCUTS commands. The important thing to know is that the History panel can be used as MAC WIN BOTH the foundation of custom commands. This goes far beyond replicating rectangles. 229 ch12.indd 229 7/9/2007 11:13:41 AM ExtendingExtending Flash Flash 12 Trace Bitmap and JSFL ET’S SAY YOU’RE WORKING Lon a project and decide to give some video an artsy First, you need to apply the Trace Bitmap effect to one image. Import the rotoscoped effect. A great way to 1image sequence from the CD by selecting File > Import > Import to Stage and achieve this in Flash is with the navigate to *image_sequence001.png*. Select image_sequence001.png and click Open. A menu will pop up asking if you want to import all of the images in the Trace Bitmap command. Trace sequence. Click Yes. Bitmap converts bitmap images into vector graphics that can be edited using Flash’s drawing tools. Using a video program such as After Effects or QuickTime, you can export the footage as a sequence of images and import them into Flash, ready to be traced. But the Trace Bitmap command only works for one image at a time. That means to trace a series of images, you must tediously apply the effect to each and every image. Luckily, this is just the type of task JSFL excels at automating. The Trace Bitmap panel also allows you to preview your current settings 4 before committing to them. Change any of the setting values and click on “Preview” to see how they will affect your image. When you’re happy with the results, click “OK”. Depending on the complexity of the image, Flash will pause briefly while it converts the image into a series of vector shapes. 230 ch12.indd 230 7/9/2007 11:13:43 AM How to Cheat in Flash HOT TIP Be careful about your Trace Bitmap settings. The more complex your images are, the more vector information may be generated during the trace Each imported image will be placed in its own keyframe Select the image in frame 1. Go to Modify > Bitmap > function. This 2 on the main timeline. You can play your movie to see 3 Trace Bitmap. In the Minimum Area box, type “5”. This can quickly the “video” play as a sequence of frames. makes Flash re-evaluate what color to use for every 5 pixels lead to a very instead of every 8, which produces a more realistic looking processor- trace. Don’t click “OK” just yet. intensive Flash movie, especially if you plan to animate these images. It is also common for the resulting trace to create a larger file size than the imported bitmap alone would. Resize your images as small (width and height) as you can and your sequences as short as possible before importing into Flash. Next, right-click on the History panel and select View Don’t worry if the first set of numbers is a bit different 5 > JavaScript in Panel. The History panel will update 6 than yours. They correspond to the exact coordinates itself, displaying the JavaScript for the commands you just on the screen that you clicked on to select the image. Copy executed. these steps by selecting them, right-clicking and selecting SHORTCUTS Copy Steps. MAC WIN BOTH (Continued...) 231 ch12.indd 231 7/9/2007 11:13:48 AM ExtendingExtending Flash Flash 12 Trace Bitmap and JSFL (cont.) (Continued...) Go to File > New and 7 select Flash JavaScript File. If you are not running OW DO I KNOW about Flash CS3 Professional, all this JSFL stuff? you’ll notice there is no H option to create a new Flash Maybe you are thinking I JavaScript File. Don’t worry, have all of the JSFL methods just open up a text editing program like Notepad and and arguments meticulously carry on. JSFL in the end is memorized? Not exactly just a text file, so it doesn’t matter how you create it. (although that would be Paste the code that you convenient and pretty copied from the History panel. impressive at the next Flash conference I attend). The secret is, I clicked on the word mouseClick and the Let’s shorten the word traceBitmap and hit 9 code we have so far to something a bit more F1 (Flash help docs). Flash’s manageable. We’ll do this by Help panel popped up and creating a variable. Add the code to the beginning of the instantly took me to the existing code. entries I selected for these methods. Whenever you get stuck or confused, your first While we’re at it, stop should be the help docs. 11 let’s define a few more variables. The first new variable, tl, is another abbreviation. It refers to the document’s timeline. The curLayer variable refers to the currently selected layer (which it gets from the currentLayer method), and the curFrame variable refers to the current frame we’re on (which, again, it gets from the currentFrame method). 232 ch12.indd 232 7/9/2007 11:13:50 AM How to Cheat in Flash Let me explain a bit of the gibberish 8 that you’re looking at. The fl at the beginning of both lines refers to, you guessed it, Flash itself. The getDocumentDOM() method tells Flash that we wish to work with the currently active Flash document. Both mouseClick and traceBitmap are pretty self- explanatory; the former is the method that describes a single mouse click, and the latter is the method which actually turns the image into a bunch of vectors.