What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

    How to Create Graphics: Apply Graphic Filters and Blends (Flash Professional Only)

Creating Graphics: Apply Graphic Filters and Blends (Flash Professional Only)

Review your task

Open the starter document

Apply filters and blends

Apply a filter

Apply filters and blends to the cue ball

Text: Add Text to a Document

Set up your workspace

Create an expanding-width text block

Create a fixed-width text block

Edit text and change font attributes

Select device fonts

Add an input text field

Copy a text field

Assign instance names to text fields

Create a dynamic text field

Specify format options

View ActionScript for the dynamic text field

Test the SWF file

Check spelling

Summary

 

Creating Graphics: Apply Graphic Filters and Blends (Flash Professional Only)

TOP

This tutorial guides you through the process of creating eye-catching graphic effects using some of the authoring features in Macromedia Flash Professional 8 (Filters are not available in Flash Basic). By using the graphic filters and blend modes available in Flash, you can transform ordinary graphic objects into much more visually compelling content.


A graphic filter is a method that processes the pixels of a graphic object to produce a specific effect. For example, you can apply a blur filter to an object to make its edges appear softer, or you can apply a drop shadow filter to an object to make it appear with a shadow behind it.


A blend mode is a method of making the colors of a graphic object interact with the colors of other graphic objects beneath it. For example, by using the Lighten blend mode, you can make the parts of an object appear lighter in color to varying degrees depending on the colors of the objects beneath it.


If you have not already done so, Macromedia recommends that before you take this tutorial you read Flash Basics in Getting Started with Flash.

 

Review your task

#TOP

In this tutorial, you will add some graphics to the Stage and apply filters to them to create a realistic-looking image of a pool table with a narrow depth of field. The balls in the foreground and background will appear out of focus, as if seen through a camera.


The completed FLA file

To see the completed FLA file (Filters&Blends_finished.fla), browse to one of the following locations:

  • In Windows: Hard Disk\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Filters and Blends

  • On the Macintosh: Hard Disk/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Filters and Blends

 

Open the starter document

TOP

Now that you have seen the document you will create, it is time to create your own version of the document. The first thing to do is open the starter document, which contains the graphic objects you will use with the filter and blend features of Flash.

  1. In Flash, select File > Open.

  2. Browse to one of the following locations:

    • In Windows: Hard Disk\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Filters and Blends

    • On the Macintosh: Hard Disk/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Filters and Blends

  3. Select the file named Filters&Blends_start.fla and click Open.

NOTE As you complete the tutorial, remember to save your work frequently.

 

Apply filters and blends

TOP

In the following sections, you will apply blends and filters to the 9ball and CueBall movie clips found in the Library panel.

Apply a blend to the 9ball movie clip

The first task you must perform in the starter file is to apply a blend effect to an instance of the 9ball outlines movie clip to make its colors combine with the colors of the 9ball movie clip.

This achieves a realistic shiny pool ball look.

  1. Open the Library panel (Window > Library).

  2. Drag the 9ball movie clip from the Library panel to the lower-right corner of the Stage.

    This creates an new instance of the 9ball movie clip on the Stage.

  3. Double-click the new 9ball instance to enter symbol-editing mode.

  4. Drag the 9ball outlines movie clip from the Library panel onto the Stage so that it perfectly covers the 9ball instance.

    You can use the Arrow keys to make fine adjustments to the placement of the 9ball outlines instance.

  5. With the 9ball outlines instance still selected, go to the Property inspector and select Multiply from the Blend menu.

  6. Double-click outside the Stage to exit symbol-editing mode.

    The 9ball instance should still be selected on the Stage.

  7. Open the Transform panel (Windows > Transform).

  8. In the Transform panel, click the Constrain check box.

  9. Double-click the Width text box and enter 140.

  10. This makes the 9ball instance appear larger than the 8ball instance on the Stage.

  11. Reposition the 9ball instance so it slightly overlaps the right edge of the 8ball instance on the Stage.

 

Apply a filter

TOP

The next step is to apply a blur filter to the 9ball movie clip to make it appear out of focus, as if it is in the foreground of the Stage.

  1. With the 9ball instance still selected, click the Filters tab in the Property inspector.

  2. In the Filters tab, click Add Filter and select Blur from the pop-up menu.

  3. Drag the BlurX slider until the BlurX and BlurY value is 19.

    The BlurX and BlurY values are constrained to each other by default. Click the lock icon if they are not.

  4. Click the Properties tab of the Property inspector.

  5. In the Property inspector, enter the following values in the W, H, X, and Y text boxes:

    W: 210

    H: 235

    X: 315

    Y: 155

  6. Click outside the Stage to deselect the 9ball instance.

 

Apply filters and blends to the cue ball

TOP

The last step is to use a color effect and a filter to make the cue ball appear to be in the background of the Stage.

  1. Drag the CueBall movie clip from the Library panel to the upper-left corner of the Stage.

  2. With the new CueBall instance still selected on the Stage, go to the Transform panel and enter 70 in the W (Width) and H (Height) text boxes.

    This makes the CueBall instance appear smaller than the 8ball instance.

  3. With the CueBall instance still selected on the Stage, go to the Property inspector and select Brightness from the Color menu.

    A Brightness Amount slider appears to the right of the Color menu.

  4. Drag the Brightness Amount slider until the value is -48%.

  5. Enter the following values in the W, H, X, and Y text boxes:

    W: 105

    H: 115

    X: 95

    Y: 105

  6. With the CueBall instance still selected on the Stage, click the Filters tab in the Property inspector.

  7. Click Add Filter and select Blur from the Filter pop-up menu.

  8. Drag the BlurX slider until the BlurX and BlurY values are each 13.

    These text boxes are constrained to match each other by default. Click the lock icon if they are not.

  9. Click outside the Stage to deselect the CueBall instance.

You have now applied the graphic effects to create a realistic look of depth.

 

Text: Add Text to a Document

TOP

Macromedia Flash Basic 8 and Macromedia Flash Professional 8 provide a variety of text features and options. This lesson introduces you to the three primary types of text you can add to a document. You can add static text for titles, labels, or other text content you want to appear in a document. You can also use input text options to allow viewers to interact with your Flash application--for example, to enter their name or other information in a form. The third type of text is dynamic text. You use dynamic text fields to display text that changes based on criteria you specify. For example, you might use a dynamic text field to add values stored in other text fields, such as the sum of two numbers. This tutorial shows you how to add text and text fields to a Flash document.


After taking this lesson, be sure to explore additional text options described in "Working with Text" in Using Flash.


 

Set up your workspace

TOP

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

  1. To open your start file, in Flash select File > Open and navigate to the file:

  2. In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Text\Add Text to a Document and double-click text_start.fla.

  3. On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Text/Add Text to a Document and double-click text_start.fla.

  4. NOTE The Add Text to a Document folder contains completed versions of the tutorial FLA files for your reference.

  5. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file and to preserve the file's link to dependent files.

  6. Select Window > Workspace Layout > Default to modify your workspace for taking lessons.

  7. In the Stage View pop-up menu, in the upper-right side of the Timeline, select Show Frame to view both the Stage and the workspace.

  8. In the Tools panel, click the Selection tool. Then in the Timeline, click the Static Text layer to select the layer you'll work in.

 

Create an expanding-width text block

TOP

You can define the size of a text block, or you can use a text block that expands to fit the text you write. You'll begin this lesson by simply adding text to a document.

  1. Click in a blank area in the workspace to make sure no Timeline frames or objects on the Stage are selected.

  2. In the Tools panel, select the Text tool.

  3. In the text Property inspector, set the following options:

    • In the Text Type pop-up menu, select Static text, if it isn't already selected.

    • For Font, select Arial.

    • For Font Size, enter 13.

    • Click the text color box and select the gray with a hexadecimal value of #666666.

    • Select Align Left, if it isn't already selected.

  4. In the Timeline, select the Static Text layer.

  5. With the Text tool still selected, click the Stage along the left edge of Text 1 guide, and type Trio ZX2004 Safety Features.

    By typing with the Text tool selected, you create a one-line text block that expands as you type. An expanding-width one-line static text block has a round handle in the upper-right corner.

  6. If necessary, align the text above the Text 1 guide by clicking the Selection tool in the Tools panel and dragging the text that you typed to the guide.

NOTE The Text 1 guide is on a guide layer, which doesn't appear in your SWF file.

 

Create a fixed-width text block 

TOP

In addition to creating a line of text that expands as you type, you can create a text block that has a fixed width. Text that you enter into a fixed-width text block wraps to the next line at the edge of the block.

You'll now create a static text block with fixed dimensions.

  1. Verify that the Static Text layer is still selected in the Timeline, and use the Selection tool to deselect any objects on the Stage or Timeline frames (click in the workspace, away from objects)

  2. In the Tools panel, select the Text tool.

  3. In the Property inspector, change the text size to 10 points.

  4. On the Stage, drag your pointer over the area of the Text 2 guide.

    An extendable one-line static text block has a round handle in the upper-right corner, and a fixed-width static text block has a square handle.

  5. Inside the text block that you created, type Want to learn more?



    NOTE You can drag the square handle for a text block to change its width. Additionally, you can double-click a square handle to convert it into a round expanding handle.

  6. If necessary, align the text by clicking the Selection tool in the Tools panel and dragging the text that you typed above the Text 2 guide.

 

Edit text and change font attributes

TOP

When you select text, the Property inspector displays standard type formatting features. You can use the Property inspector to change font and size properties for a selected text object.

  1. In the Tools panel, click the Selection tool. Double-click the text on the Stage that reads "Submit your contact information."

  2. Select the letter S then type Please s, so that the text now reads "Please submit your contact information."

  3. In the Tools panel, click the Selection tool. Use the Property inspector to select the bold style.

  4. Click the text Fill Color control and select a different text color, such as another shade of gray.

 

Select device fonts

TOP

When you use a font installed on your system in a Flash document, Flash embeds the font information in the Flash SWF file to ensure that the font is displayed properly. In addition to embedding fonts, you can use the device fonts option. This option finds the fonts on a viewer's computer that most closely resemble the specified device font. You can use device fonts only with static text.

You'll specify that the selected text uses device fonts.

  1. With the "Please submit your contact information" text still selected on the Stage, in the Font pop-up menu in the Property inspector, select _sans.

  2. In the Property inspector, select Use Device Fonts.

    You will not see a difference in the text if you have the Arial font installed on your computer.

 

Add an input text field

TOP

You can use an input text field to allow viewers an opportunity to interact with your Flash application. For example, input text fields offer an easy way to create forms.

In a later lesson (select Help > Flash Tutorials > ActionScript: Create a Form with Conditional Logic and Send Data), you'll learn how to use an input text field to send data from Flash to a server. Now, you'll add a text field where viewers will enter their first name.

  1. In the Timeline, select the Input Text layer.

  2. Use the Selection tool to click in the workspace, away from the objects on the Stage.

  3. In the Tools panel, select the Text tool.

  4. In the text Property inspector, set the following options:

    • Select Input Text in the Text Type pop-up menu

    • Select Arial in the Font pop-up menu.

    • For the font size, enter 8.

    • Click the text color box and select a shade of dark blue.

    • Select the Alias Text button.

      The Alias Text button renders text so that it appears more readable at small sizes. For input text, this option is supported if the end user has Macromedia Flash Player 7 or later.

    • Select Single Line in the Line Type pop-up menu, and verify that Show Border Around Text is selected.

      Single Line displays the text as one line. Show Border Around Text indicates the boundaries of the text field with a visible border.

  5. On the Stage, drag the pointer in the area to the right of the First Name text to create an input text field.

  6. If necessary, use the Selection tool to reposition the input text field.
     

Copy a text field

TOP

One way to quickly duplicate an object on the Stage is to press Alt while dragging the object. The original object remains in place, allowing you to drag the duplicate. You'll press Alt to create two copies of the input text field that you created.

  1. On the Stage, with the Selection tool selected, click the input text field that you created and press Alt. Drag a copy of the text field to the right of Last Name.

  2. Alt-click the input text field that you just dragged, and then drag the new copy of the field to eMail Address.

 

Assign instance names to text fields

TOP

An input text field on the Stage is an instance of the ActionScript TextField object, to which you can apply properties and methods. As a best practice, you should name text field instances

so that you or others working on the project can refer to the instance in ActionScript.

  1. Select the input text field that you placed next to First Name. In the Property inspector, enter firstName_txt in the Instance Name text box.

  2. Select the input text field that you placed next to Last Name. In the Property inspector, enter lastName_txt in the Instance Name text box.

  3. Select the input text field that you placed next to eMail Address. In the Property inspector, enter eMail_txt in the Instance Name text box.

To learn more about the TextField object, see "Working with Text" in Using ActionScript in Flash.

 

Create a dynamic text field

TOP

Dynamic text can display text from external sources at runtime. Next, you'll create a

dynamic text field that links to an external text file. The external text file you'll use is named safetyFeatures.txt. It is in the same folder as the lesson FLA file. The FLA file already containsActionScript that displays the text when you test or publish the document.

  1. In the Timeline, select the Dynamic Text layer. Use the Selection tool to click in the workspace, and to deselect any objects.

  2. Select the Text tool in the Tools panel.

  3. In the text Property inspector, set the following options:

    • Select Dynamic Text from the Text Type pop-up menu.

    • For Text Attributes, set Verdana as the text type, with a font size of 6.

    • For Line Type, select Multiline to ensure the text wraps correctly.

    • Click the text color box and select a dark shade of gray.

    • Select Align Left as a paragraph attribute, if it isn't already selected.

  4. On the Stage, drag to create a text field in the area between the two horizontal rules.

  5. In the Instance Name text box of the Property inspector, name the dynamic text field newFeatures_txt.

    The ActionScript in this document loads an external text file, which is in the same folder as your document. The ActionScript is set up to load the text into a field named newFeatures_txt.

     

Specify format options

TOP

The Format Options dialog box allows you to specify margin and indentation settings for the text.

  1. With the dynamic text field still selected on the Stage, click Format in the Property inspector.

  2. In the Left Margin text box, enter 5, and in the Right Margin text box, enter 5. Then click OK.

    The dynamic text now has 5-pixel left and right margins within the text field.

 

View ActionScript for the dynamic text field

TOP

You can view the ActionScript that loads text from the external text file into the dynamic text field. This script uses LoadVars actions to load the safetyfeatures.txt content in the newFeatures text field.

  1. In the Timeline, select Frame 1 of the Actions layer.

  2. Select Window > Actions, or press F9.

    The ActionScript appears as follows:

    // Load text as variable and assign it to the

    // dynamic text field

    var features_lv:LoadVars = new LoadVars();

    features_lv.onLoad = onText;

    features_lv.load("safetyfeatures.txt");

    function onText(success:Boolean) {

    if (success) {

    newFeatures_txt.text = features_lv.safetyfeatures;

    } else {

    newFeatures_txt.text = "unable to load text file.";

    }

    }

  3. Close the Actions panel.
     

Test the SWF file

TOP

Save and test the document to ensure that the dynamic text loads correctly.

  1. Select File > Save; then select Control > Test Movie.

    In the SWF file window, text from the external text file should appear in the dynamic text field that you created. (If the text does not appear as expected, check that you entered the instance name correctly: newFeatures_txt. Also check that you saved your copy of the practice file in the same folder as the original text_start file.)

  2. Type in the input text fields.

  3. When you finish testing the file, close the SWF file window.
     

Check spelling

TOP

Flash Basic 8 and Flash Professional 8 introduce new features that let you check spelling in most places where text occurs in your document, including text fields, layer names, and ActionScript strings. To check spelling, you first configure the Spelling Setup options, and then run the spell checker.

  1. Select Text > Spelling Setup.

  2. Verify that Check Text Fields Content is selected, and that you've selected the appropriate dictionary. Select any other options, as desired. Then click OK.

  3. Select Text > Check Spelling and respond to the dialog boxes that the spell checker presents. When you finish checking spelling, save your document.

NOTE To check spelling in text in external files, use the spell-check feature associated with the application that you used to create the external file.

 

Summary

TOP

Congratulations on learning the basic ways in which to add text to your document. In a few minutes, you learned how to accomplish the following tasks:

  • Create an expanding-width text block.

  • Create a fixed-width text block.

  • Edit text and change font attributes.

  • Select device fonts.

  • Add an input text field.

  • Copy a text field.

  • Assign instance names to text fields.

  • Create a dynamic text field.

  • View ActionScript that links the text field to an external text file.

  • Set up and check spelling.

 

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash