In this tutorial I’ll walk you through the steps required to install and use the TextArea component as an alternative to Flash’s native TextField class, and show you how to detect mouse roll over/out events on hyperlinks. I’ll also talk about how you can call custom functions and pass different data types as arguments.
Background
The native TextField class was the first to support text scripts in Flash projects. With TextField, you could support dynamic and static text, as well as the input type to allow user interactivity. It also supported a (very limited) selection of HTML tags for styling your scripts – but when comparing this narrow availability of HTML support in TextField to what is possible with regular HTML files being used within browsers, Flash developers felt the extreme lack of flexibility when dealing with text.
In 2009 when TLFTextField was introduced, developers were hoping to see some solutions – but these didn’t appear. Today, with the TextArea class, you can do what you always wanted with your text blocks. Functionalities like detecting roll over/out on href links, calling custom functions from text blocks, creating anchor links, loading custom created tags like video players, slideshow, and buttons: these are all now possible with TextArea.
Final Result Preview
The following simple no-frills demo will present how custom functions are called on hyperlinks. This is what you’ll build in the next 30 minutes:
Step 1: Set Up the Environment
TextArea can be used in any IDE that compiles AS3 – like Flash Builder, CS pro versions and FlashDevelop – which means it’ll work across Flash platform (in Flex, AIR and AS3-only web projects). Different IDEs each have a somehow similar but unique approach to how you compile your project, and due to this diversity it’s sometimes frustrating, especially for beginners, to work with AS3 tutorials because the author may prefer Flash Builder while the learner is accustomed to work with the CS IDE.
To solve this problem, I will try to explain the usage of TextArea independent of the IDE. So, the first step is to set up your environment. No matter which IDE you’re using, just open it and create a new AS3 project, then save it somewhere on your computer.
package
{
import flash.display.MovieClip
public class Main extends MovieClip
{
public function Main():void
{
trace("Hello World")
}
}
}
Step 2: Download TextArea
TextArea is free to download and to use but be sure to read the license agreements here. Head to doitflash.com and find the download button at the bottom of the home page to download TextArea classes.
Extract the zip file you downloaded, TextArea.zip, to your computer, go to the folder TextArea/Src, and copy the com folder then to the same directory as your document class, Main.as.
By copying the com folder to where you have your project document class, you are letting the IDE find TextArea classes only in this specific project. Alternatively, you could copy the classes to your global class path so that it will always be available to all your projects – to find out more, read How To Use an External Library in Your Flash Projects.
Step 3: Initializing TextArea
After downloading and installing the TextArea, it’s time to initialize it. First you need to import the required classes to the Main class.
import com.doitflash.text.TextArea;
Then remove the hello world trace function and enter the following instead.
var _textArea:TextArea = new TextArea();
_textArea.wordWrap= true;
_textArea.multiline = true;
_textArea.htmlText = "Initialize TextArea just like you used to initialize TextField.";
this.addChild(_textArea);
Test your movie and this time instead of outputting hello world, you’ll see a text field (but not a TextField!) created for you:
As you can see, TextArea works exactly like the native TextField class. All the different settings that you could apply to TextField are true for TextArea also; it’s basically an extension to TextField so it will do everything TextField does, plus more. I’ll talk about these extra features in the next sections.
Step 4: Feeding TextArea With an XML File
To make this tutorial as informative as possible and to make it useable for real world practices, let’s try to feed the TextArea instance with data from an external XML file.
This procress will again be similar to how you load XML data into TextField. First, create your XML file and place it where you have the published SWF file from the previous steps. Make the XML look like the below and save it as “data.xml”:
<?xml version="1.0" encoding="UTF-8"?>
<data>
<![CDATA[
<p align="left"><font face="Tahoma" size="13" color="#333333">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi.
Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.
</font></p>
]]>
</data>
(So that XML contains HTML in a CDATA section.)
Now get back to your Main.as, which should look like the following:
package
{
import flash.display.MovieClip
import com.doitflash.text.TextArea;
public class Main extends MovieClip
{
public function Main():void
{
var _textArea:TextArea = new TextArea();
_textArea.wordWrap = true;
_textArea.multiline = true;
_textArea.htmlText = "Initialize TextArea just like you used to initialize TextField.";
this.addChild(_textArea);
}
}
}
public function Main():void
{
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onXmlLoaded);
loader.load(new URLRequest("data.xml"));
function onXmlLoaded(e:Event):void
{
var xml:XML = new XML(e.currentTarget.data);
var _textArea:TextArea = new TextArea();
_textArea.wordWrap = true;
_textArea.multiline = true;
_textArea.width = 400;
_textArea.height = 200;
_textArea.condenseWhite = true;
_textArea.htmlText = xml.text();
addChild(_textArea);
}
}
The above code loads data.xml – there’s no difference from how you would have done it with a TextField so far.
Step 5: Detecting Mouse Rollover/Rollout
To use the specific features of TextArea, you need to specify a few extra settings when initializing it.
The first and the most important thing to remember about using TextArea is that you should use the fmlText method for sending text scripts into the instance rather than using the classic htmlText. The fmlText method will parse scripts using a different approach than htmlText; it stands for Flash Markup Language Text.
So, in your test project, replace htmlText with fmlText like below.
_textArea.fmlText = xml.text();
The next thing to do is create two custom functions in your document class, Main.as, which will be called when you rollover or rollout a hyperlink (which we will build later in data.xml). For the sake of this tutorial, these two functions will just trace some outputs, but in the real world, you could do anything you want with these functions – like, say, opening a tooltip window.
public function funcOnOver():void
{
trace("rollOver");
}
public function funcOnOut():void
{
trace("rollOut");
}
You should also set some settings while initializing the TextArea instance. Add these lines just after you initialize TextArea.
_textArea.holder = refToThis; // indicates the location where you are adding TextArea to stage
_textArea.client = refToThis; // must be the location where you have your "allowedFunctions" saved
_textArea.mouseRollOverEnabled = true; // enables mouse rollover detection
_textArea.funcSecurity = true; // makes sure only function names in "allowedFunctions" are accessible
_textArea.allowedFunctions(funcOnOver, funcOnOut);
Also add the following line to the beginning of the Main() function.
var refToThis:Object = this;
To make sure you have written the code in Main.as correctly, below is how your file should look up to now.
package
{
import flash.display.MovieClip
import com.doitflash.text.TextArea;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class Main extends MovieClip
{
public function Main():void
{
var refToThis:Object = this;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onXmlLoaded);
loader.load(new URLRequest("data.xml"));
function onXmlLoaded(e:Event):void
{
var xml:XML = new XML(e.currentTarget.data);
var _textArea:TextArea = new TextArea();
_textArea.holder = refToThis; // indicates the location where you are adding TextArea to stage
_textArea.client = refToThis; // must be the location where you have your "allowedFunctions" saved
_textArea.mouseRollOverEnabled = true; // enables mouse rollover detection
_textArea.funcSecurity = true; // makes sure only function names in "allowedFunctions" are accessible
_textArea.allowedFunctions(funcOnOver, funcOnOut);
_textArea.wordWrap = true;
_textArea.multiline = true;
_textArea.width = 400;
_textArea.height = 200;
_textArea.condenseWhite = true;
_textArea.fmlText = xml.text();
addChild(_textArea);
}
}
public function funcOnOver():void
{
trace("rollOver");
}
public function funcOnOut():void
{
trace("rollOut");
}
}
}
That’s pretty much everything you need to do in your .as file; and the rest will be done in the XML but before we go to XML and create a hyperlink, let’s talk a bit about the above settings.
First we have the holder property which is something that you won’t use in this article but when you go deeper into TextArea to create custom html tags you will need this a lot; for the sake of this tutorial, it’s sufficient for you to know that this property saves the location where you are adding the TextArea instance into the stage.
Then we have the client property. This is the location of – or better to say, this is a reference to – a class where you save all your allowed functions. In this example we use Main.as as the client, but if you have a long list of functions that want to give them the permission to be called from your text scripts, you may prefer creating a separate class for that purpose.
We also have the mouseRollOverEnabled property which is set to false by default for performance reasons. If you want to detect mouse roll over/out on your hyperlinks, you must make sure you enable this property.
Then we have two security properties: allowedFunctions and funcSecurity. These properties will let you restrict the called functions to the specific ones mentioned in the allowedFunctions method.
Okay, to see the magic, get back to data.xml and and add the following line somewhere inside the CDATA section:
Here's a <u><a href='onMouseOver:funcOnOver();onMouseOut:funcOnOut()'>SAMPLE LINK</a></u>.
As you see you have created two function calls (one on mouse rollover, one on mouse rollout) and you can do whatever you like with these functions inside your AS3 project.
But this is not all! In the next section I’ll talk about how you can call custom functions and pass different types of data as arguments.
Step 6: Pass Arguments to Functions
Up to now, you have learned how to set the TextArea instance ready for accepting function calls from HTML content which can be placed in external sources like XML. Now we’re going to send different types of arguments along with the calls.
We can send array, object and simple string types. Try adding the following hyperlink somewhere inside the CDATA tag in your XML file:
This will create five function calls in your AS3 project; each function demonstrates how you can send different types of arguments. But remember that this will not work until you actually create these functions inside your AS3 project. To do that, simply add these functions along with the funcOnOver() and funcOnOut() functions that you had previously:
public function func1():void
{
trace("no arguments sent");
}
public function func2($str:String):void
{
trace("arguments >> " + $str);
}
public function func3($arr:Array):void
{
trace("arguments >> " + $arr);
}
public function func4($obj:Object):void
{
trace("arguments >> " + $obj);
}
public function func5($str:String, $arr:Array, $obj:Object):void
{
trace("arguments >> " + $str);
trace("arguments >> " + $arr);
trace("arguments >> " + $obj);
}
Now you have the calls in XML and the functions are also available in the AS3 project; all that’s left is to give the usage permission to the TextArea instance. Modify the allowedFunctions method of TextArea as so:
Now publish and test your project and try clicking the hyperlinks you created.
Congratulations, you have now learned how to enable mouse rollover and rollout in your text fields, and you know how to create custom functions and call them from within your text blocks.
Conclusion
TextArea extends TextField, adds only 6kb to your project, and can be used as an alternative to TextField. In this tutorial you learned how to initialize TextArea to create simple hyperlinks which can call custom functions inside your AS3 project, and you also learned how to enable mouse rollover and rollout detection on hyperlinks that can call custom functions.
There are many things you can do with these features, like open a tooltip when rolling over a certain hyperlink or create links which call a custom function in your project to navigate through your application pages easier.
I hope you find this tutorial (and TextArea itself) useful!
For most newbies, the concept of symbols in Flash can be pretty confusing. I’ve known enough designers who – even after working with Flash for years – are pretty clueless about the best way to use symbols in their work. Let’s take a closer look at symbols and text.
Welcome to the second part of our Flash Tips and Best Practices series for designers. In the first part we looked at drawing, which is usually the first thing one would tackle when starting with Flash. Once you’ve mastered the creation tools though, it does not take too long to realize that the shapes by themselves are pretty useless. Sure, you can apply colors and strokes and manipulate them any way you want, but you’re probably in there to make things move. And the best way to start with that is to convert the shapes to symbols.
Another critical aspect of design in Flash that we will cover today, is text. Over the years, Flash’s ability to create and render text has taken some pretty big leaps. I still remember the days when there was no ‘anti-alias for animation’ setting and the thought of having blocks of text was nothing short of a nightmare. That’s all gone now and with the ability to apply filters directly to text, it’s a much less painful routine now. Yet, there’s a lot one can do with the text tool in Flash today. We will look at some such tricks.
Although this post was written for Flash Professional CS5, most of the tips should work just fine in older versions. I will try and make it a point to highlight wherever something is very specific to the latest version of Flash.
Choose Your Symbols
For starters, there are three types of symbols you can create in Flash: graphic, button, and movie clip. Although the names should be pretty self-explanatory, it is not always obvious what the difference is between the three. Please bear with me if this sounds too basic, but I know a lot of Flash designers who are not entirely sure what’s what. So here goes:
Graphic: The most basic type of symbol in Flash, and probably the most useless. You can’t have an animation inside a graphic (well, technically you can, but Flash will simply ignore it), and you can’t really assign much in the name of functionality to graphic using ActionScript. For me, it’s only one step above simply grouping elements.
Button: As the name suggests, this is an interactive element. A button is automatically converted to an active element – on that you can click, like a link in an HTML page. Every button has three states – up (or normal), overand down . You can assign ActionScript to button to make it start the animation, for example.
Movie Clip: This is by far the most used symbol type in Flash, and for good reason. To start with, you can have an animation within a Movie Clip. An instance of a Movie Clip placed on the stage will animate irrespective of the main timeline. It is also the only symbol type that you can apply blending modes and filters (more on those in a minute).
Note: You can set the behavior of an instance of any symbol individually. Placed a Movie Clip on the stage but don’t want it to animate? Simply select the instance and change the behavior in the ‘Properties’ panel.
Blending Modes
Blending modes bring one of the much loved features from image editing applications to Flash’s vector workspace. Like Photoshop, Fireworks, Illustrator and others, you can alter how elements look by overlapping them and choosing different transparency modes. For example, you might want to darken a part of an object based on what’s on top of it, or maybe lighten it. One common way to use this is when you have an imported raster logo image with a white background that would like to show through. Simply change the blending mode to ‘Multiply’ in the ‘Display’ section of the Properties panel.
Note that blending modes can only be applied to Movie Clip and button symbols. For more on Blend Modes in Flash checkout this screencast.
Case study: Apply lighting effects to boring flat textures
Let’s say you need a realistic wooden background for your design. There are tons of free textures available out there, but one common problem is that they all tend to look flat. Now if you’re trying to re-create a tabletop, there needs to be some semblance of a light source from one of the sides, right? Let’s try and re-create that effect in Flash using Blending modes.
Import your texture on the stage and position it as required.
Draw a rectangle on top of the image, matching its size and x & y co-ordinates. Use the Primitive Rectangle tool here; a normal rectangle shape will always appear behind the image unless you draw it on a new layer.
Remove any strokes from the rectangle and add a default white-to-black radial gradient fill. Adjust the fill so that the white center is close to the corner you need the light source to be in, and the black edges are close to the diagonally opposite corner.
Now convert this rectangle to a Movie Clip symbol and change its blending mode to ‘Overlay’. You may need to adjust the ‘Alpha’ a bit to get effect just right.
Color Effects
One of the first things one learns about animation in Flash is how to fade stuff in and out. And the default technique to do that is to change the ‘Alpha’ value of a symbol. But there is much more to the other items in that dropdown list, together known as Color Effects.
Although Alpha sounds like the best way to fade stuff in and out, it is not always the most suitable option. For example, if your symbol is a drawing with a bunch of overlapping shapes, Alpha reduces the transparency of each shape individually which brings up artifacts in the semi-transparent states. In such cases, if your artwork is on a white background, changing the Brightness values works much better to get the fade effect. If the background is some other flat color, you can also use Tint and fill the artwork with the background color. Unfortunately, if the background is a gradient, pattern or anything else, your only option is to go into the symbol, break apart all shapes and groups and bring them on a single layer to make a object.
Note that unlike Blending Modes, Color Effects can be applied to any symbol – movie clips, buttons, and graphics.
Case Study: Create multiple colored buttons from one symbol
When designing interfaces in Photoshop or Fireworks, one technique I use very often is to create a base interface element – like a button – and make color variations of it using the Hue-Saturation filters. Recently I figured out a way to do something similar in Flash. The idea is to create a single neutral symbol and then use the Advanced color effects to create variations of it.
To start with, create a symbol with whatever gradients, highlights, shadows and overlays you want. You can make it in any color, but I tend to prefer using only grey shades. So the result is a button that’s as matte, plastic or any style you want, but in grey. Next, place a couple of instances of the symbol on the stage. Then simply select an instance, apply the ‘Advanced’ color effect and start playing around with the RGB color values. If you are struggling to get it right, one way is to select Tint, pick the color you need, and then go to the Advanced panel to tweak it to your satisfaction. Rinse and repeat for the other symbols.
Filters
For a very long time, Flash designers were stuck with the strictly vector creation tools in Flash. Soft shadows and motion blurs were things you hacked together using awkward gradients or raster images imported from Photoshop. Then along came the Filters in Flash 8 and everything changed. Today, pretty much any snazzy effect is possible right inside Flash with a decent amount of control over all aspects of the filter. Let’s look at some ways you can use Filters to add some jazz to your designs.
Curved box shadows
Sure, there are drop shadows for when you want an element to stand out from the background or just differentiate it from everything else around it. But for occasions when a simple drop shadow is just not enough, you can play around with the fall-off a bit to add that extra bit of style. One way to do this, is to create a copy of your shape and tweak it around to get the curvature you need. Then convert it to a symbol, add a 100% black tint color effect and a gaussian blur. Then simply adjust the alpha value to get the intensity you need from the shadow. Check out a couple of samples below.
Remember to set the quality to ‘High’ whenever you use a filter. The effect is much much better. It totally beats me why ‘Low’ is set as the default quality setting. I’ve used filters in seriously complex animations and the impact on performance is barely noticeable.
Letterpress
When it comes to big text, the letterpress effect is pretty popular. With the ability to add multiple filters of the same type (something even Photoshop doesn’t have yet), the letterpress effect is pretty easy to achieve in Flash. All you need to do is simply add two drop-shadow filters – one with a white 1px shadow at 90 degrees and one black at 270 degrees. Check out the image below for all the details.
9-Slice Scaling
Another feature that was introduced in Flash 8 is 9-slice scaling – the ability to scale an object without affecting certain parts of it. The best example where this works is rounded rectangles. If you’ve every tried to create rounded rectangles and then scale them, you know how the corners tend to go out of shape if the scaling is not proportionate. 9-slice scaling solves that problem. Let’s see how.
Draw the shape you want and open the "convert to symbol" dialog.
Select Movie Clip in the Type dropdown list. 9-slice scaling can only be applied to a movie clip symbol.
Click the ‘Advanced’ link at the bottom-left of the dialog box and check "Enable guides for 9-slice scaling".
Now double-click the symbol to edit it.
You should see two vertical and two horizontal dotted lines on top of the shape. Move these outwards so that they are just inside the curves on all four corners.
Here’s how it works. I’ve labeled each of the 9 sections we now have, divided by the dotted lines. When you go back to the stage and scale the object – proportionately or otherwise – A, C, E & G will not scale at all. They will retain their size and shape. B & F will only scale horizontally, while D & H will only scale vertically. This way, no matter what you do, the rounded rectangle retains its core personality. This technique can work wonders when you need a bunch of similar elements at different sizes – like buttons, popups or speech bubbles.
Note that 9-slice scaling will not work in every context. If your artwork has complex shapes or very round corners with curved reflections, or even pattern fills, the scaling may not be consistent.
Text
If there was one complaint about Flash that overpowered everything else in the past, it was the way Flash handled text. In older versions, especially before the Adobe takeover, text rendering in Flash sucked, to put it nicely. So much so that it had spurned an entire cottage industry of pixel fonts that were designed to work around Flash’s inability to render small text smoothly. Thankfully, with the addition of ‘anti-alias for readability’ things became much much more bearable. The one tip I give anyone I who has ever had anything to do with Flash is to avoid anything but ‘anti-alias for readability’ like plague. In fact, I don’t even know why they have that option any more since text rendering in the player has now been optimized enough to smoothly render ‘readable’ text in any scenario.
A very new and potentially ground-breaking phenomenon is the Text Layout Framework (or TLF), Adobe’s high level API for the new Flash Text Engine that was introduced in Flash Player 10. Starting with the CS5 version, you have the choice of making any block of text be ‘Classic Text’ or ‘TLF Text’. I know, as if there already weren’t too many choices to make, right!? Well, although TLF is clearly the future of text in Flash, it is not compatible with older versions of the Flash Player or with AS2 and below. So if you want backward compatibility, Classic Text is your best bet.
TLF basically adds a boatload of features to good old text in Flash. Want to maintain tight control over the leading and tracking in your text? Need vertical orientation for the text? How about multiple columns? Heck, do you just need your text to display nicely in an Indian language (or most non-latin scripts, for that matter)? TLF is the answer. There are way too many options to tweak how a block of TLF text renders, way more than what we can cover here. I would say go ahead and play around with it a bit. Just remember that this hasn’t been around too long – neither in the authoring tool nor the player – and there are bound to be some issues with the way it works at the moment.
Helpful Hints
Here are some quick hints and suggested best practices to make the best use of the text tools in Flash:
The shortcut keys for bold and italic in Flash are different than most other applications – Ctrl+Shift+B is for bold, and Ctrl+Shift+I is for italic.
With the text tool selected, click once on the stage to create a single line text field. Click and drag to create a paragraph.
To convert a paragraph to a single line, click anywhere inside the text block and double-click the hollow square handle at the top-right of the selection.
To convert a single line to a paragraph, simply drag any of the four selection handles.
A hollow square at the top-right indicates that the selected block is a paragraph, while a hollow circle represents a single line.
A text block can be of three types:
Static: A static block of text that is hardcoded in the FLA and nothing more.
Dynamic: If you need to replace the contents of a text block on the fly during run time, this one is way to go.
Input: The name says it all, really. Use this for when you need the user to enter text – like in forms, etc.
If you need to embed a font in your Flash file and the text is going to be simple alphabets, numbers and everyday punctuations, choose ‘Basic Latin’ in the Embed dialog. There’s a good chance you won’t need anything else from that font.
Filters can be applied directly to a block of text in Flash. You don’t need to convert it to a movie clip as with everything else. Go ahead and go crazy with those 1 pixel text shadows, already!
Conclusion
And that’s how you do symbols and text in Flash. Of course, there’s a ton more to these than we have covered, but the attempt was to try and compile some of the best tips and best practices when working with symbols and text. Please feel free to add your own tips and shortcuts in the comments section. Or challenge anything I’ve said. I’ll be the first to acknowledge that I don’t know everything there is to know about Flash, so anything new or different is always welcome.
Next time we will get into the core functionality and unique selling point of Flash: animation. Stay tuned!
Flash’s text formatting capabilities are really great, but the only transformations we can perform are the usual MovieClip examples. If your designer asks you to place well-formatted text on a circular path, there’s no built-in transformation tool to get the job done…
We will see how to explode the TextField and place all the characters along such a curve, preserving the text formatting and character spacing. Finally, we’ll take a look at how to draw text along a spiral.
Final Result Preview
Let’s take a look at the final result we will be working towards:
Alter the text in the textfield and toy around with the parameters..
Imagine this fictional scenario: Monday morning, you’re drinking your coffee, and then your graphic designer comes and wakes asks you “Hey, I’m designing the game loading animation, and I’d like to have the loading progress text fit this circle; I guess you have something I can copy and paste to do the job ?”
And the fact is that you don’t have already something to easily lay out the text in this way. So you come here and read this article. We will go step by step to build what you’re after, starting with the basic mathematics knowledge to place a point along a circle, find which place to put it, according to its original position in a container, how to preserve the character formatting and spacing (otherwise your designer would never accept your solution) and then compile all these parts into a generic class that will make it easy to set up and transform any dynamic text to apply this circular layout.
The font used in the demo is the free Elegan Tech font you can download and freely use from dafont.com
The first steps will show in detail how to create the test Flash movie. If you are already familiar with the usage of Flash components and their event handling, you might want to jump directly to Step 10 where the real work begins, once the starting points are set.
Step 1: Demo Interface Demo Flash File
Start by creating a new CircularTextTest.fla file with Flash Professional, then open the Components window and drag a slider, a label and a checkbox to your Flash library.
In the Flash file, create a large text field, then set it as an input TextField and give it the name: tfTemplate. For this demo we have chosen to use the EleganTech font, so set the TextField’s font value to this, then import the font and make sure the necessary characters range are imported.
Drag and drop the checkbox from the library to your stage, then copy and paste it 3 times. Each checkbox will be used to set a demo parameter: show/hide anchors, turn text outside/inside, trim (or not) the empty space.
The label and selected values are up to you, to set the initial values of the demo. The important thing is to set the instance names of the checkboxes to be able to use them. The first one will be chkShowAnchors, the second one chkTxtOutside and the third one chkTrimWhite.
Finally we will need one slider to set the value of the circle radius, and another to adjust the character offset from the anchors we will place. Each slider will come with a label in which we will display the actual value. So you can drag and drop a label and a slider from the library to the stage, then set their names and parameters like on this screenshot.
Apart from the instance names which are mandatory, the important parameters are the slider value, which we will be used as the initial default value, the min and max values. The liveDragging parameter will make the slider send an event while it is being dragged, so that we will update the circle in real time when the user moves the slider. If liveDragging isn’t checked, the update will only occur when the user release the slider.
Now you can create the second slider and its associated label, respectively named sliderCharOffset and labelOffset. For the demo I have used the default value of 7, min and max values from -50 to 50, but this is up to you, you can set it to fit your needs.
At last you can set the document class to be CircularTextTest, which will host all the demo code. The class isn’t yet created, this is the next step, right now you just have to set the class name in the Flash file, as explained in the How to Use a Document Class in Flash Quick Tip.
The Flash file is now complete. If you have any doubt you might check the file from the downloadable sources.
Step 2: Demo Interface Demo Class
In this step we create the class, associate it with the Flash file and write down its basic content: an addedToStage handler function and the basic createCircularText routine that we will call to transform the text.
Let’s create the CircularTextTest.as Class file alongside your Flash file. The very first steps will be to import the classes we need, to declare the assets we have put on the stage and to prepare the routine we will call to do the work.
package {
import fl.controls.CheckBox;
import fl.controls.Label;
import fl.controls.Slider;
import fl.events.SliderEvent;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TextEvent;
public class CircularTextTest extends MovieClip
{
/* ----- Assets defined in the Flash timeline for the demo ----- */
/** The editable TextField */
public var tfTemplate:TextField;
/** Checkbox: show character anchors */
public var chkShowAnchors:CheckBox;
/** Checkbox: text orientation */
public var chkTxtOutside:CheckBox;
/** Checkbox: trimWhite/condenseWhiteSpace */
public var chkTrimWhite:CheckBox;
/** Slider : the value of the circle radius */
public var sliderRadius:Slider;
/** The label to display the current radius value */
public var labelRadius:Label;
/** Slider : the offset of the characters from the circle */
public var sliderCharOffset:Slider;
/** The label to display the current offset value */
public var labelOffset:Label;
public function CircularTextTest() {
stop();
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
protected function onAddedToStage(evt:Event):void
{
createCircularText();
}
protected function createCircularText():void
{
// Here will comes all the interesting code
}
}
}
This is the basic structure, now we will have to fill the blanks to make sure we use the values from the input field, checkboxes, and sliders.
Step 3: Demo Interface Input TextField
We need to make sure we know when the content of the TextField is modified, so we will complete the initSwf initialization handler to add event listeners to the change and textInput events. These events will call their own callback, which will in turn call the createCircularText() routine. This extra step is there for if you want to perform some validation stuff depending of the event type; to give an example, you might want to add some code to make sure the text is valid, or to perform some special stuff when the text is empty, before calling the createCircularText() method.
protected function onAddedToStage(evt:Event):void
{
tfTemplate.addEventListener(TextEvent.TEXT_INPUT, onTextInputHandler, false,0,true);
tfTemplate.addEventListener(Event.CHANGE, onTextChangeHandler, false,0,true);
createCircularText();
}
protected function onTextInputHandler(evt:TextEvent):void
{
createCircularText();
}
protected function onTextChangeHandler(evt:Event):void
{
createCircularText();
}
Step 4: Demo Interface Text Direction Checkbox
The checkbox is already set up and ready in Flash, so we just need to listen for updates to the chkTxtOutside checkbox. Exactly like for the input field, we update our initialization routine to add an event listener for the change event from the checkbox. This time we will use only one generic onCheckBoxChange event callback for all the checkboxes, that we will create right now.
protected function onAddedToStage(evt:Event):void
{
// ...
// Previous code still here
// ...
chkTxtOutside.addEventListener(Event.CHANGE, onCheckBoxChange, false, 0, true);
//stage.addEventListener(MouseEvent.CLICK, onCheckBoxChange); // Lazy-man listener to update the circle after every click on any component.
createCircularText();
}
protected function onCheckBoxChange(event:Event):void
{
createCircularText();
}
If you read the comments you might notice I have left commented a very lazy implementation that you might find useful when creating a quick and dirty test: adding a click event listener on the stage to call the update will generate more updates than are really needed, but when your goal is only to make sure the update routine is called to test your code, this might be a time-saver.
Step 5: Demo Interface Show Anchors Checkbox
I guess you have understood how it works, so the next steps will sound very familiar: we will continue to add event listeners to the change/update events of the components the user will interact with.
protected function onAddedToStage(evt:Event):void
{
// ...
// Previous code still here
// ...
chkShowAnchors.addEventListener(Event.CHANGE, onCheckBoxChange, false, 0, true);
createCircularText();
}
Step 6: Demo Interface Radius Slider
Listening for the update of the slider will work like the checkboxes, but we will also update the label contents to display the value to the user, editing the label text to display the slider value.
protected function onAddedToStage(evt:Event):void
{
// ...
// Previous code still here
// ...
sliderRadius.addEventListener(SliderEvent.CHANGE, onRadiusChange, false,0,true);
createCircularText();
}
protected function onRadiusChange(evt:SliderEvent):void
{
labelRadius.text = "Radius : " + sliderRadius.value;
createCircularText();
}
Step 7: Demo Interface Text Offset Slider
Obviously this is almost the same story as the radius, but with a different label and a different slider.
protected function onAddedToStage(evt:Event):void
{
// ...
// Previous code still here
// ...
sliderCharOffset.addEventListener(SliderEvent.CHANGE, onCharOffsetChange, false,0,true);
createCircularText();
}
protected function onCharOffsetChange(evt:SliderEvent):void
{
labelOffset.text = "Character offset from the circle : " + sliderCharOffset.value;
createCircularText();
}
Step 8: Demo Interface Generate Circle
Right now we have done all the work to make sure the createCircularText routine is called every time something has changed, to create the text circle. Now it is time to create the text circle in this routine.
To transform the text, we will call CircularText.generateText(templateTextField, targetHostClip, options), with all the options being stored in a CircularTextOptions instance. The inner working of these classes will be the matter of the next steps, right now we have to read the values from our components and send them to these objects that will do the job for us. These classes will be stored in the utils.clips package, so we have to make sure we add these contents in the import statements.
We will need a clip in which to place the circle of individual character MovieClips; this will be called animHost.
package {
// ....
// Previous import still here
import utils.clips.*; //for the classes we will later create
public class CircularTextTest extends MovieClip
{
/** The movieclip that will 'host' all the created character clips */
public var animHost:MovieClip;
protected function createCircularText():void
{
// For the purpose of the demo we create a movieclip at the center of the stage
if (animHost == null)
{
animHost = new MovieClip();
animHost.x = 275;
animHost.y = 200;
addChild(animHost);
} else {
// We make sure the previous character clips are removed
for (var i:int = animHost.numChildren; i>0; i--) {
animHost.removeChildAt(0);
}
}
var options:CircularTextOptions = new CircularTextOptions();
if (chkTxtOutside.selected) {
options.characterOrientation = CircularTextOptions.CHARACTER_ORIENTATION_OUTSIDE;
} else {
options.characterOrientation = CircularTextOptions.CHARACTER_ORIENTATION_INSIDE;
}
options.radius = sliderRadius.value;
options.radiusOffset = sliderCharOffset.value;
options.trimWhite = chkTrimWhite.selected;
options.showAnchors = chkShowAnchors.selected;
CircularText.generateText(tfTemplate, animHost, options);
}
Step 9: Demo Interface Turning Circle
To complete the demo, let’s make the circle turn! To do this we just need to create a Timer object, make it tick 25 times a second, and call an update handler every time it does so. The update function simply increments the circle’s host MovieClip’s rotation property by a small amount. That’s it — you have made it turn.
package {
// ....
// Previous import still here
import flash.events.TimerEvent;
import flash.utils.Timer;
public class CircularTextTest extends MovieClip
{
/** A Timer object to call an update callback and spin the circle */
protected var rotationTimer:Timer;
protected function createCircularText():void
{
// ...
// Previous code still here
// We create a timer to turn the movieClip
if (rotationTimer == null)
{
rotationTimer = new Timer(1/25, 0);
rotationTimer.addEventListener(TimerEvent.TIMER , onTimer, false,0,true);
rotationTimer.start();
}
}
protected function onTimer(event:TimerEvent):void
{
animHost.rotation += 0.1;
}
Step 10: Main Code Linear Position to Angle
We’ll now convert a linear position to an angle. We will know the linear x position of the text, and we need to transform this to a position on a circle. To convert a point on a segment to a point on a circle, we need a few things:
The segment size, which will be the template TextField‘s width. Let’s call this xMax.
The x position on the segment, which will be the character position in the template.
The circle radius, which we will set.
The alpha angle to plot the point on the circle. This angle will be computed from x and the segment size. We will consider adding a phase, which is an offset.
To make things simple: when x will be 0, alpha will also be 0. On the other side when x equal xMax, then alpha = 360° (or in radians: 2*PI).
For all the intermediate positions, alpha = 2*PI * x/xMax (in radians).
We will need this value both in radians – because Math.sin() and Math.cos() ask for it – and in degrees – because we will have to turn our MovieClip to make the character ‘look’ at the center, and MovieClip rotations are in degrees. But we will come back to this in the next part.
If we choose to add an offset (or a phase, at it’s often called for angular values), then it’s just a simple addition to do.
Finally, to get the position of the character on the circle from its center, it’s very basic trigonometry:
Let’s look at a common pitfall in getting the character positions. The most obvious values that come to mind for xMax is to use the number of characters in your text, and for x, to use the current character’s position. But this is really over-simplified and will lead us to unaesthetic results. If you’re using a monospace font, it will be okay. But if you’re using a more common font, then the offset between two successive values of x will always be the same, whether the character is a small one like a dot or a wide one like w. This means that either some letters will be squashed together or some letters will be spread very far apart.
If our source TextField has complex text formatting, mixing different fonts and font sizes, it becomes obvious that the tenth character out of 20 will almost never be at the center of the TextField.
Step 12: Main Code Spacing and Formatting
We’re going to use the character boundaries to take care of the character spacing and text formatting.
ActionScript provides us with the sourceTf.getBounds(sourceTf.parent); method to get the exact dimensions of the TextField (this method is available for any DisplayObject). The getBounds method requires a target coordinate space. The most common usage of our transformation will be to create the circle at the same level as the template TextField, so we’ll use the template TextField’s parent coordinate space to take care of any higher level transformations.
Using the character position in the source string is too limited, so we won’t use such a basic measure. We will call sourceTextField.getCharBoundaries(nthCharacter) to get the position and size of any character. This will return a Rectangle, so we will know the width of the character and its exact position.
We might want to trim the extra white space before and after the real text, so that you could use a wide dynamic TextField, but only compute the really used text width to place the characters on the circle without extra white space. To do so, we will have to get the actual position of the first and last characters. There’s one caveat: if you’re trying to get the boundaries of a control character, like carriage return, it will return null. Therefore we will loop the latest characters to find the last one which does have boundaries:
var i:int;
var charCnt:int = sourceTf.length;
var charBounds:Rectangle;
// the default 'source' bounds are the whold textFields bounds
var templateBounds:Rectangle = sourceTf.getBounds(sourceTf.parent);
// If we trim the 'extra' white, then the boundaries of the last visible character
if (options.trimWhite)
{
charBounds = sourceTf.getCharBoundaries(0);
templateBounds.left = charBounds.left;
charBounds = null;
i = 1;
do {
charBounds = sourceTf.getCharBoundaries(sourceTf.length-i);
i++;
} while (charBounds == null);
templateBounds.right = charBounds.right;
}
After this code block, the templateBounds variable will have the desired width (as we will see later, option.trimWhite is a Boolean, specifying whether we ignore the extra white space of the TextField).
We now have a correct xMax value, and I guess you’ve understood that we will use the same getCharBoundaries method to get the accurate x position of each character in the source TextField, giving us the x values to use in our formulas above.
Step 13: Main Code Formatting our Parameters
Before going further in coding, we will formalize the options we will handle, and put them all in a parameter class. We will use this “options container” in the next steps to easily cover different variations of circular transformation. This option class could be a simple generic Object, but using predefined constants and values makes the usage of the CircularText class easier, enables strong typing – therefore making it easier to find errors at compile time – and enables us to set default values.
package utils.clips
{
public class CircularTextOptions
{
static public const CHARACTER_ORIENTATION_INSIDE:Number = 90;
static public const CHARACTER_ORIENTATION_OUTSIDE:Number = -90;
/** Radius of the circle */
public var radius:Number = 100;
/** Angular offset to apply (to make the text spin around the circle */
public var phase:Number = 0;
/** Character orientation, can be
* CircularTextOptions.CHARACTER_ORIENTATION_INSIDE or
* CircularTextOptions.CHARACTER_ORIENTATION_OUTSIDE */
public var characterOrientation:Number = CHARACTER_ORIENTATION_INSIDE;
/** Useful for debugging, this option enables the display of the
* character anchor points (might help to fine-tune offests, ...) */
public var showAnchors:Boolean = false;
/** Offset in pixel from the circle to the character. By setting both
* the radius and this offset, you can control the character spacing. */
public var radiusOffset:Number = 0;
/** This option sets whether the circle is based on the with of the source
* textField or the width of its contents. ('white space' characters
* are still computed; this is not a condenseWhite-like option) */
public var trimWhite:Boolean = true;
public function CircularTextOptions()
{
}
}
}
Step 14: Main Code Character Placement
We’ve already gone through the math to convert a position on the x axis to a position on the circle. Now we will create new MovieClips for each character and place each one according to its x position, and set its text formatting to match the source format and reproduce the same appearance.
We will need a few local variables to store the intermediate values :
var degrees:Number;
var radians:Number;
var charContainer:MovieClip;
var radius:Number = options.radius;
Then we will start looping through all the source characters
for (i = 0; i < charCnt; i++)
{
charBounds = sourceTf.getCharBoundaries(i);
if (charBounds != null) // special chars, like carriage return, do not have bounds, hence this test
{
//...
}
}
As this snippet tells you, some characters don’t have boundaries, so we need to take care of them. We don’t need to display invisible characters.
Step 15: Main Code Character Orientation
Before converting the original x to its angular position, we need to take care of the character orientation: if the character will look ‘inside’ the circle, then the angle grow with the x value. If we decide to make the characters look to the ‘outside’ of the circle, then it will be read like with a mirror, and we need to invert the angle growth, otherwise it would not really be readable.
If the text is looking ‘inside’, we will arrange the characters clockwise. If the text is facing ‘outside’, we need to turn counter-clockwise while placing the characters.
If this is still not clear, just change the minus in options.phase - (charBounds.right - 0.5*charBounds.width) * 360/templateBounds.width to a plus and publish it to see immediately how it would look if you do not take care of the character orientation. Finally we convert the degrees to radians, as the sin() and cos() need angles in radians for their arguments.
// Compute the angular offset of the char based on its metrics
if (options.characterOrientation == CircularTextOptions.CHARACTER_ORIENTATION_INSIDE)
{
degrees = options.phase + (charBounds.left + 0.5*charBounds.width) * 360/templateBounds.width;
} else {
degrees = options.phase - (charBounds.right - 0.5*charBounds.width) * 360/templateBounds.width;
}
radians = degrees*(Math.PI/180);
Now we can create the container for the character and place it in our host, taking care of the angle we have just computed:
Remember that the characterOrientation value will be one of the following numbers, so the options.characterOrientation used here will turn the character, making it face the desired direction without additional calculations:
public class CircularTextOptions
{
static public const CHARACTER_ORIENTATION_INSIDE:Number = 90;
static public const CHARACTER_ORIENTATION_OUTSIDE:Number = -90;
Step 16: Main Code Formatting
Now that we have created a MovieClip host for this character, placed it along the circle and turn it in the right direction, we should put something in it, like a TextField with the character, otherwise nothing would be visible
This is pretty basic: create a new TextField, and set all its attributes. The most important one is to use embedFonts, so that the text will still be visible after being rotated.
// Set Text and TextFormat
newTf = new TextField();
newTf.type = TextFieldType.DYNAMIC;
newTf.selectable = false;
newTf.embedFonts = true;
newTf.autoSize = TextFieldAutoSize.CENTER;
newTf.antiAliasType = AntiAliasType.NORMAL;
newTf.text = sourceTf.text.charAt(i);
We have a TextField with the text in it, now we have to format this text to looks like the original. We will use a try/catch to warp the setTextFormat because if something goes wrong in your text formatting, because of missing fonts, the error will pop up here, and this will help you debug your font issues.
charTf = sourceTf.getTextFormat(i);
try {
newTf.setTextFormat(charTf);
} catch (e:Error) {
trace('textFormat error');// place a breakpoint here to watch for potential font issues...
}
Finally we have to center the TextField into the target MovieClip we created in the previous step, to make sure they look aligned on the circle. The radiusOffset parameter we use here complete the circle radius: when fine-tuning the look of your circular text, having both the circle radius – which set where the character containers are – and an offset make easier to set the desired character spacing. It could be totally done without this offset, but makes life easier for some designer working with our snippets.
That’s it, we’re done. We have gone through all the steps and now have a fully working routine.
Step 17: Main Code Class so Far
And here comes the complete CircularText class we have built throughout the steps of this tutorial:
package utils.clips
{
import fl.text.TLFTextField;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.text.AntiAliasType;
import flash.text.Font;
/**
* Use CircularText.generateText(templateTextfield, targetMovieClip,
* options) to create a well-spaced character distribution around a circle
* in the target movieclip.
*/
public class CircularText
{
public function CircularText()
{
}
/**
* @param sourceTf The Textfield wich is used as source and template.
* Typically a dynamix textField, invivisible, in which
* the text and textFormat are set by the rest of the
* program.
* @param host The target movieClip in which the text circle will
* be created.
* @param options A CircularTextOptions object with formatting option
* to make the text circle looks like we want to.
*/
static public function generateText(sourceTf:TextField,
host:MovieClip,
options:CircularTextOptions=null):void
{
if (options == null) options = new CircularTextOptions();
// We explode the original textField into smaller clips, each one containing a character
var newTf:TextField;
var charTf:TextFormat;
var i:int;
var charCnt:int = sourceTf.length;
var charBounds:Rectangle;
// the default 'source' bounds are the whold textFields bounds
var templateBounds:Rectangle = sourceTf.getBounds(sourceTf.parent);
// If we trim the 'extra' white, then the boundaries of the last visible character
if (options.trimWhite)
{
charBounds = sourceTf.getCharBoundaries(0);
templateBounds.left = charBounds.left;
charBounds = null;
i = 1;
do {
charBounds = sourceTf.getCharBoundaries(sourceTf.length-i);
i++;
} while (charBounds == null); // Take care of null-boundareis character like carriage return
templateBounds.right = charBounds.right;
}
var degrees:Number;
var radians:Number;
var charContainer:MovieClip;
var radius:Number = options.radius;
for (i = 0; i < charCnt; i++)
{
charBounds = sourceTf.getCharBoundaries(i);
if (charBounds != null) // special chars, like carriage return, do not have bounds, hence this test
{
// Compute the angular offset of the char based on its metrics
if (options.characterOrientation == CircularTextOptions.CHARACTER_ORIENTATION_INSIDE)
{
degrees = options.phase + (charBounds.left + 0.5*charBounds.width) * 360/templateBounds.width;
}else {
degrees = options.phase - (charBounds.right - 0.5*charBounds.width) * 360/templateBounds.width;
}
radians = degrees*(Math.PI/180);
// Create a new Textfield to render this character
newTf = new TextField();
charTf = sourceTf.getTextFormat(i);
// Set Text and TextFormat
newTf.type = TextFieldType.DYNAMIC;
newTf.selectable = false;
newTf.embedFonts = true;
newTf.autoSize = TextFieldAutoSize.CENTER;
newTf.antiAliasType = AntiAliasType.NORMAL;
newTf.text = sourceTf.text.charAt(i);
try {
newTf.setTextFormat(charTf);
} catch (e:Error) {
trace('textFormat error');// place a breakpoint here to watch for potential font issues...
}
newTf.x = -(charBounds.width)/2;
newTf.y = -(charBounds.height) + options.radiusOffset;
charContainer = new MovieClip();
if (options.showAnchors)
{
// here comes the graphic aspect of the anchors, if you want something else
charContainer.graphics.beginFill(0xff00ff, 1);
charContainer.graphics.drawRect(0,0,5,5);
charContainer.graphics.endFill();
}
charContainer.addChild(newTf);
if (options.characterOrientation == CircularTextOptions.CHARACTER_ORIENTATION_INSIDE)
{
charContainer.rotation = Math.round(degrees)+ options.characterOrientation;
charContainer.x = radius * Math.cos(radians);
charContainer.y = radius * Math.sin(radians);
} else {
charContainer.rotation = Math.round(degrees)+ options.characterOrientation;
charContainer.x = radius * Math.cos(radians);
charContainer.y = radius * Math.sin(radians);
}
host.addChild(charContainer);
}
}
}
}
}
Step 18: Main Code Apply the Transformation
We have seen all the parts, and put them together in a utility class. Now we have just to call this method to generate a circular display of the TextField.
// tfTemplate is the TextField containing the source text to transform
// animHost is a movieClip in which we will create the circle
var options:CircularTextOptions = new CircularTextOptions();
options.characterOrientation = CircularTextOptions.CHARACTER_ORIENTATION_INSIDE;
options.radius = 50;
options.radiusOffset = 0;
options.trimWhite = true;
options.showAnchors = false;
CircularText.generateText(tfTemplate, animHost, options);
Does this code look like something you’ve already seen? Well it should, because this sample usage is really close to the createCircularText method we built at the beginning. Now you might see that almost everything is in place.
Step 19: Main Code A Simple Demo
Now that all the code is complete, you might compile the demo we have built in the first steps (or open it from the downloadable sources).
For those who jumped over the first section, the code in the demo is very basic: simple listeners to update the circular text when something is changed. It has an addedToStage listener to set up the other listeners on the input components (a TextField, some Sliders and some Checkboxes); several listener functions which all call the createCircularText(); and this createCircularText() routine which sets up the options object with the values read from the components and calls the CircularText.generateText method exactly like in our snippets above.
Step 20: Main Code Creating Subclasses
Typically if you’re on a project which involves several displays of circular text, you might find it useful to create inherited styling subclasses, like SmallCircularTextOptions and LargeCircularTextOptions to set the default values you want to use in each case. This way you won’t have to type the parameters each time you need to generate a text transformation.
public class SampleSmallCircularTextOptions extends CircularTextOptions
{
public function SampleSmallCircularTextOptions()
{
super();
radius = 50;
characterOrientation = CHARACTER_ORIENTATION_INSIDE;
// showAnchors = AppManager.isDebug; // Here read the debug setting from your application
}
}
With this class, creating the circular text only requires a source TextField and a target MovieClip to host the circle, giving us a really small amount of code:
// tfTemplate is the TextField containing the source text to transform
// animHost is a movieClip in which we will create the circle
CircularText.generateText(tfTemplate, animHost, new SampleSmallCircularTextOptions());
Step 21: Extension Circle to a Spiral
Do you want to go further? If this is the kind of transformation you use in your projects, you might notice that it is now really easy to modify the coordinate calculations to create something else than a circle. Here we will quickly look at how to make a spiral.
So let’s start by thinking about how to plot our point on a spiral. Basically there are two differences from placing the letters on a circle and alongside a spiral:
The radius from the center to a character is not constant: each step the radius is increased (or decreased) by a small amount when walking along a spiral
The path length might be longer than just 2*PI*Radius, so that the characters go ‘below’ the previous ones.
Here comes the updates of the CircleTextOptions variables to be able to store these two parameters:
/* ---- Spiral specific options ---- */
/** By default, only 1 turn, therefore a circle */
public var turnCount:Number = 1;
/** Damping make the 'circle' radius smaller (or bigger) each time;
if it's equal to one, then the radius doesn't change */
public var spiralDamping:Number = 1;
Then we need to update our CircularText.generateText() method to take care or these parameters. As mentioned, the radius will no longer be constant.
var radius:Number = options.radius;
for (i = 0; i < charCnt; i++)
{
// Spiral update : after each character the spiral damping is applied
radius *= options.spiralDamping;
This way, the initial radius value will be the same as our circle. Then for each character it will be multiplied. The default value of 1 will keep the radius unchanged, but if we set a slightly smaller amount, like 0.97, the radius will be smaller each step.
Then we want to control the length of the spiral. Just after calculating the degrees value for the current character, we want to multiply it by the turn count of the spiral. If the spiral loops only one time, it will be like a circle (if the radius is left unchanged). If the spiral loops more than one time, the characters will overlap. So the degrees value has to be multiplied by turnCount to transform our value for 1 turn to its new value for n turns.
degrees = options.turnCount * degrees;
That’s it, nothing more to do to have a customizable spiral! You might want to edit the createCircularText() method of the test class CircularTextTest to try it.
// Previous option settings still there ...
// Spiral update : We will use a damping != 1 and a number of turn != 1
options.turnCount = 1.5;
options.spiralDamping = 0.97;
CircularText.generateText(tfTemplate, animHost, options);
And here comes the corresponding updated SWF. You might want to add sliders to control the turnCount and damping values if you want to play with different values easily.
Conclusion
I hope this tutorial successfully highlighted the common pitfalls one will encounter while playing with text measurements, exploding a TextField and recreating the original text formatting. Do play with the sources and fine-tune it to your needs. Thanks for reading!
This tutorial covers the creation of a shiny text effect, which can then be easily edited for rapid prototyping.
The animation can be published to Flash Player 8 and up, and can be created in Flash 8 and up. There is no ActionScript running this animation, so it can easily be implemented in both AS2 and AS3 projects. It can serve as a fun Flash game intro logo, banner ad, or however you see fit. Have fun with it!.
Final Result Preview
Let’s take a look at the final result we will be working towards:
Step 1: Create a new Flash Document
Using File > New > Create a new Flash ActionScript 2 or 3 document.
In the Properties window, make the stage size 590 by 300.
Also edit the frames per second to be 30.
Step 2: Gradient Shape
Using the Rectangle tool (R), place a square on the stage with the preset black and white radial gradient, and no stroke.
It doesn’t matter how big the square you create is.
Label this layer “gradient”.
Step 3: Re-size and Align
Select your gradient square, and open the Align Options using CTRL + K.
Ensure that “Align to stage” is checked.
First match the width and height of the square to the stage.
Your result should be something like this:
Next align the left edge of the shape to the stage.
Your result should now be as follows:
Then align the top edge of the shape to the stage.
Bingo:
Step 4: Edit the Size and Colors
Select your gradient transform tool (F).
Click on the gradient on the stage.
Using the gradient control handles, alter the size and shape of the gradient so that it is more evenly distributed across the stage.
Open the Color window (Alt+Shift + F9).
Change the white color on the gradient to a #333333 grey, and slide the color to the right so that there is a grey circle in the middle of the gradient.
This is what you should see:
Step 5: Add Horizontal Lines
Create a new layer above the gradient, and name it “lines”.
Using the Rectangle tool (R), draw a rectangle on the stage with no stroke, and a 9% opaque white fill.
Using the properties panel, alter the size of the shape to be 590 by 5.
Using the Align options, align the shape to the horizontal center of the stage.
Next, using the Align options, align the shape to the top edge of the stage.
With this shape still selected, copy it, and paste it in place (CTRL + Shift + V).
Move this new shape down ten pixels below the first shape, and duplicate it again using the same method. You now have something like this:
Duplicate this process above until you have the entire screen covered with these horizontal shapes. You’ll end up with something like this:
Step 6: Logo Animation Movieclip
Create a new layer called “logo”.
Draw a rectangle (R) with a white stroke, but no fill.
Under Properties, change the dimensions to 590 by 300px.
Using the Align window (CTRL + K), align the shape to the left and top edge so that your result is this:
Select the white rectangle, and convert it to a symbol under Modify > Convert to Symbol.
Name the movieclip “masterClip”, and ensure that the registration point is in the top left corner. Then click “OK”.
Step 7: Make the Rectangle a Guide
Double-click on the masterClip on the stage to edit it in context.
Double-click on the layer name and change it to “stage size”.
Right-click on the layer and choose “Guide”.
Lock the layer by clicking on the second white circle.
You now have a reference layer, which tells you how how large the stage is, in context to the masterClip.
These are the type settings to apply to the text field (your available settings may be slightly different, depending on which version of Flash you’re using):
To achieve the line break in the text, manually enter nine blank spaces on the second line to get the text to line up as displayed.
Step 9: Rotate the Text
Select the text, and using the Transform Window (CTRL + T) rotate the text to -6.5.
Step 10: Adjust the Spacing
Select the text, move it down so that it is in the center of the frame.
Step 11: Convert the Text to a Movieclip
Select the text on the stage, and convert it to a symbol with Modify > Convert to Symbol (or F8).
Name the clip, “sourceText” and ensure that it is a Movie Clip, not a button or a graphic clip. Then click “OK”.
Step 12: Place on Four More Layers
Select the text clip and copy it, using CTRL + C.
Create four new layers using the “New Layer” button within the timeline pane.
.
Put the text clip that you copied on each layer, using Edit > Paste in Place.
You now have five identical layers.
Rename each layer by double-clicking on each layer’s name. Use the image below as a guide for naming each one.
Lock and hide all of your layers using the lock and visible toggles within the timeline.
By hiding and locking each layer, we’ll be able to isolate and edit each layer independently.
Step 13: Edit the “Glows” Layer
Make the “glows” layer visible, and unlock it. Click on this layer to ensure that you’re editing it.
Select the text clip on the stage, and ensure that the filters are open in the Properties panel.
Add a glow to the text clip, using the Add Filter button. Choose the “Glow” option.
Apply these settings to the glow that was just created.
You now have this effect:
Now using the same method, apply a second glow filter to the same clip.
Apply these settings to the new glow that was just created.
You now have this effect:
Now apply a Drop Shadow to this same clip.
Apply these settings to the drop shadow that was just created.
You now have this effect:
Step 14: Edit the “Mask3″ Layer
With the “glows” layer still visible and selected, add a new layer. Name it “green”.
.
Now lock and hide and “glows” layer. Make the “mask3″ layer visible, and unlock it.
Make the “mask3″ layer a mask by right-clicking on the layer, and choosing “mask”.
The green layer will now be temporarily locked. Unlock it by clicking on the layer’s lock icon.
Use the Rectangle tool (R) to draw a shape on the “green” layer.
Apply no stroke, and the standard black-to-white linear gradient.
Draw the shape, so that it is larger than the stage size.
Select the Gradient Transform Tool (F) and click on the gradient on the stage.
Using the Gradient Transform Handles, rotate the gradient 90 degress, and change the span of the gradient so it only covers the text area of the stage.
Alter the colors of the gradient using the Color Window. (Alt + Shift + F9).
The Green on the right is #8CD566.
The Green on the left is #43851F.
Now lock the “green” layer, and ensure that the “mask3″ layer is also locked. Also turn the visibility of the “glows” layer back on. .
The result is now this:
Step 15: Edit the “Inner Glow” Layer
Make the “inner glow” layer visible, and unlock it.
Select the clip on the “inner glow” layer, and add a glow to it under the filters in the proerties window.
Apply these settings to the new glow:
Tip: Notice that this glow is an inner glow, which means that it glows from the inside, not the outside.
Your result is now this:
With the clip still selected, change the blending mode to Overlay under Display in the Properties Panel:
With the new blending mode in place, your result is now this:
Step 16: Increase the Timeline Span
This masterClip is currently only one frame long. We need to add more frames, so that we can animate the shine effects.
Within the timeline, click and drag to highlight all layers on frame 88.
With the frame still selected, right-click and choose “Insert Frame” from the drop-down list.
Tip: Aside from right-clicking to add frames, you can also use F5 as a shortcut.
The timeline now has a span of 88 frames.
Step 17: Add the First Animated Shine
Start by first locking, and hiding, the “inner glow” layer.
With the “inner glow” layer still selected, add a new layer using the button within the layers window.
Double-click on the new layer’s name and name it “shine”.
Right-click on the bottom “mask1″ layer and make it a mask.
Now unlock the “shine” layer and click on it, so you can begin to work on this layer.
The shine that we are adding will begin animating roughly half-way through the animation. Use the scrubber in the timeline to navigate to frame 47.
Click on frame 47 of the “shine” layer, and right-click to insert a keyframe.
Tip: Aside from right-clicking, you can also use F6 to insert a keyframe.
This is the keyframe that we will add our shine to.
Leave this new keyframe selected, and select the Rectangle Tool (R).
Choose the standard white-to-black linear gradient for the fill, and no stroke.
Draw a rectangle on the stage, slightly taller than the stage’s height, and with a width of 150 pixels.
Use the Gradient Transform Tool (F) to edit the span/rotation of this new gradient shape.
Use the Gradient control handles to rotate the gradient slightly to left.
With this gradient still selected, open your Colors Window (Alt + Shift + F9) to edit the colors.
Apply these settings to your gradient:
The swatch on the left of the gradient is a white fill, at 0% Alpha.
Click just below the middle of the gradient, to add a middle swatch. Make it a white fill, at 50% Alpha.
The swatch on the right of the gradient is a white fill, at 0% Alpha.
Tip: To edit a color of a gradient swatch, double-click on the swatch itself.
You now have a faint, faded white gradient off to the left of the stage.
We now need to add a second keyframe to the timeline, so that we can animate this gradient. Click on the last frame of the “shine” layer (frame 88), and insert a keyframe with F6.
We are now ready to apply a tween to this gradient.
Right-click anywhere on the “shine” layer between the two keyframes, and choose Create Shape Tween.
We now have a shape tween on the layer within the timeline.
In order to actually see movement with the gradient, we need to edit the second keyframe. Click on the keyframe in the timeline.
The gradient is now selected. Use your Right arrow key to move the gradient over to the right side of the stage.
Tip: To do this quickly, hold down SHIFT as you press down the Right arrow key. This will move the shape in 10 pixel increments.
The gradient is now sitting on the right side of the stage. We now have this on the second keyframe in the timeline.
Now lock the “shine” layer, and ensure that “shine” and the bottom “mask1″ layer are visible.
You can now preview the animation using the ENTER key.
The animation on this layer looks like this.
Step 18: Add the Second Animated Shine
Select the bottom “mask1″ layer, and add a new layer using the New Layer button.
Double-click on the new layer, and name it “fade”.
Right-click on the top “mask1″ layer, and make it a Mask.
Now unlock the “fade” layer. This is where we will add our next shine effect.
Select the rectangle tool (R). Set the stroke to null, and make the fill black.
Draw a rectangle slightly wider than the stage, and with a height of 174.
Position the rectangle just above the stage.
Select the Selection Tool (V) from the tools.
Hover your mouse over the bottom edge of the black shape. You’ll see a curved dotted line appear under the cursor, signifying that you can edit the vector shape.
Click and drag the bottom edge up slightly, and you’ll now have a concave shape.
Now select the Subselection Tool (A) from the tools.
Click on the bottom right corner of the black shape. The bezier point will be black, signifying that it is being edited. You can also see the control handles that alter the curves of this shape. .
Click on the curve handle and drag it down to produce this shape.
Now click on the handle for the left corner.
Drag it up and to the right to produce this shape.
Notice that the curve overlaps the stage slightly. Use the Selection Tool (V) to move the shape up so it doesn’t cover the stage.
Select the shape and give it a gradient fill by choosing the standard black-to-white fill.
This is our result.
Select the Gradient Transform Tool (F) and click on the gradient shape.
Use the gradient control handles to rotate it, and squeeze it vertically.
Open up the Colors Window (Alt + Shift + F9) to edit the colors of the gradient.
Move the two gradient swatches closer together and set the following:
The swatch on the left of the gradient is a white fill, at 0% Alpha.
The swatch on the right of the gradient is a white fill, at 50% Alpha.
This is now our result.
In the timeline on the “fade” layer, now insert a keyframe (F6) on frame 48.
Insert a blank keyframe (F7) on frame 49.
Right-click anywhere between the first two keyframes and select Create Shape Tween.
We now have this on the “fade” layer.
Select the second keyframe in the timeline.
Using the Selection Tool (V), move the shape down to the bottom of the stage. .
Tip: Notice that only the white portion of the gradient is off the bottom of the stage. The transparent area isn’t visible.
Now lock the “fade” layer and play the animation using the ENTER key. You’ll see this:
Now ensure that all the layers are locked and make them all visible.
Now when you play the animation, you’ll see this:
We’re almost done! All we have left to do is add the sparkle animations.
Step 19: Add the First Sparkle Highlight
Click on the top “Mask1″ layer.
Now add three layers using the New Layer button.
Name them “sparkle” 1, 2, and 3.
Insert keyframes on these three new layers.
Sparkle 1 layer has a keyframe on frame 33.
Sparkle 2 layer has a keyframe on frame 43.
Sparkle 3 layer has a keyframe on frame 53.
On the keyframe on the “sparkle1″ layer, we’re going to draw a red line. Click on the Line Tool (N) and draw one line as it appears here.
Click on the red line with the Selection Tool (V) and convert it to a symbol with Modify > Convert to Symbol (F8).
Ensure that it is a Movie Clip, and name it “sparkleMove”.
Now double-click on the new movieclip to edit it in context.
Name “Layer 1″ “reference” by double-clicking the Layer Name. Then create a new layer and name it “sparkle”.
Now extend the frames by clicking on frames 25 on both layers, and then right-click and choose Insert Frame (F5).
Lock the reference layer and draw a square with no stroke and a black fill on the sparkle layer.
Rotate the black square 90 degrees with the Free Transform tool (Q).
Using the Selection Tool (V), roll your mouse over each side of the square, and click and drag the edges in, creating subtle arcs. Your result is a small starburst shape.
Click on the shape, and assign it the default black-to-white radial gradient from the Fills.
Zoom in on the starburst with the Zoom Tool (Z). Then Select the Gradient Transform Tool (F). Click on the starburst to edit it.
Open up the Colors Window (Alt + Shift + F9) to edit the colors of the gradient.
Apply these settings to the radial gradient:
The swatch on the left of the gradient is a white fill, at 65% Alpha.
The swatch on the right of the gradient is a white fill, at 0% Alpha.
The result is this.
Click on this shape with the Selection Tool (V), and convert it to a symbol with Modify > Convert to Symbol (F8). Ensure that the registration point is in the center, and name it “sparkle”.
Zoom out and center the sparkle clip over the left edge of the red line.
Insert a keyframe on the “sparkle” layer on frame 25.
On this new keyframe, use the Free Transform Tool (Q) to rotate the starburst shape 90 degrees to the right. Also use the Selection Tool to move the shape and center it over the right side of the line.
Right-click between the two keyframes on this layer and select “Create Classic Tween”.
You can now watch the animation. You’ll see the star move and rotate from the left side to the right.
Unlock the “reference” layer and set the stroke color to an alpha level of zero.
Now lock the reference layer, and click on the “sparkle” layer to edit it.
Insert keyframes on frames 6 and 20.
On frame 1, click on the starburst movieclip. In Properties, under Color Effect, Choose Alpha from the Style drop-down list. Set the Alpha to zero.
Do the same on frame 25.
Now the starburst fades in as it moves across the stage. It also fades out.
Go back to the masterClip level by double-clicking the stage.
Click on the outline view button on the “sparkle1″ layer, and insert a Blank Keyframe (F7) on frame 59.
Put sparkle layers 2 and 3 in outline view as well.
On the “sparkle2″ layer, insert a blank keyframe (F7) on frame 69.
On the “sparkle3″ layer, insert a blank keyframe (F7) on frame 79.
Step 20: Add the Last Two Sparkles
Copy and paste the sparkleMove clip to the other two layers.
Because we are currently in outline mode, it’s easy to place the animations where they need to be. The line shows the duration of the animation, and we’ll use that as reference. Because these sparkle animations are supposed to be small highlights, we’re placing them on the edges of the text.
Place the sparkleMove clip on the “sparkle2″ layer below the letters L and E.
Place the sparkleMove clip on the “sparkle3″ layer above the letters T and E.
Now when you publish your animation (CTRL + ENTER), you’ll see this:
Conclusion
And we’re done! The great thing about this setup, is that it is extremely easy to edit this animation. To change the type content, font, etc, you simply need to edit the sourceText movie clip in the library and tweak the location of the sparkle movie clips. Play around with the colors of each element to make it your own:
Thank you so much for taking the time to go through this tutorial, I hope you learned some handy techniques. If you have any questions, don’t hesitate to leave them behind in the comments!
In this tutorial you will be converting your text to give it a glass-like effect, using filters in Flash. This technique also works on vector graphics. We will achieve it with a fairly simple method of overlaying multiple layers with different effects.
Final Result Preview
Let’s take a look at the final result we will be working towards. This is a swf file and the text below is selectable, so go ahead, select the glass text to see a glass-like highlight:
Step 1: Create Your Text Field
Open your version of Flash and open a new Flash file. ActionScript version does not matter for this tutorial, as there is no code. In your file, put a text field onto the stage. To do so, click the text button (T) on Tools menu and drag a rectangle on stage as shown in the image below:
Step 2: Select a Large and Bold Font
Once drawn, you can enter your choice of text in the field and set its properties accordingly. The glass effect is more prominent on larger and bolder fonts so I have chosen Elephant here, but you may chose any font you like. Click the Selectable button to make the text selectable in final SWF. The color of the font does not matter here
Step 3: Add Some Vector Graphics
Optionally, you may want to see how the effect works on vector graphics. So I will just draw a small graphic using basic Flash drawing tool. Note that glass effect will not take into account the outlines or colors, so plain old graphics in a single color are enough for the moment. Once done with Steps 1 and 2, you will have something like this on your stage:
You may import vector graphics to Flash surface as well but take note that color differences are not detected by this effect.
Step 4: Convert Everything to a Symbol
Now we’ll create our first symbol. Select your text and all vector graphics (you can do so by dragging a rectangle around everything). With all things selected, right-click and click on "Convert to Symbol" as shown below:
Name your symbol as anything you like and set its type to Movie Clip; I have named it as "gtext". So when you click on window and open the library window, you can view an item named gtext in there. From here on, I will refer to this symbol as "gtext". This will be a good point to save your work.
Step 5: Convert to Symbol Again
Once again, right-click the newly created gtext symbol and convert to symbol, this time enter the name as "glass". We do this in order to create another container movie.
Now we will have a glass symbol, within which we have a gtext symbol. Both these symbols are visible in the library.
Now double-click the glass symbol to view it in edit mode. All the remaining steps will be performed within this glass symbol.
Step 6: Add a Layer
Double-click the blue square icon next to glass symbol in library panel (Window > Library) . This will open the glass symbol in edit mode. We have one layer named Layer 1 in this window. Add a new layer by clicking the New Layer button in the lower left corner of the timeline window. Click and hold the mouse button over the new layer to start dragging it and drag this new layer to below our current Layer 1. Rename the new layer to "background" by double-clicking the layer name.
Step 7: Add a Colored Background
You may want to hide or lock Layer 1 to be able to edit the background layer easily. Click the dot below eye / lock icon in timeline to do so. Now select the background layer in the timeline and click the Rectangle tool from the tools panel; set the outline to null and color to blue in the Properties panel as shown in the image below. I have selected corner rounding as well to make my rectangle look better.
TIP: You may also use an image for the background here, instead of a plain fill.
Step 8: Create Three More Layers
While editing the glass symbol, in the timeline panel, click the New Layer button three times to create three new layers. You now have five layers: the background layer, Layer 1 and three new layers. Rename Layer 1 to bevel2 and the other new layers to shade, outline, bevel1, and bevel2 as shown below (you can rename the layers by double-clicking their names).
Step 9: Place Your Symbol on a New Layer
From the Properties panel, note the x and y coordinates of gtext already placed on stage which is now on bevel2 layer at x=75 and y=10 for my drawing.
Next lock all the layers except the one you are working on (by clicking the dot under the lock in timeline window) to make sure that you do not move things around by accident. You may hide a few layers as well by clicking the dot below the eye in timeline window. Select bevel2 layer, open the library panel, and drag gtext onto stage.
Step 10: Set Coordinates of Your Symbol
Once placed on stage, click on the new gtext symbol to select it and set its x and y position in Properties panel > position tab to be exactly the same as in the previous layer, which was at x=75 and y=10 for my movie.
Once done with positioning, lock the current layer so it’s not accidentally changed.
Step 11: Place a Copy on all 4 Layers
Repeat the above two steps (Step 6 and Step 7) for the remaining two layers so at the end, each of the four layers will have the same item placed at the same coordinates. The image below shows that by specifying the coordinates exactly in the properties box, we have no overlapping edges.
Step 12: Apply Bevel Filter to Shade Layer
Lock and hide all layers (by clicking the dots below the eye and the lock in timeline) and unlock and show only the shade layer. Select the gtext symbol on this layer and open the Properties panel. In the properties, expand the "filters" tab if its minimized. At the bottom left corner, there is a an Add Filter button; click this and select the Bevel filter.
Step 13: Adjust Bevel Filter Settings
Adjust the bevel settings to Blur = 20px , Strength = 80%, Angle = 90°, Distance = 10px, and check the box against Knockout. If you want to apply the adjustment on a smaller scale, with smaller text, you can change Blur and distance Properties in proportion, but generally, Blur below 10px will not be suitable.
Step 14: Outline Layer Apply Glow Filter
Lock and hide all other layers and unlock and show only the outline layer. Select the gtext symbol on this layer, open the Filters tab in Properties panel and add a Glow filter. Set the glow filter properties to Blur = 2px, Strength = 50%; set the Color to white and check the Inner and Knockout options. This is shown in the image below and you can see the resulting outline as well.
Step 15: bevel1 Layer Apply Bevel Filter
Lock and hide all other layers and unlock and show only the outline layer. Select the gtext symbol on this layer, open the Filters tab in the Properties panel and add another Bevel filter. Set the bevel filter properties to Blur = 2px, Angle to 69°, Distance to 1px, and check the Knockout option. This is demonstrated in the image below.
Step 16: bevel2 Layer Apply Bevel Filter
Lock and hide all other layers and unlock and show only the outline layer. Select the gtext symbol on this layer, open the Filters tab in the Properties panel and add one more Bevel filter. Set the bevel filter properties to Blur = 6px, Strength=45%, Angle to 45°, Distance to 2px and once more check the Knockout option. This is shown in the image below.
Step 17: Shade Layer Add Shadow
Select the gtext symbol instance in shade layer, lock all other layers so they are not disturbed. In the Properties panel, select the Filters tab and add a Shadow filter in addition to the existing bevel. Set Blur to 0px, Strength to 150%, Angle to any value depending on where you want the sun and distance to be (try between 10px and 20px). The settings and end result are visible in the image below.
Step 18: Testing Your First Version
Reveal all the layers and test your movie in Flash, the end result will be something similar to the movie shown below.
Step 19: Tweaking Your gtext
The movie doesn’t look too impressive with just that text. Let’s change the text a bit; go to Window > Library and double-click the icon next to the gtext symbol to edit it in View pane. Now it’s up to you to modify the items within this symbol. For example, you can add new text fields with different font sizes, add more graphics or animations. I have done a bit of playing with the gtext and added a few things including different fonts, rectangles, animated graphic with changing shape, a fat dotted line and a few graphics with alpha value at 50%. Here is what I have on the drawing board within gtext symbol.
The end result can be seen by exporting the SWF:
Step 20: Changing Reflection Amount
We can change the amount of visible reflection on the glass as we desire. Unlock the shade layer and lock all other layers. Select the gtext on this layer and click the "Color Effect" tab in the Properties panel. Select Brightness from the dropdown menu and change the amount to around -30; this will reduce the amount of reflection from the glass surface. The following image shows the before and after effect of doing so:
Step 21: Changing the Reflection Color
Ah, but sunlight is yellow, not white. We can change the reflection light’s color by editing the filter settings for the shade layer. Undo the brightness change from the previous step by changing the style in Color Effect back to none. Keep the gtext on shade layer selected as in that step, then select the Filter tab, modify the Highlight color of the bevel filter to yellow and set the Alpha to 60%.
Step 22: Changing the Color of Glass
To change the color of the glass itself, start by once again selecting the Bevel filter in the shade layer as in previous step. This time instead of changing the Highlight, modify the Shadow property to select your color. For the best color effect, match the Highlight and Shadow colors closely with a good shade variation: with a yellow highlight I can choose between any shade of yellow, orange, green or even red without making my glass look unrealistic. Once again set the Alpha value as in the previous step to something close to 50% according to your color. I have chosen 50% red here.
TIP: you may also want to change the shadow color and background to match these settings.
Conclusion
So we now have two symbols in our library. One is the glass symbol and other is the gtext symbol. Glass symbol can be edited to modify the glass properties while the gtext symbol can be modified to change the content to be glassified. You can drag and drop the glass symbol in any Flash animation of your own choice to reuse this effect and change the contents of the gtext accordingly. In short you have a nice and handy glassifier component at hand. I would recommend you to play around with the settings and turn off layers or add new layers to see how you can further customize this glass.
Why not try your hand at making a JSFL script that can automatically add the Glassify effect to any of your vector symbols with a single click?
Hey there and welcome to "Flash Video Training Source", a resource for anybody interested in learning more about Adobe's great tool. We feature educational videos, which will help you master Adobe Flash and help you get to know all of its features. We at "Flash Video Training Source" believe that video training and video... more
Why don't you follow us on Twitter and get the latest video tutorials twitted to your account. Just click on the floating twitter bar to your right!
