I am working very hard for the first release of flashflowfactory. There are lots of code tweaks and more improved documentation already. More about the framework and some introductions can be found in this earlier post. Now I really want to make it easy for lots of people. I already got some helpful tips from users/testers. So I am collecting everything that is needed to make it as usable as possible. I am working on demo projects and it is still alpha.
Serving as SWC
Nowadays every AS3 framework is being served as SWC. This makes it very easy to add it to any project. So I really needed to create this too 
However I thought it was easy, but I stumbled to a little problem:
I am using TweenLite, but is is not legal to serve code from GreenSock/TweenLite on googlecode, because of the special license model. Now all the flashflowfactory transitions make use of TweenLite. So when I would like to create an SWC of the framework + the transitions, I must include TweenLite. So, and that is the only option, I need to serve the transitions as a separate package. This makes me think. I am using TweenLite because it is my favorite tweenengine. I could use another tween engine, with a MIT license. But then the users of the framework should fully switch to that engine, or include multiple tweenengines in their projects (which would be crazy). So the new plan is to create an SWC of the framework without any default transition. Then I will serve multiple packages with the default transitions ported to some famous tween-engines, so you could make a choice. If you want to use Tweenlite you should download the TweenLite pack etc.. I have created the packs for TweenLite, Tweener, gTween and eaze-tween.
I thought this whole license-thing was a problem, but when I take a closer look; Now you can make use your own favorite tweenengine. I think more choice is better (in this case).
Check it out now:
- flashflowfactory.stroep.nl
- Googlecode project
- Documentation / Simple how-to
Previous year I was working on a little class called Chain. Chain is a delayed function-calling util class for AS3. Now I was already working at a updated version which could animate too (see this tweet from last year). Basically it has become a small tween engine. You have to know there are much better tween engines, like TweenLite, Tweener, eaze tween, gtween etc.. So you don’t need a new tween engine, and definitely not this one I just love to share some thoughts.
I just finished this to see how far I could come and where I have to deal with by creating such an engine. It is just fun to develop classes which will bring you to a higher level of coding, because I really want to become an actionscript sensai master or something. When starting the animation part, I was very inspired by this post, which has the same idea of combining jQuery-syntax-style with tweening, which I was already using in Chain.
Making a class chainable is very easy, you just have to return the class instance on every public function, like this:
package
{
public class ExampleChain
{
public function add():ExampleChain
{
trace(this, "saying hi!")
return this;
}
}
}
This already allows you to do this:
var chain:ExampleChain = new ExampleChain();
chain.add().add().add().add();
I think this is very powerful and we should use more chaining.
Anyway, Chain was originally created to make delayed function calling. I wrapped code around this feature, so it is still usable like it was intended, only I improved some functions and added tweening. You can pass a complete handler to the play() function. And it is also possible to reverse the full chain, even with animation.
Here again, the original simple usage
var myChain:Chain =
new Chain
();
myChain.
add(one,
2000) .
add(two,
500) .
add(three,
1000) .
play(3, onChainComplete
);
// play 3 times// some functions
function one():void { trace("one") }
function two():void { trace("two") }
function three():void { trace("three") }
function onChainComplete():void {
trace("done.");
myChain.destroy();
}
/* trace output:
one two three one two three one two three done.
*/
Animated chain example
var myChain:Chain =
new Chain
();
myChain
.
animate(myMc,
{x:
300,y:
100},
700, Easing.
elasticInOut) .
wait(200) .
animate(myMc2,
{rotation:
100, alpha:
0.5},
500, Easing.
quartIn) .
wait(200) .
play(2, onChainComplete
);
// play 2 timesfunction onChainComplete():void {
trace("done.");
myChain.destroy();
}
As you can see, you can still chain things, it animates multiple movieclips, and it can be played multiple times. It is very readable, which I really like. It works also in reversed order too, so you can reverse the full animation (pointless but cool)!
If you don’t want to animate, but instantly apply settings to a displayObject,
you can use apply(mc, {vars}), of couse this equals animate(mc,{vars},0) but it is more elegant.
To control the Chain, you have can use:
stop() Stop playing, use doContinue to play futher from current point
doContinue() Continue playing after a stop
reset() Reset indexes, start from first point. If reversed, start at last point
So how does it work? Well it is still based on the same old add() function. When you call the animate() function, internally, it is collecting the properties of the tween. Then it is calling the add() function, with a reference to a protected function playTween(), which is always the same. So when you play the chain, it just calling a local function every time, which handles the animation.
For now, I don’t have any special properties; no auto-alpha, no short-rotation, blurfilters or tinting etc. You can only animate properties of movieclips.
So how does tweening (animation over time) work? This is the formula I am using:
_target[property.name] = property.startValue + ((property.endValue – property.startValue) * _easeFunc(currentTime – _startTime) / _duration);
This needs a little explanation. For example: When you add {x:100} as object to Chain for animation, “x” is the property.name, and 100 is the property.endValue. I am also getting current “x” value of the displayobject (which should move); this is the property.startvalue. Imaging this is currently 75.
If you would write down the values into the formula, it looks like this:
myMc["x"] = 75 + ((100 – 75) * _easeFunc(currentTime – _startTime) / _duration));
Now, as you can see, this is more readable. The only thing that is still vague is the ease function. Now I have to say this was a bit hard for me to understand at the first time, but it became very clear when I did understand what is does. I have read the book ‘Making things move’ from Keith Peters (aka bit-101), which is a great reference and eye opening book for programmatic animation, trigonometry and other cool stuff. There is a chapter where animation over time is explained, which was really helpful creating the tween engine, and this time calculation. Now the time calculating returns a ratio, which is needed for the easing functions. I also studied some famous other tween engines; most of them use basically the same formula. By the way, the easing equations are used from Robert Penner.
Now, I really wanted to reverse the animations too. After some headache, the solutions was very simple. The time calculation is a value between 0-1, so I did 1 minus the time ratio
_target[property.name] = property.startValue + ((property.endValue – property.startValue) * _easeFunc(1 – (currentTime – _startTime) / _duration));
Another problem I had to deal with was the fact that animating 1 thing at a time is very boring. So I invented the animateAsync(), which works almost exactly like the animate(), only you could pass the duration and the delay as separate values. So you can move a clip for 700 milliseconds, and call the next chained item after 75 milliseconds. To compare: when using the animate() function, if you move an item for 700 milliseconds, it will take 700 milliseconds when calling the next chained item. This could cause strange behaviors and isn’t easy to manage (especially when you want to wait till all animations are done), but I its a nice feature I think. Again, even the async’s can be played in reversed order.
var myChain:Chain =
new Chain
();
myChain
.
animateAsync(myMc,
{x:
300,y:
100},
700,
10, Easing.
elasticInOut) .
animate(myMc2,
{rotation:
100, alpha:
0.5},
500, Easing.
quartIn) .
wait(200) .
play(2, onChainComplete
);
// play 2 timesfunction onChainComplete():void {
trace("done.");
myChain.destroy();
}
To clear all references, you should call the myChain.destroy(); function. This clears the references to all added functions, and clears the internal tween list.
update 02/11/2010:
- added show/hide/rotate function
- added shortRotation option
- added scale (no need to define scaleX and scaleY separately)
- optimized chain; chain items are stored by duration inside dictionary to save lots instances (where duration is the same)
- added Chain.create for fast creation of an instance
- updated apply function (extra param; apply on start)
- several coding style fixes
- added destroyOnComplete to animate() function
So if you are interested in the code, you can find it inside my googlecode:
» Chain Tween sources
I am a bit proud to present you my first own framework: flashflowfactory.
This mini-framework for actionscript 3 helps you to easily setup a flash website. flashflowfactory makes use of SWFAddress for deeplinking and TweenLite for transitions. When you need to create small/medium websites with deeplinking and basic transitions, flashflowfactory could help you develop faster. I mostly used it for custom projects like viral websites. The best of flashflowfactory is its simplicity (no need to learn hard design-patterns, it is really straight-forward if you know the basics). You don’t have to develop a page setup or start from scratch, but keep the freedom to build the site in your style.
Check it out now:
- flashflowfactory.stroep.nl
- Googlecode project
- Documentation / Simple how-to
Features
- Global page creation
- Deeplinking made easy: it’s included and no need to worry about it anymore
- Page class with transition settings and states
- Transitions between pages
- Currently 4 transitions included
- Creating your own transitions is possible. This keeps your freedom of expression and makes it usable for every custom project.
- Global page settings and these settings can be overrided on page level
- Transition in/out between page
- Easing/time customizable
- Alignment options
- Alternative navigation (button) system
- Really easy linking
- Automatic states
- Grouping aka easy active state
- Global Event system
- Listen to event from any point in your application
- Automatic Event removal system
Example setup code
var pageFactory:PageFactory =
new PageFactory
();
// add your pages here: url, classReference, title pageFactory.
add( "/home", HomePageVC,
"Welcome!" );
pageFactory.
add( "/contact", ContactPageVC,
"Contact us" );
pageFactory.
add( "/info", InfoPageVC,
"About us" );
// optional page name, which indicates where to start
pageFactory.defaultPageName = "/home";
// add default page settings, can also be overridden from the Page class
pageFactory.defaultSettings = new PageSettings(
new SlideTransition(), // transition (there are more transitions + you can easily create your own)
Elastic.easeOut, // easing of the in-transition
Strong.easeIn, // easing of the out-transition
1, // duration of the in-transition
0.7, // duration of the out-transition
Alignment.MIDDLE_CENTER, // alignment of the page on the stage
Alignment.LEFT_TOP // centerpoint position of the page
);
// add page holder to stage
addChild( pageFactory.view );
// load first page
pageFactory.init();
This is the first release. The framework is still under development, and I really need some feedback. Some example projects will follow soon.
I created a useful util-class to make delayed function calling easy. You can make a chain of functions, by adding them with a delay in milliseconds. This chain can be executed multiple times, even in reversed order.
Let’s take a look at a simple example of Chain.
var myChain:Chain =
new Chain
();
myChain.
addEventListener( Event.
COMPLETE, onComplete
);
myChain.
add(one,
2000).
add(two,
500).
add(three,
1000).
play(2);
function one():void { trace("one") }
function two():void { trace("two") }
function three():void { trace("three") }
function onComplete(e:Event):void { trace("done.") }
/* trace output:
one two three one two three done.
*/
What is happening here? At the first line we are instantiating the class, and the second line represents what chain does. There is a public function called ‘add’, which is an important part of the class. add(one, 2000) means: execute a function called ‘one’ after 2000 milliseconds. add(two,500).add(three,1000) are functions that are called after one is finished, with other delays. You can create your own rhythm/sequence/pattern. At the end we see play(2), which means: Execute the sequence of functions defined before, and repeat them 2 times. After that, dispatch event COMPLETE.
So that’s basically it. A cool part is you can play it reversed, using playReversed(). I am inspired by jQuery (which has nothing to do with this) to enable the ability to stick functions, but thats optional.
myChain.
playReversed(2);
/* trace output:
three two one three two one
*/
Of course you can pauze/continue when you are playing, by calling stop() / doContinue(), and you can determine if it is currently playing using the isPlaying-getter.
These are all the public functions.
/// Constructor public function Chain
()/// Adds a function at a specified interval (in milliseconds).
public function add(func:Function, delay:Number = 0):Chain
/// Start playing the sequence and calling functions
public function play(repeatCount:int = 0):void
/// Start playing the sequence reversed
public function playReversed(repeatCount:int = 0):void
/// Clears sequence list. Data will be removed.
public function clear():Chain
/// Stop playing, use doContinue to play futher from current point
public function stop():void
/// Continue playing after a stop
public function doContinue():Chain
/// Reset indexes
public function reset():void
/// Returns the string representation of the Chain private vars.
public function toString():String
/// Return chain is playing, stopped or completed
public function get isPlaying():Boolean
Hope you like it, let me know if you like to see extra/other related features.
Download: Chain (googlecode)
Updates
- Private functions are protected
- add-functions is now add(function, delay), where function is required.
- Class now extends EventDispatcher and play/playReversed dispatches Event.COMPLETE after playing sequence, instead of calling onComplete function
- Cleaned up code
Flashflowfactory as SWC (10)
Today I created a 
