Creative COW ACCOUNT & SETTINGS :: SPONSORS :: ABOUT US :: CONTACT US
BLOGS: Account & SettingsMacWorldEditingTechnologyAfter EffectsFinal CutEntertainment

About Pieter Helsen

User login

Custom Classes in Flash: Tweener and XML2Object

When you're working on a project, time is almost always working against you. That is why I rely on classes for my projects. Classes in its most basic definition are a set of reusable functions or methods. The keyword here being reusable of course. A good class can be applied and reapplied and because of this, is a huge time saver.

However, I'm not going to talk to you about Object-Oriented Programming or how to create your own custom classes in Actionscript. I -am- going to talk to you about classes that are already out there and that you can use freely.

There are two classes that you will almost always need when working on a big or advanced project; a transition class and an XML parser class. (With the introduction of AS3 and E4X, the need for an XML parser has somewhat declined).

Tweener

First, the transition class, or more commonly known as a tween class. Flash actually comes with a Tween class. It allows you to tween a single property of an instance on the stage via Actionscript. Unfortunately, you will soon find that Adobe's default Tween class is far from efficient. Luckily there are a few good tween classes out there. And it's really only through using them that you will be able to tell which one is better for you. Some of the classes out there are Fuse Kit, Tweener and TweenMax. I usually prefer working with Tweener because of its easy-to-understand syntax and many features, but as I’ve said before, each class has its benefits.

So why choose Tweener over Adobe’s Tween class? Let's look at some of the main differences between the two classes. What annoys me the most about Adobe's Tween class is that you can only tween one property at a time. So for instance if you want to scale a movieclip, you have to create two tweens (_xscale and _yscale), like this:

// Tween syntax
// new Tween(target_mc, Property, BeginValue, EndValue, Time, useSeconds);
var tweenx:Tween = new Tween(my_mc, "_xscale", 100, 50, 30, false);
var tweeny:Tween = new Tween(my_mc, "_yscale", 100, 50, 30, false);

where, with Tweener, you just create one tween that scales both. Like this:


Tweener.addTween(my_mc, {_xscale:50, _yscale:50, time:30, useFrames:true});

Less code, less likely to make mistakes!
Another huge advantage of Tweener is that you have a much bigger transition library than Adobe’s Tween class has. Transitions are basically mathematical calculations of how the object is tweened. From a regular tween to a strong tween that eases out towards the end or a tween that bounces back a little before settling at the end position. The Tween class has 16 transition types whereas Tweener has 41. I know, bigger isn’t always better, this is true, I usually only use one particular transition type, but it is one that isn’t present with the default tween class.

And last but not least, we have the delay property. When you’re tweening a lot of different instances, you usually don’t want to tween them all at the same time. You want to create a smooth movement and you thus, want to wait a little after each tween before the next tween begins. With Adobe’s Tween class, you would have to solve this by setting an interval that invokes a function that then creates a tween instance for a set period. Its hard just typing it, why would coding it be easy? That is why Tweener has a delay property. This is how the delay property can solve a lot of problems for you:


for(i=0; i<20; i++){
Tweener.addTween(this[i + "_mc"], {_alpha:0, delay: i * 1, time:0.5, transition:"easeoutquad"});
}

What this does is fade out twenty different instances (0_mc, 1_mc, 2_mc, …) with an interval of one second.

These are only a few of the many advantage to the Tweener class, for a detailed overview, check their online documention.

Other useful features include:
- Bezier tweening
- Text tweening (letter per letter)
- getTweens (returns the properties of an object that is currently tweened )

XML2Object

One of the biggest pains in Actionscript 2 is dealing with XML data. Still, XML is a great way to load external data into flash, so we try to find a workaround for the pain in the ass that is childNodes.
The solution comes to us via Sephiroth’s XML2Object class. A class that parses the XML and outputs it in an easy-to-manipulate object. So instead of using childNodes and the like, you can just address the node by their names.
An example, Flash’s way of dealing with XML data looks somewhat like this:


xml_root.childNodes[0].childNodes[2].firstChild.nodeValue;

Not very descriptive. This is an – ok – way if you actually know what your XML files look like. If you, however, change around the order of your nodes in the XML file, this code will produce unwanted output. Now, you can solve this by checking to see what the node name is, but that –again- is just a huge pain in the ass. XML2Object solves this thus:


xml_root.portfolio.image[2].url.data;

Not only is it much easier to deduct which data this piece of code is gathering, it is also a lot less prone to errors, because no matter where you put the portfolio node in the document, it will find it. (whereas with the previous example, the portfolio node had to be the first node in the document)

Everyone who’s worked with XML and hasn’t worked with this class – has – to at least try it. It will make your life a lot easier. Download it here. It comes with an example that should explain everything.

And last but not least a little note on how to use these classes. XML2Object comes as a self-extracting package so just extract, double-click and boot up flash. All that’s left to do is to import the class by placing the below statement above all your other lines of code.


import it.sephiroth.XML2Object;

Tweener is a little trickier. I usually prefer to extract the caurina folder into all of the project folders that use the class. In other words, I just put the folder in the same place where my .fla is. Once you’ve done that, open Flash, go to File > Publish Settings… > Flash > Actionscript Settings and add a class path that leads to the project folder (a dot) as depicted in the screenshots below.

After that’s done, you can import and use the class like this:


import caurina.transitions.Tweener;

If you have any questions, please post them on our Flash board.


  Digg it Digg it

Topic

- Adobe (41)
- After Effects (34)
- AJA (4)
- Animation (5)
- Apple (127)
- Apple TV (8)
- Avid (16)
- Blackmagic Design (9)
- Blogs (37)
- Blu-ray/HD DVD (22)
- Books (3)
- Business (35)
- CalDigit (3)
- Cameras (9)
- Commercials (15)
- Computers (14)
- Creative COW (30)
- Digital photography (13)
- Discreet *edit (1)
- Documentaries (27)
- DRM (5)
- DV (5)
- DVD (16)
- Editing (111)
- Education (10)
- Entertainment (61)
- Environment (5)
- Family (15)
- Final Cut Pro (102)
- Flash (5)
- Food (5)
- Future, The (9)
- Gaming (7)
- Google (7)
- HD (28)
- HDV (10)
- Health care (3)
- Indie film (37)
- iPhone (16)
- iPod (10)
- iTunes (7)
- Mac OS (22)
- MacWorld (20)
- Magazines (9)
- Microsoft (6)
- Movies (18)
- Music (18)
- NAB (15)
- Open Source (2)
- P2 (13)
- Panasonic (7)
- Pets (5)
- Photoshop (10)
- Platform wars (5)
- Podcasting (4)
- Politics (8)
- Premiere Pro (15)
- RED Camera (7)
- Shake (2)
- Sony (8)
- Sports (6)
- Storage (16)
- Technology (66)
- Television (47)
- Travel (12)
- Vegas (video) (5)
- Web (22)
- Web authoring (7)
- Websites (14)
- Windows OS (5)
- Workflow (18)
- YouTube (7)

Recent Bloggers



FORUMSLIBRARYPODCASTSBLOGSMAGAZINESERVICESNEWSLETTERSNEWSSTOREEVENTS

© CreativeCOW.net All rights are reserved.

[Top]