Thread: Animated Text
View Single Post
  #1  
Old 08-26-2010, 11:49 PM
adam adam is offline
http://wiki.graal.us/
adam's Avatar
Join Date: Nov 2001
Posts: 2,247
adam has a spectacular aura aboutadam has a spectacular aura about
Send a message via AIM to adam
Animated Text

Lots of updates since my initial post. Many of which are documented in the class script.

The entire process is attempted to be streamlined.
  1. Join the class to the script.
  2. Make a message(txt) function
  3. 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.newText(this300, -this.m.widthscreenheight*.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"01}, {"talpha"01} );
  
// 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"2screenwidth*.1,"easeOutElastic"} );
  
this.m.A( {"x"2screenwidth*.4},{"y"2screenheight-this.m.height,"easeOutBounce"} );
  
this.m.A( {"x"2screenwidth*.8},{"y"2screenheight*.3,"easeInBounce"} );
  
this.m.A( {"x"2screenwidth*.3,"easeOutBack"},{"y",2,screenheight*.5,"easeInOutQuad"},{"zoom"21.4} );
  
this.m.A( {"zoom"11.1},{"tred"10},{"tblue"1.3},{"outline"116} );
  for (
temp.i=0temp.i5temp.i++){
    
this.m.A( {"talpha".50},{"balpha".50} );
    
this.m.A( {"NewText""Blinky #" temp.1} );
    
this.m.A( {"talpha".51},{"balpha".51} );
  }
  
this.m.A( {"talpha".50},{"balpha".50} );
  
this.m.A( {"NewText""How do you like the animation so far?"},{"talpha",.5,1},{"balpha"11});
  
this.m.A( {"outline"22},{"bgPadding"216},{"oRed"20},{"oBlue"20} );
  
this.m.A( {"tRed"20},{"tBlue"20},{"bgPadding"22} );
  
this.m.A( {"x"1screenwidth*.05,"easeInExpo"},{"y"1screenheight*.7"easeOutBack"} );
  
this.m.A( {"Fixed",false} );
  
this.m.A( {"width"2screenwidth*.7"easeOutBounce"} );
  
this.m.A( {"talpha".50},{"balpha".50} );
  
this.m.A( {"NewText""Well, do you like it? (Click)"} );
  
this.m.A( {"talpha".51},{"balpha".51} );
  
this.m.A( {"tRed"20},{"tGreen"20},{"tBlue"21},{"oRed"20},{"oGreen"20},{"oBlue"21} );
  
this.m.A( {"delay"4} );
  
this.m.A( {"talpha".50},{"balpha".50} );
  
this.m.A( {"Fixed"true});
  
this.m.A( {"talpha".51},{"balpha".51} );
  
this.m.A( {"zoom"11.3} );
  
this.m.A( {"x"2screenwidth*.3,"easeInBack"},{"y"2screenheight*.3,"easeInBack"} );
  
this.m.A( {"talpha".50} );
  
this.m.A( {"NewText""Well, this demo wasn't that long. :'("} );
  
this.m.A( {"talpha".51},{"Fixed"false},{"delay"3},{"tRed"3.8},{"tGreen"3.8} );
  
this.m.A( {"talpha".50});
  
this.m.A( {"NewText""Well, I hope you liked it anyhow."} );
  
this.m.A( {"talpha".51} );
  
this.m.A( {"delay"3} );
  
this.m.A( {"talpha".50} );
  
this.m.A( {"NewText""Well, Post about it. Bye!"},{"talpha".51},{"oRed"1.8},{"oGreen"1.8},{"oBlue"11} );
  
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.
Attached Files
File Type: txt animated_text.txt (14.3 KB, 385 views)
__________________
Rogue Shadow (TCN)(NAT)(Global Development Team)

For development help, contact the patrons of the #graaldt irc channel below, I am usually there.
Click Here to Join IRC Chat Now! -- irc.freenode.net Channel: #graaldt
Quote:
<Dustyshouri> no, RogueShadow is always talking about scripts lol
<Dustyshouri> in fact, he pretty much brought Graal back as a topic single-handedly

Last edited by adam; 08-27-2010 at 03:27 AM.. Reason: WhiteDragon is correcting my spelling, he better post!
Reply With Quote