Category Archives: Flash CS3

Security flaws in FLA files

FLA is one of these file format that we’re used to freely open without any fear. Our complete confidence is going to change since a new exploit has been found. This exploit enable an attacker to manipulate an FLA file in a way that, when loaded into the Flash CS3 or 8 IDE, it will execute arbitrary code on our machine.

No need to panic, it’s unlikely that too many of the malicious FLA files are floating around. Just don’t run any untrusted FLA files until Adobe will issue the fix.

More info

Technical info

Call me now! Jajah new Flash widget

We’ve just released the Jajah Buttons which enables you to receive calls from your website, blog, online community, email, etc’ directly to your phone and all that without revealing your phone number. Check it out, call me now.

The Jajah button let’s you determine when, where and to whom you are available for calls. It also give you a permanent short link that leads people straight to your phone. You can always reach me with this url – jajah.com/guy

The Flash widget is completely customizable in size, colors, supports multiple languages and have a unique look and feel. The widget was developed in Actionscript 2.0 mainly for compatibility reasons, it was intended to be released some time ago, before the Flash 9 Player reached 90%. Over that time it was overdeveloped with many features and a complete set of controls that were developed from scratch. Many of these features did not make it to the final (first) release, but, are ready to be put back in when the time is right, so stay tuned if you’re interested in this kind of stuff.

The Jajah Button graphics were designed by the uber talented crew at Ichiban.

Jajah widget colors

Call animation:

Jajah widget call animation

Developing Actionscript 2.0 controls is a tiring and unappreciated task. Show it to a non-flash developer and they’ll tell you – “thats nice but I have that in HTML also, I simply write an input tag…”, they simply can’t see the difference. This strengthen my feeling that some people, mainly developers, are color blind and can’t differentiate between a circle and a box ;). If Microsoft is expecting these guys to do something appropriate with Silverlight, then they shouldn’t, cause it ain’t gonna happen.

Using the macromedia’s V2 components, as always, didn’t seem right. The Flash CS3 Actionscript 3.0 component set, although modest, looks like something that is more reasonable to inherit from. To complete your set, take a look at yahoo’s Flash components.

This is the code I used to embed the Jajah flash widget inside this post using the Kimily Flash Embed wordpress plugin. There are more parameters you can add to make its colors look more like your style, check the editor for that. The Jajah Buttons Editor also gives you the code snippet suitable for your needs.
[code] [/code]

Screenshots from the editor:

Customize colors and size

Editor - Customize colors

Set your availability

Editor - Availability 1

Countries you wanna get calls from

Editor - Availability countries

Callers blacklist

Editor - Availability blacklist

For more info go here…

Too much focus will kill you

I’ve just came across of a way to kill the Flash player with a few lines of AS 2.0. I know of at least one other way of killing the Flash player along with it’s host, may it be the browser or the Flash IDE, but this was with the old 7th player, this time we’re talking about the latest 9th version. It’s a little awkward, and don’t ask me how I got it, but, it involves a MovieClip, a TextField, Selection, Macromedia’s Delegate, a filter, and a trace, yeah, it won’t work without a call to trace. I think the main trouble maker is the Selection.onSetFocus, but, I couldn’t recreate it without any of the above ingredients, and I have a feeling that AS2’s trace is also problematic in Flash Player 9. (You should anyway “Omit trace actions”, from the settings, when publishing swfs)

Focus Kills

I haven’t tried it, but, I doubt that it can be recreated with AS3 on the VM2, it’s the VM1 that we have to carry along for backward compatibility that causes all this trouble. I tested it on some different machines with different Flash players and so far it crushed them all, here is the list:

Ver: WIN 8,0,22,0 | Debug: true | OS: Windows XP
Ver: WIN 9,0,16,0 | Debug: true | OS: Windows XP
Ver: WIN 9,0,28,0 | Debug: false | OS: Windows XP
Ver: WIN 9,0,45,0 | Debug: false | OS: Windows XP
Ver: WIN 9,0,45,0 | Debug: false | OS: Windows (Server 2003)
Ver: WIN 9,0,45,0 | Debug: true | OS: Windows Vista
Ver: WIN 9,0,45,0 | Debug: false | OS: Windows Vista
Ver: WIN 9,0,47,0 | Debug: false | OS: Windows Vista
Ver: MAC 9,0,28,0 | Debug: false | OS: Mac OS 10.4.9

Copy this code into an empty FLA first frame, or download the source below to see how it goes.

var mc:MovieClip = this.createEmptyMovieClip("mc", 0);

var tf:TextField = this.createTextField("tf", 1, 20, 20, 300, 100);
tf.type = "input";
tf.border = true;
tf.text = "Flash Player Varsion: " + System.capabilities.version + "nDebug Player: " + System.capabilities.isDebugger + "nOperating System: " + System.capabilities.os + "nnClick here or press the TAB key to kill Flash";

tf.onSetFocus = mx.utils.Delegate.create(this, glow);

Selection.addListener(this);

function onSetFocus(oldf:Object, newf:Object):Void{
Selection.setFocus(oldf);
}

function glow(){
mc.filters = [new flash.filters.BevelFilter()]; // any filter except BitmapFilter()
trace(mc.filters);
}

Download source files.

Try it (Warnning!!!, it may crash your browser)

Shape Hints – Have you forgotten how good they taste ?

These days it’s easy to forget that Flash is an amazing classic animation tool. Ever since the arrival of the fine Macromedia Tween Class and the amazing Fuse Kit (a new version was just released) and great books like Foundation Actionscript Animation, by: keith peters, new version for Actionscript 3.0 is on the way (not affiliat), it seems that we want to script our animation no matter what! Now, don’t get me wrong, I also think that scripted animation is very powerful and I use it all the time. But, I sometimes find myself over using it in places where I should have used a simple tweening instead.With the 8th version of Flash we received a nice improvement to the tweening capabilities, it is now possible to achieve a relatively complex tweening animation with only two key frames. Check out this tutorial: Achieving Amazing Easing Effects in Flash, by: Rafiq R. Elmansy.

And what about the new kid animation abilities?! With what I’ve seen so far in the main WPF interactive editor CTP (beta) vesions, it fall short of Flash, it has an interesting concept of having the animation of an object as just another property of that object. But, it lake of satisfactorily key-frames controll and things like shape tween are not existent. These things might be improved in the final version, but it seems to me that Microsoft is still donesn’t pay atantion to creativity as it should have, and is mainly thinking about GUI creation.

I just hope that Adobe wont forget the origins of Flash and one of the main reasons it is such a terrific tool, and is planing a tons more of animation and creativity features in the next Flash IDE release.

Note: I’ve written this post some time back, before the announcement of the new Flash CS 3 (Flash 9) feature list. It seems that we’ll get some animation improvements, the two most interesting improvements looks like, Custom easing control and Copy and paste animations. The first will “provides independent control of position, rotation, scale, color, and filters”, it will give us much finer control over every keyframe in our animation similar to high-end animation software. The second will let us copy timeline animations as fully editable Actionscript 3.0 XML objects for easy duplication and modification. It looks like even complex tweening that uses a motion guide can be copied and edited, no clarity about the coping of a shape tweens though. I guess no one at adobe have the nerve to dive into the Flash core and update something as the Shape Hints or even the Timeline itself, but overall, it seems like a nice update in terms of the animation abilities of Flash.

Flash CS3 will be released in April 20th.

Behind The Curtains – Shape Hints Animation Tutorial

Hover above this box:

I was amazed when I first saw shape animation in flash, create two different shapes on two different frames and easily get a morphing animation between them…

Few years back I was asked to make a flash banner for Habima Theater. I came with the, somewhat cheesy, idea of a animating a red curtain, and inside it, to fade images from few of the theater best shows.

Creating a curtain animation in Flash shouldn’t be a problem, I thought, I’ll create the start and finish frames and my beloved Flash will do the rest. The start frame of a simple curtain animation is simply a box and the end frame is an open curtain…

1. Create a new Flash Document, resize it to 320 x 240 and set the Frame rate to 30.

Document Properties

2. Create a red rectangle (R) anywhere on the stage no matter what size, select the rectangle and set it’s properties (Show/Hide Properties Ctrl+F3): width and height to 160 and 240 respectively, x and y both to 0.

3. With the rectangle still selected press F8 to turn it into a Movie clip, and name it curtain.

Convert to Movie clip

4. Inside the properties panel name the instance of the curtain on stage to leftCurtain.

properties

5. Double click on leftCurtain to step inside it. On the Timeline (Show/Hide the Timeline Ctrl+Alt+T) name Layer 1 to curtain. Right click on the 30th frame and select Insert Keyframe (F6).

Insert Keyframe

6. The first frame of our animation, the closed state of our curtain is already done on frame 1, we’ll now create the opened frame on frame 30. Deselect the red rectangle by clicking anywhere outside it on the stage. Point your mouse to the bottom right corner of the rectangle until the mouse cursor turns into a right angle shape, this indicates that you can grab the corner. With the Shift Key pressed click and drag the rect corner to the left and to about 45px from the left edge.

Drag Corner

7. In order to achieve an open curtain look we’ll split it near the bottom. Point the cursor near the edge of the now diagonal line to about 50px from the bottom. When the cursor changes its shape to a small round line, press Ctrl and click to drag the new point to left to about 30px from the edge. Pressing on the Ctrl key while dragging a line breaks it and creates a new point where the break is.

Drag Middle

8. Similar to the previous step, hover with the mouse near the right edge of the rectangle, when the cursor change it’s shape click and drag (without pressing Ctrl) the edge until it gets a nice belly, do the same for the small right edge.

Drag Belly

9. We done the entire 2 frames of our animation, now it’s time to animate it. In the Timeline Select frame 1 and in the properties panel set Tween to Shape, also set Ease to 70, it will make the animation nicer by easing it near the end.

Tween

10. It looks like we got ourselves an opening curtain animation, but testing the movie (Ctrl+Enter) reveals that though we got an animation it’s nothing like a believable curtain. This is because Flash can’t know what exactly we’re animating and how we like the morphing to be done. Flash simply guess, and this time its guess is very wrong. This is where Shape Hints come to our aid.

11. Select frame 1 and click on Modify -> Shape -> Add Shape Hint (Ctrl+Shift+H) 5 times. This will create 5 Shape Hints identified by characters from a to e. Arrange the Hints in the 4 corners and 1 where the break is, look at the image. Go to frame 30 and arrange the Hints respectively to the 1th frame. Every Hint character in frame 1 must correspond to the Hint character in frame 30.

Shape Hints

Tip: you can lock the layer and still be able to edit the Shape Hints.

Tip: Show/Hide all the Shape Hints Ctrl+Alt+H

12. Now lets test our movie (Ctrl+Enter) to see our curtain animate to its open state as it should.

13. To create the closing animation the simplest way is to duplicate the frames and then reverse it. Select all the frames in the curtain layer by clicking on its name and Right click -> Copy frame then Right click on frame 31 and select Paste frames. This will copy the opening animation, Shape Hints included. Click on frame 31 and while the Shift key is pressed click on frame 60 to select all of this frames range. Right click on the selected frames and click Reverse frames, it’ll reverse the animation but sadly it’ll also break the Shape Hints of this section, you’ll have to create it again for frame 31 and 60, similar to the previous step.

14. Select frame 31 and in the properties panel set the Ease to -50, this will create an ease-in effect so the closing animation will start a bit slower and then accelerate as it goes.

15. Test the movie to see the (half) curtain open and close. Thats it, we’re done our curtain animation it’s time to duplicate the half into a full curtain and put some interactivity into it.

16. Before you go back to the main stage add another Layer inside the curtain Movie clip and name it actions. Click on Window -> Actions (F9), while the first frame selected enter the code stop(); inside the Action panel. Create a new key frame on frame 30 of the actions layer and put a stop(); in there as well. This will prevent the curtain from animating on its own and we’ll control it with Actionscript.

Stop Action

17. Go back up to Scene 1 by double clicking on an empty area of the stage. Copy the leftCurtain Movie clip, paste it any where, set its x to 160, its y to 0 and its name to rightCurtain.

18. With the rightCurtain selected click on Modify -> Transform -> Flip Horizontal.

19. On the main Timeline in Scene 1 create another layer and name it actions open the actions panel (F9) and enter the following script:

function openCurtain():Void{
leftCurtain.gotoAndPlay(1);
rightCurtain.gotoAndPlay(1);
}

function closeCurtain():Void{
leftCurtain.gotoAndPlay(31);
rightCurtain.gotoAndPlay(31);
}

20. We can call these functions to open and close the curtain as we like, in this example we’ll open the curtain when the mouse roll over it and close it when it roll out.

21. Create another layer beneath the actions layer but above the curtain layer and name it hitArea. Draw a green rectangle and set it’s alpha to 0%, the color doesn’t really matter since this rect will be invisible, also set it’s width to 320, height to 240 and x, y to 0. Click F8 to turn this rectangle to a Movie clip and name it hitArea. in the properties panel name the hitArea instance on the stage to hit.

22. Add this code to the actions layer:

hit.onRollOver = openCurtain;
hit.onRollOut = closeCurtain;

Now every time we roll over the invisible hit Movie clip that is above the curtain the function openCurtain will be called and when we’ll roll out from it the closeCurtain will be called.

23. Test the movie to see that we now got our interactive animated curtain, roll over it and it opens, roll out and it closes. But, if you’ll play with it a little you’ll see that it’s not always act as it should. For example, when you roll out while the curtain is opening it jumps to beginning of the closing sequence instead of closing from the current position. To fix that we’ll add a simple calculation to find the right frame we need to jump to in order for the animation to look seamless.

24. Replace the code in the action frame with this:

hit.onRollOver = openCurtain;
hit.onRollOut = closeCurtain;

var nTotalFrames:Number = leftCurtain._totalframes;

function openCurtain():Void{
var nFrame:Number;
if(leftCurtain._currentframe > nTotalFrames / 2){
nFrame = leftCurtain._totalframes – leftCurtain._currentframe + 2;
}else{
nFrame = leftCurtain._currentframe;
}
leftCurtain.gotoAndPlay(nFrame);
rightCurtain.gotoAndPlay(nFrame);
}

function closeCurtain():Void{
var nFrame:Number = leftCurtain._totalframes – leftCurtain._currentframe;
leftCurtain.gotoAndPlay(nFrame);
rightCurtain.gotoAndPlay(nFrame);
}

We just changed the open and close functions to be a bit more smart ones, function that knows to which frame to gotoAndPlay, it does it according to the current frame and not just jump blindly to the beginning of each sequence.

Test the movie and behold, our interactive curtain is ready.

Tip: you can add this code, hit.useHandCursor = false; so the cusror won’t change into a hand when you hover the curtain.

Download Curtain Animation source files