Flash MX Professional 2004/Flash 8 Introduction to Flash, Panels, Drawing tools Outline of lecture demo/hands on class practice (Reading Chapters Flash MX 2004 HOT CH 1-3) PLEASE NOTE THAT LECTURE NOTES ARE IN TRANSITION TO VERSION 8 What is Flash? Open discussion Website source: http://www.macromedia.com Whitepapers History of flash (see handout for details) Who was the original company for Flash? When was Flash born? Who invented Flash? Inventor Jonathan Gay in 1995 Original Company FutureWave, 1996 Illustration program SmartSketch Player FutureSplash Animator 1.0 Sold to Macromedia in 1997 (6 versions Flash 2, 3, 4, 5) Why Flash? Flash is a streaming program means it loads content first (preloading), example: review how a quick time movie loads over the web. Flash is known for its vector graphics capabilities resolution independent & scalable Apart from vector graphics, Flash can import rasterized graphics, trace bitmaps and converting them to vector Flash has the capabilities of compressing graphics, audio & video well Create motion graphics Can embed audio & video Build interactive interfaces Create dynamic functionality with advance scripting Saving Files in Flash (Hands on class practice) Working File extension.fla file used to create flash content Export as >Image OR Movie.swf this compressed version of the project file which will be uploaded to the internet or be played with the use of a Flash Player Publish Options Many options (See program for details) > Saving the files: save as > name.fla > save (for mac type the extension.fla) into a folder > Control > Test Movie -> opens another document window (Note: This is flash preview within the Flash application. Flash also creates another file which flash movie creates,.swf file) within the same folder ( parent folder ) where the FLA was created. > Control/Command + Enter to test movie is the fast way to create.swf file Flash Players Plug in for Browsers Stand alone Flash player application (SWF) Stand Alone executable files (PC=EXE; Mac=HQX) Previewing in a browser window You may generate HTML files in the parent folder by: Clicking on F12 or File>Publish> Preview HTML 6/6/2006 Carolyn Tan Flash MX 2004 1
Introduction Opening Flash MX 2004 for the first time Start window configuration & its functions Setting Document/Canvas/Working Area Open a new document in Flash 3 options of setting the size of the working area 1. Modify document> OR 2. Double click on 12.0 fps icon located at the bottom of the timeline panel OR 3. Click on stage area and view property panel for additional options Setting defaults Working with panels Document window in flash is divided into several components. The layout can be customized based on the designer s needs Tools Time line Working Area/Stage Panels (View Panel Sets: Windows >panel set>default layout) 6/6/2006 Carolyn Tan Flash MX 2004 2
Working with Panels in Flash > You can modify the layout of the panels or create the individual floating panel. > Click and drag a tab over a panel to create new set. (With this move arrow tool (you can drag the panels) > Organize the panels the way you are comfortable with, and save the settings form window > save panel layout---dialog box > assign the name (for your arranged panels) >OK. > Choose window > panel sets > name (your assigned name) to get your arranged panel sets. Viewing & Saving panel options from Window Menu Other panel options (Design; Development; Other) Hiding/Saving & Activating Panels 6/6/2006 Carolyn Tan Flash MX 2004 3
Flash MX 2004 Drawing tools NOTE: 1. Before selecting a tool, property of the object such as color, stroke style, etc. must selected before the property can be applied. For example, if you want a green polygon with 8 sides, select green fill, and then click on the polygon tool>select options from the property panel to edit number of sides>then draw the polygon shape on the stage. 2. Whenever each tool is selected>view OPTIONS at the bottom of the tool pallete for additional settings, and ALSO THE PROPERTY PANEL 3. Selection/Creating/Editing Tools are different from other illustration/graphic programs Solid arrow Selection tool To select objects Hollow arrow Sub-selection tool for selecting paths and sub objects Line tool (Also considered stroke) For creating a lines/strokes. > Holding shift key gives you straight line. Line can be modified with the ink bottle tool or stroke panel. You can customize the color, height and style of the line via the property panel > While selecting the line or stroke of any shape with selection arrow, as cursor is near to the line, the small curved icon appears next to the arrow tool This is an indication that you are over the line segment and not the fill. >You can modify the line segment by clicking dragging with the mouse with selection arrow (you can change the shape by pulling and dragging line segment of the line or geometrical shape) > snapping of line will give you oval icon for joining the line. > Brush, pencil, pen tools Note: You get more options in the tool palate (down) according to the tool you choose. The brush tool utilizes the fill color, while the pencil tool utilizes the stroke color. Pen tool Creating simple to complex paths and shapes (See detailed handout) 6/6/2006 Carolyn Tan Flash MX 2004 4
Sub selection tool activates the path for further editing options Oval tool Create circles/ovals Edit curves using the selection tool>mouse close to the edge of the object till curser changes to a curve selection Duplicate ovals/circles >select object>hold alt key till + sign appears, then drag Selecting an object with fill and stroke Click on solid selection tool> Single click selects only the fill, if fill is selected Double click to select both fill and stroke Rectangle tool >Hold the Up/Down Arrow key while creating the rectangle to change the corners into rounded corners >While selecting the rectangle draw tool. hold shift to constrain the shape of the rectangle to make it a square Star polygon tool (Sub-selection from Rectangle tool) New in Flash MX 2004 When tool is selected>view property panel for more options Ink bottle tool Creating strokes Select stroke>edit stroke color/style with ink bottle tool Paint bucket Create/Edit fills Changing angle of gradient Select paint bucker>position mouse over the fill area>click, hold and drag to desired angle OR Select fill area>click on transform fill tool>select the handle to adjust the gradient handles Pencil tool Another stroke tool (for creating freeform curves) View Tool Options: modes straighten (to get a straight line), smooth (for smoother line), Ink(finer curves) Paint brush tool Relates to fill colors Options: paint behind, paint selection (paints inside a selection), paint fills Eraser tool Options>Erase fills only OR erase lines only Faucet tool>deletes the area Hand tool Move Document/Canvas area around Shortcut key spacebar Zoom tool Press Alt key to zoom out 6/6/2006 Carolyn Tan Flash MX 2004 5
Grouping Objects in Flash After drawing the object, group it to prevent selection error. Control/Command + G or Modify > Group. (Modify > Ungroup to ungroup objects) Grouped object indicated by BLUE bounding box (See diagram below) Stacking order of the object can be changed from modify > arrange > send to back etc. Select the grouped objects. Double clicking on selected group will bring you to the group edit mode (See diagram below) where you can change the color etc. (quick way) of the object. After making the changes click anywhere on the stage or named scene to return to default layout. OBJECT IS GROUPED GROUP EDIT MODE Stacking order of grouped objects in Flash (See diagram sequence below to understand concept) When a second object (example a ball) is drawn over a grouped object (example a rectangle), the second object, the ball, will look like it has disappeared (See #3). The ball is actually sitting behind the rectangle. Move the rectangle to a different position (#4), and you will see the ball that you have created. Select the ball, GROUP it, and the ball will appear to be in front of the rectangle (#6). 1. GROUPED rectangle 2. Draw ball over rectangle 3. Ball disappears to the back 4. Select & Reposition Rectangle 5. Select ball, group it 6. Move ball which now appears in front of rectangle 6/6/2006 Carolyn Tan Flash MX 2004 6
PROPERTY PANEL (With various too options) Property panel changes according to the tools selected. Document/movie size, background color, frame rate, stroke, object cooler, line height, line options etc. can be edited from the property panel. 3 options of setting the size of the movie 1. Modify document> OR 2. Double click on 12.0 fps icon located at the bottom of the timeline panel OR 3. Click on stage area and view property panel for additional options Sample of property panel and LINE tool is selected from tool palette Sample of property panel when TEXT tool is selected from tool palette Fonts > For fonts, select size, name, alignment, color, spacing etc. as more options are available from format panel as shown below. 6/6/2006 Carolyn Tan Flash MX 2004 7
>Create URL links to the text property panel>click on link icon Color can be changed or gradient is applied to font by selecting the font and Modify > break apart one or more time until see pixels in text (break into each letter) Layer Panel 6/6/2006 Carolyn Tan Flash MX 2004 8
WORKING WITH COLORS Create/Edit/Save Colors with Opacity Clhanges Draw object and select the fill from color mixture to view color changes Creating new swatches as shown below 6/6/2006 Carolyn Tan Flash MX 2004 9
Hands on Class Activity ACTIVITY #1 CREATING DROP SHADOW IN FLASH THE CONVENTIONAL METHOD SETTING UP THE STAGE Create and name your layers on the timeline: Layer 1 = Original Object Layer 2 = Drop Shadow Click on Frame 1, Layer 1. Select the text tool and type SHADOW (Font=IMPACT, size 72) Select and copy the SHADOW object Click on Layer 2 (Shadow Layer), Frame 1. Select Edit>Paste in place Hide/LOCK the top layer CREATING THE DROP SHADOW Select the shadow object from the Shadow Layer by clicking on the first frame Click on Modif.y>break apart (This will turn the text into a filled shape) Modify>ShapeSoften fill edges o OPTIONS: Distance 6px o Number steps 20 o Note: the more steps you have means the larger the file size o Zoom in to view edges Turn on the ORIGINAL layer Nudge and position the shadow object to desired location. FINAL PRODUCT 6/6/2006 Carolyn Tan Flash MX 2004 10
ACTIVITY # 2 ADDING STROKES TO FONTS: SETTING UP THE STAGE Select font style impact Select font size 72 On the stage/document area type IMPACT Break apart the text (MODIFY/BREAK APART) Click on the ink bottle, select a stroke Click on the edge of the letters. You may delete the fill to get just an outline font. FINAL PRODUCT Challenge project (Try recreating the following based on what you see below) 6/6/2006 Carolyn Tan Flash MX 2004 11