May 5th, 2010
by Jen deHaan
Some people have been asking how to create button code in Flash (CS3, CS4, or CS5) that progresses the playhead in a SWF to the next or previous frame using ActionScript 3.0. This is not too difficult, and is a super simple code modification from any other button in AS3 (and is actually a touch easier than AS2 due to scoping issues).
This post includes an example of how to create two buttons that click between a few different frames. I’ll also include a (CS4) FLA file for you to look at and the AS2 equivalent.
read more »
Posted in ActionScript 2.0, ActionScript 3.0, FLA files, Flash CS3, Flash CS4, Flash CS5, Migration, buttons | 3 Comments »
October 6th, 2009
by Jen deHaan
A “FAQ” about new motion tweens is how to scale the entire animation after you have created it. New motion tweens “auto-keyframe”. This can be very helpful when animating, because it saves you a step – you can just make your changes and everything tweens nicely. However, it also means that you need to think about things when you need to revise the entire animation. You don’t use “Edit multiple keyframes”, since you really only have one keyframe at the beginning of the animation. So I’ll go over a few of the things you may encounter.
1. Moving an entire animation with a motion path.
If you have a motion path, this is easy – you select the motion path (click it, or marquee-select over your instance), and then drag it to a new location on the stage or use the X-Y hot text for the path.
2. Moving an entire animation without a motion path.
If you do not have a motion path and do not want a motion path, you need to make sure your playhead is at frame 1 of the tween span, and then move the instance to a new location. Make sure you haven’t accidentily placed any position keyframes. If you do have a path, delete it or go to the Motion Editor and right-click the X and Y motion paths and choose “Reset Property” (or click the Reset button for Basic motion if you don’t have rotation applied).
3. Scaling an entire animation that doesn’t have Scale X or Scale Y animated.
You can scale the tween with the motion path. Just go to the first frame of the tween, and select the instance and path using the Free Transform Tool (hold Shift to multi-select), or use the Transform panel for each selection. Scale it as you do any path or instance, and because you’re at the first frame the changes will apply across the entire tween.
4. Scaling an entire animation that does have Scale X or Scale Y animated.
If you have previously scaled anything in the tween, doing this is applied to the first keyframe and the tween would animate to the earlier scaling (the auto-keyframing feature can be a detriment in this situation, especially when it comes to scaling due to the percentages being reset – for this reason Motion Presets also won’t help). In this situation, I recommend scaling using the Motion editor:
1. Go to the Scale X and Y properties in the Motion Editor.
2. Press the Alt key while dragging the curve in each graph up and down. This scales the entire scale animation at the same time (same as edit multiple keyframes).
3. If you need to proportionally scale the motion path for the tween as well, select the path on the Stage and use Free Transform or enter a new value in the Transform panel.
Posted in Flash CS4, Flash CS4: motion, Flash CS4: new features, Migration, Motion Editor, animation, motion path, motion tween, new stuff, symbols, timeline, transform, tweens | 17 Comments »
July 24th, 2009
by Jen deHaan
One of my frequently asked questions in the comments is how to control what window a button click opens using ActionScript 3.0. For example, you might want your button to open in the same window, a particular part of your frames layout, or a new window. It’s similar to ActionScript 2.0, but there is a bit of a difference.
In ActionScript 2.0, you set a target for your button using code such as the following:
The following steps for ActionScript 3.0 will apply to either Flash CS3 or Flash CS4, just make sure that your document is an ActionScript 3.0 button and you’re adding the code to a frame.
- Create your button in your FLA, and give it an instance name in the Property inspector, such as
my_btn.
- Select a frame on the timeline at the same frame number of your button.
- Open the Actions panel, and add the following code:
my_btn.addEventListener(MouseEvent.MOUSE_DOWN, myHandler);
function myHandler(event:MouseEvent):void {
navigateToURL(new URLRequest("http://www.adobe.com/devnet/flash/"), "_self");
}
- Publish preview your work in HTML (File > Publish Preview > HTML). Note: When testing locally, you will need to set your security to allow access to the SWF. If you haven’t set this up, click Settings in the dialog that opens when you first test your FLA, select a directory on your hard drive, and save the FLA to that same directory and test again.
By default, without adding this parameter, ActionScript assumes _blank which opens a new window. You can modify the _self in the code above to be _top or _parent (or _blank if you want). Here’s what each of them does:
_self opens the link in the current frame of the current browser window._blank opens the link in a new window (or tab if that’s what the user has their browser set to do).-
_parent opens the link in the parent of the current frame.
_top opens the link in the top-level frame of the current browser window.
Posted in ActionScript 2.0, ActionScript 3.0, Flash CS3, Flash CS4, Migration, buttons | 34 Comments »
May 5th, 2009
by Jen deHaan
We wrote an article to help you migrate your skills and tweens from old to new in Flash CS4. It accompanys a new Animation Learning Guide on the Developer Center (they go hand in hand, lots of cross links) – and since it is now out, so is the migration article.
Check them out here:
* Motion Migration Guide for Flash CS4
* Animation Learning Guide
Let us know what you think!
Posted in FLA files, Flash CS4, Flash CS4: motion, Flash CS4: new features, Migration, Motion Editor, animation, articles, motion tween, new stuff, tweens | 2 Comments »
December 10th, 2008
by Jen deHaan
In the previous blog entry, I linked to a new JSFL that automatically gives instance names to selected instances in a smart way. You can go read about and download the JSFL from this page. This entry shows you how to use this command along with some of the new features in Flash CS4.
read more »
Posted in ActionScript 3.0, Commands, Easing, FLA files, Flash CS4, Flash CS4: motion, Flash CS4: motion runtime, Flash CS4: new features, General, JSFL, Migration, Motion Editor, Motion runtime, Tween instance, animation, downloads, instances, motion tween, new stuff, tweens | 6 Comments »
July 31st, 2008
by Jen deHaan
A common request in the comments is for information on how to create a button that links to a scene using ActionScript 3.0 in Flash CS4 or CS3. 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. More links about writing button code at the end of this post.
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.
MORE INFORMATION ON BUTTONS:
Posted in ActionScript 3.0, Flash CS3, Flash CS4, Flash CS5, Migration, buttons | 76 Comments »
March 13th, 2008
by Jen deHaan
So there have been a number of questions on my kinda recent post about making a button in Flash CS3 or Flash CS4 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). Update: More links about buttons and button code at the end of this post.
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
MORE INFORMATION ON BUTTONS:
Posted in ActionScript 3.0, Flash CS3, Flash CS4, Migration, buttons | 132 Comments »
March 2nd, 2008
by Jen deHaan
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
Posted in ActionScript 2.0, ActionScript 3.0, FLV, Flash CS3, Migration, Video | 30 Comments »
February 25th, 2008
by Jen deHaan
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. So I’ll show you how to make a button work in Flash CS3 or Flash CS4 using ActionScript 3.0.
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.
read more »
Posted in ActionScript 2.0, ActionScript 3.0, Flash CS3, Flash CS4, Flash CS5, buttons | 376 Comments »