Subscribe to RSS
get email updates
polyGeek.com
polyGeek.com polyGeek.com

Liquid Text

Obviously moving the shape(s) that the text avoids makes for some fairly unreadable text. But it works great for creating a flowing text output where the shapes are unmoving, or moving only slightly.

LiquidText is a class that lets you wrap dynamic text around any number of irregular shapes. And those shapes can be moving!

To download the LiquidText.as file go to FlashDen.net.

View the documentation.

Here are some examples:

Pouring text

Poetry: Text flowing around an irregular shape as the user scrolls the text up and down.

Circle in a circle: Not only is the text placed inside of a circle but the inner circle can be dragged around while the text re flows around it.

Circles in a circle: same as above but with 3 inner circles.

History

Ask anyone. It is not possible to make text flow around a shape – other than a rectangle – in Flash. You also can’t do it in HTML. You can do it in Photoshop/Illustrator but that isn’t exactly dynamic.

That really bothered me. It seemed to me that there should be a solution for this. I knew that the Flash player wasn’t built with that capability because I had asked Bentley Wolfe, Senior Support Engineer for the Flash player at Adobe. (Cool guy by the way who undoubtedly thinks I’m a nut case).

So, while attending FlashForward 2006 in Seattle the solution came to me. I spent my evenings after the conference working on the code and was able to get it working by the last day of the conference so that I could show Bentley. (Actually, that would be “show off” to Bentley.)

If you would like to see this working for yourself then use the links below. Note: it takes a lot of cycles to place the text so it may run slow on your machine. Just give it a moment to finish its work when you move things around.

Post to Twitter Post to Delicious Post to Facebook Post to Reddit Post to StumbleUpon


9 Responses to “Liquid Text”


comment number 1 by: sike

Awesome, how does u do this? Though css is good at typography, but it can’t do this.

comment number 2 by: polyGeek

Someday I’ll write a tutorial on how this is done. Hint: lots of loops through large arrays. It isn’t hard but it certainly isn’t trivial either.

comment number 3 by: Tom Chiverton

Go on, release the source :-)

comment number 4 by: polyGeek

@TomC, You know, I’d love to release the the code. I really would. But, I’ve recently discovered how important a solution like this can be for certain projects what an enormous effort it has been for them to duplicate it. I might have to hold on to this one for a bit. My hope is that I’ll be able to weave it into a Flex component that is somewhat protected – I know there are decompilers out there but I just can’t worry about that.

But hey, thanks for asking. :-)


[...] Liquid Text [...]

comment number 6 by: judah

That’s pretty sweet! Has anything been done with this? I’d love to have a text area (in Flex) that lets me drag images around like this.

comment number 7 by: polyGeek

@Judah, You know, I plan on porting this to AS3 soon, hopefully this year. I can’t wait to see how fast it runs. Plus, I’ve learned a great deal about code optimization that I didn’t know when I first wrote LiquidText.

comment number 8 by: Elie

i think that every line is a text field, that can be move left and right, and the content of all the text field is provided by an arrays…..

by the way very cool website, i really appreciate that u have used flash/flex to make this forms, why didnt u do all the website in flash?

comment number 9 by: polyGeek

@Elie, you are right on about the arrays. I really need to redo this in AS3 because it's so much faster. Even using Vectors for FP10 would bump up the performance even more.

And Flash is certainly a cornerstone here at polyGeek.com but I wouldn't replace everything with it right yet. Mainly because of SEO concerns. But I did make Fleximagically.com which is an all Flex blog.

   Welcome back (Change)

Leave a Reply

comment feed RSS   subscribe to this comment thread

Recent Posts

   



polyGeek.com

© Copyright 2008 polyGeek.com / Dan Florio, All Rights Reserved Except Where Explicitly Stated
Web Developement Blogs - Blog Catalog Blog Directory
M2 Websites
Local Directory for Los Angeles, CA

Better Tag Cloud