Flashthusiast

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

In upcoming posts, I’ll cover targeting (say, targeting a parent timeline or scene or whatnot - some of the other questions in the original post).

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.

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.