Flashthusiast

You may have tried creating a shape that has a hole in it for a mask in Flash, and it may not have worked. Or maybe it did work and sometimes it didn’t, and you grew some extra gray hairs and threw your laptop at a wall. Or maybe you’re thinking “what the hell is she talking about now?”. I’ll start from (almost) the beginning [if you’re not sure about making masks in Flash, read this super old tech support article.. it hasn’t changed].

So a mask can have a shape cut out in the middle, and if you’re working on the Timeline (not with code) and your mask is a shape (not a movie clip), everything is fine. By “shape cut out in the middle” I mean a ‘merge cut’ in Flash: took a shape (say, a copy of what you’re masking), put it over another bigger and different colored shape, and then selected and deleted the smaller one to cut that shape out of the middle of the bigger one.

(click above to enlarge)

This is a common thing to do when creating masks like this, because you can create a “reverse mask” of whatever you’re masking, which is pretty useful. Check out this file and SWF to see what I’m talking about:

(click above to enlarge) File: masking-donuts.fla.

Now say you convert that shape to a movie clip… it looks fine on the Stage, but when you go and publish your SWF you’re in trouble.

(click above to enlarge) File: masking-donuts2.fla

Doh! Yeah, you may have run into this one. Similarly, give your mask the instance name of masker and what you’re masking an instance name of maskee and add this line of AS3 to frame 1 of the timeline:

maskee.mask = masker;

Doesn’t work either. (but hey, AS3 that short and sweet is almost doable eh)

So the player doesn’t support that way of creating a mask for now, but all hope is not lost. There are other ways to create your mask where it *does* work in this situation. In other words, Flash seems to care about the way you make that donut hole in the middle of your mask. And if you do it a certain way, it actually will work regardless of the movie clip.

Let’s check that out.

1. I go into the FLA (masking-donuts2.fla) and double click my mask that doesn’t work (unlock the layer).
2. Take the Lasso tool, make sure Polygon mode isn’t turned on, and drag around the edge of my cut out center. You have to be careful to cut around all the edges entirely.

3. Then Publish.

And now it works. Similarly, remove the masks and add the ActionScript - now it works there too.

Sweet! It’s a clip with a hole. File: masking-donuts3.fla

Whaaat, you may ask? Weird! you may exclaim. Essentially what’s up is that these kinds of masks (with holes in them) created using merge cut or the Eraser tool do not work as a movie clip mask (and hence with code). Made other ways, they tend to work.

So what are the other ways, you ask? Good question. Here are at least some of the other ways you can create shapes that do work as masks:

• (so what is above…) Deleting the middle of the shape using the Lasso tool. Do note that Polygon mode does not work.
• Hand drawing your mask with a brush.
• Drawing shapes around a center area (pretty much same as above - drawing tools). For example, you can draw for squares around an area, leaving the center empty. This will work.
• Broken apart text, such as the letter “O”.
• Create an oval with a stroke, remove the center of that oval (just select and delete). Select the stroke and then choose Modify > Shape > Convert Lines to Fills.
• Paste any shape like a square from Illustrator (or likely another program) as a bitmap, and then make your merge cut in that shape IN FLASH. If the outer edge of your shape doesn’t matter (like you just need a big square with your Flash shape cut out of the middle), this is probably the best workaround.
• And finally, bringing in a shape from somewhere else (Illustrator). If you have a shape that includes interior “merge cut” shapes in your FLA that you need to be exactly the same, this will give you EXACTLY what you want. I’ll describe in detail below.

So there are three ways you can work between Illustrator (or some other graphicy software) and Flash with a merge cut shape you want to use as a mask. After all, you probably have your artwork in Flash and you need that specific shape you already have as the mask (or you need it to start with and then modify). Which one you use depends on your shape and what you need.

A simple shape: You can copy the shape that doesn’t work for the mask in Flash, paste it in Illustrator, copy it in Illustrator, and paste it back into Flash. However, In *some* cases with Flash CS3, and particularly with curves, the shape may not look the same after pasting into Illustrator. If that’s a problem, then you need to use one of the other workarounds below.

Simple outer shape (such as a square), complex inner cutouts: Paste your square from Flash to AI, then paste it as a bitmap in Flash. Break apart and make your shape merge cutouts using whatever Flash assets you want.

You have a complex shape in Flash:

1. Export your shape from Flash as a PNG making sure to choose Match Screen so the image isn’t huge.
2. Place it in Illustrator
3. Copy and paste it back to Flash
4. Break it apart
5. Use the Magic Wand to remove transparent areas. NOTE: It helps after doing this to select the remaining shape and give it a new fill color. You may have some remaining bits to delete. This also makes it much easier to make further modifications to your shape. The freaky thing here (as noted above) is you can actually merge cut the shape at this point… and it will work.

Now you can have a mask with a merge cut hole in the middle that looks exactly the same, and use it as a movie clip and/or with ActionScript.

Refresh on what doesn’t work:

• Cutting out the middle using shape merge.
• Cutting out the middle using Eraser tool.
• Cutting out the middle using Polygon mode of the Lasso.

So is this really a workaround for “real life”? Totally, especially using something like Illustrator (thank you Illustrator and ‘integration’ - although this is just a bitmap so anything like this should work). Even without Illustrator it’s not too bad — just using the Brush tool, I managed to make it work pretty well for a recent animation. Used the brush tool to carefully draw around the shape I wanted cut out in the center (accomplished fairly easily by edit-in-place mode), and smoothed and dragged the inside edges of the shape until it was pretty much what I wanted.

So yeah, it is a little bit more work and since I use Flash, I like to complain about the quirks. But you gotta admit, it is better than nothing at all and not too bad right?

And if you do notice other stuff related to this (or not, doesn’t matter), like some other way better workflow or trick or something else that doesn’t work, please let me/us know in the comments.

Over and out.

A common request in the comments is for information on how to create a button that links to a scene using ActionScript 3.0. Luckily, it’s largely the same as creating a normal button that links to whatever, and uses the same gotoAndPlay format as in ActionScript 2.0. So hopefully it’ll make sense once you see it.

So if you’re unsure on general button code, see this post here: Making a button work in AS3.

If you’re unsure how to put multiple buttons in a document, see this post here: Putting multiple buttons in an FLA file.

Now you’re ready for some scenes-with-buttons action. Here’s some code:

stop();button1.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);function mouseDownHandler(event:MouseEvent):void {
 
gotoAndStop(1, "Scene 2");
 
}

So that code assumes that you have a button with the instance name button1, and a scene in your document called Scene 2 in the Scenes panel. The number “1″ in that code points to frame 1 of the scene.

So what if you want to, say, link to a particular frame? Let’s link to frame 5 of a scene called monkeyScene:

stop();button2.addEventListener(MouseEvent.MOUSE_DOWN, monkeyDownHandler);
 
function monkeyDownHandler(event:MouseEvent):void {
 
gotoAndStop(5, "monkeyScene");
 
}

Hope that answers the question. I’ve put an FLA file online that links each scene using buttons so you can see this in action.

Linking to buttons within a scene

There have also been questions about linking to frames within a scene. I’m not positive what the specific problem is, but I’ll take a stab at it (or at least show what seems to work for me.

Now, what causes many of the problems with Scenes in Flash (and why they are officially discouraged from use in Flash best practices - I never use ‘em unless I have next to no code in a FLA), is as follows. From what I understand, when you publish your SWF file, all of the scenes in a FLA are made into one big giant string of frames. Kind of like sticking all of your scenes into one big timeline (one big scene, essentially) and pushing it out as a SWF. Therefore, this can mess up your code. If you’re pointing to a frame 56… which one? To you it may be frame 56 of scene 3, but to Flash that may be frame 56 of the giant new timeline in the SWF that’s published.

So, it’s good to avoid scenes.

But I digress. So if you’re linking to buttons within the same scene, you could specify what scene you’re pointing to in each button. So if you’re in a scene called monkeyScene, you could make your button that’s on frame 1 point to frame 2 of monkeyScene as follows:

stop();
 
mbutton1.addEventListener(MouseEvent.MOUSE_DOWN, monkeyHandler1);
 
function monkeyHandler1(event:MouseEvent):void {
 
gotoAndStop(2, "monkeyScene");
 
}

I’ve uploaded another real ugly FLA file that links multiple buttons to frames within a single scene. Check out monkeyScene in the FLA file.

When you right-click a symbol instance on the Stage in Flash, there are a couple new options that were added in CS3: “Set Transformation Point” and “Reset Transformation Point”. There’s not much out there about these features, as I understand they were added quietly late in the game. But they’re very useful nonetheless. The problem is it’s a bit tricky to figure out how these things are useful without knowing what the feature is or how it works - because (at least to me) it sounds like they do something when they actually do something a bit different (and once I found out what they did, it made a lot of sense). So lets run through this new feature.

1. Drag an instance of a symbol to the Stage from the Library.
2. Select the instance using the Free Transform tool.
3. Drag the transformation (the white circle) to a new location on the instance.
4. Right-click the instance and choose Set Transformation Point.
5. Drag a new instance of that symbol to the Stage, and select it with the Free Transform tool.

As you can see, the Transformation pointof the second instance is exactly where you placed it in the first one. That’s essentially what this first option does, and it can be very handy if you’re using a bunch of instances in a FLA that need to rotate or otherwise transform from the same point - saves a lot of dragging/estimating.

As for Reset Transformation Point-

1. Right-click the instance again, and choose Reset Transformation Point.
2. Drag another instance onto the Stage, and select it with the Free Transform Tool.

Now the Transform point is back in the default central position for the new instances of this symbol. Alternatively, you can change the Transformation point location, and just choose Set Transformation Point again and it will save this new location for the instances.

This feature appears to work on a per-symbol basis. You can set the transformation point for all instances of a particular symbol for multiple symbols in the library. For example, you have Symbol 1 and Symbol 2 in the library. You can set the transformation point for an instance of Symbol 1, and all instances of that symbol will keep that transformation point location until you reset it or set a new location. You can independently set a transformation point for Symbol 2 and it is saved until you reset it on an instance of that symbol. And so on.

As an aside/note/whatever, remember that you can set the Transformation point to the Registrationpoint by double-clicking the white circle.

If you’re new to Flash and you’re wondering what the heck a Transformation point is - it is the point around which the symbol rotates or transforms, and looks like a white circle when you have the instance selected using the Free Transform tool. The best way you can illustrate this is by creating a new instance, and rotate it using the Free Transform tool (select the instance using the tool, and move the cursor around the edge until you see a little round arrow and then drag). Now change the location of the white circle and rotate the instance again. This also affects how the instance skews and resizes. The Transformation point has also been referred to as a “Control point” in Flash (some references in documentation are to the Control point), but it is different than the Registration point (the small black crosshair).

Adobe DV guru Bob Donlon started and launched a great new site for watching video tutorials and presentations on Adobe.com called Adobe TV. Adobe TV is a site that is working to combine all of the various video resources that Adobe releases, so they’re housed in one central location. Please note that not all of the video tutorials available from Adobe are in there yet, but eventually they should all be there - so it’s like a one stop shop for learning about the products in video format. I find this pretty darn exciting, because last release I worked very hard on the Adobe Video Workshop and the Design Center for quite awhile (and of course have contributed many articles to the Developer Center) - and always knew that those resources among others are hard to find. So any steps to centralize resources and make them more discoverable is a pretty good thing as far as I’m concerned (although it doesn’t look like the Video Workshop videos are in there quite yet - I understand they will be though).

So go check it out! If you click through the “Designer” section, there are some videos on Flash. The site is also an interesting use of the technology itself.

So there have been a number of questions on my kinda recent post about making a button in Flash CS3 using ActionScript 3.0. I will do the next couple posts on how to do the things in the questions (and actually check em out in Flash, and make an FLA to download).

So if you haven’t already read or don’t know how to make a single button, head on over to the post linked above. Here, I’ll continue on to multiple buttons.

Say you have a couple buttons on a page, and you want one to go to one URL, and the second one to go to a different URL - you need to change your function names in your code so you don’t have multiples with the same name. So, you would need to do something like this:

thumbsdown_btn.addEventListener(MouseEvent.MOUSE_DOWN, thumbDownHandler);
function thumbDownHandler(event:MouseEvent):void {
 navigateToURL(new URLRequest("http://msdn2.microsoft.com/en-us/silverlight/default.aspx"));
}
thumbsup_btn.addEventListener(MouseEvent.MOUSE_DOWN, thumbUpHandler);
function thumbUpHandler(event:MouseEvent):void {
 navigateToURL(new URLRequest("http://www.adobe.com/devnet/flash/"));
}

Note the thumbDownHandler and thumbupHandler in the code.

The source file: Mutliple buttons to URLs

So some people are instead targeting multiple frames. In that case, the code would look like this:

stop();
first_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler1);
function mouseDownHandler1(event:MouseEvent):void {
 gotoAndStop(5);
}
 
second_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler2);
function mouseDownHandler2(event:MouseEvent):void {
 gotoAndStop(10);
}

The source file: Mutliple buttons to frames

For info on targeting scenes or frames within a single scene, see this post here: http://flashthusiast.com/2008/07/31/creating-buttons-that-link-to-different-scenes-using-actionscript-30/

A pretty common thing to do with Flash is to play an FLV file. In ActionScript 2.0, you would do the following:

1. Create a new Video object in your Library (choose New Video from the Library’s Options menu).
2. Drag the video onto the Stage, and give it an instance name.
3. Add the following code to frame 1 of your document:

// ActionScript 2.0

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
 
ns.onMetaData = function(item:Object):Void  {
 trace("metaData");
 // Resize video instance.
 myVideo._width = item.width;
 myVideo._height = item.height;
 // Center video instance on Stage.
 myVideo._x = (Stage.width-myVideo._width)/2;
 myVideo._y = (Stage.height-myVideo._height)/2;
};
 
ns.onCuePoint = function(item:Object):Void  {
 trace("cuePoint");
 trace(item.name+"\t"+item.time);
};
 
myVideo.attachVideo(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

That will play your video and also trace a couple cuepoints. Sample file: Load video with ActionScript 2.0

It’s kind of cool in ActionScript 3.0 in that you can open an empty AS3 FLA file, paste this code onto frame 1 of your document, and you’re off to the races (meaning, that’s all you have to do). As you can see, the code isn’t that much different either - so if you added video in AS2, things should seem pretty familiar. This is the same thing as above — it will also play a video and trace some cuepoints.

// ActionScript 3.0
 
var video:Video = new Video();
addChild(video);
 
var nc:NetConnection = new NetConnection();
nc.connect(null);
 
var ns:NetStream = new NetStream(nc);
ns.client = {onMetaData:ns_onMetaData, onCuePoint:ns_onCuePoint};
 
video.attachNetStream(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");
 
function ns_onMetaData(item:Object):void {
 trace("metaData");
 // Resize video instance.
 video.width = item.width;
 video.height = item.height;
 // Center video instance on Stage.
 video.x = (stage.stageWidth - video.width) / 2;
 video.y = (stage.stageHeight - video.height) / 2;
}
 
function ns_onCuePoint(item:Object):void {
 trace("cuePoint");
 trace(item.name + "\t" + item.time);
}

Sample file: Load video with ActionScript 3.0

So even though I knew there was something released for Flash CS3 today, it might not be too obvious when it comes to actually finding out about it and installing it and such.

Without further ado, what you should do:

1. Make sure you have the right Flash Player, 9.0.2: http://www.adobe.com/support/flash/downloads.html#902

2. Install the AIR Runtime: http://get.adobe.com/air/.

3. Install the AIR updater for Flash CS3: Windows | Mac [If you have updated before, scope out these update instructions] [If you’re running a non-English version, or want more info than the above, scope out the download page]

4. Open Flash CS3. Now you’ll see the AIR document option on the Start page:

(click to enlarge)

5. Go to the Flash Dev Center (AIR for Flash) and Product Info / Showcase and for more info. There isn’t a whole load of info out there for Flash developers (or designers) yet - I reckon there will be though. I’ll try something basic out myself and put it up here.

6. Read this article: Sudoku on Adobe AIR: Migrating a Flash application to the desktop

And if YOU make something AIRish with Flash, please let me know! We really need some more Flash authoring examples up there in that showcase, and at any rate, your work will inspire others :)

“What if I’m using Dreamweaver?”:
If you’re looking for the Dreamweaver extension for AIR, you need to look in the… AJAX section. You can find the extension download here:
http://www.adobe.com/products/air/tools/ajax/#section-2

So I used to monitor comments coming in from the CS3 Video Workshop, which contains a few hundred video tutorials on the CS3 products. Some of the comments that came in regarding the Flash videos was how people were having frustrations about how to set up button code with ActionScript 3.0. I thought that’s where I’d start out, with a simple example that compares the two.

Luckily, the set up is pretty much the same assuming you put code on the Timeline. If you didn’t, it will be a bit of a change and you’ll need to follow the steps below.

When you were using ActionScript 2.0, you would put code on the main Timeline. You’d have a button on the Stage with the instance name myBtn (set in the Property inspector). You would add code to frame 1 that reads:

myBtn.onRelease = function() {
    getURL("http://www.flashthusiast.com");
};

In ActionScript 3.0 it looks a bit different. And yes, it’s an extra line of code and it is a bit more complex looking. However - you don’t need to use classes or anything, set up is the same. Here are the steps you’d take to create an interactive button in Flash CS3.

1. Create a button, just as you would in Flash 8.
2. Select the instance, and add the instance name monkey_btn in the Property inspector.
3. Insert a new layer, and rename it actions.
4. Open the Actions panel (Window > Actions), select frame 1 of the actions layer, and add the following ActionScript in the Script pane.

monkey_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {
    navigateToURL(new URLRequest("http://www.flashthusiast.com/"));
}

5. Choose Control > Test Movie to test your document.

And that’s all there is to creating a clickable button with AS3. All you need to do is change the URL to make it work in your own document. You can also change the MouseEvent from MOUSE_DOWN to, say, MOUSE_OVER to change how the interaction works. Search Flash Help for MouseEvent, and look at the Class in the ActionScript 3.0 Language Reference.

Sample File - Button

If you have MORE THAN ONE BUTTON and want to add that to your FLA file, please continue on to this post about adding multiple buttons to your file.  For info on targeting scenes or frames within a single scene, see this post here: http://flashthusiast.com/2008/07/31/creating-buttons-that-link-to-different-scenes-using-actionscript-30/

So the world needs another Flash blog, that’s what I said. Hi. Welcome to yet another blog on Flash.

But hey, have you noticed a lot of blogs have gone from talking about Flash to talking about Flex? or Air? or… you know, things that aren’t Flash anymore and not nearly as cool and awesome as Flash?

So maybe the world DOES need another Flash blog!

Hi, I’m Jen deHaan (although a lot of people call me Jan DeHann) and I like Flash. I confess. So much so, I went back to the Flash team (I was on the Flash team as a doc writer, then left the Flash team to do instructional design for the web and video products, then came back to the Flash team because that’s where I belong. ) So two of you might be thinking “but didn’t she have a blog or something that she sort of abandoned?” Well, yeah. Actually I’ve had three blogs that I’ve abandoned. No no… four. Anyway, three of those other blogs were using old versions of Movable Type, and they’re kind of boring or outdated and I’m too lazy to make them look nice on my own. The fourth blog used Movable Type but it was for my old job I don’t do anymore. And I had this domain that is pretty wacky and hard to spell. So I guess that’s enough reasons… hey none of you are reading anymore!

OK, so on to some stuff about Flash. Flash AUTHORING, the original Flash. I hope that I won’t neglect the blog or anything. I’ll give it an honest go this time.

By the way, we’re working on some real cool things right now on the Flash team that you might have seen at the MAX sneak peeks! I’ll definitely talk about those things as soon as I’m allowed to.