Archive for November, 2007

Tweener and tweening colors

I did a previous post about the static method Color.interpolateColor, but at that time, I hadn’t really tried Tweener yet. Let me tell you this, tweening colors has never been easier than with Tweener. I’m am going to redo the same example showing you how simple it is to use Tweener instead of Color.interpolateColor form the fl.motion.Color package. Here is the code, you just have to paste it on a frame an compile it to swf to make it work (you have to have the Tweener classes in your folder or in one of the default class folder).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import caurina.transitions.*;
 
var simpleSprite:Sprite = new Sprite();
simpleSprite.x = 100;
simpleSprite.y = 100;
simpleSprite.graphics.lineStyle();
simpleSprite.graphics.beginFill(0xff0000);
simpleSprite.graphics.drawRect(0,0,200,100);
addChild(simpleSprite);
simpleSprite.buttonMode = true;
 
simpleSprite.addEventListener(MouseEvent.MOUSE_OVER, makeBlue);
simpleSprite.addEventListener(MouseEvent.MOUSE_OUT, makeRed);
 
function makeBlue(e:MouseEvent):void{
  Tweener.addTween(simpleSprite, {_color:0x0000ff, time:1, transition:"easeOutQuart"});
}
function makeRed(e:MouseEvent):void{
  Tweener.addTween(simpleSprite, {_color:null, time:1, transition:"easeOutQuart"});
}

That’s it. And it does exactly the same thing and probably faster than the Tween classes. Notice that it takes only one line of code to change the color instead of the more complex method I used previously . Also you only have to import the Tweener classes as opposed to six import statements.

Well that’s it for today, I’ll try and investigate on more Tweener properties because it just keep surprising me.

, , ,

12 Comments


Flex problems again

Seems like every time I want to use Flex there is something that prohibits me from doing it. Today I was trying  to make a website using papervision3D; what I want to do is use a grid of video planes. So each of my plane has a MovieMaterial Movie has a FLV embedded in it. Well the thing is that you cannot import FLV files in Flex. So it makes it just more complicated in this case to use Flex and Flash together instead of just using Flash. Oh well, no profiler for me this time either.

, , ,

No Comments


ActionScript 3 and Events

I originally thought that dispatching events in ActionScript 3 would be more complicated than in ActionScript 2. But I was wrong, I wasn’t very complicated to dispatch events in ActionScript 2, well, it’s even less complicated to do so in ActionScript 3. The thing is that version 3 of ActionScript is built around the event model. Another interesting thing is that usually your class that you’d want to dispatch an event from would have to extend EventDispatcher in order to do so, but if this class already extends Sprite or MovieClip you don’t have to extend EventDispatcher; Sprite and MovieClip are already descendant of the EventDispatcher class.  What this means is that you can call the dispatchEvent method from inside a Sprite or MovieClip extending class with no other code to write.

What is a bit more complicated is when you want to create a custom event. It’s not really harder but the thing you have to know is that you have to override the clone and toString method. Once you’ve done that you’re ready to dispatch your own events. I’ll post an example about that soon.

, ,

No Comments


Making a simple button using Tweener and Sprites in AS3

In a previous tutorial, I showed how to make a simple button using the Tween classes and Sprites. I am going to redo the same tutorial but using Tweener instead. I am not going to re-explain the first step which are all the same than in the previous tutorial; I am just going to speak about the mouse handler functions.

So here is the new code using Tweener:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package{
  import flash.display.Sprite;
  import flash.text.TextField;
  import flash.events.MouseEvent;
  import caurina.transitions.*;
  public class simpleButton extends Sprite{
    public function simpleButton(newLabel:String){
      myLabel.text = newLabel;
      myLabelOver.text = newLabel;
      myLabelOver.alpha = 0;
      buttonMode = true;
      mouseChildren = false;
      addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
      addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
      addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
    }
    private function handleMouseOver(event:MouseEvent):void{
      Tweener.addTween(this.Over,{alpha:1, time:0.5, transition:"linear"});
      Tweener.addTween(this.myLabelOver,{alpha:1, time:0.5, transition:"linear"});
      Tweener.addTween(this.myLabel,{alpha:0, time:0.5, transition:"linear"});
    }
    private function handleMouseOut(event:MouseEvent):void{
      Tweener.addTween(this.Over,{alpha:0, time:0.5, transition:"linear"});
      Tweener.addTween(this.myLabelOver,{alpha:0, time:0.5, transition:"linear"});
      Tweener.addTween(this.myLabel,{alpha:1, time:0.5, transition:"linear"});
    }
    private function handleMouseUp(event:MouseEvent):void{
    }
  }
}

The major advantage of Tweener in the case of a rollover and a rollout (like most buttons) is that you don’t have to keep track of previous Tweens in order to stop them. With the Tween classes, if you don’t do that, you’re going to end up with strange rollover behaviors.  Also, we had to check if the Tween  existed before trying to stop them which added extra code. Tweener handles all that for us which is pretty practical. I spoke some times of the Fuse Kit; it seems packed with a lot of options, but you can’t do simple rollovers with it; with Tweener you can.

Well I’m about done with my tutorial on Tweener but I think I’ll do one about using Tweener to Tween between two colors, just like Color.interpolateColor static method.

, , ,

1 Comment


ActionScript 3 Tweener Basic Tutorial

On my previous tutorial about how to do Tweens  using ActionScript 3 I used the Tween classes from Adobe. At the time I didn’t know about Tweener and the Fuse Kit didn’t have a version in ActionScript 3. I have used Tweener a bit now and I can say that I am starting to like it a lot.

On a side note, I am now using TweenLite instead of Tweener; TweenLite execute faster and is smaller in size. Here is a tutorial on TweenLite.

For this tutorial I am going to do exactly what I did in the previous tutorial but this time I’ll use Tweener. The first thing you have to do, as with the Tween classes, is import Tweener, you do it in this way.

import caurina.transitions.*

Tweener as some easing classes in it but you can also use the easing classes from Flash. One good side of Tweener is that it compile perfectly fine in Flex. Tween and easing classes don’t compile with Flex… A down side of Tweener is that it adds an additional 8k to your file (as opposed to 2k for Tween classes for a total of 10k).  Ok so now we are ready to go.

Tweener.addTween(rectangle, {x:300, time:3, transition:"linear"});

The “Tweener.addTween” part is how you add a Tween, that’s kinda obvious. “rectangle” is the name of the object you want to do a Tween on one of its property (or more). “x:300″ is the final x position that rectangle will be at. “time:3″ is the time it will take to get there and “transition:’linear’” is the easing to use. You see this is already easier to use and to read than the Tween classes. One major change is that you input the starting position of the property. I think this is a good thing since like 90% of the time I have been doing Tween, I want the Tween to start from the current position of the property and you can just set the property before doing the Tween anyway.

The next example was about doing multiple Tweens on the same object but on different properties here is how we did it with the Tween classes:

var myTweenX:Tween = new Tween(rectangle, "x", Strong.easeOut, 0, 300, 3, true);
var myTweenAlpha:Tween = new Tween(rectangle, "alpha", Strong.easeOut, 0, 1, 3, true);
var myTweenAlpha:Tween = new Tween(rectangle, "width", Strong.easeOut, rectangle.width, rectangle.width + 300, 3, true);
var myTweenAlpha:Tween = new Tween(rectangle, "rotation", Strong.easeOut, 0, 90, 3, true);

Here is how you would do that with Tweener:

Tweener.addTween(rectangle, {x:300,alpha:1, width:rectangle.width + 300, rotation:90, time:3, transition:"linear"});

So in one line I did what it used to take me 4 and it easy pretty easy to understand.

Another thing that is really nice with Tweener is that it as a delay property. If you want your Tween to start in 1 second you do it in this way:

Tweener.addTween(rectangle, {alpha:1, time:3, delay:1, transition:"linear"});

This is practical when you want to do Tweens in sequence (one after the other). With the Tween classes you would do it in this way:

var myTweenX:Tween = new Tween(bloc, "alpha", Strong.easeOut, 0, 1, 3, true);
myTweenX.addEventListener(TweenEvent.MOTION_FINISH, doNextTween);
 
function doNextTween(e:TweenEvent):void{
  var myTweenAlpha:Tween = new Tween(bloc, "x", None.easeOut, 0, 300, 3, true);
  myTweenX.removeEventListener(TweenEvent.MOTION_FINISH, doNextTween);
}

With Tweener:

Tweener.addTween(bloc, {alpha:1, time:3, transition:"linear"});
Tweener.addTween(bloc, {x:300, time:3, delay:3, transition:"linear"});

As you can see you use way less code using Tweener and it tends to keep all your code for an animation together which will be easier to understand when you come back. Also I have seen some benchmark and Tweener seems to be performing better than the Tween classes. So all in all I guess I am just going to ditch the Tween classes and start using Tweener from now on.

, , ,

13 Comments


Papervision3D experiments with models

I did experiments with papervision3D all day long and let me tell you this: starting by trying to import a collada model might not be the right idea at first. I finally succeeded, but not with the model I wanted …  Actually I never got my model to work but at least I know I am doing every thing right in the Flash IDE since it works for other models. I think my problem either comes from the fact that my model had too much polygons in it or we had trouble when exporting the collada file from Maya. I didn’t even code anything, I just used the papervision3D component and panel inside Flash. Its great, but I didn’t get it to work properly. It is supposed to give you a preview as you are designing but that part didn’t work. What did work was the change I was making inside the panel did show up when I compiled the movie.

It’s kinda hard to learn how to use papervision3D, at least the part about importing a model. I know gotoandlearn.com has some nice tutorials not about using model but what helped my the most is this post from John Grden. The video at the end shows you how to use the component and the panel.

, ,

No Comments


Composition vs Inheritance

I have been reading a lot these days about composition and inheritance. Inheritance is a pretty easy concept to grasp; composition on the other side is a bit more complicated. I have read quite a bit and I found much more advocates of composition than of inheritance. At least, with all this reading, i finally understood what interfaces were used for. I started looking on the subject because I had 2 problems, my first one in ActionScript 2 where I had 4 symbols all using the same base class. This worked good until I had to import that swf into another swf. Than it was as if Flash was using an older version of my swf. My second problem in ActionScript 3, I was working on a button class using 2 symbol on the stage. All these button were to use the same code so I wanted to extend another class; no can’t do because it cannot find definition for the symbols on stage in the superclass… Well I think I am going to use composition for the latest problem, but I haven’t found a solution for the first one…

, , ,

No Comments


How to pass variables from HTML to the document Class in AS3

I thought I’d make a post about this  just to make it easier for people to find answer for this question: How to pass variables from HTML to the document Class in AS3? I knew this would be more complicated then in ActionScript 2 because it was just too darn simple.  My first guess was that you would retrieve the variables from the constructor of the document class, but I was wrong. You have to use the LoaderInfo class for the root object. Here is a link showing you how to do it.

, ,

No Comments


Using Flex with Flash problems

I am really trying to integrate Flex into my work but I keep bumping into problems. I am working on a game that uses movieClips for my Sprites (Monsters). The thing is the when you embed a movieClip from Flash it loses all its ActionScript. I know that you can use a method that addScriptAtFrame but it seems to be complicated for nothing. Also what happens if I have a movieClip with a movieClip inside it? I really want to use Flex, I think it’s a great tool, the profiler is really something I wanted and it works great, but why is it so complicated to make it work (Flex)…

, ,

No Comments


What’s new in SWFAddress 2.0

SWFAddress 2.0 is being released tomorrow and Asual wrote a 3 parts article (1, 2, 3)  about what’s new with version 2.0 and why should people use it. It’s a very nice article where they also speak about a new SEO method. I was suppose to make another tutorial about SEO, but I’ll wait until I have checked their example before making it. Also they revamped their website and I find it’s much better than their older version.

, ,

No Comments