TxEff Review: The Best Professional Flash Text Animation Effects Period

Yesterday, I spent a long long time doing manual text animations by hand. And after 3 hours, I thought it looked cheesy and not professional enough. For a minute, I thought, well, that's the limit to what I'm capable of. Then I realized, there is probably a tool out there that will do it for me, and it'll look a hell of a lot cooler than what I just spent 3 hours doing. So the first result I pull up is TxEff. And I'm blown away. Wow, I could tell immediately by adding this simple text animation, the professional look of the website will go up, instead of it going down with the animation that I did. Seeing what TxEff's competitors are, let me say now, don't even bother. The 2nd best I found to TxEff was still laughably bad. If I had to rate the similar products, I would give TxEff a whopping 10 out of 10, and the runner up a 5 out of 10. And 3rd place, probably 1 out of 10. And the rest, even worse.

Its not to say that TxEff doesn't have problems. It could use a lot of refinement if you want more than one color or formatting for a single block of text.

But for all the pain this component has caused me, it is totally worth it because its uber cool and powerful.

So here is where my troubles began. I did what everyone probably does in the beginning. Use the UI interface. Their tutorials worked great.

The first gotcha I ran into was that you couldn't apply a drop shadow or any other filter on the text unless it was encased in a movie object. Easy work around, and it probably is cleaner that way.

Then i realized I wanted different colors in my text. And unfortunately Dynamic Text (a requirement set on the text field) doesn't support more than one color. Surprise! Time for a work around.

The solution to that is to use Action Script (only 3.0 is supported for txeff) if you actually wanted to use the "render text as html" option. I found some code on the web where this guy was loading a text file, and a css file. Sounded simple, but it wasn't. The sentences were spaced too far apart. It took me a long time to figure out that you first had to A) put it in html format[p][/p], and B), you cannot ever use carriage returns. (make sure its set to multiline btw). So it worked, then I realized it didn't really work for firefox or IE7. So actually, I had gone to sleep thinking I got everything figured out, then I realized I didn't solve a damn thing when I woke up the next day. It had some strange bugs like it would not load the text until the 2nd time around in IE7. And it just would not work at all in firefox.


So I decided to work around that problem by just plugging the html text string within the Action Script. And guess what? Now the CSS styles no longer work. I lost the color, but at least it loads in both browsers.

By this time, I realize I gotta do everything via action script. No more messing around with the UI and the text boxes/drag and drop.

So instead of loading a CSS file, I figure out how to write in the css styles using the Action Script css syntax. Use commas instead of semi colons, and even though the style doesn't need to be in quotes, all values need to be in quotes. Also the style names...instead of using dashes like "font-family" or "text-decoration", you have to remove the dash and capitalize the second word. How did I figure this out? Fortunately, I googled "fontFamily" (quotes required) and I found 1 hit. A Romanian flash discussion forum. And I knew of the "font-family" -> "fontFamily" thing because I had found a page that talked about this, but unfortunately it was just unrelated information that I didn't care for at the time, and that page could not be found again. Like it never existed.

Could I have done without CSS? Probably, but I'm such a css nazi now I figured it would be worth the investment sometime down the line. Even though my guess is that txeff won't support the style I would have liked to use it for.

Next gotcha was the embedding of text. The easy embedding of letters option was no longer there (no longer using the GUI textbox) so I needed to embed the font/weight/decoration as a symbol. The sizes of the text doesn't really matter, but the family, weight and decoration matters. If you don't have that embeded, nothing shows up. After you add the font style to your Library, right click on the font, and select "Linkage". Make sure each font style has a unique Class or you'll be wondering all day why different styles like bold or italic isn't working. Make sure the "Export for actionscript" is checked. By default it isn't, and you'll be wondering why nothing appears on screen.

Another gotcha was that the css needs to be applied to the textfield, while the actual htmltext string needs to be set on the txeff object. That doesn't sound intuitive to me.

Another annoyance is that the centering is off. So for example, if I drop a movie into my timeline, the textbox would be 300 pixels to the right and 100 pixels down. You can correct this by setting the textfield x and y to -300 and -100 respectively.

Next up, there was a problem with only 2 lines of text showing up. For this, unlike what the documentation was stating, you should set the htmlText of both the textfield and the txeff object to match. Why? Apparently, you need some kind of text in there that gives it the estimate of how many lines of text there will be. And you need to do it using html syntax. So if you have 4 paragraphs in the txEff.htmlText, then you need 4 paragraphs or 3 linebreaks in the txtField.htmlText.

Next, there was a centering issue. I wanted to center my text, and the autoSize = TextFieldAutoSize.LEFT didn't do squat. To center, you must set the textfield width, height, set multiline, and lastly set wordWrap to be true. Even though there is no word wrapping that needs to go on, you still need to set it to center the text. To center the text, you have to set it in the css (textAlign).

And very last, there was a 3 second delay. When you set text on both the txtField and the txtEff objects, the 3 second delay happens before the animation started even though the textChangeDelay was set to 0. So what fixed it is to change the transitionType to "hide" instead of "show". This is a real work around. If you don't set the htmlText in the txtField, you run into the bug where the "show" transitionType only displays 2 lines. It would be nice to see them fix this bug, although, it would break all of my scripts. :)

Long story short, I got everything working, but it was a long way there. It seemed like a downward spiral one work around after another, but now I have a good reference code I could work with. If you want to use different colors and the underline, you probably should figure out how to do everything by Action Script 3.0 from start to finish. If you don't mind keeping everything in one color, then the UI works great.

A few more additions... (I keep adding to the issues list every few days)

So after doing everything listed, I realized I only had figured out how the text would fade in, but not scripted on how it would fade out. in addition to that, I'm telling it to "hide" the text when I need to "show" it to get around the only to lines being displayed bug when the htmlText property is set on the text field. So what I did was download some refrence code in their FAQ that showed how to change styles after a fade in so that it would fade out with a different style. I had to tweak it so that it would not redo the fade in, and only do a fade out, but still kept the delay. Before the fade out, you can apply the different effects for maximum coolness.

It looks like you can still run into the only 2 lines "show"ing if your paragraphs are specified a css class. So what I did was I defined the default p tag in css, and for any special stylings, I use a span (and specify a class for that) inside the [p][/p] tag. If you don't have more than 2 lines, you can specify a class for paragraph tags. Otherwise, don't assign a class to the p tag. And lastly (once again) you can still run into blocks of text where your text gets chopped off if your text box is not big enough. But you can't fault the TxEff people on this one. Although the text only gets chopped off when its showing text, and not hiding it.