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

Related Topics: Adobe Flex

Adobe Flex: Article

Sparkling Text Effects

Freehand's extrude tool in action

Sometimes you just need to have a little sparkle on your pages. If we're talking about Web pages, then those sparkles better shine and twinkle! You can use FreeHand MX to create the right amount of "bling" in a few simple steps.

When you want a smooth, slick extrusion, FreeHand's Extrude tool will certainly do the trick. The problem is, however, that you end up with more or less flat coloring on the extruded sides. The 3D effect is correct, but it lacks realism. In this article we'll deal with that situation and kick up the action by creating an animation for the Web. Along the way, we'll use a few tools that are largely ignored - well, by me anyway. The article deals with a text object, but the final artwork could be just about any type of logo or flat graphic. If you'd like to see this in action, go to www.brainstormer.org/bling.html.

This extrusion will have a rounded outline, leaving the text inset such as you might see on an electric sign above a store. That allows us to stretch the limits of the Extrude tool just a bit.

To begin with, set the text in a strong font with a lot of surface area. It would be safe to use any font that's got "Black" or "Extra Bold" in the name. Anything less will have a much-reduced impact, but still be effective. Use a little extra positive kerning between letters to keep the extrusion's bevels from intersecting each other. Create a golden color in the Mixer panel, add it to the Swatches panel, and apply that color to the text. Convert the text to paths (Text > Convert to Paths). I constantly convert text to paths for one reason or another, and to save time scrolling through menus, I've added its icon to my main toolbar. To make it even more convenient, I created a custom keyboard shortcut that I can press with only one hand, freeing my other hand for my coffee cup.

In preparation for the extrusion, we need a bevel shape for the inset outline. Using the Pen tool, create a shape similar to the one in Figure 1. The distance between the bottom and top lines will be the thickness added around the actual letterforms. The distance from the starting point (1) to the left edge of the curve (2) will be the depth of the inset. The length of the bevel (3) isn't quite as important, but experimentation will give you various degrees of success for any given project.

Wherever you place the first point in the profile will be the location of the object that is going to be extruded. In this example, if you were to start drawing at the right end (3) and work back to the inset point (1), your extrusion would be very complicated, but you would not see anything other than a straight, flat extrusion from the letterform's face. The curved part would end up being hidden at the back end of the extrusion. If you see something like that, it's a simple matter to change the direction of the path (Modify > Alter Path > Reverse Direction). You need to apply this action often if you've started with a regular shape such as an ellipse or rectangle and have cut pieces away from the shape.

Keep in mind that the profile you draw will be expanded or compressed to the length (or depth) of your extrusion. If you want a tight representation of the profile, then your extrusion must not be deeper or shallower that the profile you've drawn. The line weight (stroke width) is not important, nor is the color of the stroke. All you're doing is creating a profile. When it's done, copy it to the Clipboard.

Select the Extrude tool from the Tools panel, and click it in the middle of the text. You'll see the vanishing point, a rectangular block in perspective, and three icons in the middle of the text. For now, you can ignore them - the extrusion itself is done, and now you can modify its position in space.

Keep the Extrude tool active and double-click the extruded text to bring up a circle that may or may not encompass the entire text. If you click and drag the cursor inside the circle, you will move the text around its center of gravity - along all three axes at once. If you want to rotate the text further, you can click and drag the cursor outside the circle and rotate the text around a single axis. Try several positions until you see something you like. Remember to Save often.

The extrusion is rarely the depth you want. To change it, click outside the rotation circle to deselect it, and click the extrusion again. Then click and drag the small circle at the opposite end of the dotted line ending with an "X." The "X" marks the face of the object, the "O" denotes the far end of the extrusion, and the four diamonds indicate the vanishing point of the object's extrusion before you rotated and shifted it. Until you commit the extrusion to a simple graphic (by choosing "Release Extrude" from the Modify menu), all these factors are editable.

Now look in the Object panel, specifically the three un-named buttons on the left side of the panel. The top one is for Extrude, and shows the various positions of elements in the extrusion you've made and manipulated. You can enter numbers here or change values to further fine tune your extrusion and its position in space. The middle button is Surface, and controls lighting and rendering options. The default surface settings will work fine for now, but change the lights as you wish. Finally, at the bottom, is Profile, where we can place the line drawing we made earlier. Just choose Bevel from the drop-down menu at the top of the panel (your choices are None, Bevel, or Static. Bevel will change the shape of the extrusion as it heads back to the vanishing point; Static acts as a spine for the extrusion - we definitely don't want that here! Click the Paste-In button and you'll see the path in the preview window, then the extrusion will adapt to its new bevel.

Sometimes, such as in this example, you get some surprise elements. What you see here are parts of the bevel that somehow get placed in front (or on top of) the front face. It doesn't happen with every letter, or with every adjustment in the extrusion's attitude. Sometimes moving the extrusion just a degree or two in any given direction will make these artifacts go away. Sometimes, nothing you do will negate them and you have to resort to a trick or two (we'll get into them a little later). Progress so far should lead you to something similar to Figure 2.

Release Extrusion
An extrusion is a group of many, many triangles arranged into facets that build the 3D object. If you select Remove Extrusion from the Modify menu, the extrusion will go away, and you'll have the original object on the page - where you usually go to start over. However, if you select Release Extrusion, the opportunity to further manipulate the position, lighting, profile and so on are released, and the object becomes that mass of triangles mentioned above. As well, the original object will be deformed or converted to the 3D perspective shape, and the entire extrusion will be grouped. This allows you to choose the Subselect tool and delete each triangle artifact that you don't want. More important, you can select the front face of the extrusion and manipulate it.

Combine Faces
I don't want to have simple flat shading on the extrusion, so some extra work is required. We'll use the Lasso tool to select triangles on a single face at a time. Double-click its icon in the Tools panel and check the Contact Sensitive option (Figure 3) so you don't have to encompass entire objects. Then begin dragging within a given face. In Figure 4, the bottom of the "N" is being selected. Use the Pointer tool with the Shift key held down to deselect extra triangles. When you have an entire face selected, go to Modify > Combine > Union. Apply a gradient filter such as seen in Figure 5, and delete the extraneous points in the path. Do the entire side or vertical plane in this manner. Then do the top (or bottom if your extrusion is seen from below) faces, but after using Union on each face, move to the next one, and when you have them all done, select them and choose Modify > Join so you can apply a gradient fill across the entire plane. The finished product should be similar to Figure 6.

Adjust the Front Letterforms
Making the inset bevel fit the profile is a little more demanding than what you've done so far, but it doesn't take long to get the hang of it. Start by Shift-selecting the letter forms - if you accidentally snag a triangle, just click it again to deselect it. When all the letters are selected, Clone them. I usually clone an object like this in case I have to start from scratch later on - the original objects are still there, and I can delete them later.

The clones will move to the top of the stacking order, and you'll see right away that they cover up the near edges of the bevel. Change the color of the letters to what you want in the final result. Then work each near edge, one at a time. It's pretty easy to select all the points on the vertical face and shift them to comply with the bevel, but remember, this is in perspective; you must readjust every point to make it fit. Inner points such as found in the "N" and "W" have an additional element to deal with in that you must add a new point or two to create the depth adjustment around the bevels. It's easy enough to add a point, move it to the edge of the bevel, and drag out a control handle to create the correct fit and effect. If your letters have curves in them, your work is a bit more complicated.

I try to get as much realism in a drawing as possible, and edge and corner treatments are very important. To create an edge highlight, draw a small circle and ungroup it. Drag the right side point of the circle far to the right (about ten to fifteen times the radius of the circle), and tuck in both control handles by clicking the Handles buttons in the object panel. This will give you a dart as shown in Figure 7. Choose Modify > Brush > Create Brush, and Copy the dart (instead of Convert). Name the brush White Dart, Edge Highlight, or something else memorable, because you won't be able to see it in the brushes menu. Use the Line tool to draw lines along leading edges of the letterforms, and apply the brush so the fat end of the dart is near the viewer, and it tapers toward the vanishing point. These highlights will add quite a bit of "bling" to the object.

At this point, the menial tasks are done, and it's time to work on the animation. But please don't even think about using an extrusion in an animation! The hundreds or thousands of triangles in the extrusion take many seconds to draw, and the resulting animation becomes extremely, excruciatingly boring to watch.

FreeHand offers you the choice of using pages and/or layers in your animated movie, but I like to keep everything simple by creating an animation created of pages, or layers on a single page. Call me obsessive-compulsive (I am...) but it's more effective for me to work by simplifying, thereby creating fewer opportunities for errors. So at this point do a Save As and change the name of the file to add something about "animation."

In the new file, select the letterforms - the ones that you changed color and shape to fit the bevels. Choose View > Hide Selection. Then use the Pointer tool to drag a selection box around the entire graphic. Go to Modify > Convert to Image. This is the main object of the new document, because this action will create an RGB TIFF bitmap of the extrusion, and that will negate any chance of you editing the vectors that created it. Hiding the letterforms protects them from the conversion. A dialog box appears (Figure 8) that allows you to choose the resolution of the graphic, and the degree of anti-alias. I want to use this graphic at my working size, so I'll stick with 72-ppi (pixels per inch).

It is extremely important to note that if you wish to have a colored background for the objects, you must create a background first and select it at the same time as the graphic when you Convert to Image. Make it the final size you want it to have, and for good measure, use RGB colors for the color make-up. If you've used CMYK colors to build the artwork so far, they will be converted to RGB as soon as Convert to Image is done. There will be a noticeable color shift! See Figure 9 to see the difference between the vector graphic on the left, and its conversion to an RGB TIFF on the right. There's nothing wrong with FreeHand or your computer - a color shift will almost always occur when you convert color models, and some colors are more evident than others.

Select the original white dart shape, double-click the Mirror tool and set it as shown in Figure 10. When you click the cursor at the center of the circle end, you'll get the star shape in the figure.

Clone the four objects and rotate the clone 45°, then switch to the Scale tool and click in the intersection of the arms; drag the cursor down or to the left to shorten the arm length. Finally, use the pointer tool to drag a selection box around all eight darts (Figure 11) and choose Modify > Union to create a single star object. Delete its stroke, and give it a fill of white.

Now, create a small circle with a fill of white and no stroke. Double-click the Graphic Hose icon and Copy/Paste the circle and star into two new hoses. If you haven't done this before, just copy the star to the Clipboard, open the Graphic Hose (see Figure 12), and select New from the drop-down menu. The Name dialog box will appear, name your object, and click save. Then click the Paste In button. Since the star is white, you won't see anything, but it's there. Do the same procedure with the white dot, and name it Specular Highlight. You won't be using the Graphic Hose items right now, but you're prepared for their application during the upcoming animation sequences.

Move the bitmap to the Background layer, either by selecting the bitmap and clicking on the Background layer in the Layers panel, or dragging the layer that contains the bitmap beneath the printing/non-printing line in the Layers panel. This will insure that the bitmap will appear in every frame of the movie.

Create the Spotlight Glow
Choose View > Show All to bring back the letters. They should all be selected, so, go to Modify > Join to create a compound path to work with. Create a linear gradient fill with darker and lighter tones in it to give the illusion of depth - and give the image a little punch at the same time.

Use the Rectangle tool to draw a tall, skinny rectangle just to the left of the letters that's as tall as the graphic. Use the Eyedropper tool to drag a selection of the color in the gradient fill onto the Tints panel. Give the rectangle a fill of somewhere between 40 and 80 percent tint of the color. Apply a stroke of none. Clone the rectangle and shift it to the right side of the graphic. Blend the two shapes, and adjust the number of steps so the edges of each rectangle barely touch each other - there should only be 8 - 10 steps in the blend.

The letters should be on the Foreground layer, and the extrusion should be on the Background layer. Create four or five new layers by going to the Options drop-down button at the top right corner of the Layers panel and choosing New (repeatedly). Create a clone of the letters and move them to that top layer and rename the layer "Animation."

With the letters still selected, choose Xtras > Animation > Release to layers. In the dialog box, choose Sequence, and be sure that the other options are deselected. This will place your blended shapes on as many new layers as you have steps in the blend.

The Boring Stuff
Now, go to the Layers panel Option drop-down menu and choose the All Off option. Click in the empty spot to the left of the Animation layer. This should make the letters and the first blend object appear. Select the letters and Clone them and move the clone to Animation-1 layer (the next layer up in the panel list). If the blend object overlaps the letters, select it and cut it, then select the letters and choose Edit > Paste Inside (Paste Contents). Hide this layer and make the next higher layer visible. Repeat the process (clone the letters and move them to the next higher layer; cut the blend shape; paste it inside the letters; hide the layer; show the next higher layer, cuss me...) until all the blend steps are used up.

At this point, I like to preview the movie, so be sure to Save, then go to Window > Movie > Test (all layers must be visible in order to appear in the movie). It should look as if the blend swipes across the letters as if it were a spotlight from below. The problem is, it happens so quickly! To rectify the situation, with all the layers except the Foreground layer hidden, select the letters on the Foreground layer and clone them. Drag a selection box around them and Blend them. I wouldn't go overboard with the number of steps in this blend, probably a dozen will be adequate. Use the Animate Xtra to create new non-animated layers. Create new layers either below the Animation layers, or above, or both. Each layer is a frame, and the default frame rate is 12-fps, so the amount of wait between spotlight flashes is up to you. When you have placed a number of layers, test the movie again.

When the movie runs long enough, and you have suitable delays between flashes, turn all layers off, and turn the Animate and Background layers back on. Then use the Graphic hose to apply sparkles and twinkles in appropriate areas of the moving spotlight (see Figure 13). If you want, you can place trailing twinkles behind the spotlight. Take one layer at a time, and be fairly consistent with the specular highlight placement so it doesn't look like there's a short-circuit inside the extrusion. Test the movie and make any adjustments that are necessary.

When you have everything working correctly, go to File > Export, and choose SWF from the drop-down file-type menu. The exported file can be placed in any Web page, just as you would a Flash file - because that's what it is. FreeHand isn't just for print - it does quite a decent job creating movies as well - give it a try! You can see the results of this exercise at www.brainstormer.org/bling.html.

More Stories By Ron Rockwell

Illustrator, designer, author, and Team Macromedia member Ron Rockwell lives and works with his wife, Yvonne, in the Pocono Mountains of Pennsylvania. Ron is MXDJ's FreeHand editor and the author of FreeHand 10 f/x & Design, and he co-authored Studio MX Bible and the Digital Photography Bible. Ron has just introduced a "Casual FreeHand" course available at www.brainstormer.org.
He has Web sites at www.nidus-corp.com and www.brainstormer.org.

Comments (0)

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.

IoT & Smart Cities Stories
Moroccanoil®, the global leader in oil-infused beauty, is thrilled to announce the NEW Moroccanoil Color Depositing Masks, a collection of dual-benefit hair masks that deposit pure pigments while providing the treatment benefits of a deep conditioning mask. The collection consists of seven curated shades for commitment-free, beautifully-colored hair that looks and feels healthy.
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
We all love the many benefits of natural plant oils, used as a deap treatment before shampooing, at home or at the beach, but is there an all-in-one solution for everyday intensive nutrition and modern styling?I am passionate about the benefits of natural extracts with tried-and-tested results, which I have used to develop my own brand (lemon for its acid ph, wheat germ for its fortifying action…). I wanted a product which combined caring and styling effects, and which could be used after shampo...
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.