Solved

Is there any way to use Action Script to outline some text ?

Posted on 2004-04-15
6
212 Views
Last Modified: 2010-04-03
I need to create an outline round some text. I know this can be done in the authoring environment by breaking the letters apart and adding an outline to them as shapes (with the ink bottle), but is there any way to do this at runtime on dynamically entered text, or does anyone have good tip for simulating this.

I wrote some actionscript that copies text, recolors it and incrementally moves it n pixels out from the original and down some levels and this creates a passable effect with cursive and non-serif font but it creates quite a jagged effect with serif fonts. I guess something like creating a small circle with my "front" textfield's center as the origin and arranging copies around the circle at lower levels might create a smoother effect but I can't fathom the trig for that at the moment.

This is a tough one and I'm up against it time wise (as always ;) so maximum points.
0
Comment
Question by:judefisher
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 

Author Comment

by:judefisher
ID: 10832064
I solved this myself and I'll post it here so otherc can benefit. Donate my points to the poor and hungry, please.

The trick is to use a circle, and the drawEllipse function from the Actionscript Cookbook works very nicely as a basis:

In the function below, the radius arguments will control how thick the border is and the x and y arguments need to be the same as the origin of the textField (embedded in an mc in this case but that's not necessary). The more segments you create the smoother the effect is and obviously you need to zero the alpha of the ellipse to hide your guide line and to make the offset textFormat object exactly the same as the format of your original text, except in color or alpha.

I suspect that drop shadow and other effects can be created by making the radius irregular, also.

function drawEllipse(xRadius, yRadius, x, y)
      {
            var ellipse_mc:MovieClip = container_mc.createEmptyMovieClip("ellipse_mc", 1);
            ellipse_mc.lineStyle(0, 0x000000, 100);
              var angleDelta = Math.PI / 24; // Number of segments
              var xCtrlDist = xRadius/Math.cos(angleDelta/2);
             var yCtrlDist = yRadius/Math.cos(angleDelta/2);
             var rx, ry, ax, ay;
              var angle:Number = 0;
              ellipse_mc.moveTo(x + xRadius, y);
              for (var i = 0; i < 48; i++)
                  { // iteration should be twice number of segments
                angle += angleDelta;
                rx = x + Math.cos(angle-(angleDelta/2))*(xCtrlDist);
                ry = y + Math.sin(angle-(angleDelta/2))*(yCtrlDist);
                ax = x + Math.cos(angle)*xRadius;
                ay = y + Math.sin(angle)*yRadius;
                ellipse_mc.curveTo(rx, ry, ax, ay);
            var clipString:String;
            clipString = "offset_" + i + "_mc";
            var offset_mc = container_mc.attachMovie(clip_str, clipString, 0 - i, {_x:rx, _y:ry});
            offset_mc.text_txt.text = text_mc.text_txt.text;
            var offset_fmt:TextFormat = new TextFormat();
            offset_fmt.font = "Arial";//__font_str;
            offset_fmt.size = (__fontHeight);
            offset_fmt.color = 0xFF0000//Number(__textColor_str);
            offset_mc.text_txt.setTextFormat(offset_fmt);
            }
      }
0
 
LVL 9

Expert Comment

by:krishnaprathab
ID: 10832672
This one is cool !!!!

-kp
0
 

Author Comment

by:judefisher
ID: 10832741
Yes, I looked long and hard and never found a solution anywhere else so I'm quite pleased.

Credit must go to Joey Lott, who wrote the Actionscript Cookbook, however - his trig does all the heavy lifting.

You actually get good drop and offset effects by adding color as an argument and then calling the function again with x and y  (not the radius) offset by the amount you want and the color changed.
0
 
LVL 9

Expert Comment

by:OBCT
ID: 10834873
I might be able to use this bit of code. Thanks for that :)

For plenty more scripts such as this, you should check out the following website. It has a great deal of classes, funtions and prototypes that you can use for all sorts of Flash movies or applications.

http://proto.layer51.com/

But well done on finding this source :)

Cheers

-OBCT
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 12266610
PAQed, with points refunded (500)

Computer101
E-E Admin
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
The goal of the tutorial is to teach the user how to how to record live broadcast.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question