Digital Media Homepage

Subject: DMA - Digital media- 2014

College of Arts, Victoria University

Teacher Name: Lisa Cianci - email: lisa.cianci@vu.edu.au
Course Coordinator & Education Manager: Alan Morgans - email: alan.morgans@vu.edu.au


Class Website - http://multimedia.tafe.vu.edu.au/lisa/2014/DMA

 

Class 07 - Finish Projects and Intro to Flash

Tasks & Projects

 

Animated GIFS

You can also complete any animated GIF work that needs finishing and upload an example to your blog. One issue that was revealed last week in class was that you must display your animated GIF in Wordpress at its original size to see the animation. If you change the size or scale it will only display frame 1 of the GIF. The best method is to save your GIF at the right size to begin with - I wouldn't go much bigger than 600 x 800 pixels, and even smaller is better for a blog post.

 

Create: things to do this week

Introduction to Animation in Adobe Flash

The Flash Interface

The Adobe Flash interface has changed quite a bit over the past few years – especially with the update to CS4 – new tools and options have been introduced and the default layout has changed. As a group on screen we will look through the basic tools you will need to know, and see what they can do. Before the end of the class I'll come around and see what you have made with the tools you have just been shown.

When you open up Flash it may look a little daunting at first, but here's a quick run-down of the basics.

1. Start up

When you first open up Flash you will see the welcome screen which allows you to easily start a new Flash file or open an already existing file. Under 'Create New' you have many different options for what type of file you would like to create. For this class we will always be creating an ActionScript 3 Flash file.



After you have either selected to create a new Flash file or opened an existing file you will now arrive at the main interface ( for the purpose of this tutorial let's start a new Flash file ).

 

2. The Main Interface

The main interface is split up into 3 main areas, the stage, the timeline and panel area.

  • The stage is where we will create our actual flash content, think of it like a play – this is where we will perform. This is where we will create our artwork.

  • The timeline allows us to organise out content into frames and layers. By using layers we can place content in front of behind one another – similar to layers in photoshop. With frames we can organise our content to appear or execute over certain periods of time.

  • The panel area can contain a few different panels. The most common to appear there are the properties panel and the library panel.

  • The property panel contains information about the object you have currently selected, and has properties you can modify to edit that selected object. If you don't have anything selected the properties panel will instead tell you information about your current flash file. This includes:
    • the document class;
    • the frames per second;
    • the size of your flash file; and
    • the stage background color

  • The library panel contains all of the assets that you have in your flash file – this can be movieclips, images, sound, videos etc. You can organise your assets by name, type or even date modified by clicking on the grey title bar.

 


3. The Menu bar

At the top of the screen we find the menu bar.



Listing everything that can be located via the menu bar here would be impossible, so we'll gradually cover parts of it over the rest of the semester. For now, the main things you need to know are how to 'save', 'open' and start a 'new' document which are found via the 'File' menu.


 

4. The Tool bar

To the right of your screen should be a toolbar. If it isn't there, go to the 'Window' drop down on the menu bar and select 'Toolbars' then select 'Edit Bar'.


This toolbar contains all the tools you're going to need to start authoring Flash content.
Hovering over each tool will reveal its name and the shortcut keys that can be used to select it.

Tools


The top two tools are the Selection and Sub-selection tools, which are used to select or move images around.


The next three are the Free Transform, 3D Rotation tool and Lasso tools. The Free Transform tool is used to change the proportions of your content. The 3D Rotation tool is for rotating Movieclips on the x,y, and z axis. The Lasso tool is used to select awkward sections of your images. Note that the grey triangle underneath the tools reveals more options depending on which tool is selected.


Underneath we have the Pen and Text tools. The text tool is pretty self explanatory, it allows you to add text to your work. The Pen is used for drawing lines that can then be manipulated by the selection tools. These lines can be either straight, or have a curve. If you hold down the Pen tool button, it will reveal some more tools for adding and subtracting anchor points. Anchor points are just areas that you can manipulate with the Sub-selection tool to change the curve of the line.


Next are the Line and Shape tools. These are obviously used for drawing lines and shapes. The default shape is a rectangle, but if you hold down the button it will reveal a greater selection.


Next we have the Pencil and Brush tools. These two tools are fairly similar in that they both allow you to draw freehand. The Pencil draws lines that can be easily manipulated by the Selection or Sub-selection tools using strokes, whereas the Brush draws using fills of colour.


Next we have the Deco tool and the Bone tool - both tools are based on physics concepts. The Bone is based on inverse kinematics which allows you to create quite complex animation by linking objects or shapes. The deco tool allows you to make some pretty cool designs


The following tools are the Ink Bottle and Paint Bucket. The Ink Bottle (found by holding down on the paint bucket icon) is used to change the thickness or colour of a line, and the Paint Bucket fills an empty shape with colour, or changes the colour of an already filled shape.


The next two are the Eyedropper and Eraser tools. The Eyedropper is used to select a colour or line style, which can then be applied by the Ink Bottle or Paint Bucket. The Eraser is used to clear sections of your artwork.


Then we have the Hand and Zoom tools. The Hand tool is used to drag your workspace around without having to use the scrollbars to the right and bottom of the screen. This is also particularly handy when you're zoomed in on an object, which is what the Zoom tool allows you to do. The default setting is to zoom in, but you can hold 'Alt' whilst clicking to zoom out again.


And finally, the bottom two squares can be used to change the colour of your pencil / pen lines, or the colour you wish to fill your shapes with.

 

Note: when you use most Flash tools, the area below the Tool bar and the Property inspector change to present the settings associated with that tool. For example, if you choose the Text tool, the Property inspector displays text properties, making it easy to select the text attributes you want. Or if you choose the Selection tool, at the bottom of the toolbar you'll see a magnet-shaped tool which can be used to Snap to Objects. You can use snapping to automatically align elements with each other and with the drawing grid or guides.

When you use a drawing or painting tool to create an object, the tool applies the current stroke and fill attributes to the object. To change the stroke and fill attributes of existing objects, you can use the Paint Bucket and Ink Ink Bottle tools in the toolbox or the Property inspector.

You can reshape lines and shape outlines in a variety of ways after you create them. Fills and strokes are treated as separate objects. You can select fills and strokes separately to move or modify them.

About overlapping shapes in Flash
When you use the Pencil, Line, Shape, or Brush tool to draw across another line or painted shape, the overlapping lines are divided into segments at the intersection points. You can use the Selection tool to select, move, and reshape each segment individually.

Note: Overlapping lines that you create with the Pen tool do not divide into individual segments at intersection points, but remain connected.  To avoid inadvertently altering shapes and lines by overlapping them, you can group the shapes or use locked layers to separate them.

 

Drawing with the Pencil tool
To draw lines and shapes, you use the Pencil tool, in much the same way that you would use a real pencil to draw. To apply smoothing or straightening to the lines and shapes as you draw, you can select a drawing mode for the Pencil tool.

Drawing straight lines, ovals, and rectangles
You can use the Line and Shape tools to easily create these basic geometric shapes. The Shape tool creates stroked and filled shapes.

Using the Pen tool
To draw precise paths as straight lines or smooth, flowing curves, you can use the Pen tool. You can create straight or curved line segments and adjust the angle and length of straight segments and the slope of curved segments.
When you draw with the Pen tool, you click to create points on straight line segments, and click and drag to create points on curved line segments. You can adjust straight and curved line segments by adjusting points on the line. You can convert curves to straight lines and the reverse. You can also display points on lines that you create with other Flash drawing tools, such as the Pencil, Brush, Line, or Shape tools, to adjust those lines.

Setting Pen tool preferences
You can specify preferences for the appearance of the Pen tool pointer, for previewing line segments as you draw, or for the appearance of selected anchor points. Selected line segments and anchor points are displayed using the outline colour of the layer on which the lines and points appear.


To set Pen tool preferences:

1    Choose Edit > Preferences and click the Drawing tab.

2    Under Pen Tool, set the following options:

  • Select Show Pen Preview to preview line segments as you draw. Flash displays a preview of the line segment as you move the pointer around the Stage, before you click to create the end point of the segment. If this option is not selected, Flash does not display a line segment until you create the end point of the segment.

  • Select Show Solid Points to specify that unselected anchor points appear as solid points and selected anchor points appear as hollow points (this option is selected by default). Deselect this option to display unselected anchor points as hollow points and selected anchor points as solid points.

  • Select Show Precise Cursors to specify that the Pen tool pointer appear as a cross-hair pointer, rather than the default Pen tool icon, for more precise placement of lines. Deselect the option to display the default Pen tool icon with the Pen tool.

    Note: Press the Caps Lock key while working to toggle between the cross-hair pointer and the default Pen tool icon.

3    Click OK.

 

Painting with the Brush tool
The Brush tool draws brush-like strokes, as if you were painting. It lets you create special effects, including calligraphic effects. You can choose a brush size and shape using the Brush tool modifiers. On most pressure-sensitive tablets, you can vary the width of the brush stroke by varying pressure on the stylus.

Brush size for new strokes remains constant even when you change the magnification level for the Stage, so the same brush size appears larger when the Stage magnification is lower.

For example, suppose you set the Stage magnification to 100% and paint with the Brush tool using the smallest brush size. Then, you change the magnification to 50% and paint again using the smallest brush size. The new stroke that you paint appears 50% thicker than the earlier stroke. (Changing the magnification of the Stage does not change the size of existing brush strokes.)
You can use an imported bitmap as a fill when painting with the Brush tool.

 

Reshaping lines and shape outlines
You can reshape lines and shape outlines created with the Pencil, Brush, Line, Oval, or Rectangle tools by dragging with the Arrow tool, or by optimising their curves.

You can also use the Sub-selection tool to display points on lines and shape outlines and modify the lines and outlines by adjusting the points.

 

Straightening and smoothing lines
You can reshape lines and shape outlines by straightening or smoothing them.

Note: You can adjust the degree of automatic smoothing and straightening by choosing preferences for drawing settings.

Straightening makes small straightening adjustments to lines and curves you have already drawn. It has no effect on already straight segments.

You can also use the straightening technique to make Flash recognize shapes. If you draw any oval, rectangular, or triangular shapes with the Object Drawing option turned off, you can use the Straightening option to make the shapes geometrically perfect.

 

Erasing
Erasing with the Eraser tool removes strokes and fills. You can quickly erase everything on the Stage, erase individual stroke segments or filled areas, or erase by dragging.

You can customize the Eraser tool to erase only strokes, only filled areas, or only a single filled area. The Eraser tool can be either round or square, and it can have one of five sizes. The Eraser tool has the Faucet option that allows you to erase whole fills - it's the opposite of the Bucket tool.

 

Snapping

To automatically align elements with one another, you can use snapping. Flash lets you align objects by snapping to other objects or by snapping to individual pixels.

Note: You can also snap to the grid or to guides.

Pixel snapping
You can turn on pixel snapping using the Snapping options in the View menu. If Snap to Pixels is on, a pixel grid appears when the view magnification is set to 400% or higher. The pixel grid represents the individual pixels that will appear in your movie. When you create or move an object, it is constrained to the pixel grid.

 

5. Symbols, Instances, and Library Assets

A Symbol is a graphic, button, or movie clip that you create once in Flash and can reuse throughout your movie or in other movies. A symbol can include artwork that you import from another application. Any symbol you create automatically becomes part of the library for the current document.

An Instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be very different from its symbol in colour, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance. You can also create font symbols in Flash.

Using symbols in your movies dramatically reduces file size; saving several instances of a symbol requires less storage space than saving multiple copies of the contents of the symbol. For example, you can reduce the file size of your movies if you convert static graphics such as background images into symbols that you then reuse. Using symbols can also speed movie playback, because a symbol needs to be downloaded to the Flash Player only once.

You can edit symbols in several ways: in place on the Stage, in a new window, or in symbol-editing mode. When you edit a symbol, the Timeline window displays only the Timeline of the symbol you are editing.

Look at the example below, here I am using 15 instances if the same Square Symbol I have in my library, but I've transformed them and applied different effects to them to make them look different even though they all are instances of the same symbol.


Now lets say I edit my Square Symbol in my library (by double clicking it to bring it up on my stage) to look like the following:



See how it affects all my instances.




Types of Symbol Behaviour

Each symbol has a unique Timeline and Stage, complete with layers. When you create a symbol you choose the symbol type, depending on how you want to use the symbol in the movie.

  • Use graphic symbols for static images and to create reusable pieces of animation that are tied to the Timeline of the main movie. Graphic symbols operate in sync with the movie's Timeline. Interactive controls and sounds won't work in a graphic symbol's animation sequence.

  • Use button symbols to create interactive buttons in the movie that respond to mouse clicks, rollovers or other actions. You define the graphics associated with various button states, and then assign actions to a button instance.
    Note: you can use movieclips to create button functionality and use ActionScript to control it like a button.

  • Use movieclip symbols to create reusable pieces of animation. Movie clips have their own multiframe Timeline that plays independent of the main movie's Timeline—think of them as mini-movies inside a main movie that can contain interactive controls, sounds, and even other movieclip instances. You can also place movieclip instances inside the Timeline of a button symbol to create animated buttons.

  • Use font symbols to export a font and use it in other Flash movies.

  • other symbols you may find in the Library come from importing media such as images, audio files and video.

 

Changing Instance properties
Each symbol instance has its own properties that are separate from the symbol. You can change the tint, transparency, and brightness of an instance; redefine how the instance behaves (for example, change a graphic to a movie clip); and set how animation plays inside a graphic instance. You can also skew, rotate, or scale an instance without affecting the symbol.

In addition, you can name a movie clip or button instance so that you can use ActionScript to change its properties.

To edit instance properties, you use the Properties panel (Windows > Properties).

The properties of an instance are saved with it. If you edit a symbol or re-link an instance to a different symbol, any instance properties you've changed still apply to the instance.


 

Assigning a different Symbol to an Instance
You can assign a different symbol to an instance to display a different instance on the Stage and preserve all the original instance properties, such as colour effects or button actions.

For example, say you're creating a cartoon with a Rat symbol for your character, but decide to change the character to a Cat. You could switch the Cat for the Rat symbol and have the updated character appear in roughly the same location in all of your frames.
 
To assign a different symbol to an instance:
1    Select the instance on the Stage and choose Window > Properties.

2    Click the Swap button in the Property inspector.

3    In the Swap Symbol dialog box, select a symbol that will replace the one currently assigned to the instance.
To duplicate a selected symbol, click the Duplicate Symbol button at the bottom of the dialog box.
Duplicating lets you base a new symbol on an existing one in the library and minimizes copying if you're making several symbols that differ just slightly.

4    Click OK.


Changing an Instance's type
You can change an instance's type to redefine its behaviour in a movie. For example, if a graphic instance contains animation that you want to play independently of the main movie's Timeline, you could redefine the graphic instance as a movieclip instance.
 
To change an instance's type:

  • Select the instance on the Stage and choose Window > Properties.
  • Choose Graphic, Button, or Movieclip from the pop-up menu in the upper left corner of the Property panel.


Breaking Apart Instances
To break the link between an instance and a symbol and make the instance into a collection of ungrouped shapes and lines, you "break apart" the instance. This is useful for changing the instance substantially without affecting any other instance. If you modify the source symbol after breaking apart the instance, the instance is not updated with the changes.
 
To break apart an instance of a symbol:

  • Select the instance on the Stage.
  • Choose Modify > Break Apart (or CTRL-B)
    This breaks the instance into its component graphic elements.

 

Getting information about instances on the Stage
As you create a movie, it can be difficult to identify a particular instance of a symbol on the Stage, particularly if you are working with multiple instances of the same symbol. You can identify instances using the Property inspector, the Info panel, or the Movie Explorer.

The Property inspector and Info panel display the symbol name of the selected instance and an icon that indicate its type—graphic, button, or movie clip. In addition, you can view the following information:

  • In the Property inspector, you can view the instance's behaviour and settings—for all instance types, colour settings, location, size, and registration point; for graphics, the loop mode and first frame that contains the graphic; for buttons, the instance name (if assigned) and tracking option; for movie clips, the instance name (if assigned).
  • In the Info panel, you can view the location and size of a selected instance.
  • In the Movie Explorer, you can view the contents of the current movie, including instances and symbols.

 

Class Exercise

Create something simple in Flash using the tools we have explored today.

Try using layers and the timeline to place content you have created using the Tool bar and Library.
Try creating content in Symbols such as Graphics Symbol, MovieClip, Button. We will cover these symbols in more detail in other classes, so take a good look at how they are different from each other, what properties they have, and think about when you would use each type of symbol.
Remember you can always use the Flash Help (F1 key) or web search engines to search for further information about everything we are covering in Flash.

 

 

 

Homework / Readings

Work on your Glossary and make sure you bring all work to class next week.

If you don't complete your animated GIF in class, complete at least one in your own time with your own content & post to your blog.

 

References

Flash related content

some very cools things made with Flash, or using Flash content: