What's New in Flash 8 October 16, 2005 Josh Cavalier Lodestone Digital, LLC www.lodestone.com josh@lodestone.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Unit 1: Overview of the Session Unit Objectives: After this unit, you will: y Describe the course objectives y Know what the prerequisites of the class are y Know the content of each unit for the course y Understand the course materials Unit Topics: y About the Course y Course Format y Course Objectives y Course Prerequisites y Course Outline 2
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 About the Course What’s New in Flash 8 provides Macromedia Flash 8 users with the hands-on instruction that will help them become competent with all the new expressiveness features in Flash 8. By the end of the course, students should be able to use what they learned here to build rich user experiences that include new features like complex gradients, blends, filters, Flash Video, and mobile device emulation.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Course Format This course is divided into 8 units, most of which present new information and contain demonstrations, walkthroughs and a lab where you can practice you new skills. You will experience the following learning techniques to better understand the course: y Concepts introduce new information. y Demonstrations illustrate new concepts. y Walkthroughs guide you, with the instructor’s assistance, through procedures.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Course Objectives After completing the course, you will be able to use the following new features in Flash 8: y Toolbar Settings y The Object Drawing Model y Text and Graphic Rendering Options y Ease In/Ease Out Animation Options y Flash Video Components for Flash 8 y Blends and Filters y Mobile Device Settings Course Prerequisites To get the most from this class, you should already be familiar with: y The Windows XP operating system
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Unit 2: Setting Up the Flash 8 Document Unit Objectives: After this unit, you will be able to: y Set up your document for web and mobile output y Modify your document properties y Define a Site in Flash 8 y Upload a Site via Flash 8 y Save versions of your FLA file Unit Topics: y Document Setup y Document Setup for Flash Lite / Mobile Devices y Defining a Site y Uploading a Site y Version Control 6
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Setting Up Your Flash Document In this unit, you will set up a simple Flash document, and examine some of the new features of setting up a FLA file. Creating a Simple Flash Document To illustrate the basic steps of creating any Flash document, this section guides you through the process in a simple tutorial. The first step is to create a new document in Flash and explore on of the new features – SWF MetaData.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 The search metadata is based on the RDF (Resource Description Framework) and XMP (Extensible Metadata Platform) specifications and is stored in Flash in a W3C-compliant format. NOTE: Flash lets you make the settings you specify in the Document Properties dialog box the default settings for any Flash document that you create. The exception to this is the Title and Description, which you need to specify for each Flash document that you create.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Drawing a circle After you've created your document, you are ready to add some artwork for the document. To draw a circle on the stage: 1. Select the Oval tool from the Tools panel. The Oval tool in the Tools panel 2. Select the No Color option from the Stroke Color Picker.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 3. Select a color of your choice from the Fill Color Picker. Make sure the fill color contrasts well with the Stage color. 4. Draw a circle on the Stage by selecting the Oval tool and Shift-dragging on the Stage. Holding the Shift key constrains the Oval tool to a circle. The circle shape drawn on the Stage Creating a symbol You can turn your new artwork into a reusable asset by converting it to a Flash symbol.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 3. With the circle still selected, select Modify > Convert to Symbol. 4. In the Convert to Symbol dialog box, type my_circle into the Name text box. The default behavior is now Movie Clip. 5. Click OK. A square bounding box appears around the circle. You have now created a reusable asset, called a symbol, in your document. 6. The new symbol appears in the Library panel. If the Library panel is not open, select Window > Library.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Selecting Frame 20 of Layer 1 in the Timeline 3. Select Insert > Timeline > Frame. Flash adds frames to Frame 20, which remains selected. Frames inserted in the Timeline 4. With Frame 20 still selected, select Insert > Timeline > Keyframe. A keyframe is added in Frame 20. A keyframe is a frame where some property of an object is explicitly changed. In this new keyframe, you will change the circle's location. Inserting a keyframe in Frame 20 5.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 6. Select Frame 1 of Layer 1 in the Timeline. 7. In the Property inspector (its default location is at the bottom of the Flash application window), select Motion from the Tween pop-up menu. Selecting a motion tween in the Property inspector An arrow appears in the Timeline in Layer 1 between Frame 1 and Frame 20.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Publishing the File with HTML and Version Detection When you finish your Flash document, you are ready to publish it so it can be viewed in a browser. When you publish a FLA file, Flash compresses it into the SWF file format. This is the format that you place in a web page. The Publish command can automatically generate an HTML file with the correct tags in it for you. To publish the Flash file and view it in a browser: 1.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 This template creates a simple HTML file that contains only your SWF file when displayed in a browser window. Choosing Flash Only from the Template menu 4. Click Detect Flash Version – Keep the value at 8.0.0. 5. Click OK. 6. Select File > Publish and open your web browser. 7. Select File > Open in the web browser. 8. Navigate to the folder where you saved your FLA file in the Unit 2 folder. The SimpleFlash.swf and SimpleFlash.html files are there.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Specifying Publish Settings with HTML and Version Detection Let’s go back and revisit our Detect Flash Version settings, and how Flash will publish your HTML template. Playing Flash content in a web browser requires an HTML document that activates the SWF file and specifies browser settings. This document is generated automatically by the Publish command, from HTML parameters in a template document.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 This is the window that appears if you use the JavaScript detection, and the user needs the Flash Player. Detection Code Let’s take a close look at the source code that’s used in our current document. 1. In the Browser select View > Source (IE) or View > Page Source (FireFox). 2. The alternate content that will be displayed is highlighted in the source code below. You can change this code to customize the user’s experience.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 + 'width="550" height="400" name="Untitled-2" align="middle"' + 'play="true"' + 'loop="false"' + 'quality="high"' + 'allowScriptAccess="sameDomain"' + 'type="application/x-shockwave-flash"' + 'pluginspage="http://www.macromedia.com/go/getflashplayer">' + '<\/embed>' + '<\/object>'; document.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Regionally available devices that support Flash Lite comprise a larger group of devices than are available globally. As of this writing, these devices are available primarily in Japan and come with Flash Lite pre-installed. On these devices, Flash Lite enables several different types of content, such as Flash screen savers or animated ring tones.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 The Flash Lite emulator and test window. The Device Settings dialog box lets you select the test devices and Flash Lite content type that you want to test against in the Flash Lite emulator. Different devices support different media types (for example, different types of device sound formats) as well as different Flash Lite content types, such as stand-alone player, screensaver, or browser.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 The Property inspector contains a section that provides information about your current device settings, as well as a button that lets you open the Device Settings dialog box. This button is active only when your document's Version setting on the Flash tab of the Publish Setting dialog box is set to Flash Lite 1.0 or Flash Lite 1.1. Setting the Publishing Settings for Mobile Devices 1. Make sure you have the SimpleFlash.fla file still open. 2.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 8. With the Panasonic folder selected, click Add to add all the Panasonic devices to your list of test devices. 9. Test your application. Control > Test Movie. When you test your application in the emulator, you'll be able to test your application against any of your test devices for the selected content type. 10. Close the emulator window.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 type a new name for the file, Flash writes a new and optimized version of the file, which results in a smaller file size. When you select Save and Compact, Flash creates a new optimized file and deletes the original file. Caution When Saving When you select Save and Compact, you cannot undo any changes you made before you saved the file. If you select Save when working with a document, you can undo changes made prior to that save point.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 3. Select File > Edit Sites. 4. In the Edit Sites dialog box, click New. 5. In the Site Definition dialog box, enter the site name, the local root path, and the e-mail address and name of the user. 6. To specify a local, network, or FTP connection, select Local/Network or FTP from the Connection menu. Enter the location information for the Local/Network path or for the FTP connection and skip the next step. 7.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 8. In the Flash Project panel (Window > Project), select Settings from the Project pop-up menu or context menu.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 9. In the Project Settings dialog box, select the site definition from the Site menu in the Version Control section. Click OK. 10. In the Project pop-up menu, select Check In. Flash checks all files in the current project into the site. LAB • Create a new Flash movie • Add a motion tween • Set up the Publishing Setting for any Sony cell phone.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Unit 3: Interface Improvements Unit Objectives: After this unit, you will be able to: y Describe the new interface features in Flash 8 y Use the new Property Inspector y Work with the Expanded Stage Area y Customize the Flash Toolbar y Use the new Preferences panel y Use the new Library Panel and Tabbed Panels Unit Topics: y Working with the Property Inspector y Viewing the Expanded Stage Area y Customizing the Flash Toolbar y Modi
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Working with the Property Inspector The Property inspector simplifies document creation by making it easy to access the most commonly used attributes of the current selection, either on the Stage or in the Timeline. You can make changes to the object or document attributes in the Property inspector without accessing the menus or panels that also control these attributes.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 6. Notice the new Filter Tab in the Property Inspector. 7. Have some fun, and modify the drop shadow settings. We will learn more about Filter settings later on. Let’s take a look at another new feature. Viewing the Expanded Stage Area Expanded Stage Work Area You can use the area around the Stage to store graphics and other objects without having them appear on the Stage when you play the SWF file.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Customizing the Flash Tools Panel You can customize the Tools panel to specify which tools appear in the authoring environment. You use the Customize Tools panel dialog box to add or remove tools from the Tools panel. You can display more than one tool in one location. When more than one tool is displayed in a location, the top tool in the group (the most recently used) is displayed with an arrow in the lowerright corner of its icon.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 5. Click OK to apply your changes and close the Customize Tools panel dialog box. 6. Notice now that when you have added tools, they appear as a drop down menu selection. Here the Rectangle and PolyStar tool were added to the Oval Tool. • Try to make a few more changes to the toolbar. You can even try the example above. To restore the default Tools panel layout: • Click Restore Default in the Customize Tools panel dialog box.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Changing Preferences Improved Preferences dialog box Macromedia streamlined the design of the Preferences dialog box and reorganized it for improved clarity and ease of use. Flash lets you set preferences for general application operations, editing operations, and Clipboard operations. The General category in the Preferences dialog box To set preferences: 1. Select Edit > Preferences (Windows) or Flash > Preferences (Macintosh). 2.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 3. Select from the respective options to view the new way the panel is set up. 4. In the General section, under Project: choose the Save files on test or publish project checkbox. Using the Flash 8 Library Panel The Library panel is where you store and organize symbols created in Flash, as well as imported files, including bitmap graphics, sound files, and video clips.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 The Library panel displays a scroll list with the names of all items in the library, which lets you view and organize these elements as you work. An icon next to an item's name in the Library panel indicates the item's file type. The Library panel has an options menu with commands for managing library items.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 The new Library Panel in Flash 8. 3. Click the drop down menu in the Library panel to toggle between the Libraries. 4. Copy and Paste a symbol into the Test.fla Library. In the animation_and_gradients.fla Library select the 8ball movie clip. 5. In Windows, Right click and select Copy. 6. Switch to the Test.fla Library and Right click again to Paste the symbol.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 The 8ball movie clip has been copied to Test.fla. Notice it’s associated Graphic symbols came along for the ride! To Pin the Library Panel: 1. Switch back to the animation_and_gradients.fla Library using the drop down menu. 2. Click the Pin button on the Library Panel. 3. Switch between your files by clicking on the file name tab.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Switch between files to see how the Library stays pinned 4. Notice how the same Library stays open. 5. Deselect the Pin, and switch between files. Notice how the Library Panel changes. To resize the Library panel, do any of the following: 1. Drag the lower right corner of the panel. 2. Click the Wide State button to enlarge the Library panel so it shows all the columns. 3. Click the Narrow State button to reduce the width of the Library panel.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 A tabbed panel showing the Library and Movie Explorer panels Additional Interface Items Drag and Drop Components to Library Panel If you want to add a component to your Library, you can just drag it in the Library. There’s no need to place one on the stage until you need it. Macintosh document tabs You can now open multiple Flash files in the same Flash application window and choose among them by using the document tabs at the top of the window.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 The Export Set as HTML button 4. In the Save As dialog box that appears, select a name and location for the exported HTML file. The default file name is the name of the selected shortcut set. 5. Click Save. 6. Find the exported file in the folder you selected and open the file in a web browser. 7. To print the file, use the browser's Print command. Lab No lab for this unit.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 40
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Unit 4: Drawing Improvements Unit Objectives: After this unit, you will be able to: y Understand and use the new Object drawing model y Use the Gradient Tool y Create new Gradients with ActionScript y Use the new Shape tool Features y Use the Free-Transform Tool y Use Enhance Strokes Unit Topics: y The Object Drawing Model y Using Gradients in Flash 8 y Building an 8-Ball with Gradients y New Drawing Features in Flash 8 41
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Object Drawing Model Previously in Flash, all shapes in the same layer on the Stage could affect the outlines of other overlapping shapes. You can now create shapes directly on the Stage that do not interfere with other shapes on the Stage. When you create a shape with the new Object Drawing model, the shape does not cause changes to other shapes that exist underneath the new shape.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 NOTE: You can set preferences for contact sensitivity when selecting shapes created using the Object Drawing model. The new object drawing mode has to be enabled when using a drawing tool by pressing the "J" key or by pressing the "Object Drawing button" next to the magnet in the Tools panel. Use the Object Drawing Model 1. Create a new Flash Document. File > New. Choose Flash Document. 2. Save the file as Objects.fla in the Unit 4 folder. 3.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Object-Level Undo Mode You can now choose to keep track of the changes you make in Flash on a per-object basis. When you use this mode, each object on the Stage and in the library has its own undo list. This allows you to undo the changes you make to an object without having to undo changes to any other object.
Macromedia MAX 2005 - Anaheim, CA • • • • What’s New In Flash 8 Delete scene Duplicate scene Rename scene Move scene To remove deleted items from a document after using the Undo command, you use the Save and Compact command. See Saving documents when you undo steps. You can use the Repeat command to reapply a step to the same object or to a different object.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 4. Click OK. Transforming gradient and bitmap fills You can transform a gradient or bitmap fill by adjusting the size, direction, or center of the fill. To transform a gradient or bitmap fill, you use the Gradient Transform tool. One of the new features of Flash 8 is adjusting the Focal Point of a gradient. To adjust a gradient or bitmap fill with the Gradient Transform tool: 1.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Press Shift to constrain the direction of a linear gradient fill to multiples of 45°. Reshape the gradient or fill in any of the following ways: To reposition the center point of the gradient or bitmap fill, drag the center point. To change the width of the gradient or bitmap fill, drag the square handle on the side of the bounding box. (This option resizes only the fill, not the object containing the fill.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 To rotate the gradient or bitmap fill, drag the circular rotation handle at the corner. You can also drag the lowest handle on the bounding circle of a circular gradient or fill. To scale a linear gradient or a fill, drag the square handle at the center of the bounding box. To change the focal point of a circular gradient, drag the middle circular handle on the bounding circle.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 New Gradient Color Options The Color Mixer provides options for changing the color of strokes and fills, as well as creating multicolor gradients. You can use gradients to produce a wide range of effects, such as giving an illusion of depth to a two-dimensional object.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Current Color Swatch displays the currently selected color. If you select a gradient fill type (Linear or Radial) from the fill Type pop-up menu, the Current Color Swatch displays the color transitions within the gradient you create. Color Picker lets you select a color visually. Click the Color Picker and drag the cross-hair pointer around until you find the color you want. Hexadecimal value displays the current color's hexadecimal value.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Building the 8-Ball with Gradients As you examine the finished version of an application you'll create, you will also look at the Flash workspace.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 There are five gradients in the illustration: • A gradient from black to green on the background. • A gradient from black to green to black on the bottom of the eight ball. • Another from white to black in the highlight on the top of the eight ball. • A subtle gradient on the white circle surrounding the number "8." • A radial gradient in the shadow beneath the eight ball.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Selecting the right gradient color swatch in the Color Mixer Selecting the color green #006600 in the Color Picker 6. Double-click the left gradient color swatch and select the color black (#000000). 7. Select the Gradient Transform tool from the Tools panel. The Gradient Transform controls appear on the Stage around the gradient. The Gradient Transform tool 8. Drag the Gradient Rotate handle to rotate the linear gradient clockwise as shown.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Rotating the gradient clockwise 9. Lock the Background layer in the Timeline to prevent further changes to this layer. 10. Select File > Save to save your FLA file. Create a Radial Gradient Next, you will add a radial gradient to the black eight ball. 1. Double-click the black circle in the layer called Ball. This opens the group containing the eight-ball shape. 2. Select the black circle shape. You will apply a gradient to this shape.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 6. Drag the left gradient color swatch to the right about three-fourths of the way as shown in the following illustration. This makes the green part of the gradient appear only in the outer 25% of the ball shape. Dragging a gradient color swatch 7. Select the Zoom tool from the Tools panel and click the circle shape to magnify it. 8. Select the Gradient Transform tool in the Tools panel. 9.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 11. Select the center control point and drag the entire gradient upward a short distance as shown in the following illustration. The mirrored overflow gradient is at the bottom of the circle. Dragging the center control point upwards 12. Select the Selection tool in the Tools panel. 13. Double-click the Zoom tool to return the Stage area to a view of 100%. 14. Double-click the Stage area to deselect the eight-ball group. 15.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 11. Select the Free Transform tool and scale the circle along the y (vertical) axis by dragging the top-center handle downward as shown in the following illustration. The gradient is transformed along with the shape transformation. 12. Select the Selection tool from the Tools panel. 13. Drag the shadow shape under the eight ball with the Selection tool. 14. Click outside the Stage to deselect the shadow. 15. Select File > Save to save your FLA file.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 11. Select the color black (#000000) from the Color Picker. 12. Set the Alpha value for the black color swatch to 100%. Your gradient settings should match those in the following illustration: The Color Mixer with the correct settings for the gradient on the white circle 13. Select the Gradient Transform tool from the Tools panel. 14. Drag the Gradient Rotate handle approximately 120º clockwise. The gradient rotated 120º 15.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 5. Select Non-repeating from the Overflow menu. 6. Drag the left gradient color swatch all the way to the left and double-click it. 7. Select the color white (#FFFFFF) from the Color Picker. 8. Set the Alpha value for the left swatch to 0%. 9. Drag the right gradient color swatch all the way to the right and double-click it. 10. Select the color white from the Color Picker. 11. Set the Alpha value for the right swatch to 75%.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 16. Double-click outside the Stage twice to deselect the highlight group. The finished Flash illustration looks like this: 17. Select File > Save to save your FLA file. To close the document, select File > Close.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Using Complex Gradient Fills with ActionScript The Flash Drawing API supports gradient fills as well as solid fills. The following procedure creates a new movie clip on the Stage, use the Drawing API to create a square, and then fills the square with a radial red and blue gradient. To create a complex gradient: 1. Create a new Flash document and save it as radialgradient.fla in the Unit 4 folder. 2.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Using Script Assist with Gradients Script Assist mode A new assisted mode in the Actions panel allows you to create scripts without detailed knowledge of ActionScript. For users who are new to ActionScript, or for those who want to add simple interactivity without having to learn the ActionScript language and its syntax, you can opt to use Script Assist to help you more easily add ActionScript to your Flash documents.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Using Script Assist to view ActionScript To add an action to a Flash document, you must attach it to a button or movie clip, or to a frame in the Timeline. The Actions panel lets you select, drag and drop, rearrange, and delete actions. 1. To write ActionScript using Script Assist: 1. Select Window > Actions. 2. The Actions panel appears. 3. Click the Script Assist button. 4. The Actions panel enters Script Assist mode.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 • The Remove (-) button lets you remove the current selection in the scrolling text area. • The Up and Down Arrow buttons let you move the current selection in the scrolling text area forward or backward within the code. • The Check Syntax, Auto Format, Show Code Hint, and Debug Options buttons and menu items normally visible in the Actions panel are disabled, as they do not apply to Script Assist mode.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 You gradient color changes.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 New Drawing Items In Flash 8 Transforming objects freely You can use the Free Transform tool to freely transform objects, groups, instances, or text blocks. You can perform individual transformations or combine several transformations, such as moving, rotating, scaling, skewing, and distortion. To transform freely: 1. Select a graphic object, group, instance, or text block on the Stage. No Movie clips! 2. Click the Free Transform tool.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 4. To end the transformation, click outside the selected object, group, instance, or text block. Now you can taper shapes. This text was broken apart before transforming. Distorting Objects When you apply a Distort transformation to a selected object, dragging a corner handle or an edge handle on the bounding box moves the corner or edge and realigns the adjoining edges.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Modifying Shapes with the Envelope Modifier The Envelope modifier lets you warp and distort objects. An envelope is a bounding box that contains one or more objects. Changes made to an envelope's shape affect the shape of the objects contained within the envelope. You edit the shape of an envelope by adjusting its points and tangent handles. To modify a shape with the Envelope modifier: 1. Select a shape on the Stage.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Drawing straight lines, ovals, and rectangles You can use the Line, Oval, and Rectangle tools to easily create these basic geometric shapes. The Oval and Rectangle tools create stroked and filled shapes. The Rectangle tool lets you create rectangles with square or rounded corners. To draw a straight line, oval, or rectangle: 1. Select the Line, Oval, or Rectangle tool. 2.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Using the Stroke Color and Fill Color controls in the Property inspector To change the stroke color, style, and weight for a selected object, you can use the Stroke Color controls in the Property inspector. For stroke style, you can choose from styles that are preloaded with Flash, or you can create a custom style. To select a solid color fill, you can use the Fill Color control in the Property inspector.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Line lengths exceeding this value are squared off instead of pointed. For example, a Miter limit of 2 for a 3-point stroke means that when the length of the point is twice the stroke weight, Flash removes the limit point. Lab • Draw some text and distort it using the Envelope tool. You will need to Break the text apart.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 72
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Unit 5: Expressiveness Features and Animation Unit Objectives: After this unit, you will be able to: y Use Blend Modes and Filters y Use ActionScript to Control Expressiveness Features y Import Blends and Filters from Fireworks y Work with the new Easing In/Easing Out Controls Unit Topics: y Working with Blends y Programming Blends y Working with Filters y Programming Filters y Importing From Fireworks y Using the New Easing In/Eas
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Working with Blends Blend Modes Blend two movie clips (or buttons) together using the following modes: layer, darken, multiply, lighten, screen, overlay, hardlight, add, subtract, difference, invert, alpha, and erase. Again, straight out of Photoshop. Graphic designers will love this feature, but not as much as filters :). In Flash, blend modes let you create composite images.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Overlay multiplies or screens the colors, depending on the base colors. Hard light multiplies or screens the colors, depending on the blend mode color. The effect is similar to shining a spot light on the object. Difference subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value. The effect is similar to a color negative. Invert inverts the base color.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Blend mode examples The following examples illustrate how different blend modes affect the appearance of an image. Be aware that the resulting effect of a blend mode may be considerably different, depending on the color of the underlying image and the type of blend mode you apply.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Applying a Blend Mode You use the Property inspector for movie clips to apply blends to selected movie clips. NOTE: Multiple graphic symbols are merged as a single shape when you publish the SWF. For this reason, you cannot apply different blend modes to different graphic symbols. To apply a blend mode to a movie clip: 1. Create a new Document and save it as blend_test.fla. Draw a red square and convert it to a movie clip.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Programming Blends About blending modes You can apply blend modes to movie clip objects by using the Flash workspace (Flash Professional 8) or ActionScript (Flash Basic 8 and Flash Professional 8). At runtime, multiple graphics are merged as one shape. For this reason, you cannot apply different blend modes to different graphic symbols.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Applying Blending Modes with ActionScript The following procedure loads a dynamic image and lets you apply different blend modes to the image by selecting a blending mode from a combo box on the Stage. To apply different blending modes to an image: 1. Create a new Flash document and save it as blendmodes.fla. 2. Drag a ComboBox component instance onto the Stage and give it an instance name of blendMode_cb. 3.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 This ActionScript code populates the combo box with each type of blending mode, so the user can view each effect on the dynamically loaded image. A listener object is created, which is used with a MovieClipLoader instance. The listener object defines a single event listener, onLoadInit, which is invoked when the image is completely downloaded and is initialized by Flash.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Animating Filters You can animate filters in the Timeline. Objects on separate keyframes joined by a tween have the parameters for corresponding filters tweened on intermediate frames. If a filter does not have a matching filter (a filter of the same type) at the opposite end of the tween, a matching filter is added automatically to ensure that the effect is at the end of the animation sequence.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Each filter includes controls that let you adjust the strength and quality of the applied filter. Using lower settings improves performance on slower computers. If you are creating content for playback on a wide range on computers, or are unsure of the computing power available to your audience, set the quality level to low to maximize playback performance.
Macromedia MAX 2005 - Anaheim, CA o Gradient Bevel o Adjust Color What’s New In Flash 8 To remove a filter: 1. Select the movie clip, button, or text object that you want to remove a filter from. 2. Select the Filter tab in the Property inspector. 3. Select the filter you want to remove in the list of applied filters. 4. Click the Remove Filter (-) button to remove the filter. You can create a filter settings library that lets you easily apply the same filter or sets of filters to an object.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Apply Graphic Filters and Blends This tutorial guides you through the process of creating eye-catching graphic effects using some of the authoring features in Macromedia Flash Professional 8 (Filters are not available in Flash Basic). By using the graphic filters and blend modes available in Flash, you can transform ordinary graphic objects into much more visually compelling content.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Open the starter document Now that you have seen the document you will create, it is time to create your own version of the document. The first thing to do is open the starter document, which contains the graphic objects you will use with the filter and blend features of Flash. 1. In Flash, select File > Open. 2. Browse to one of the following locations: o In Windows: Unit_5\Filters and Blends o On the Macintosh: Unit_5/Filters and Blends 3.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 10. This makes the 9ball instance appear larger than the 8ball instance on the Stage. 11. Reposition the 9ball instance so it slightly overlaps the right edge of the 8ball instance on the Stage. Apply a filter The next step is to apply a blur filter to the 9ball movie clip to make it appear out of focus, as if it is in the foreground of the Stage. 1. With the 9ball instance still selected, click the Filters tab in the Property inspector. 2.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 5. Enter the following values in the W, H, X, and Y text boxes: W: 105 H: 115 X: 95 Y: 105 6. With the CueBall instance still selected on the Stage, click the Filters tab in the Property inspector. 7. Click Add Filter and select Blur from the Filter pop-up menu. 8. Drag the BlurX slider until the BlurX and BlurY values are each 13. These text boxes are constrained to match each other by default. Click the lock icon if they are not. 9.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Programming Filters Working with filters using ActionScript The flash.filters package contains classes for the bitmap filter effects that are new in Flash Player 8. Filters let you use ActionScript to apply rich visual effects, such as blur, bevel, glow, and drop shadow, to text, movie clip, and button instances. You can also use the Flash authoring tool to apply filter effects to objects such as text, images, and video.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Importing From Fireworks Fireworks effects supported in Flash The following Fireworks effects are imported as modifiable filters by Flash: Fireworks Effect Flash Filter Drop shadow Drop shadow Solid shadow Drop shadow Inner shadow Drop shadow (with Inner shadow automatically selected) Blur Blur (where blurX = blurY=1) Blur more Blur (where blurX = blurY=1) Gaussian blur Blur Adjust color brightness Adjust color Adjust color contrast
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Flash ignores all other blending modes imported from Fireworks. The blending modes that are not supported in Flash are Average, Negation, Exclusion, Soft Light, Subtractive, Fuzzy Light, Color Dodge, and Color Burn. Using the New Easing In/Easing Out Controls A tween is the application of a change to a graphic object over a period of time.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Use One Setting for All Properties check box The default value for this is selected, which means that the displayed curve is used for all properties, and the Properties pop-up menu is disabled. When the check box is not selected, the Properties pop-up menu is enabled, and each property has a separate curve defining the velocity of that property.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 TIP: By default, the control points snap to a grid. You can turn off snapping by pressing the X key while dragging the control point. Clicking an area of the curve away from any control points adds a new control point to the curve at that point, without changing the shape of the curve. Clicking away from the curve and control points deselects the control point that is currently selected.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 To copy and paste an ease curve: y Copy the current ease curve by pressing Control+C (Windows) or Command+C (Macintosh) y Paste the copied curve into another ease curve by pressing Control+V (Windows) or Command+V (Macintosh) You can copy and paste the ease curve. The copied curve remains available until you exit the Flash application. Follow the Bouncing Text Well, let’s get rolling on our animated bouncing text effect.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Now you'll create the text for the animation. In the Tools panel, select the Text tool (T). 1. In the Properties panel, make sure that Static Text is selected. Select a bold font like Arial Black, but you can pick any font you like. Next, set the font size to 80 and set the text fill color to #FF0000 (Red). 2. Still in the Properties panel, change the Anti-alias option to Anti-Alias for animation.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Figure 3. Setting the Bevel Filter attributes in the Property inspector 1. Click the Add icon to expose the filter menu. Select the Bevel option. You can add additional effects to your objects. For this project, we’ll stick with just one. 2. Change the following Bevel attributes (See Figure 3.): y • Blur X: 3 • Blur Y: 3 • Quality: High • Distance: 2 Keep the other settings to their default values. 2.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Create the Motion Tween 1. In the tools panel, choose the Selection tool (V). In the Timeline double click the name “Layer 1” to rename it to Flash Text. 2. From the Library Panel, drag and instance of the gr_text symbol to the stage. At this point we have our symbol on frame 1. 3. Next let’s add a keyframe to frame 30. Select frame 30 on the Flash Text layer. From the Insert menu select (Insert > Timeline > Keyframe). Figure 5.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Figure 6. Modify the scale of the symbol in frame one 9. Test you movie by selecting the Control menu (Control > Test Movie). You will notice that in Flash 8 that now when you test your .swf file – a Flash Player window will appear. This will give you a better representation of your final output. 10. Close the test movie by clicking the close window button. Well, I have to admit that this animation is really nothing to write home about.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 14. Figure 7. The Custom Ease In / Ease Out dialog box 15. Click the Ease In/Ease Out line to add and edit node at Frame 10. 16. Take the new node and drag it up to a Teen value of 80%. This represents the completion value of the entire motion tween from frame 1 to frame 30. 17. Click the Ease In/Ease Out line to add a second edit node at Frame 20. 18. Take the new node and drag it down to a Teen value of 20%. (See Figure 8.) Figure 8.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Lab • Create your own Motion Tween and try the custom Easing In and Out features.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Unit 6: Text and Graphics Rendering Unit Objectives: After this unit, you will be able to: y Use the New Text Handles y Use the Various Text Anti-Alias Settings y Use Bitmap Smoothing y Understand How Bitmap Caching Works y Load new Graphic Formats Dynamically y Create a MovieClip with 9-Slice Scaling y Understand the ConvolutionFilter y Use Programmatic Bitmap Creation with ActionScript Unit Topics: y FlashType Overview y FlashTyp
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 FlashType Overview FlashType is a new text rendering engine that provides clear, high-quality text rendering both in the Flash authoring environment and in the published SWF files. FlashType greatly improves the readability of text, particularly when it is rendered at smaller font sizes. While FlashType is available in both Flash Basic and Flash Professional, the new custom anti-aliasing option is available only in Flash Professional.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 FlashType Anti-Alias Settings Anti-aliasing lets you smooth text so that the edges of characters displayed onscreen look less jagged. The anti-aliasing options makes text more readable by aligning text outlines along pixel boundaries and is particularly effective for more clearly rendering smaller font sizes. When antialiasing is enabled, all text in the current selection is affected.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Anti-Alias for Animation creates a smoother animation. This is possible in part because Flash ignores alignment and kerning information. Specifying Anti-Alias for Animation creates a larger SWF file, because font outlines are embedded. NOTE: Fonts rendered using Anti-Alias for Animation are less legible at smaller font sizes. for this reason, it is recommended that you use 10 point or larger type when specifying Anti-Alias for Animation.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Upgrading Flash 7 content to use Flash 8 anti-aliasing options When you open a FLA file created for use with Flash Player 7 or earlier, the text Property inspector sets the anti-alias option to its equivalent anti-aliasing option from Flash MX 2004. Text from older FLA files can be anything except for Anti-Alias for Readability and Custom Anti-Alias.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Using Bitmaps in Flash 8 Setting bitmap properties You can apply anti-aliasing to an imported bitmap to smooth the edges in the image. You can also select a compression option to reduce the bitmap file size and format the file for display on the web. To set bitmap properties: Select a bitmap in the Library panel. If you don’t have one – import one in. Do one of the following: Click the properties icon at the bottom of the Library panel.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 When to enable caching Enabling caching for a movie clip creates a surface, which has several advantages, such as helping complex vector animations to render fast. There are several scenarios in which you will want to enable caching. It might seem as though you will always want to enable caching to improve the performance of your SWF files; however, there are situations in which enabling caching does not improve performance, or even decrease it.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 You can also find a sample source file that shows you how to apply bitmap caching to scrolling text. Find the sample source file, flashtype.fla, in the Samples folder on your hard disk. • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\ActionScript\FlashType. • On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Samples/ActionScript/FlashType.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Bitmap caching lets you use a movie clip and "freeze" it in place automatically. If a region changes, Flash uses vector data to update the bitmap cache. This minimizes the number of redraws that Flash Player must perform, and provides smoother, faster playback performance. Only use runtime bitmap caching on static, complex movie clips in which the position, but not the content, of the movie clip changes on each frame in an animation.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Loading Graphics Dynamically Loading GIF, PNG and Progressive JPEGs To load a SWF or image file, use the loadMovie() or loadMovieNum() global function, the loadMovie() method of the MovieClip class, or the loadClip() method of the MovieClipLoader class. For more information on the loadClip() method, see MovieClipLoader.loadClip() in the ActionScript 2.0 Language Reference.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Using the New 9-Slice Scaling Feature You can use 9-slice scaling (Scale-9) to specify component-style scaling for movie clips. This lets you create movie clip symbols that scale appropriately for use as user interface components, as opposed to the type of scaling typically applied to graphics and design elements. The movie clip is conceptually divided into nine sections with a grid-like overlay, and each of the nine areas is scaled independently.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 You can see that even though the component resized, the Button's border and text label do not distort. The button's label remained centered and maintained its font size. Although components of version 2 of the Macromedia Component Architecture do not use 9slice scaling, components handle scaling in the version 2 component architecture so the outlines do not change size (as shown in the next figure).
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 This snippet of code traces the value of the Rectangle object being used by the scale9Grid property. The rectangle has a x and y coordinates of 20 pixels, a width of 120 pixels and a height of 120 pixels. Editing movie clip symbols with 9-slice scaling By default, slice guides are placed at 25% (or 1/4) of the symbol's width and height from the edge of the symbol.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 The slice-9 guides appear. 2. Move the pointer over any of the four guides in the workspace to change the pointer to the horizontal or vertical guide pointers that indicate that a drag operation will move the position of the guide. Drag and release the pointer. The new position of the guide is updated in the library preview for the symbol.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 import flash.display.BitmapData; this.createTextField("status_txt", 90, 0, 0, 100, 20); status_txt.selectable = false; status_txt.background = 0xFFFFFF; status_txt.autoSize = "left"; function onMouseMove() { status_txt._x = _xmouse; status_txt._y = _ymouse-20; updateAfterEvent(); } this.createEmptyMovieClip("img_mc", 10); img_mc.loadMovie("http://www.helpexamples.com/flash/images/image1 .jpg"); var noiseBmp:BitmapData = new BitmapData(Stage.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Using the Displacement Map Filter The DisplacementMapFilter class uses the pixel values from the specified BitmapData object (called the displacement map image) to perform a displacement of an instance that's on the Stage, such as a movie clip instance or a bitmap data instance. You can use this filter to achieve a warped or mottled effect on a specified instance. This filter is only available by using ActionScript.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 shapeClip.filters = [displacementMap]; }; Mouse.addListener(mouseListener); This code loads a JPEG image and places it on the Stage. After the image is completely loaded, this code creates a BitmapData instance and uses the perlinNoise() method to fill it with randomly placed pixels. The BitmapData instance passes to the displacement map filter, which is applied to the image and causes the image to look distorted. 3.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 To use the convolution filter to modify an image's color: 1. Create a new Flash document and save it as convolution.fla. 2. Add the following ActionScript to Frame 1 of the Timeline: import flash.filters.ConvolutionFilter; import flash.display.BitmapData; this.createEmptyMovieClip("shape_mc", 1); shape_mc.createEmptyMovieClip("holder_mc", 1); var imageLoader:MovieClipLoader = new MovieClipLoader(); imageLoader.loadClip("http://www.helpexamples.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Lab • Create some text, convert it into a symbol and apply a filter. • Animate the text and try the new ease in/ease out controls.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Unit 7: Using Video in Flash 8 Unit Objectives: After this unit, you will be able to: y Import Video with the New Video Encoder y Work with Alpha Channels y Batch Process Video y Use the New On2 VP6 Video Codec y Embed Cue Points y Build a Video Player in Flash 8 Unit Topics: y Video Improvements y Importing Video y Working with Alpha Channels y The New On2 VP6 Video Codec y Embedding Cue Points y Building a Flash Video Player
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Video improvements The list of improvements to video includes: • A new video codec (On2 VP6) for better quality video and smaller video file size • Improved video import wizard • Stand alone video encoder • Alpha channel support • Embedded cue points for triggering events from specific points in a video Comparing the On2 VP6 and Sorenson Spark video codecs The On2 VP6 codec is the default video codec to use when encoding FLV content for use
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 About encoding video Flash provides several video encoding solutions that let you encode your video clips into the FLV format. Flash Video Import wizard The Flash Video Import wizard lets you encode video clips into the Flash Video (FLV) format when you import them. However, the Video Import wizard has limitations in that you can only encode one video clip at a time, and the process of encoding can be both time- and computing-intensive.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Tips for creating Flash video How you compress your video is largely determined by the content of the video. A video clip of a talking head with little action and only short bursts of moderate motion compresses differently from footage of a soccer match.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Know progressive download times You should know how long it is going to take to download your video. While your video clip downloads, you might want to have other content that appears and "disguises" the download. For short clips, you can use the following formula: Pause = download time - play time + 10% of play time.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Flash 8 Video Encoder A new video encoder application is included with Flash Professional 8. It is a separate application that provides an easy way to convert video files into the Flash Video (FLV) format. The application also allows you to perform batch processing of video files. Selecting a video encoding profile Flash provides several preconfigured encoding profiles that you can use to encode your video.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Do one of the following: • Click Show Advanced Settings to further adjust the encoding settings, or to modify the video clip's size or playback length using the crop-and-trim controls. • Click Continue to encode the video. Specifying advanced encoding settings The Video Import wizard and the FLV QuickTime Export plug-in let you create your own video encoding settings to fine-tune the quality and download size of video clips.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 The Encode Video check box should be selected by default. If it is not, select it to activate the advanced encoding options. Select a video codec with which to encode your content from the Video codec pop-up menu. If you are authoring for Flash Player 6 or 7, choose the Sorenson Spark codec; if you are authoring for Flash Player 8, choose the On2 VP6 codec. Select a frame rate.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 NOTE: If you resize a video clip's frame size, and do not select the Maintain Aspect Ratio check box, the video may become distorted. • Specify values for Width and Height. You can specify a frame size in pixels or as a percentage of the original image size.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Embedding Cue Points Cue points cause the video playback to trigger other actions within the presentation. For example, you can create a Flash presentation that has video playing in one area of the screen while text and graphics appear in another area. A cue point placed in the video triggers an update to the text and graphic, letting them remain relevant to the content of the video. Each cue point consists of a name and the time at which it occurs.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 with a placeholder for the name of the new cue point, and the elapsed time and video frame at which the cue point is located (this is the time during playback when the event will be triggered). Flash Video Encoder also displays a pop-up menu that lets you select the type of cue point to embed. A cue point marker is displayed on the slider control at the point where the cue point was embedded.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Building a Video Player This tutorial guides you through the process of creating a simple video player by using some of the authoring features in Macromedia Flash 8. After it is created, you can deploy the video player in a web page.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 a. In Windows, browse to Unit_7\ cafe_townsend\completed files\flash and double-click video_pod_finished.swf. 3. The completed application runs in Flash Player. Click the playback controls at the bottom of the window to watch the video. 4. After viewing the application, close the Flash Player window. Open the authoring document It's helpful to look at the completed authoring FLA file to see how the author designed the application.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 3. Copy the cafe_townsend folder to your new folder. Encode a video file The first thing you will do is convert a QuickTime video file (MOV) to a Flash video file (FLV). To convert the video file: 1. Start the Flash Video Encoder application. 2. Drag the cafe_townsend_chef.mov file from the cafe_townsend folder onto the Flash Video Encoder application window. The Flash Video Encoder window 3. Click Settings. 4.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 5. Click OK to close the Settings dialog box. 6. Click Start Queue. The Flash Video Encoder converts the file and saves it in the same folder as the original cafe_townsend_chef.mov file. You are now ready to use the FLV file in a Flash document. 7. Close the Flash Video Encoder application. Create a new Flash document Now it’s time to create your own Flash document. Open a new document Now you're ready to create your own version of the FMA.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Document properties are properties that affect the entire Flash document. You can use the Property inspector to specify these settings. To define document properties: 1. If the Property inspector isn't open, select Window > Properties > Properties. 2. In the Property inspector, click Size. 3. In the Document Properties dialog box, enter the following values: o Width: 360 o Height: 240 4. Click OK. 5. Save your work.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 You use the Components panel to set the properties of the component. This tells Flash how you want the component to behave. For the FLVPlayback component, you will tell Flash the location of the FLV file you want to play, and how you want the playback controls to appear. To add a media component: 1. Select Window > Components to open the Components panel. 2.
Macromedia MAX 2005 - Anaheim, CA o What’s New In Flash 8 Y: 0 This makes the component the same size as the Stage and centers it on the Stage. The Property inspector with the proper values entered 5. With the new component still selected on the Stage, select Window > Component Inspector to open the Component inspector. 6. In the Component inspector's Parameters tab, click the contentPath parameter. 7. Click the magnifying glass icon that appears next to it. 8.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Flash saves a SWF version of your file and a simple HTML file in the cafe_townsend folder where you saved the video_pod.fla file. Flash also saves a SWF file called ClearOverPlaySeekMute.swf that contains the graphics for the video controller overlay that appears on top of the video. This SWF file must be located in the same folder as the video_pod.swf file in order for the video controls to appear when you play the SWF file. 2.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Lab • Examine the video in the Unit_7/video_spin folder. There’s a video with an alpha channel.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Unit 8: Mobile Phone Workflow Unit Objectives: After this unit, you will be able to: y Describe the new mobile phone features in Flash 8 y Set up a document for Flash Lite delivery y Build an application with common mobile device functionality y Use the Flash Lite emulator Unit Topics: y What’s New in Flash Lite y Workflow Authoring for Mobile Devices y Review the Café Application y Creating the Café Application y Previewing the Café
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 What's New in Flash Lite Authoring Flash Professional 8 includes the following new features to help developers create Flash Lite applications: Flash Lite emulator The Flash Lite emulator lets you preview your content as it will function on an actual device. The emulator can configure itself to mimic the features available on any supported device.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Walkthrough: Café Application Overview The café application's initial screen contains some introductory text about the restaurant and a menu listing two options: Specials and Reservations. The user selects a menu item by pressing the Up and Down arrows on their device to set the focus, and then pressing the Select key to confirm the selection.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 key (labeled Home). The cafe application's specials screen If the user selects the Reservations option on the main screen, the application initiates a phone call to the restaurant. Before Flash Lite dials the requested number, it always asks the user to confirm that they would like to make the call. Viewing the completed application A completed version of the café application is the Unit_8 folder.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Creating the Mobile Application This section contains step-by-step procedures that show you how to recreate the cafe application. The tutorial is divided into three parts: y Selecting your test devices and content types. In this section, you'll configure your Flash document's publish settings, document settings, and device settings. y Creating the menu for the application's main screen.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Click OK to close the Device Settings dialog box. Save the file as cafe_tutorial.fla, or another name of your choosing. Now that you've selected the test devices and content type, you're ready to start creating the application. In the next section, you'll create the menu for the application's main screen. Creating the Menu for the Main Screen In this section, you'll create the menu for the application's main screen.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Position the button beneath the text field (already in place) that introduces the restaurant. Drag an instance of the button symbol named Reservations to the Stage and position it below the Specials button, as the following image shows: Select the Specials button, and open the Actions panel (Window > Actions).
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 _focusRect = false; fscommand2("resetsoftkeys"); fscommand2("setquality", "high"); fscommand2("fullscreen", "true"); This code does the following: o Stops the playhead at this frame. o Disables the yellow focus rectangle that Flash Lite draws by default around the button or input text field with the current focus. o Resets the soft keys to their default state.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 Creating the Image Animation In this section you'll create the tweened animation that transitions between images of each special. When you've completed this section, the animation will play through without stopping. Later in the tutorial, you'll add navigation and ActionScript that lets the user control the animation with the device's Right soft key.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 6. On the Images layer, insert keyframes on Frames 20, 30, 40, and 50, as the following image shows: In the Timeline, select the keyframe on Frame 20. On the Stage, select the images movie clip, and set its y coordinate to -100 in the Property inspector. This moves the movie clip upward on the Stage 100 pixels. Select the keyframe on Frame 30 in the Timeline, select the images movie clip, and set its y coordinate to -200 in the Property inspector.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 To make sure the rectangle covers the entire image area, double-click the rectangle to select it, and then use the Property inspector to set its x and y coordinates both to 0, its width to 176, and its height to 100. Right-click (Windows) or Control-click (Macintosh) the Image Mask layer in the Timeline, and select Mask from the context menu. The layer is converted to a mask layer, indicated by a mask layer icon.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 To add text to display the names and descriptions of the specials: 1. In the Timeline, select Frame 10 on the Text layer. 2. In the Tools palette, select the Text tool and create a text field below the first masked specials image. 3. This text field will display the name of the special whose image is currently being displayed.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 With the text field selected on the Stage, make the following changes in the Property inspector: o Select Dynamic Text from the Text Type pop-up menu. o Select Multiline from the Line Type pop-up menu. o Select Verdana from the Font pop-up menu. o Set the font size to 10. o Select Bitmap (no anti-alias) from the Font Rendering Method pop-up menu. o Type description in the Var text box.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 On the Actions layer, select the keyframe on Frame 30 and enter the following code in the Actions panel: title = "Seared Salmon"; description = "Filet of wild salmon with caramelized onions, new potatoes, and caper and tomato salsa.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 In the Timeline, select the keyframe on Frame 10 on the layer named Key Catcher. From the Library, drag the Key Catcher button symbol and place it in the work area off the Stage. 1. The purpose of this button is to "catch" ActionScript keypress events initiated by the user, and then take the appropriate action.
Macromedia MAX 2005 - Anaheim, CA What’s New In Flash 8 LAB: Viewing a Video Game with Flash Lite Let’s try another application to see how the Flash Lite emulator handles the code. In this example, we are going to a simple video game. The Blocks Game is a classic Tetris or Minesweeper type of block game. The idea is to choose blocks that are surrounded and connected to blocks of a similar color.
