Tutorial: Introduction to Flash
Adobe Flash was created in 1996 as a way to display rich media on a webpage. In the mid-90s, most websites were a collection of static pages that displayed only text and images. When Flash was introduced, it opened a new world of animation and interactivity to the Web. People were able to create moving animations and clickable interactive graphics that went beyond the capabilities of standard HTML and CSS.
Flash was – and still is – owned by a single company, which is now Adobe. This means that Flash is proprietary software, and is not an open standard on the Web.
Journalists wishing to use Flash for adding interactivity to a website must weigh the pros and cons and decide the best tool to use for telling a story.
Here are some of the pros for using Flash on a website:
- Quickly create rich interactive graphics using a timeline-based software tool.
- Utilize a number of pre-built libraries and classes to build sophisticated projects that might otherwise take longer to build from scratch.
- A cross-browser compatible tool that works the same on Internet Explore, Firefox, Mozilla, Opera and Chrome.
- Good for construction of data-intense animated data visualizations that need to access an online database.
Here are some of the cons when using Flash:
- Does not work on a multitude of mobile smartphone devices.
- Many touch-screen devices (i.e. tablet computers) require different types of interaction that aren't often supported by most Flash projects. For example, the difference between a mouse roll-over, and a tap, touch or swipe.
- Does not conform to the open standards of the web as defined by the World Wide Web Consortium, thus it does not promote a standardized open Internet.
- Issues regarding accessibility of content for persons using special tools like screen readers.
- In some cases, intensive use of Flash graphics can drain the battery life on many laptops and mobile devices.
- Not as optimized for search engines (SEO). Flash is a closed multimedia construct on most webpages making it difficult for some search engines to properly index.
When deciding to build Flash project, we dissuade journalists from creating entire websites in Flash. Instead, think of Flash as a single embedable element on a webpage surrounded by text and navigation that is coded in HTML, like a video embeded on the YouTube page. Creating entire websites in Flash contradicts a lot of the standards of webpages, like a common navigation or the back button in the browser. While some of these can be mitigated, in most cases creating entire websites in Flash are often frowned upon by many web experts.
Drawing in Flash
Vector vs. Raster
Image via Flickr creative commons: http://www.flickr.com/photos/75905404@N00/4301009954/
It is important to understand the difference between vector graphics and raster (Bitmap) images. Vectors are color-shape-based line art, while bitmaps are photographic images made up of pixels.
Vectors are made up of lines called paths. These lines are connected by dots called anchor points. Vectors are not made up of pixels, and thus their size can be changed without losing any quality. Vectors don’t take up much memory, but they can be taxing on a computer’s processor the more complex they become. Vectors are designed to be simple shapes, graphics or animations.
Bitmaps are photographic images that are comprised of tiny squares called pixels. Bitmaps lose quality when they are resized, especially when their size is increased from their native size. Newer algorithms in the way Adobe resizes bitmaps have allowed quality loss to be minimal in many cases where the percentage change in size is a small. Bitmaps take up much more memory (and increase loading time on a webpage) however, they are not as taxing on processing.
There are dozens of tools in Flash that one can use for many various purposes in creating art. We will go over a few essential tools to start with.
The first are the two arrow tools; the Selection Tool (black arrow) and the Sub-selection Tool (white arrow). The Selection Tool is used for selecting and moving elements on the stage. It can also be used to bend and modify vector shapes. The Sub-selection Tool (white arrow) is only used for selecting drawing paths in shapes. The Selection Tool is generally used much more often and is the default tool for most tasks. The Sub-selection Tool is only used in specific cases when drawing or modifying vector shapes.
The Free Transform tool is used to change the size of an object on the stage. When using the Free Transform tool, you must first click on an object on the stage to select it, and then use the eight black handle points that appear around the box to change the shape of your object. When selecting objects with the Free Transform Tool, a small white circle will appear, usually in the center of the object. This is called the reference point, and can be moved with the mouse. This reference point will determine how the tool rotates and scales the object. It is also possible to skew an object by moving the cursor just outside the bound of the box.
The Lasso Tool is used for selecting object on the stage. It is done by drawing a circle around the objects you wish to be selected. It can also be used for selecting portions of a shape.
The Text Tool is used to create text boxes for entering text. The tool can be used by simply clicking the stage once to create a default text box (which can be resized later) or by clicking and drawing a text box to a desired shape. Static text boxes can only be drawn to a specified width and always start out as one line of text. This means you won’t be able to give your text box a height. As you type, you can press return to create additional lines of text. Dynamic text boxes can be given a height.
The Shape Tool is for drawing some basic preset shapes, like a rectangle, circle or polygon. Click and hold down on the tool item to select the shape type you want. There are settings in your property inspector for specifying characteristics of the rectangle and oval tools when you draw them. The primitive version of those shapes allow you to continuously edit those properties after you’ve drawn the shape (such as the rounded corners on the rectangle, and the shape of an oval). You will need to either break apart or convert the primitive shapes in order to further edit them.
The Color Picker Tools allow you to specify the colors of shapes either before you draw them, or you can change the color after you draw a shape if it's currently selected. The colors can be selected by clicking on the the colored boxes just below the icon of a pencil and the icon of a paint bucket. The pencil icon represents the color for the stroke, and the paint bucket represents the color for the fill. The stroke and fill are discussed in greater detail in a future section.
The Color Picker pallete has several options for choosing a color. Of notable interest are the options along the top of the window which allow you to turn off the color, or specify an Alpha (transparency) setting. If you have the six-digit color hexadecimal color code, you can type it in by clicking the code at the top of this box.
Parts of Basic Shapes in Flash
There are two parts to drawing basic shapes in the Flash. The stroke is the outline, and the fill is the color shape itself. It is important to realize that the stroke and fill are two independent parts of a shape, and can be drawn separately.
For people who have never use vector-based drawing software, shapes can seem oddly non-intuitive. It is important to understand all of the quirks to drawing in Flash, and why shapes respond to certain actions. With a little practice, shape manipulation can become like second nature.
The first thing to understand about shapes is how they respond to selection with the selection tool (black arrow tool). Draw a rectangle on the stage, and use the selection tool to click on the various portions of the shape.
When single clicking on a stroke, only one segment of the stroke will highlight (indicated by a stipple pattern). When double-clicking a stroke, any adjoining segments of the stroke will also be highlighted. This also true for any strokes on the same layer that are touching the shape. For example, if an oval was drawn touching the rectangle, double-clicking a stroke would select all adjoining pieces.
Fills operate a little differently in Flash. Single clicking a fill will select and highlight the entire fill area. However, double clicking a fill will select the fill as well as any adjoining strokes. Double-clicking the fill is an easy way to select an entire shape if you wish to move it around on the stage.
Two separate fill shapes will become one fill shape if they are moved on top of each other and are deselected. This is important to note when drawing, as it can often be counter-intuitive to what most people expect.
Shapes of different colors do not mix in the same fashion. Instead, they will absorb, or remove other shapes. The most recently selected shape is what takes precedence.
This characteristic of fill shapes (either connecting or absorbing other shapes) can be prevented if you wish by grouping objects into a number of different containers, such as a drawing object, a group or a symbol.
There are a number of ways to modify shapes in Flash. The most basic method is to use the Free Transform tool to select a shape and adjust its size, rotation or skew properties.
When selecting an object with the free transform tool, eight black boxes will appear around the shape. You can click on any of these boxes to modify the size and general shape of the object. Hold down the shift key on your keyboard to keep the ratio, and perspective, the same while resizing. This will prevent objects like images from becoming distorted as you resize them. You can also flip an object by grabbing one side and moving it past the opposte side of the shape (however, this is only noticeable with objects like images.)
Shapes can be skewed by moving the mouse cursor just outside the object between the center box and a corner box. Click and drag to skew the shape.
Shapes and objects can also be rotated by moving the cursor just outside the corner of the object. The cursor will turn into a small circular symbol, and you can drag to rotate the object.
The white dot in the center of the object is called the reference point. It can be moved by clicking on it and dragging it anywhere on or even outside the shape. The reference point will affect the pivot point the object uses when rotating, as well as the reference when resizing.
Bending Shapes with the Selection Tool
You can also modify shapes using only the Selection Tool (black arrow tool). This is useful for reshaping fills, or bending a stroke. Modifying shapes can be a little tricky. It takes practice to really get it down.
Move the selection arrow close to an un-selected shape. As the cursor approaches (but is not over) the shape, a small curvy line will appear just below the arrow. This will allow you to click and drag out the side of the shape.
This allows you to reshape the edges of the object into curves. It is also possible to push an edge into the shape.
You can also modify the corners of a shape in much the same fashion. When you move the selection arrow cursor just outside a corner of the shape, you will see a small corner symbol appear next to the arrow. This signifies that you can click and drag the corner point to a new location.
Modifying Shapes with the Sub-Selection Tool and Pen Tool
You can modify shapes with fine-grain precision using the sub-selection or pen tools. These tools allow you to change the paths that make up the shape at a fundamental level. All shapes in Flash are made up of lines and points in a connect-the-dots fashion. Some of the dots, called anchor points, are designed to be curved (known as bezier curves) and will have handles. Others are corner points and have straight lines connecting them. Lastly, some points are both, they have a curved line on one side, and a straight line on the other.
Using the sub-selection tool (the white arrow) click on the edge of a shape to see its paths. You can click on the small green anchor points and reposition them. If an anchor point is a bezier curve, some handles will appear when you select it. You can click the handles and drag them to modify the curve of the shape.
To add anchor points, delete anchor points or change an anchor point from curve to corner, you will have to use the pen tool options.
The Pen Tools are the animators most used tools. The first two tools, the Pen Tool and Freeform Pen Tool, are used by illustrators and animators to create shapes from scratch. Usage of these tools goes beyond the scope of this tutorial. The last three tools, Add Anchor Point, Delete Anchor Point and Convert Point are used to modify existing shapes.
Flash has numerous ways to group objects on the stage. Grouping objects can serve a number of benefits, depending on the type of grouping you use. This page will cover some of the basic ways you can group objects, and end with the most important group type: symbols.
Drawing Object Mode
When drawing basic shapes using the ovals or rectangle shape tools, you have an option to draw them in drawing object mode. Drawing objects are containers that allow shapes to work independently from each other.
With a shape tool selected, click the icon near the bottom of your tool palette that looks like a circle inside a rectangle shape. When you draw shapes with this option turned on, every shape will automatically be placed in a separate grouping box. This will allow you to place shapes over other shapes without the effects of having them affect each other.
A rectangular box will appear around any object you draw. This is the container that holds the object. If you wish to edit your shape, you must double-click the container with the selection arrow to go inside the drawing object container. A bread-crumb style navigation will show you that you are inside a drawing object container.
To go back to your stage, click on Scene 1 in the navigation bar.
Grouping Objects on the Stage
Another option to put objects into containers is using the Grouping option. Grouping allows you to place multiple objects on the stage into a generic container. Virtually any type of object can be grouped, including images, shapes or symbols.
To group objects, use your selection tool to highlight all parts of the object you want grouped. Use the shift key to select multiple objects, or click and drag a selection box around the objects you want to select. Next, select Group from the Modify menu at the top of the screen and this will group all currently selected objects.
With multiple objects grouped, you can treat the grouped container as one object. It can be rotated, resized or adjusted as if it were a single object. To ungroup object, simply use the ungroup option also found in the modify menu.
Grouping objects seems simple at first, but can quickly get complicated when you have groups inside of groups. Flash has a mechanism called break apart which will reduce an object to a simpler form. In the case of grouping, it will gradually ungroup the objects until they return to shapes.
Some care should be taken with breaking apart groups. The break apart option will convert objects like text and images into shapes. In the case of text, breaking apart will first separate all of the letters of a text box into their own text box. Doing another break apart will convert the letters into shape fills.
About this Tutorial
This tutorial was written by Jeremy Rue as a part of the Flash MINI course taught at the UC Berkeley Graduate School of Journalism.
This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.