Posts Tagged TweenLite

Prepare to Roar

If you have been wondering why I haven’t been writting a lot this summer, well it’s been mostly because of this project. I learned a great deal on Papervision3D, using the webcam, on playing with bitmaps and on Facebook connect (even if I wasn’t the one doing that part) while building this project. So here you go, create some roars:

http://www.roar4milk.ca

The goal of the campaign was to get teens involved with milk and to build on some ad spots that performed very well on MTV. So what you are doing with this application is recreating the ads but adding yourself at the end instead of the cow. Now I knowthat the site is a bit (to say the least) CPU intensive (3D tends to do this), but believe me it was worse than this before and I wish I would have had a bit more time to perfect this site.

The technical cool part is that you can use your picture, be it by uploading it or using your webcam, and using the derivate bitmap I will composite it with the cow skin and apply that to the loaded Collada model. That was kind of the premise of this site and we built around it with a vintage design. I hope you like it.

Here is a short list of librairies we used: as3corelib, TweenLite, Alcon, facebook api, google analytics for flash and Papervision3D.

Another cool feature is that you can embed your roar on your blog like this:

, , , , , , ,

No Comments


Introduction to TimelineLite / TimelineMax

TimelineLite is a new library from the maker of TweenLite that enables you to group TweenLite instances (Tweens) to create the equivalent of the Flash Authoring Tool Timeline but in code. If you don’t know what TweenLite is head over to my tutorial on it first.

What is it for

The goal of this library is to give more power to the already powerful TweenLite library and to emulate some of the MovieClip’s functionalities. Once built, a TimelineLite instance will possess some methods that we’ve known for a long time: play(), stop(), gotoAndPlay(), etc. Three methods are used to create the timeline: append(), insert(), insertMultipple(). I prefer the insert method, it gives you more flexibility because you can set the time at which the Tween starts. The append() method will simply add your TweenLite instance at the end of the current timeline.

Here are some examples of how you would create a TimelineLite :

var myTimeline:TimelineLite = new TimelineLite();
 
//this will have 3 tween starting one after the one before is done
myTimeline.append(new TweenLite(mc, 1, {x:200, y:100}));
myTimeline.append(new TweenLite(mc, 0.5, {alpha:0}));
myTimeline.append(new TweenLite(mc, 0.5, {alpha:1}));
 
myTimeline.play();
 
//this one will have concurrent tweens a bit like layered tweens in the Flash Timeline
myTimeline.insert(new TweenLite(mc, 1, {x:200, y:100}), 0);
myTimeline.insert(new TweenLite(mc, 0.5, {alpha:0}), 0.75);
myTimeline.insert(new TweenLite(mc, 0.5, {scaleX:2}), 1.25);

Some of the cool stuff you can do with is that inside a TimelineLite you can insert other TimelineLite instances. Also you can add Labels and tween using TweenLite to those labels. You can tween the time of the timeline as well as the progress. Here are examples of what I just mentioned:

var myTimeline:TimelineLite = new TimelineLite();
myTimeline.insert(new TweenLite(mc, 1, {x:200, y:100}), 0);
myTimeline.insert(new TweenLite(mc, 0.5, {alpha:0}), 0.75);
myTimeline.insert(new TweenLite(mc, 0.5, {scaleX:2}), 1);
 
//Tween the timeline to any place in percent (from 0 to 1)
TweenLite.to(myTimeline, 0.5, {progress:1});
 
//Tween to a particular second in time (from 0 to the duration of the timeline)
TweenLite.to(myTimeline, 0.5, {time:0.75});

Its advantages

The major advantage that TimelineLite posesses over real timeline is the fact that it is dynamic. Meaning that you could make an function that takes a display object, that function would create an animation based on it and return a TimelineLite instance that you could use afterward. Then you could use that function to create the same animation on multiple display objects. Another example is that you could create animation based on what the user does, like you make him choose a number and you append that many instances on TweenLite in your TimelineLite (easy to do with traditionnal timeline too, but its just an example).

Its Max conterpart

As for the TweenLite library, TimelineLite has its Max equivalent, TimelineMax, which has more features like AS3 event listeners, repeat, repeatDelay, yoyo, addCallback(), removeCallback(), getActive(), etc.  Just to tell you how good this library is,  I have done a TimelineLite instance that tweened 25 display objects and 625 TweenLite instances and it worked perfectly fine, it wasn’t even slowing down.

, , , , , ,

4 Comments


Transition to tile: third RIA for Home Depot

Yes this is the third installment of tools we did for the Home Depot and I can say that working on this one was just simple and easy, mostly because we used PureMVC on the previous one. As you can see, Transition to tile reuse a lot of components from Redefining floors, but the middle part is really different. Making the changes and adjusting what was already there really was a breeze and that is were you see the advantages of using a framework. The technologies we used were mostly the same as the one before but I am going to list them here again:

  1. TweenLite
  2. PureMVC
  3. SWFAddress
  4. SWFObject
  5. Alcon (for tracing SWFAddress stuff)
  6. Google Analytics for Flash

I hope you like the tools we are building for Home Depot because there is more in the pipeline.

, , , , , ,

1 Comment


Shaving some kb when using TweenLite (or TweenMax)

Introduction

I was working on some banners lately and with banners, every kilobytes counts. So I downloaded the new version of  TweenLite for AS2 (because I can’t do shit without TweenLite) and noticed so weird behavior (not so weird once you understand about the file size. I mostly has to do with the new plugin architecture, which I wasn’t acustumed to.

When you unpack the downloaded file from TweenLite, there is in there, a very usefull Plugin Explorer to help you understand how plugins work and to generate the code you need to activate only the plugins you want which looks something like:

import gs.plugins.*;
TweenPlugin.activate([ColorMatrixFilterPlugin, BlurFilterPlugin]);

With that code you would activate the ColorMatrixFilter plugin and the BlurFilter Plugin. I tought at first that that would be the only plugins activated and so the Plugin Explorer was telling me that if you activate only these plugin TweenLite should only add 5.5kb to my file.But that wasn’t what I was seeing it was more around 8kb (I know that isn’t much different but when you do banners, you fight for every kb).

Here is the solution

It turns out that when call the TweenPlugin.activate method, even if you say to activate only 2 plugins, it doesn’t deactivate the plugins that are activated by default. In order to do so, you have to go in the file TweenLite.as and comments the lines where these are activated like this:

...
//this starts on line 257 of the TweenLite.as file VERSION: 10.09
 
public function TweenLite($target:Object, $duration:Number, $vars:Object) {
if (TweenLite.timerClip._visible != false || !_tlInitted) {
 
TweenPlugin.activate([
 
//ACTIVATE (OR DEACTIVATE) PLUGINS HERE...
 
//TintPlugin,
// RemoveTintPlugin,
//   FramePlugin,
//   AutoAlphaPlugin,
//    VisiblePlugin,
//     VolumePlugin,
//   EndArrayPlugin
 
//So by commenting these previous lines, these plugins won't be activated thus saving you some kb
]);

You have to get your hands dirty, but in the end you gain a lot of flexibility plus you have only what you need activated.

More stuff on TweenLite

Well I’m always playing with TweenLite, so the other day I was using the ColorMatrixFilterPlugin on some really big MovieClips (9000px large). Well it turns out that Flash isn’t able to do bitmap manipulations (Matrices or Filters) on MovieClip bigger than 2800px.  So my Tweens on them would just not work (not TweenLite’s fault). What you have to do is segment your big MovieClip in chunks of 2800px and do a Tween on each of them at the same time.

Lastly, on the TweenLite website today you could read that Jack Doyle (TweenLite creator) and Grant Skinner (creator of gTween) will be working together on the next version of TweenLite/TweenMax. This can only mean great things for the future of this Tweening library! I look forward to the next version.

, , , , , ,

2 Comments


Gingerbread house builder – TELUS holiday 2008 card

Just a quick post, while it is still the time, to bring you to the Gingerbread house builder we did for TELUS. I think it is a pretty little piece of flash that is fun and will make you smile. As it is the costum with holiday cards, the deadline was really tight but I think we managed well. This small rich internet application is packed with features that if you don’t stop to look, you won’t notice.

First the send to friend option actually sends a picture of the gingerbread house you built which was very nice to program. I had to take a screenshot(bitmapData.draw) of the House MovieClip encode it in JPEG (using as3corelib) and send it to the server. Next nifty detail is the print version of the recipe which also includes a picture of your creation. It wasn’t something really complicated to do considering I mostly used the send to friend code and put it in a PrintJob. Lastly, to save the recipe to PDF, instead of simply doing a navigateToURL to the PDF location, which would have opened a new tab in the browser with the PDF in it, I used FileReference.download to pop the download window so that the file is directly downloaded.

Independently these attentions might not seem like much, but if you put it all together the user won’t notice it but he will still feel this is a better application, without knowing why. Don’t get me wrong, I’m am not saying that the TELUS holiday card is the best application out there; I am saying that paying attention to details is what makes the difference between a nice application and a great one.

In that sense, I think there are stuff we could have done better. Mostly sound wise, to emphasize the meerkat (that is the name of the current TELUS critter) sneaking to take a bite on your gingerbread house. I’m not good at all in audio and when it comes to it I need help, and sound is somewhat not needed to make a website / application functionnal and beautiful, so it is often forgotten. But I will make sure in following projects to give it the proper time.

As I always do here is a list of the libraries I used to build it:

Well that’s it, enjoy your holidays, I surely will!

, , , , , ,

2 Comments


This is not SPAM, VIAGRA.ca is live!

I have been working hard (that’s the last joke I make on this, I don’t event know if I am allowed) on this website for a long time, but it’s finally live!. Because of canadian regulation on advertising and pharmaceutical prescription drug, the process of making the canadian version of the VIAGRA website is unlike other; more steps are involved when you try to get content approved. So that’s why I have been working on this for a long time, but it’s finally out and I am really happy of the results.

What is funny when you work on a project for such a long time is the fact that you improve so much in the mean time, that you look back at your early code and you can’t believe you did that. During I was working on the VIAGRA website,  I switched animation package three time to end up with TweenLite, I started looking at SWFAddress now I kinda use it on every project, knew nothing about AS3 and so on. It was also the first project where I started using Object Oriented techniques to build it.

When I present a website I did, I like to list all the libraries I used, so here I go again. Well first it was all built in Actionscript 2.

Most of the 3D was done using 3D Studio Max exept for the button animations that where done using Maya.

Well that’s it, go and hang around the VIAGRA.ca clubhouse!

That conclude my week of posting everyday (well I didn’t post yesterday, but I posted twice today), see you in a month (just joking).

, , , , ,

2 Comments


My second Rich Internet Application

A month ago (October 15th 2008) was the release of Flash player 10, but it was also the week that my second rich internet application was set (a)live. I wanted to make a post about it for a long time but I had a lot going on and only just now have things slowed down. So I present you Home Depot – redefining floors. I am really proud of it and I really put a lot of energy in it. It is the legitimate big brother of the previous RIA I made Home Depot – think in colour. I had known for a little while that I would be doing a follow up application to the paint picker and I had started planning and building the application in my head. When the development began, I knew a lot of things that I would not be doing again. Some of the pitfalls that I had faced doing the first application would not show up this time; I was ready and awaiting this new challenge with the motivation to do something better.

In the first one I had jumped head first into the code because I didn’t see any reason why I would use a framework, it was ok at first, but when the codebase became more imposing, dispatching event also became very tedious. So this time around, I used the framework PureMVC and I can say it helped a lot; it helped with the events and it also helped with shaping my ideas into classes.

An other thing I did differently was that I made sure that my ActionScript classes wouldn’t have displayed text in it. I live in Montreal and we speak mostly French here but the rest of Canada speaks English. So if I start putting copy in my code, I will need to have a codebase for French and a codebase for English. That is what I had done for the first application and every time a modification had to be done I had a whole lot of files to touch. So this time around most of the text was located in an xml file which was something better.

All in all, it was a very nice project that I liked to do a lot and seeing how its little brother got rewarded last Friday (Home Depot – think in colour won a Bronze CMA award  in the retailing category on November 28th 2008) I foresee a bright future for this one too.

Here is a couple more libraries I have been using for this project:

  1. TweenLite
  2. PureMVC
  3. SWFAddress
  4. SWFObject
  5. Alcon (for tracing SWFAddress stuff)

I have a couple of new ideas how to improve my workflow and tools for my next RIA; can’t wait to get my hands dirty!

, , , , , , , , , ,

7 Comments


My intermediate Flash presentation

Where I work we have these kind of workshops that are given by the employees. I was mandated to give a presentation entitled Advanced Flash, but it is not really going to be advanced; more like intermediate. I am basically going to introduce ActionScript 3, Tweening using TweenLite, Events, Linking symbol to a class, using the document class, loading an image, loading an XML and maybe speak about setIntervals and setTimeout versus Timer. I thought I would make this blog post my actual presentation notes so that it would help also people reading my blog.

My objective after this workshop is that the people attending it will be able to open Flash files I did using ActionScript 3 and find what they are looking for and also understand mostly the mechanics in the project. I did the presentation on May 13th and it went well for the most part, the biggest trouble was because we where on a projector with a resolution of 1024×768 and I am used to have 2 22 inch monitors (I hate the way Flash CS3 handles its panels).

Difference between ActionScript 2 and 3

First I want to mention difference between ActionScript 2 and 3. Mostly in the properties of a MovieClip, there used to be properties called _x, _y, _rotation, _visible, _alpha, _width, _height. Now these properties have been renamed to x, y, rotation, visible, alpha, width, height. The alpha property now goes from 0 to 1 instead of 0 to 100. If you want an alpha of 60% you do this: alpha = 0.6. Last thing, you cannot put ActionScript on MovieClip anymore, only on a frame in the timeline or in a class (external AS file). This will help prevent searching for ActionScript code for hours.

I am used to MovieClip, but what are Sprites?

Sprites are just a toned down version of a MovieClip. Sprites don’t have timelines, so you can’t use function like gotoAndPlay() and stop(). Why use them? Well since they don’t have a timeline and the timeline associated functions they also take less memory, so they should always be used whenever you don’t need the timeline. More on Sprites later.

Making things move, TweenLite for everything

One of the biggest building block in all of my projects is TweenLite. Nearly every swf or external class I use will have TweenLite in it. Here is a tutorial on how to use TweenLite. If you run one of my swf files if something moves it has 90% chance that TweenLite is making it move. I also use it for fade in, fade out transitions, button rollovers and music fade out.

1
TweenLite.to(rectangle, 1.5, {x:300, y:300, alpha:50, tint:0x0000ff});

A simple button using Sprites

Here is how I would do a simple button using Sprites and TweenLite. First draw a rectangle on the stage. Then convert it to a symbol, click export for ActionScript, in the base class field put flash.display.Sprite instead of flash.display.MovieClip. That is how you can create Sprites using Flash CS3. Now give the newly created Sprite a variable name of rectangle. Put the following code on the first frame on your movie (you will have to have downloaded TweenLite before you can do this):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import gs.TweenLite;
 
rectangle.buttonMode = true;
rectangle.mouseChildren = false;
 
rectangle.addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
rectangle.addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
rectangle.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
 
function handleMouseOver(event:MouseEvent):void{
  TweenLite.to(rectangle, 0.5, {tint:0xFF0000});
}
 
function handleMouseOut(event:MouseEvent):void{
  TweenLite.to(rectangle, 0.5, {tint:0x0000FF});
}
 
function handleMouseDown(event:MouseEvent):void{
  trace ("this is the mouse down event");
}

This method works fine in most cases but when you have multiple buttons, you have to copy and paste all 14 previous line of code and that makes a lot of overhead. That is exactly why we use classes.

Taking that simple button and make it a class

The following code is exactly like the code we put on the timeline before but written as a class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package net.zedia{
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  import gs.TweenLite;
 
  public class MySimpleButton extends Sprite{
    public function MySimpleButton(){
      buttonMode = true;
      mouseChildren = false;
      addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
      addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
    }
 
    private function handleMouseOver(event:MouseEvent):void{
      TweenLite.to(this, 0.5, {tint:0xFF0000});
    }
 
    private function handleMouseOut(event:MouseEvent):void{
      TweenLite.to(this, 0.5, {tint:0x0000FF});
    }
  }
}

Here is how you would then use this class :

1
2
3
4
5
6
7
8
9
import net.zedia.MySimpleButton;
 
var mySimpleButton1:MySimpleButton = new MySimpleButton();
var mySimpleButton2:MySimpleButton = new MySimpleButton();
 
mySimpleButton2.y = 100;
 
addChild(mySimpleButton1);
addChild(mySimpleButton2);

In this example both buttons will have rollOvers and rollOut implemented.

Document class where is it?

1
2
3
4
5
6
7
package {
  import flash.display.Sprite;
  public class Main extends Sprite {
    public function Main(){
    }
  }
}

Loading an image

Loading an image is quite simple, you have to use a class named Loader which is a DisplayObject. Just as for the button, you have to add a listener to the object to know when the file as totally loaded. Loader are special in the way that you don’t attach the listener directly to the Object. You do it like this: myLoader.contentLoaderInfo.addEventListener. The Loader is the only class that behaves this way.

1
2
3
4
5
6
7
8
9
10
11
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
 
var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleInit);
myLoader.load(new URLRequest("slide1.png"));
 
function handleInit(e:Event):void{
  addChild(myLoader.content);
}

Loading a XML

Loading an XML is similar to loading an image except that you use the URLLoader class instead of the Loader class. The URLLoader class doesn’t have the weird event behavior so you attach the listener directly to the object.

1
2
3
4
5
6
7
8
9
10
11
12
13
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
 
var XMLLoader:URLLoader;
 
XMLLoader = new URLLoader(new URLRequest("myXML.xml"));
XMLLoader.addEventListener(Event.COMPLETE, handleLoadedXml);
 
function handleLoadedXml(event:Event):void{
  var xml:XML = new XML(event.target.data); // or var xml:XML = new XML(XMLLoader.data)
  trace (xml.rooms.room[0]);
}

Preloading

Preloading a swf file or an image is exactly the same thing. I always make my preloader external to the file I am loading. There is another way of doing this by doing the preloader in the first 2 frames of a swf file. The advantage of doing an external preloader is that it will start at zero if you exported symbols in the library for ActionScript. Basically we take the code we had for loading an image and we add the listener and the handler function for the PROGRESS event.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import flash.display.Loader;
import flash.display.Event;
 
var myLoader:Loader = new Loader();
myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleInit);
myLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, handleProgress);
myLoader.load(new URLRequest("main.swf"));
 
function handleProgress(event:ProgressEvent):void{
  var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100)
  trace (percent);
}
 
function handleInit(e:Event):void{
  addChild(myLoader.content);
}

setIntervals and setTimeout VS Timer or TweenLite.delayedCall

In ActionScript 3 it is not good practice to use setIntervals and setTimeouts but they are still available if you really need them. It is better to use the Timer class, but I never really use it, instead I use TweenLite to make stuff move, ENTER_FRAME for setIntervals and TweenLite.delayedCall for setTimeouts. Here is an example of how to use TweenLite.delayedCall:

1
2
3
4
5
6
7
8
9
import gs.TweenLite;
 
TweenLite.delayedCall(3, startAnim);
 
function startAnim():void{
  trace ("animation started");
}
 
TweenLite.killDelayedCallsTo(startAnim);

, , ,

2 Comments


Fading out volume using TweenLite

I showed in my previous post how to change the volume of a playing sound. In this post I am going to show how to tween that volume using TweenLite.

The class we are going to do the tween on is the SoundTransform class. So we will first have to create our sound objects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var someSound = new Sound(new URLRequest("MySound.mp3");
var someChannel = new SoundChannel();
var someTransform = new SoundTransform(1);//volume is set to the max
 
someChannel = someSound.play(0, 99999, someTransform);//The sound will start from 0 millisecond, will loop 99999 times and will use the someTransform SoundTransform
 
//the next lines are for fading out the volume
 
TweenLite.to(someSound, 1, {volume:0, onUpdate:updateChannel, onComplete:stopSound});
 
function updateChannel():void{
  someChannel.soundTransform = someTransform;
}
 
function stopSound():void{
  someChannel.stop();
}

As you can see, even if you modify the volume parameter of the SoundTranform it won’t do a thing. You also have to update the SoundChannel. You can’t also tween the SoundChannel.soundTransform.volume directly. It’s the same as when you tween colors using Color.interpolateColor, you have to modify an intermediate Object.

, , , ,

24 Comments


ActionScript 3 TweenLite Basic Tutorial

If you have been following this blog for some time now you have witnessed my evolution in the use of tweening engines. I was first using the Tween classes from Adobe and made a tutorial about them. After that I found Tweener, which I liked a lot for it ease of use and its speed improvement so I modified my tutorial to explain Tweener. My new evolution in the field of tweening engine is TweenLite mostly because it is faster and lighter than Tweener. Since I did a tutorial on how to use the two previous tweening engines; it is only normal that I do one also for TweenLite.

Well the first thing you have to do is download the classes of TweenLite. After that you need to import the class in order to use it; here is the import statement:

1
2
import gs.TweenLite;
import fl.motion.easing.*;

TweenLite as the name states is really light; it weights only 2k which is better than Tweener(10k). As you can see in the previous code I also imported the Adobe easing function. If you want to use easing, you will have to do that also which will had an additional 1k to the package.

TweenLite syntax is really similar to Tweener which is good since that was an advantage of using Tweener. Here is a simple tween using TweenLite:

1
TweenLite.to (rectangle, 3, {x:300, ease:Linear.easeIn});

The difference from Tweener’s syntax is that the second parameter in TweenLite is duration(how much time in seconds will the tween last) in this case 3 seconds. So this line of code will make the displayObject rectangle move from its currents position to a new position where its x value will be 300 in 3 seconds.

The same way you did it with Tweener, you can also tween multiple properties with TweenLite, here is an example:

1
TweenLite.to(rectangle, 1, {x:300, alpha:1, scaleX:1.5, scaleY:1.5, delay:2});

So this the rectangle will go to the x position 300, its alpha will raise to 100%, it will grow to 1.5 its original scale, all that in one second after a 2 second delay.

As you can see TweenLite offers all the advantages that Tweener offers with 2 more being light weight and being faster. I hope this tutorial will help you.

,

10 Comments