Archive for ‘Migration’

Newer Entries »
November 20th, 2008

Flash CS4: Modifying and applying a custom ease in the Motion Editor

by Jen deHaan

You can then edit the custom ease using the standard bezier editing controls found in other property graphs in the Motion Editor.
To apply the custom ease to a property, you select the custom ease’s name from the Ease menu in the property you want to apply it to. The property graph updates with a dashed curve that displays the actual tweened values after the ease is applied, as it does for the preset eases you can apply using this Ease section of the Motion Editor. Keep reading to learn how to create custom eases.

read more »

Posted in Easing, Flash CS4, Flash CS4: motion, Flash CS4: new features, Migration, Motion Editor, motion tween, new stuff | 15 Comments »

Tags: , , , , ,
November 4th, 2008

Understanding Flash CS4 Motion XML

by John Mayhew

Hi everyone. John Mayhew from Flash authoring here. This is my first blog entry here and I wanted to take some time to describe the XML schema we use to store motion presets in Flash CS4. First I’d like to give you some background. The new animation model in Flash CS4 was built from the ground up over the last several years. It started as an idea I pitched at the end of our Flash 8 cycle at Macromedia. We assembled a team and started development in Flash 9 and continued through into Flash 10 and eventually shipped it as part of CS4. It was the culmination of tons of hard work by many, many people including our very own Jen DeHaan! We are all very proud of the feature and hope our users find that it does indeed "kick ass" as Jen likes to put it.

read more »

Posted in Easing, Flash CS4, Flash CS4: motion, Flash CS4: motion runtime, Flash CS4: new features, Migration, Motion XML, Motion runtime, Scripted animation, animation, motion tween, tweens | 4 Comments »

Tags: , , , , , , , , , , ,
October 19th, 2008

Movie clip buttons in a fight: it’s AS2 vs. AS3 (again)

by Jen deHaan

You might have created movie clip buttons in Flash CS3 or Flash CS4 (or Flash 8 or 7 or…) before to get those animations on your buttons. Either way, creating one would have proceeded a bit like the following if you used ActionScript 2.0.

* Create a button, and give it an instance name (in the following case, myMc).
* Along the Timeline, add frame labels _up, _over, _down, and _hit (if you want a hit area for the button).
* Put stop actions at each frame label, and change the graphics and/or add some animation at each state.
* Add this code to frame 1 in the actions panel:

myMC.onRelease = function() {
 trace ("You clicked me.");
}

(For full instructions on creating a movie clip button, you can refer to something I wrote for docs waaay back in Flash 8 days here updated for CS3).

More after the jump.

read more »

Posted in ActionScript 2.0, ActionScript 3.0, Flash CS3, Flash CS4, Flash CS5, Migration, buttons | 23 Comments »

Tags: , , , , ,
October 12th, 2008

New motion and Tween instances: Flash CS4 presentation (FlashCamp)

by Jen deHaan

Yesterday at FlashCamp, I gave a presentation on using the new motion model in Flash CS4. The files are linked on this post. This is a general synopsis of what I covered, and I’ll detail how I did a few things in the presentation. Please comment with any questions you have.

More after the jump.

read more »

Posted in ActionScript 3.0, Easing, FLA files, Flash CS4, Flash CS4: motion, Flash CS4: motion runtime, Flash CS4: new features, Migration, Motion Editor, Motion Presets, Motion runtime, Tween instance, animation, motion tween, presentations, symbols | 10 Comments »

Tags: , , , , , , , , , , , , , , ,
September 23rd, 2008

Flash CS4: The photo tour of features

by Jen deHaan

After spouting off about the benefits of the new motion model in Flash CS4, I thought I’d take a bunch of screenshots of Flash, most of which are showing new features and such. For all of the following photos, click the thumbnail to look at the full size photo.

More after the jump.

read more »

Posted in Flash CS4, Flash CS4: motion, Flash CS4: new features, Migration, Motion Editor | 25 Comments »

Tags: , , , , , ,
September 22nd, 2008

The new way of tweening in Flash CS4 (or: New motion in Flash CS4 makes your animations better, faster, stronger)

by Jen deHaan

So now that you’ve heard all these great CS4 announcements, lets get into some constructive details about Flash CS4 (whoo hoo, I can finally talk about what I’ve been working on!). But before we start, this is the first time I’ve written in detail about a non-released product, so bear with me and please comment about whatever is really confusing or assuming you have the product already, below.

There have been sneak peeks of some of the upcoming features in Flash thanks to conferences and keynotes, and you may have seen that one of the big new features (and to some of us on the feature, *the* big new feature) is a new way of creating animation. So yeah, tweening has changed. Finally. In Flash version 10. No more arrows on purple blackground. Um, now it’s blue with diamonds. And a whole lot better in many ways.

Update: articles on Adobe Developer Center for the new motion model:

* Motion Migration Guide for Flash CS4

* Animation Learning Guide

More after the jump.

read more »

Posted in Flash CS4, Flash CS4: motion, Flash CS4: new features, Migration, Motion Editor, animation, motion tween, tweens | 85 Comments »

Tags: , , , , , , ,
July 31st, 2008

Creating buttons that link to different scenes, and within a scene, using ActionScript 3.0

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 »

Tags: , , , , ,
July 29th, 2008

Set Transformation Point and Reset Transformation Point in Flash CS3

by Jen deHaan

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).

Posted in Flash CS3, General, Migration, animation, instances, symbols | 11 Comments »

Tags: , , , , , , ,
March 13th, 2008

Adding more than one button to a FLA file while rocking it in ActionScript 3.0

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 »

Tags: , , , , , ,
March 2nd, 2008

Loading and displaying video in Flash CS3 using ActionScript 3.0, no more video objects

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 »

Tags: , , , , , , ,
Newer Entries »