Posts Tagged Tweener

TweenLite, Tweener, GOASAP | Fun with animation packages

I have been speaking a lot about Tweener these days and for a good reason; it’s a really good as3 animation library. I can’t say I have been having trouble with it but I found evidence from different sources that it might not be the best animation package for what I want to do.

What I am doing is mostly websites and in those website I use ActionScript to make everything move; I rarely use the timeline. All of my tweens are at most 1 second long but most of the time they last about 0.5 second. I liked Tweener because it was way better than Adobe’s Tween classes but I found from 2 different sources (TweenLite, GOASAP) that TweenLite is faster for small tweens than Tweener. You might know that already, but being fast is one of the most important attribute for me in a tweening engine. Not so much because I use too much animation at the same time but more because that when I start Tweens, I don’t want them to eat all of the cpu, I want them too leave as much processing power for other stuff like timeline animations, video etc. These is all to say that I am changing all my code from Tweener to Tweenlite (that I had previously changed from Adobe Tween classes to Tweener) because I need the extra speed badly.

Something came up since I started this project. From the maker of the Fuse kit comes GOASAP. Which looks very promissing; it’s  not an animation package per say, it’s more like animation package building blocks. Since sometime there is a lot of overhead in animation engine for things that you will never use, Moses Supposes made us all animation library developers. The GOASAP code base is in AS3 and I can’t wait to start using it. In the mean time I invite you all to go and start developing your own animation code;

, , ,

1 Comment


Impacts of Silverlight for a Flash Programmer

I have been thinking lately about what impacts will Silverlight have on me as a Flash Programmer. I came to the conclusion that it wasn’t really threatening. It could have been threatening in the sense that it could have made Flash obsolete and make me loose future jobs at the same time. But the thing is, Flash is such a good technology, it’s been around for a long time, the community supporting it is amazing and Adobe has big plan for it, Silverlight would have to be packed with a lot of feature in order to shake Flash’s position in the market. I don’t think it has just that.

It’s true that videos in Silverlight look good, but now with the moviestar release of the Flash Player, I don’t think one is better than the other on that characteristic. It’s nice for programmers who know .net, they can just jump right in and start programming Silverlight applications (maybe with a small learning curve). Good for them, .net programmers are already in demand, now they are going to be even more in demand, their salary is going to increase, so does the cost of building a Silverlight application.

One of the thing that Flash as always suffered was the penetration rate of the Flash Player, as a proof, website using flash 9 are now starting to emerge even if its been more than 6 month since it’s been release. Silverlight will suffer even more as people are not willing to download anything anymore. Flash as the chance to be adopted by huge website like Youtube and Facebook and has been around for way longer, people trust the Flash brand.

A big advantage Flash has over Silverlight is all the documentation lying around the web. If you want to know how to do something in Flash, just Google it, it’s that easy. Also open source projects like papervision3d and Tweener are just amazing.

For all these reasons, I don’t think Flash programmers have to be afraid for their jobs because of Silverlight and that for at least five years. I actually think Silverlight is a good thing; a little competition never hurt anyone, Adobe will have to keep improving Flash which is very good for us.

, , , , ,

4 Comments


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


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


Using fl.* packages in Flex and more

Slow days at work means I get to experiment and search the web for new ways to develop. I did a lot of research today on Flex until I stumbled on this presentation on the beedigital blog. It’s a very nice presentation on how to integrate Flash and Flex in your workflow. That’s exactly what I wanted. After see it I tried to do some test projects in Flex. Most of the time I do every thing in ActionScript so I thought this wouldn’t be too difficult. The trouble is that most of the time I also use the Tween and Easing classes from Flash. These classes come in the fl.* package and this package does not compile in Flex. I searched a bit how I could make these classes compile but I only found complicated methods of doing so. I tired also to use the Tween classes from Flex, but in order to use them you have also to include the Flex framework which adds 100k to your project. My simple solution to this problem; using Tweener for my tweens. Tweener only adds 10k to a swf file compared to the fuse engine (which is not in AS3 yet). It’s not so bad, it’s only a 8k difference to the Flash Tween classes (2k). Also using it a bit, I might have misjudged Tweener a bit because it works very well. I might in the future redo some example using Tweener instead of the Tween classes.

I went on the blog of Samuel Asher Rivell, the author of the presentation I spoke of earlier, and found some other interesting things. First there is the Montreal Game Summit that’s going to be held on November 27th and 28th. I live in Montreal so I’d be pretty happy to go there, at least on the first day. It has some interesting conferences about Flash that I’d like to see especially the one given by Samuel Asher Rivell on Advertgames.  The second nice thing I found on his blog is the powerpoint presentation of one of the conference he gave on blitting. I had seen the technique some time on the web but never knowing what it was or how to do it. His presentation is a good introduction to it and I’d be really interested in hearing his speech about it. There might be more on blitting on this blog since it looks really promising.

, , , , , , ,

No Comments


9-slices scaling, Papervision 3D, Tweener and FlashDevelop

I am currently working on a website with tons of rounded corners, so I’m pretty happy they added 9-slices scaling in Flash 8. The only problem I had today, was that I wanted to apply 9-slices scaling on a mask and it happens that you just can’t. You can’t do it using ActionScript and you can’t use it using the Flash Authoring tool. I don’t know about flash 9, but I sure hope they will get that to work.

I also stumbled upon something that looks pretty cool: Papervision 3D . The name says it, you can use it to do 3D in flash, haven’t tried it yet but it looks sweet. And while browsing their website I found a nice example using Tweener which I spoke off recently. They’ll both deserve more investigation.

Finally, on the same project I am working with all those rounded corner I am using FlashDevelop. I use it because I find the Flash Authoring tool to be really bad (Flash 8 ) for ActionScript. Well I said FlashDevelop was good, but I would rectify what I said, and now say that it is still experimental. I had all sort of problems with it, mostly with the auto-completion tool completing things all the time which I didn’t ask for . Just thought I’d share that with you.

, , , ,

No Comments


Tweener and stuff

Today I found another tweening engine called Tweener. For those who know it, it is the successor of MC Tween. It looks great, it permits you to do tweens on a lot of properties and there is a delay argument, so your code will look cleaner (without all the setTimeout). The down side is still the weight, well it’s way less than the Fuse kit but still; 9.2kb for ActionScript 2 or 10.4 kb for ActionScript 3. This include all of the Robert Penner’s original easing equations and there is a nice page showing the difference between each of them. I think I will try this code some time soon and I’ll give you feedback about it.

This weekend, I’ll try to work on the wordpress template because I think it looks too common and it’s way too narrow, ActionScript code doesn’t look like I would like it to. Maybe I’ll have time to update the ActionScript 3 Tween tutorial too.

, , ,

No Comments