Lots of updates since my initial post. Many of which are documented in the class script.
The entire process is attempted to be streamlined.
Join the class to the script.
Make a message(txt) function
Use the message() function and forget about it. Your done. That's it for a simple notification
Although simple means, there's only 1 animated text at a time. If your creative, you could do a chat system with animated texts and whatever else you can think of.
Here's the message() function used in the demo reel. As an example of 'most' features. Although the possibilities are infinite. and Mostly pretty. I still haven't seen anybody try it in -opengl mode or v6, should be nicer.
Don't think this is really complex. Remember, this is the message() function for that entire demo.
Edit: I just updated it, so now it uses less { }'s
PHP Code:
function msg4(txt){
this.m = newText(this, 300, -this.m.width, screenheight*.3,txt);
// this, <start index>, <startx>. <starty>, <text>
// this, always put that there. Hard to explain that one, just do it.
// <start index>, the index it starts drawing from. Uses 3 index's currently, so if you put in 200, be sure the next one is 203 or higher.
// <startx>, self explanatory
// <starty>, ' '
// <text>, ' '
this.m.getClicks(); // let's this animated text send out an event when clicked
this.m.default_method = "easeInOutQuad"; // sets the default ease method to use for this animated text.
this.m.A( {"balpha", 0, 1}, {"talpha", 0, 1} );
// obj.A( ) this is the function used to queue "actions" for animation.
// "actions" are blocks that look like this: {<property>, <time>, <value>[, <ease Method>]} or {<action>, <value>}
// {"width", "height","delay","x","y","zoom","balpha","talpha","bgPadding","outline","tRed","tBlue","tGreen","bRed","bBlue","bGreen","oRed","oGreen","oBlue"}
// that is the full list of <property>'s that can be animated.
// {"NewText", "Fixed", "Destroy", "Trigger", "Play"}
// That is the list of <action>'s that can be used.
// <time> is how long the <property> takes to change from it's initial value to <value>
// <ease Method> is "how" the value changes from the old one to the new one. It really makes a huge difference.
// The best way to know what they do, is to try them out. The names are listed in the class.
// They are also listed as arrays under the animated text object. obj.In, obj.Out, obj.InOut .
// <action>'s are done instantly. <property>'s are done instantly if you set <time> to 0
this.m.A( {"x", 2, screenwidth*.1,"easeOutElastic"} );
this.m.A( {"x", 2, screenwidth*.4},{"y", 2, screenheight-this.m.height,"easeOutBounce"} );
this.m.A( {"x", 2, screenwidth*.8},{"y", 2, screenheight*.3,"easeInBounce"} );
this.m.A( {"x", 2, screenwidth*.3,"easeOutBack"},{"y",2,screenheight*.5,"easeInOutQuad"},{"zoom", 2, 1.4} );
this.m.A( {"zoom", 1, 1.1},{"tred", 1, 0},{"tblue", 1, .3},{"outline", 1, 16} );
for (temp.i=0; temp.i< 5; temp.i++){
this.m.A( {"talpha", .5, 0},{"balpha", .5, 0} );
this.m.A( {"NewText", "Blinky #" @ temp.i + 1} );
this.m.A( {"talpha", .5, 1},{"balpha", .5, 1} );
}
this.m.A( {"talpha", .5, 0},{"balpha", .5, 0} );
this.m.A( {"NewText", "How do you like the animation so far?"},{"talpha",.5,1},{"balpha", 1, 1});
this.m.A( {"outline", 2, 2},{"bgPadding", 2, 16},{"oRed", 2, 0},{"oBlue", 2, 0} );
this.m.A( {"tRed", 2, 0},{"tBlue", 2, 0},{"bgPadding", 2, 2} );
this.m.A( {"x", 1, screenwidth*.05,"easeInExpo"},{"y", 1, screenheight*.7, "easeOutBack"} );
this.m.A( {"Fixed",false} );
this.m.A( {"width", 2, screenwidth*.7, "easeOutBounce"} );
this.m.A( {"talpha", .5, 0},{"balpha", .5, 0} );
this.m.A( {"NewText", "Well, do you like it? (Click)"} );
this.m.A( {"talpha", .5, 1},{"balpha", .5, 1} );
this.m.A( {"tRed", 2, 0},{"tGreen", 2, 0},{"tBlue", 2, 1},{"oRed", 2, 0},{"oGreen", 2, 0},{"oBlue", 2, 1} );
this.m.A( {"delay", 4} );
this.m.A( {"talpha", .5, 0},{"balpha", .5, 0} );
this.m.A( {"Fixed", true});
this.m.A( {"talpha", .5, 1},{"balpha", .5, 1} );
this.m.A( {"zoom", 1, 1.3} );
this.m.A( {"x", 2, screenwidth*.3,"easeInBack"},{"y", 2, screenheight*.3,"easeInBack"} );
this.m.A( {"talpha", .5, 0} );
this.m.A( {"NewText", "Well, this demo wasn't that long. :'("} );
this.m.A( {"talpha", .5, 1},{"Fixed", false},{"delay", 3},{"tRed", 3, .8},{"tGreen", 3, .8} );
this.m.A( {"talpha", .5, 0});
this.m.A( {"NewText", "Well, I hope you liked it anyhow."} );
this.m.A( {"talpha", .5, 1} );
this.m.A( {"delay", 3} );
this.m.A( {"talpha", .5, 0} );
this.m.A( {"NewText", "Well, Post about it. Bye!"},{"talpha", .5, 1},{"oRed", 1, .8},{"oGreen", 1, .8},{"oBlue", 1, 1} );
this.m.A( {"y", 4, -70, "easeInBack"},{"x", 4, -30, "easeInElastic" } );
this.m.A( {"delay", 4} );
this.m.A( {"Destroy"} );
this.m.start();
}
And if I remember, I attach the class script.
Oh, and there is sound file support, {"Play", <soundfile>} is the action for that. o.O There's a bit more documentation in comments in the class script, or ask me here.
Looks good. Consider thinking about a nicer way of setting options or having new text though, it kind of hurts to look at all of those brackets.
Yeah, that's quite a lot of brackets. Although I believe it is incredibly simple for the amount of complexity you get back. I agree, there could be a better way.
If I can get some takers, to give making a few animations a try, and post some feedback, that'd be great. I wanna make sure it's easy enough to use for everybody.
When you posted this, I really didn't want to be a downer since it looked like you worked pretty hard on it... but about 90% of this can be done using the particle engine (which supports text) and it's a lot more efficient to do it that way too.
__________________
“Shoot for the moon. Even if you miss, you'll land among the stars.”
08-26-2010, 11:49 PM
Linear Mode
