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 Use Layout Tools in Flash

Basic Tasks: Use Layout Tools

Set up your workspace

Use guides to align an object

Change the Stage size

Resize objects to match the Stage size

Specify snap alignment settings

Align an object using the alignment guides

Align objects using the Align panel

Snap objects to each other

Align objects using the Property inspector

Align objects using the grid and arrow keys

Summary

Basic Tasks: Use Layout Tools

TOP

Macromedia Flash Basic 8 and Macromedia Flash Professional 8 offer a variety of ways to place objects on the Stage. This tutorial teaches you how to use the layout tools in Flash to create a user interface.

 

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:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Use Layout Tools and double-click layout_tools_start.fla.

    • On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Use Layout Tools and double-click layout_tools_start.fla.

    NOTE The Use Layout Tools folder contains completed versions of the tutorial FLA files for your reference.

  2. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.

  3. Select Window > Workspace Layout > Default to set up your workspace for taking lessons.

  4. 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.

  5. Click in the workspace, away from objects on the Stage, so that no objects are selected.

 

Use guides to align an object

TOP

You can use rulers and guides to precisely position or align objects in your document. You'll add guides to help you center the block of text.

  1. Select View > Rulers.

    A horizontal and vertical ruler appear above and to the left of the Stage.

  2. Click anywhere in the horizontal ruler and drag down until you reach the 250-pixel horizontal position.

  3. Click anywhere in the vertical ruler and drag left until you reach the 375-pixel vertical position.

  4. Ensure that you have Snap to Guides turned on by selecting View > Snapping > Snap to Guides.

  5. In the Tools panel, click the Selection tool.

  6. On the Stage, click inside the upper-left corner of the blue text border and drag it to the intersection of the two guides.

    A small circle appears in the upper-left corner of the text border when you drag near the corner of the text border. The circle indicates that snapping is engaged.

  7. If you want to remove the guides, select View > Guides > Clear Guides.
     

 

Change the Stage size

TOP

The Stage size of your document is 750 x 500 pixels. You'll change the Stage size to 640 x 480, a common size that supports a wide variety of screen sizes and resolutions.

  1. Click in a blank area of the workspace to deselect the text block.

  2. In the Property inspector, you see properties for the entire document. Click Size.

  3. In the Document Properties dialog box, enter 640 for the width and 480 for the height, and click OK.

    The document size changes, but the objects on the Stage remain the same size.

     

Resize objects to match the Stage size

TOP

When you changed the Stage size, art on the Stage extended off the Stage and into the workspace. You can easily resize the art to match the Stage size again.

  1. On the Stage, click the gray mountains to select them. Shift-click the blue banner at the top of the Stage to add it to the selection.

  2. Open the Align panel (Window > Align).

    Tooltips appear in the Align panel showing the names of alignment options.

  3. In the Align panel, select To Stage; then, under Match Size, select Match Width. The size of the selected art changes to match the width of the Stage.

  4. Still in the Align panel, click Align Left Edge.

    The art aligns to the left edge of the Stage.

  5. In the Timeline, click the Bevel layer to select it.

  6. From the Library panel (Window > Library), drag the bevel graphic to any area toward the bottom of the Stage.

  7. In the Align panel, verify that To Stage is still selected, and click Match Width.

  8. Click Align Left Edge and Align Bottom Edge.

    The bevel aligns to the bottom edge of the Stage.

  9. Close the Library panel and the Align panel.

 

Specify snap alignment settings

TOP

FSnapping offers a way of precisely placing an object on the Stage by having the object affix itself to other objects and alignment tools. You'll specify snap align settings to show horizontal and vertical guides, which will assist you in placing art on the Stage.

  1. Select View > Snapping > Snap Align to set this option, if it is not already selected.

  2. Select View > Snapping > Edit Snap Align.

  3. In the Movie Border text box of the Snap Align dialog box, enter 30 px (pixels) to snap objects to a 30-pixel Stage border.

  4. Verify that 10 pixels appears in both the Horizontal and Vertical Snap Tolerance text boxes.

    Snap tolerance determines how close an object must be to another object or alignment tool before it snaps into place.

  5. Click OK.
     

Align an object using the alignment guides

TOP

Now that you've specified snap alignment settings, you'll use the snap alignment settings that you specified to assist you in placing an object on the Stage.

  1. In the Tools panel, click the Selection tool.

  2. In the Timeline, select the Auto layer.

  3. From the Library panel (Window > Library), drag the auto graphic and place it on the Stage, anywhere in the gray area next to the body text.

  4. Drag the auto instance again so that the snap alignment guides appear. Move the car close to the body text, and up and down as necessary until the center alignment guide appears.

     The guide indicates the auto is centered in relation to the body text.

  5. While keeping the car centered with the body text (you should continue to see the center alignment guide), drag the auto in a straight line, toward the left of the Stage, until the guide snaps at the 30-pixel border that you created previously.

    You've aligned the car with the text as well as to the snapping border.

Align objects using the Align panel

TOP

A Previously, you used the Align panel to match objects to the size of the Stage. Now you'll use the Align panel to center objects in relation to each other, and in relation to the Stage.

  1. With the Selection tool, click the text on the Stage that reads "Introducing the World's First Hybrid 4WD."

  2. Shift-click the second line of title text, "2004 Trio QZ," to add it to the selection.

  3. In the Align panel (Window > Align), deselect To Stage and select Align Horizontal Center.

  4. You've centered the two rows in relation to their horizontal axes. Next, you'll group the title text to center both lines in relation to the Stage.

  5. With both lines of text still selected, select Modify > Group.

  6. In the Align panel, select To Stage, and then select Align Horizontal Center again.

  7. With To Stage selected, the objects align in relation to the horizontal center of the Stage.

  8. Close the Align panel.

 

Snap objects to each other

TOP

You can snap objects on the Stage to other objects on the Stage, thereby setting the alignment of objects to each other. Using the Snap to Objects feature, you'll align a navigation bar with the top Stage banner.

  1. Select View > Snapping. In the submenu, select Snap to Objects if it's not already selected.

  2. In the Timeline, select the Nav layer.

  3. From the Library panel, drag the nav graphic to any area of the Stage below the blue banner, and then release the nav graphic.

  4. Click the upper-left corner of the nav graphic, and drag it so that a circular snap indicator appears.

  5. With the snap indicator visible, drag the upper-left corner of the nav bar and snap it into place against the lower-left corner of the blue banner.


     

Align objects using the Property inspector

TOP

The Property inspector lets you precisely align objects on the x and y Stage axes, from the registration point of the Stage object. The registration point is the point from which a symbol aligns or rotates. You'll use the Property inspector to align the logo.

  1. In the Timeline, select the Top layer.

  2. From the Library panel (Window > Library), drag the logo to an empty area of the Stage.

  3. In the Property inspector, with the logo still selected, enter 20 in the X text box and 8 in the Y text box. Press Enter (Windows) or Return (Macintosh).

    The logo moves to the new x and y Stage values.

NOTE You can view and change the registration point of an object in the Info panel (Window > Info). The black square in the grid represents the registration point. To change it, you click another square in the grid.
 

 

Align objects using the grid and arrow keys

TOP

You can use the grid to assist you in placing objects on the Stage.

  1. Select View > Grid > Show Grid.

    The grid does not appear when you test or publish your document.

    NOTE If you wanted to snap objects to the horizontal and vertical grid lines, you would also select Snap to Grid (View > Snapping > Snap to Grid). For this lesson, you won't snap objects to the grid.

  2. On the Stage, select the title text you previously grouped together.

  3. Use the Up Arrow key on your keyboard to nudge the text until the first line in the title text is on a horizontal grid line. Be sure to leave space between the title text and the navigation bar.

NOTE You can also use the Left Arrow, Down Arrow, and Right Arrow keys to nudge objects on the Stage in the direction of the arrow.

 

Summary

TOP

Congratulations on using layout tools to create a user interface. In a few minutes, you learned how to accomplish the following tasks:

  • View the workspace rulers

  • Use guides to align objects

  • Change the Stage size

  • Resize objects to match the Stage size

  • Align an object using the alignment guides

  • Snap objects to each other

  • Align objects using the Property inspector

  • Use the grid and arrow keys to align objects

  • For more information about design topics in Flash, take another lesson from the Basic Tasks series.

 

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