Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

Creating Cool Text Effects

Working with what's already there

I recently received a letter from a reader asking if I knew of any plug-in programs to create text effects in Fireworks MX. The reader seemed a bit surprised when I wrote back and told them that Fireworks already had the tools to get the job done. "Where is the button?" they asked. Many users feel that if a button isn't on the toolbar, the program can't do it.

In this article, we're going to create some stunning text effects with just a few simple steps and, more importantly, no additional plug-in programs.

Good text effects start with a good variety of fonts. Fortunately, there are a variety of Internet locations for downloading great fonts for free. One of my favorites is www.highfonts.com. Once you've downloaded the fonts you want, check the directions for your operating system with regard to proper installation. Remember, you don't install the fonts just for the program but for the OS.

Three-Dimensional Text
Here is a simple way to create three-dimensional text. Once you master this basic technique, it will be easy to vary it for your own needs.

  1. Open a new canvas to the dimensions you need. I usually like to start with a much larger size and then adjust it down later on. This gives me extra room to work and move things around. For this little exercise 500 pixels wide by 400 pixels high is sufficient.
  2. I find that fonts with rounded edges make for nicer three-dimensional effects. After selecting the Text tool, I used the Property Inspector to select the Comic Sans MS font. I set the size to 100 pixels and the font to bold. Of course, you'll need to adjust these settings for your own particular needs.
  3. For this example, I'm just going to type the word Welcome as our working text. You could use whatever text you want.
  4. Once typed, you want to make sure that your whole text box is selected so that any settings you make will apply to all the text and not just where the insertion point is. I usually instruct my beginner students to click on the Pointer tool, click away from the text, and then once on the text again. This should ensure that the whole box is selected.
  5. The next step is to clone the text by selecting Edit @> Clone.
  6. In my own work, when I create layers I like to move the cloned text, temporarily, to a different area of the canvas. I find this makes it easier to see fill effects.
  7. Open the Layers panel. You should see two layers now. Click on the two layer icons to see what layer goes with what text. It's always good to name your layers. Name the original layer Bottom_Text, and the cloned layer Top_Text.
  8. Make sure the Top_Text layer is selected and open the Fill Color Box in either the Tool panel or the Property Inspector. Once open, select Fill Options?
  9. For this example, I'm going to select the Fill Category of Gradient and a pattern of Linear. For the color, I'm going to use silver. Later on, once you have this basic technique, you could try any combination of settings. I like textures also.
  10. Your Top_Text layer should now have a metallic look. We ?ll leave the Bottom_Text layer set for black.
  11. From here on in, the 3-D effect is easy. Using the Pointer tool, drag the Top_Text layer over the Bottom_Text layer and offset it a little to the left. You can use the arrow keys to move the text one pixel at a time. This allows you to adjust the amount of 3-D that you want.
You now have great looking 3-D text that was easy to create and, more importantly, very easy to control in terms of offset, colors, patterns, etc. (see Image I).

Attaching Text to a Path
Sometimes you might want to curve your text around an ellipse. For example, we can use the technique you are about to see have the text surround an image.

  1. Start a new canvas. For this second demonstration, let's make the canvas 500 by 400 once again (as before).
  2. We are going to begin by drawing the path we want our text to follow. Let's select the Ellipse tool and draw an ellipse approximately 475 pixels wide by about 250 pixels high. If necessary, set the fill color to none and the stroke color to black so that we just see the outline.
  3. For the time being, we just want to use the top half of the ellipse as the guide. The bottom half will be used shortly. In order to split the top and bottom of the ellipse, select the Knife tool from the Tools panel. While slicing the ellipse from left to right, use the Shift key to keep the slice straight. After doing that, you can select each half and, if you want, move them apart slightly.
  4. In the Layers panel you should now see two Path layers. Name the layer associated with the top half Top_Half. Name the bottom layer Bottom_Half.
  5. Select the Text tool. For this exercise, I am once again using the Comic Sans MS. Set it to 75 pixels and Bold. I'm using black as the color, but you can use any color you want. To help position it properly on the guide, set the alignment to Center (using the Property Inspector).
  6. Type the text Welcome To. Name this layer Top_Text. Its position on the canvas is not critical at this point.
  7. Using either the canvas or the Layers panel, select the Top_Text layer. Using the Shift key, select the Top_Half layer. You should see both layers selected.
  8. Select Text @> Attach To Path. (Note: If that option is unavailable, you don't have both paths selected.) Your text should now be aligned with the Top_Half path (see Image II).

    Notice that the two paths are now merged together.

  9. Select the Text tool again and, with the same settings, type Fireworks MX.
  10. Name this layer Bottom_Text.
  11. Like before, select the Bottom_Text and Bottom_Half and, again, Text @> Attach To Path.
  12. Your text is probably backwards and upside down. Unless you want to keep it like that, it is easily fixed by selecting Text @> Reverse Direction. Your finished result should look something like Image III.

You can fill in the center with an image of your choice. Also, the two halves can be moved at will.

Filling Text in with an Image
Here is a very startling effect: we're going to fill in the text with an image. For this one, I selected a photograph taken by a friend, June Daniel, in New York State. Also, to make this effect stand out, you should use a thick font. I am going to use an Arial Black set to 90 pixels and bold.

  1. For this demonstration, I'm using a canvas set to 800 pixels wide by 275 pixels high. I imported my friend's JPEG image, taken with a digital camera, and stretched it to accommodate the canvas.
  2. Name this layer Base_Photograph.
  3. I select the Text tool and, as discussed, use Arial Black set to 90 pixels and bold. Type Fall In New York.
  4. Name this layer Fill_Text.
  5. Use the Pointer tool and position the text so that it is approximately centered on photograph. Precise placement is not critical. Image IV will show you the initial setup.

  6. Select the Base_Photograph layer and select Edit @> Cut.
  7. Click on the Fill_Text layer and select Edit @> Paste Inside. The results will be something similar to what you see in Image V.

The photograph is now inside the font as a fill. Of course you could change the background to anything you want to create some interesting effects.

Freeform Text
For a final demonstration, we're going to give each letter a life of its own.

  1. Start a new canvas and decide what size you want.
  2. Select a font and size it so that the words Fireworks MX fit on the canvas.
  3. As before, use the Pointer tool and select the entire text box.
  4. We are now going to break the text apart. Select Text @> Convert to Paths. This converts each letter to a vector path. Select Modify @> Ungroup. Each letter is now a layer of its own with its own life.
  5. In addition to moving each letter around, you can use the Pen tool to reshape the letters. Image VI is an example of what is possible.

As you can see, we created some great effects by using some simple, built-in tools. In addition, they were not very difficult to create. Try combining two or more of the above effects to do even more.

There is no question that plug-in filters add a lot of great functionality. In addition, most are very easy to use. However, before you go out and spend money, take a look at what you can do with existing tools. You might be pleasantly surprised.

Next month we're going to look at built-in, and third-party, filters for Fireworks MX.

More Stories By Charles E. Brown

Charles E. Brown is the former editor-in-chief of MX Developer's Journal. He is the author of Fireworks MX from Zero to Hero and Beginning Dreamweaver MX. He also contributed to The Macromedia Studio MX Bible. Charles is a senior trainer for FMC on the MX product family.

Comments (1) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

Most Recent Comments
Steve Martin 02/12/04 06:03:33 PM EST

Thanks for the article...very cool. Just one minor observation: how do we get the special effects from FireWorks back into Flash?

IoT & Smart Cities Stories
The deluge of IoT sensor data collected from connected devices and the powerful AI required to make that data actionable are giving rise to a hybrid ecosystem in which cloud, on-prem and edge processes become interweaved. Attendees will learn how emerging composable infrastructure solutions deliver the adaptive architecture needed to manage this new data reality. Machine learning algorithms can better anticipate data storms and automate resources to support surges, including fully scalable GPU-c...
Machine learning has taken residence at our cities' cores and now we can finally have "smart cities." Cities are a collection of buildings made to provide the structure and safety necessary for people to function, create and survive. Buildings are a pool of ever-changing performance data from large automated systems such as heating and cooling to the people that live and work within them. Through machine learning, buildings can optimize performance, reduce costs, and improve occupant comfort by ...
The explosion of new web/cloud/IoT-based applications and the data they generate are transforming our world right before our eyes. In this rush to adopt these new technologies, organizations are often ignoring fundamental questions concerning who owns the data and failing to ask for permission to conduct invasive surveillance of their customers. Organizations that are not transparent about how their systems gather data telemetry without offering shared data ownership risk product rejection, regu...
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
Predicting the future has never been more challenging - not because of the lack of data but because of the flood of ungoverned and risk laden information. Microsoft states that 2.5 exabytes of data are created every day. Expectations and reliance on data are being pushed to the limits, as demands around hybrid options continue to grow.
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities - ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups.
As IoT continues to increase momentum, so does the associated risk. Secure Device Lifecycle Management (DLM) is ranked as one of the most important technology areas of IoT. Driving this trend is the realization that secure support for IoT devices provides companies the ability to deliver high-quality, reliable, secure offerings faster, create new revenue streams, and reduce support costs, all while building a competitive advantage in their markets. In this session, we will use customer use cases...