RE: [Flashcoders] Dynamically Distort Text?
Hello Marc, This was discussed here about 2 or 3 month ago, and I've explored Nike's tool at that time. As far as I can judge, in Nike uniform builder they're NOT using scriptable arching at all. Instead, there's a set of pre-made examples with a lot of frames in each. Then just gotoAndStop is used for letter/outline/etc. This way, it can be made even flash 6 (or 5) compliant :-). -- Best regards, GregoryN http://GOusable.com Flash components development. Usability services. === Marc Hoffman wrote: I need to dynamically distort user input text to fill a limited set of shapes. For example, the user might type in WINNERS and select a shape like the Arc d' Triomphe (flat-topped arch), and the tops of all the letters would be flat but the bottoms would be curved. This is more than just putting text on a curve -- it requires actually distorting the individual letters. Nike has something similar to this (but not exactly) on their custom uniform builder. See http://www.niketeam.com/v2/new/Builders/Baseball/check_flash5.asp and move through the steps until you reach the Select Name Style, after which you'll see the effect I'm after. Somehow they are able to skew the letters, though they're not actually distorting any straight lines into a curve, and all the letters keep the same height. Anyone know of something like this? Especially Flash 7-compliant? ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
Re: [Flashcoders] Dynamically Distort Text?
Not in (solely) flash, as far as I know or have ever seen.
We created a Java class that takes the parameters (font, text, style) and
performs the distortions on actual letter outlines, using Font objects. This
was set up as a webservice (coldfusion instantiates java object) that
returns coordinates for flash to draw out, at runtime.
Here's a section of that code, to give an idea (sorry, closed-source!):
private java.awt.Shape transform( int layout, String text, String font )
{
j_Font = new java.awt.Font(font, java.awt.Font.PLAIN, FONT_SIZE);
// FontRenderContext needed to create a GlyphVector object
FontRenderContext frc = new FontRenderContext(null,true,true);
// Create a GlyphVector object to get an outline of the text string
GlyphVector gv = j_Font.createGlyphVector(frc, text);
int length = gv.getNumGlyphs(); //Get the number of characters
for(int i = 0; i length; i++) {
java.awt.Shape glyph = gv.getGlyphOutline(i); //Transform
single glyph to Shape
double glyphWidth = glyph.getBounds().getWidth(); //Get
single glyph width prior to rotation
theta = (accGlyphWidth/gvWidth) * totalRotationDistance;
//Set rotation by points
accGlyphWidth = accGlyphWidth + glyphWidth; //Add up
distance traveled thus far
Point2D p = gv.getGlyphPosition(i);
AffineTransform at = new AffineTransform();
at.translate(-p.getX(), -p.getY());
.
.
.
}
.
.
.
}
As you can see, most of the transformations were accomplised using
AffineTransform to the glyphs stored in 'gv'.
Hope that gives you an idea of how this was done..!
Scott
On 10/23/06, Marc Hoffman [EMAIL PROTECTED] wrote:
I need to dynamically distort user input text to fill a limited set
of shapes. For example, the user might type in WINNERS and select a
shape like the Arc d' Triomphe (flat-topped arch), and the tops of
all the letters would be flat but the bottoms would be curved. This
is more than just putting text on a curve -- it requires actually
distorting the individual letters. Nike has something similar to this
(but not exactly) on their custom uniform builder. See
http://www.niketeam.com/v2/new/Builders/Baseball/check_flash5.asp and
move through the steps until you reach the Select Name Style, after
which you'll see the effect I'm after. Somehow they are able to skew
the letters, though they're not actually distorting any straight
lines into a curve, and all the letters keep the same height.
Anyone know of something like this? Especially Flash 7-compliant?
Thanks.
Marc Hoffman
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
--
: : ) Scott
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
Re: [Flashcoders] Dynamically Distort Text?
Thanks to Scott and Gregory for the replies. It's pretty much as I
suspected -- no dynamic solution in Flash alone. -Marc
At 09:05 AM 10/24/2006, you wrote:
Not in (solely) flash, as far as I know or have ever seen.
We created a Java class that takes the parameters (font, text, style) and
performs the distortions on actual letter outlines, using Font objects. This
was set up as a webservice (coldfusion instantiates java object) that
returns coordinates for flash to draw out, at runtime.
Here's a section of that code, to give an idea (sorry, closed-source!):
private java.awt.Shape transform( int layout, String text, String font )
{
j_Font = new java.awt.Font(font, java.awt.Font.PLAIN, FONT_SIZE);
// FontRenderContext needed to create a GlyphVector object
FontRenderContext frc = new FontRenderContext(null,true,true);
// Create a GlyphVector object to get an outline of the text string
GlyphVector gv = j_Font.createGlyphVector(frc, text);
int length = gv.getNumGlyphs(); //Get the number of characters
for(int i = 0; i length; i++) {
java.awt.Shape glyph = gv.getGlyphOutline(i); //Transform
single glyph to Shape
double glyphWidth = glyph.getBounds().getWidth(); //Get
single glyph width prior to rotation
theta = (accGlyphWidth/gvWidth) * totalRotationDistance;
//Set rotation by points
accGlyphWidth = accGlyphWidth + glyphWidth; //Add up
distance traveled thus far
Point2D p = gv.getGlyphPosition(i);
AffineTransform at = new AffineTransform();
at.translate(-p.getX(), -p.getY());
.
.
.
}
.
.
.
}
As you can see, most of the transformations were accomplised using
AffineTransform to the glyphs stored in 'gv'.
Hope that gives you an idea of how this was done..!
Scott
On 10/23/06, Marc Hoffman [EMAIL PROTECTED] wrote:
I need to dynamically distort user input text to fill a limited set
of shapes. For example, the user might type in WINNERS and select a
shape like the Arc d' Triomphe (flat-topped arch), and the tops of
all the letters would be flat but the bottoms would be curved. This
is more than just putting text on a curve -- it requires actually
distorting the individual letters. Nike has something similar to this
(but not exactly) on their custom uniform builder. See
http://www.niketeam.com/v2/new/Builders/Baseball/check_flash5.asp and
move through the steps until you reach the Select Name Style, after
which you'll see the effect I'm after. Somehow they are able to skew
the letters, though they're not actually distorting any straight
lines into a curve, and all the letters keep the same height.
Anyone know of something like this? Especially Flash 7-compliant?
Thanks.
Marc Hoffman
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
--
: : ) Scott
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
Re: [Flashcoders] Dynamically Distort Text?
There are ways to do it but it's tricky. Here's an example on my blog :
http://www.sebleedelisle.com/?p=18
You need to convert the text to a bitmap first, then you can do
perspective distortions using the triangles method described here :
http://www.sebleedelisle.com/?page_id=7
We wrote our own code for it but if you want to save time, you can use
Sandy's excellent DistordImage class. :-)
http://sandy.media-box.net/blog/distordimage-the-way-to-distord-bitmaps-by-code.html
hope this helps!
Seb
On 24/10/06, slangeberg [EMAIL PROTECTED] wrote:
Not in (solely) flash, as far as I know or have ever seen.
We created a Java class that takes the parameters (font, text, style) and
performs the distortions on actual letter outlines, using Font objects. This
was set up as a webservice (coldfusion instantiates java object) that
returns coordinates for flash to draw out, at runtime.
Here's a section of that code, to give an idea (sorry, closed-source!):
private java.awt.Shape transform( int layout, String text, String font )
{
j_Font = new java.awt.Font(font, java.awt.Font.PLAIN, FONT_SIZE);
// FontRenderContext needed to create a GlyphVector object
FontRenderContext frc = new FontRenderContext(null,true,true);
// Create a GlyphVector object to get an outline of the text string
GlyphVector gv = j_Font.createGlyphVector(frc, text);
int length = gv.getNumGlyphs(); //Get the number of characters
for(int i = 0; i length; i++) {
java.awt.Shape glyph = gv.getGlyphOutline(i); //Transform
single glyph to Shape
double glyphWidth = glyph.getBounds().getWidth(); //Get
single glyph width prior to rotation
theta = (accGlyphWidth/gvWidth) * totalRotationDistance;
//Set rotation by points
accGlyphWidth = accGlyphWidth + glyphWidth; //Add up
distance traveled thus far
Point2D p = gv.getGlyphPosition(i);
AffineTransform at = new AffineTransform();
at.translate(-p.getX(), -p.getY());
.
.
.
}
.
.
.
}
As you can see, most of the transformations were accomplised using
AffineTransform to the glyphs stored in 'gv'.
Hope that gives you an idea of how this was done..!
Scott
On 10/23/06, Marc Hoffman [EMAIL PROTECTED] wrote:
I need to dynamically distort user input text to fill a limited set
of shapes. For example, the user might type in WINNERS and select a
shape like the Arc d' Triomphe (flat-topped arch), and the tops of
all the letters would be flat but the bottoms would be curved. This
is more than just putting text on a curve -- it requires actually
distorting the individual letters. Nike has something similar to this
(but not exactly) on their custom uniform builder. See
http://www.niketeam.com/v2/new/Builders/Baseball/check_flash5.asp and
move through the steps until you reach the Select Name Style, after
which you'll see the effect I'm after. Somehow they are able to skew
the letters, though they're not actually distorting any straight
lines into a curve, and all the letters keep the same height.
Anyone know of something like this? Especially Flash 7-compliant?
Thanks.
Marc Hoffman
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
--
: : ) Scott
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
___
Flashcoders@chattyfig.figleaf.com
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
[Flashcoders] Dynamically Distort Text?
I need to dynamically distort user input text to fill a limited set of shapes. For example, the user might type in WINNERS and select a shape like the Arc d' Triomphe (flat-topped arch), and the tops of all the letters would be flat but the bottoms would be curved. This is more than just putting text on a curve -- it requires actually distorting the individual letters. Nike has something similar to this (but not exactly) on their custom uniform builder. See http://www.niketeam.com/v2/new/Builders/Baseball/check_flash5.asp and move through the steps until you reach the Select Name Style, after which you'll see the effect I'm after. Somehow they are able to skew the letters, though they're not actually distorting any straight lines into a curve, and all the letters keep the same height. Anyone know of something like this? Especially Flash 7-compliant? Thanks. Marc Hoffman ___ Flashcoders@chattyfig.figleaf.com To change your subscription options or search the archive: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders Brought to you by Fig Leaf Software Premier Authorized Adobe Consulting and Training http://www.figleaf.com http://training.figleaf.com
