Flash basics

From TOI-Pedia


Introduction

This page covers the basics of working with Adobe Flash.

Instructions written below are based on Macromedia Flash MX. Actions might have changed in higher versions.
Help? For more instructions see Help in Flash (F1)

Interface

Flash Interface

Your workspace exists of your stage in the center. On the left you’ll find your modeling tools, which we we’ll use mostly in this lesson. The property inspector in the bottom gives information about objects in your scene. For more options you can use the panels on the right side.

You can adjust the interface by dragging the panels, closing them or opening via window > (design, development and other) panels.

Timeline (panel)

Timeline

The timeline shows all layers in your scene. You can toggle the visibility and fill of each layer and lock them. A frame is a moment on the timeline with certain content.

[] frame
● content keyframe
○ empty keyframe

Layers

Layers

Layers allow you to order your stage content. Click on the + to add a layer. Double click on a layer to change the name. The pencil indicates the current layer. Click on the eye, lock or square to toggle the visibility, make the layer (non) selectable and turn the fill on/off. Click on the garbage can to delete a layer. Click and drag a layer to change layer order.

Masks

Masks

Right click on a layer and hold then choose mask to make it a mask. In the example on the left you will only see what’s in layer two where there’s something in layer three. To apply the mask to a layer you drag a layer to the lower right corner of the mask icon.

Tools (panel)

Tools

To put content on stage we can for instance draw an object. We can do this by selecting a tool (rectangle (R)) in the toolbox. You can now adjust the settings of your tool: colors and options.

The objects you draw are vector based. Also notice the empty keyframe (○) changes into a keyframe with content (●).

Navigation

Navigation
  • hand tool: click (left mouse button (LMB)) and drag to pan
  • zoom tool:
    • LMB: zoom in
    • alt+LMB: zoom out
  • numeric input: select zoom factor from pull down menu
  • ctrl+1: zoom 100%
  • ctrl+2: zoom stage
  • ctrl+3: zoom all

Selection Tool (V)

Selection Tool

There are multiple ways to select (parts of) objects:

  • click select:
    • only selects components.
  • double click:
    • line/stroke selects entire border.
    • fill selects fill and border.
  • drag select:
    • select part of object in field.

Move & Snap

Move

Move

To move (parts of) an object:

First select:

  • selection tool: select and drag.
  • subselection tool (A): drag on line.

Move via menu:

  • window > design panel > info panel (ctrl+I): move by numeric input.
  • window > design panel > align (ctrl+K): move relative to other objects.

Move with keyboard arrows:

  • arrows: 1px/hit.
  • arrows + shift: 10px/hit.

Snap

To snap objects: First set snapping options: view > snapping > grid (for example)

To use snap:

  • click and drag on joints/corners
  • click and drag on lines/edges

Transform

Transform

Various ways to transform objects:

  • property inspector: select object; numeric input
  • info panel: select objec; numeric input to adjust size, position and pivot point.
  • transform panel: window > design panel > transform (ctrl+T) to scale, rotate or skew numeric and to duplicate with transform or reset the transformation.
  • modify > transform: for a list of predefined transformations.
  • free transform tool:
    • click inside object and drag to move
    • click outside near corner to rotate
    • click on an edge handle to scale
  • subselection tool:
    • drag line to drag object
    • drag joint to distort object (edit points)

Group

Group

Groups allow you to treat multiple objects as a whole and prevents (automatic) combining overlapping objects in same layer.

Group: modify > group (ctrl+G) Ungroup: modify > ungroup (ctrl+shift+G)(reverse grouping) Arrange: RMB > arrange/ modify > arrange: bring forward and send backward to adjust group order (within layer)

Properties (panel)

Property inspector

You can also adjust some of the tool settings in the property inspector, like color, weight, fill and linetype before drawing an object or afterward by selecting an object.

Document properties

Document properties
  • modify > document (ctrl+J)
  • (or) select in properties inspector

If you create a beamer presentation (full screen) 1024px x 768px would be a good resolution.
If you want to embed your flash file in a webpage you can pick a smaller resolution.

File formats

Working file (fla)

The working file format / extension of your document is *.fla.
File > save as (ctrl+shift+S)

Publish file (swf)

To export your document or to embed it into a standard html page you need to publish your document as *.swf:
File > Publish (shift+F12) or
File > Publish settings...

For a quick preview you can use:
File > Publish preview > Flash (ctrl+enter)

Personal tools
Actions
Navigation
Tools