- Flash Guide 2006
- Welcome to the New Flash Reference Guide
- Flash Design Guide
- Introduction To Flash
- Working with the Authoring Tool
- Working with Templates
- FreeHand for the Power User
- Creating Animation with Fireworks
- Creating Animation in Flash
- Animating Text
- Working With Layers and Keyframes
- Working With Tweens
- Quickly Add Keyframes to Tweens
- Using Animation Paths
- Using Flash's Onion Skinning Tools
- Publishing Your Animation
- Preloading for Non-Programmers
- Drawing in Flash
- Using the Library
- Organizing Animations With Storyboards
- Working With Masks
- Making 2D Look 3D
- Working With Text
- Working With Input Text Fields
- Working With Dynamic Text
- Working with Text: Advanced Text Treatment With CSS
- Working With Text: Embedding Fonts
- Flash Interactive Developer Guide
- What is an Interactive Developer?
- Creating Flash Projects
- Using Form Applications
- Working with Form Components
- Setting up a Movie for Design and Animation
- Setting up a Movie for Programming
- Working with Components
- ActionScript Fundamentals
- Intro to Working With Arrays
- Understanding The Three Types of Arrays
- Control Data Stored in Arrays
- The Eolas Solution
- Intro to Flash Player 9
- Working with Strings
- Creating ActionScript Transitions
- Working with Boolean Objects in ActionScript
- Optimizing Delivery
- Working with Numbers in ActionScript
- Working with the Number Class
- Flash Professional 9 Preview
- Adobe Takes ActionScript Open Source
- Flash Rich Media Guide
- Pros and Cons of Flash 8 Video
- Using SMIL in Flash Video 8
- Stream an MP3 Audio File to Your Flash Movie
- Flash 8
- Introduction to Flash 8
- Advanced Text Rendering
- Using BitmapData Class in Your ActionScript
- The CacheAsBitmap Property
- Bitmap Rendering Improvements and Blend Modes
- Using The ExternalInterface Class
- Using Filters
- Downloading and Uploading Files with ActionScript
- Runtime Support for GIF and PNG Files
- Garbage Collection in Flash 8
- Using Enhanced Gradients
- Using Scale 9
- Stroke Enhancements in Flash 8
- Video Support in Flash 8
- How to Create a Slideshow
- Creating Dynamic Text in Flash
- Flash 3-D–Taking Flash to the Third Dimension!
- Object Collision Detection with Flash
- Create a Quiz With The Flash Quiz Template
- Working with Flash
- Uses for Flash
- Beyond Flash
- Flash Reference Guide
- Informit Articles and Sample Chapters
- Books
- Online Resources
- Blogs and Discussion
- Tools and Downloads
- Summary
- Flash MX Interface
- Welcome to Flash: the Designers' and Developers' Tool
- Using the Stage
- Panels, Panels Everywhere
- Using the Tools Pane
- Using the Property Inspector
- Using the Timeline Panel
- Using the Library
- Adding Interaction through the Actions Panel
- Integrating with Studio MX
- Saving and Publishing Flash Movies
- Informit Articles and Sample Chapters
- Books
- Online Resources
- Summary
- Drawing in Flash
- Shape Tools
- Applying Color
- Informit Articles and Sample Chapters
- Tools and Downloads
- Summary
- Flash Bitmaps
- Importing Bitmaps
- Exporting Bitmap Images
- Converting Bitmap Images to Vector Illustrations
- Informit Articles and Sample Chapters
- Online Resources
- Tools and Downloads
- Summary
- Flash Text and Text Fields
- Text Types
- Input Text
- Online Resources
- Tools and Downloads
- Summary
- Using the Library
- Library Organization
- Creating Instances
- Informit Articles and Sample Chapters
- Books
- Online Resources
- Summary
- Flash Animation
- Controlling Time
- Keyframe Animation
- Tweening
- Text Animation with Flash
- Informit Articles and Sample Chapters
- Books
- Online Resources
- Summary
- Flash Audio
- Using Audio in Flash
- Importing
- Linking to MP3
- Publishing Audio
- Streaming MP3 from the Flash Communication Server
- Informit Articles and Sample Chapters
- Online Resources
- Summary
- Video in Flash
- Video
- Flash Video
- Spark Codec
- Exporting Video
- Informit Articles and Sample Chapters
- Blog and Discussion
- Summary
- Flash Components
- Attaching Components to Movies
- Creating a Component
- Informit Articles and Sample Chapters
- Tools and Downloads
- Summary
- Exporting and Optimization
- Connecting Flash to the Internet
- Loading SWF Movies
- Sharing Fonts Between Movies
- Reusing Your ActionScripts
- Using Third-Party Tools
- Informit Articles and Sample Chapters
- Online Resources
- Tools and Downloads
- Summary
- Introduction to Design in Flash
- Introduction to Design
- Fundamental Design Concepts
- Breaking Up the Screen
- Branding
- Adding Forms to Movies
- Developing with ActionScript
- Introduction to Programming within Flash MX 2004
- Using ActionScript to Extend the Functionality of Flash
- ActionScript Fundamentals
- Using the Actions Panel
- Using the Reference Panel
- Rapidly Adding ActionScript with the Behaviors Panel
- Event Handling within ActionScript
- Timeline Events
- Triggering Events through User Interaction
- Flash MX 2004 Pro
- Summary
- Creating Interactive Movies
- Giving Users a Choice
- What it All Comes Down to
- Summary
- Testing your Flash Movies
- Naming Conventions
- Syntax Checker
- Testing your movies
- Summary
- Debugging
- Using the "Debugger"
- Reviewing ActionScript Error Codes
- Summary
- Using ActionScript to Control Your Movies
- Setting Up Your Movies for Interaction
- Making Movie Clips Behave Like Buttons
- Controlling Multiple Movie Clips
- Applying Different Types of Events to a Movie Clip
- Summary
- Using ActionScript to Control Text
- How ActionScript Can Control Text
- Using Cascading Style Sheets within Flash MX 2004 Dynamic Text Boxes
- Applying CSS formatting with ActionScript
- Where Do You Go Now?
- The Differences Between ActionScript 1 and ActionScript 2
- Working with Classes
- Which Version of the Flash Player should you use?
- What’s Next?
- Using Pre-Built Classes In Flash MX 2004
- Using a Class in ActionScript
- The List of Core Classes
- Flash Player-Specific Classes
- Summary
- Creating Your Own Classes
- Creating a Custom Class
- Working with External Data in Flash
- Why Use XML in Flash?
- Integrating Flash and XML
- Visual Elements
- Adding the ActionScript
- Future Shock
- Using Components
- Begin Using Components
- Building an Application with Components
- Gluing Components Together with ActionScript
- Summary
- Informit Articles and Sample Chapters
- Books and e-Books
- Online Resources
- Rich Internet Applications
- Introduction to Rich Internet Applications
- Why Use Flash for Building Application Solutions?
- Building Applications with Flash
- Getting Started
- Using Flash Variables
- Working with Parameters in the Object and Embed HTML Tags
- Linking data with Flashvars
- Getting Data Into Flash: Loading External SWF and JPG Files
- Why You Should Separate Your Files
- Loading Movies into Levels and Target Movie Clips
- Summary
- Loading SWF and JPG Images
- Working With XML: What is XML, and How Does it Relate to Flash?
- A Brief History of XML
- Why Structuring Your Data is Always a Good Thing
- How XML Came to Flash
- Summary
- Working with XML: Good XML vs. Bad XML
- Good Places to Start
- Writing Good XML
- XML Tools
- The Next Step - Using XML in your Flash Applications
- Working with XML: Loading XML into Flash
- Integrating Flash and XML
- Visual Elements
- ActionScript
- Future Shock
- Working with XML — Dynamically Building XML with .NET, ColdFusion, Java, and PHP
- ColdFusion
- .NET
- Java
- PHP
- Summary
- Working with XML — Web Services
- SOAP Support in Flash MX 2004
- Using Components to Bind Web Services into your Applications
- Summary
- Working with Data — Working with XML
- XML In Flash
- Writing XML In Flash
- Building Trees of Data with XML
- Working with Data: Pushing Data back to the Server with Load Vars
- Setting up the Database
- Writing the VB.NET Code
- Creating the Flash Movie
- Working with Data: Leveraging Persistent Connections
- Using XMLSocket Connections
- XMLSocket Server
- XMLSocket Security
- XMLSocket Class in Flash
- Creating a Pong Game with an XMLSocket Server
- Summary
- Flash Remoting
- What is Flash Remoting?
- Using Flash Remoting
- The Future of Flash Remoting
- Flash Remoting Links
- Working with Data: Macromedia Flex Presentation Server
- What Problem Does Flex Presentation Server Address?
- How does Flex work?
- Coding and Building Flex Applications
- Building Rich Internet Applications: Connecting Flash to a Database
- Using FlashVars
- Using LoadVars
- Loading XML
- Consuming a Web Service
- Live data connections with XMLSocket Connections
- Building Rich Internet Applications: Planning, Planning, Planning
- A Simple Plan
- Tools You Can Use
- Applying a Discipline
- Building Rich Internet Applications: Design Counts
- Do Not Be Afraid to Ask For Help
- What if You Do Not Have a Ben To Call
- Building Rich Internet Applications: Beyond the Movie Clip
- UI Components
- Data Components
- Media Components
- Manager Components
- Screen Components
- Building Rich Internet Applications: Using Macromedia Central
- What Central is All About
- Who is Using Central?
- Developing for Macromedia Central
- Next Steps You Need to Take
- Building Rich Internet Applications: Using Macromedia Flex
- Authoring with Flex
- Publishing with Flex
- Presenting the Solution: Delivering Flash Applications to the Web
- Flash's own Publishing Tools
- Using Dreamweaver
- Writing your Own HTML
- Presenting the Solution: Delivering Flash Over Non-PC Devices
- Using Macromedia's Flash Lite
- Programming for Flash Lite
- FlashCast
- Informit Articles and Sample Chapters
- Books and e-Books
- Flash for Designers: Rich Media Production
- Graphic Control in Flash
- Drawing in Flash
- Importing Vector Art
- Importing Raster
- Scripting Images
- Introduction to the Rich Media Production
- Using Video, Audio and Images in your Flash Movies
- Using SWF Flash Movies
- Using JPEG Images
- MP3 Sound Files
- Flash Video
- Using Components to Build Rich Media Solutions
- Using the Loader Component
- Using the Media Components
- Controlling Components with ActionScript
- Controlling the Loader Component
- Media Components
- Using Audio in Flash
- Linking to MP3
- ActionScript-Controlled Audio
- Volume Control
- Publishing Audio
- Summary
- Video in Flash
- Working with Video
- Controlling Video with Components
- Exporting Video
- Summary
- Choosing Which Version of Flash Communication Server to Use
- Server Requirements
- Installation
- Running Communication Server on Different OS Platforms
- Pitfalls to Watch for
- Summary
- Streaming Video
- Live Video
- Broadcast Video on Demand
- Flash Video Components
- The Communication Server MX Server Code for the VideoPlayBack Component
- Record Video with VideoRecord Communication Component
- Create A Video Conference
- Examining the VideoConferencing Component
- The Communication Server MX Server Code for the VideoConferencing Component
- Summary
- Using the Microphone and Camera Core Classes
- Microphone
- Camera
- Constructing Large Applications That Leverage Video and Audio
- Configuring the Server
- Creating the Movie
- Broadcasting
- Summary
- Informit Articles and Sample Chapters
- Books and e-Books
- Matthew's Predictions for 2006
- Matthew's Favorite Flash Books
- Matthew's Favorite Flash Web Resources
- Macromedia as Part of Adobe
- First Look: Flash Player 8
- First, the Facts
- What Macromedia Brings to the Table
- What Adobe Brings to the Table
- What the Two Companies Can Do for Each Other
- A Brief History of Flash
For years, developers and designers have been hounding Macromedia to include filter support in Flash because filters make it so easy to add drop shadows and other visual effects. Well, the Flash community can finally call off the dogs. I am delighted to tell you that Flash 8 now supports filters.
Before There Were Filters
In the past, it was a royal pain to add simple effects such as drop shadows. The only way to do it was to import a bitmap, which meant increased file sizes and limited editing abilities. The following image shows a drop shadow added to a bitmap in Fireworks:
In the past, you would have had to import this image into Flash, adding an extra 4K to your Flash movie. In Flash 8, however, any text or movie clip can have filters applied. The Property Inspector now supports an extra Filters tab, which you can see in the following image.
As you can see in the above image, Drop Shadow is now one of the visual filter effects you can add. The following image shows the same text with the same filter properties as the bitmap image in a Flash image.
Now, the image is both a vector image and you have eliminated the extra burden of importing graphics. The total file is now only 786 bytes.
As you might expect, you can access the new filters through ActionScript. The following example takes the text above and animates the shadow.
import flash.filters.DropShadowFilter; var newNumber:Number = 0 function myTimer():Void { newNumber = ++newNumber; var distance:Number = 20; var angleInDegrees:Number = newNumber; var color:Number = 0x000000; var alpha:Number = .8; var blurX:Number = 16; var blurY:Number = 16; var strength:Number = 1; var quality:Number = 3; var inner:Boolean = false; var knockout:Boolean = false; var hideObject:Boolean = false; var filter:DropShadowFilter = new DropShadowFilter( distance, angleInDegrees, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject); var filterArray:Array = new Array(); filterArray.push(filter); txt.filters = filterArray; } var intervalID:Number = setInterval(myTimer, 25);
The ActionScript allows the shadow to move around the text. To duplicate this with bitmap images would add nearly 1.5MB to the final Flash movie. The ActionScript has increased the final movie to 1Kb. That is a file saving in excess of 1,000%.
Exploring Filters in Flash 8
You will not find a massive collection of filters in Flash 8. What you will find are the core filters essential for most drawing. The included filters are:
- Drop Shadow
- Blur
- Glow
- Bevel
- Gradient Glow
- Gradient Bevel
- Adjust Color
You can include one or more filters on any one movie clip. Each filter comes with its own set of parameters, which can be adjusted directly in the Flash 8 Authoring tool in the Properties Inspector or programmatically through ActionScript.
Drop Shadow
The Drop Shadow filter, which has always been one of my favorites, allows you to control the following parameters:
- distance: pixel distance for drop shadow (floating point)
- angle: angle in degrees of shadow (floating point) (file format is radians) (0 to 360 range)
- color: 0x00RRGGBB - color
- alpha: alpha percentage for our drop shadow color (0.0 to 1.0 range)
- blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
- blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
- strength: punch strength of the shadow (0.0 to 255.0 while 1.0 is normal value)
- quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0 to 15 range)
- inner: true/false - is this an inner shadow
- knockout: true/false - is this a knockout shadow
This is what the filter looks like on the sample text:
Blur
Blue softens your image's edges. The Blur filter comes with the following parameters you can control:
- blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
- blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
- quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0-15)
This is what the filter looks like on the sample text:
Glow
You can now add a glow to your movie clips. The Glow filter comes with the following parameters you can control:
- color: 0x00RRGGBB - color
- alpha: alpha percentage for color (0.0 to 1.0 range)
- blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
- blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
- strength: punch strength of the glow (0.0 to 255.0 while 1.0 is normal value)
- quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0 to 15 range)
- inner: true/false - is this an inner glow
- knockout: true/false - is this an knockout glow
This is what the filter looks like on the sample text:
Bevel
You can now also add bevels—like those used on a lot of buttons—to your Flash movies. The Bevel filter comes with the following parameters you can control:
- distance: pixel distance for bevel (floating point)
- angle: angle in degrees of bevel (floating point) (file format is radians) (0 to 360 range)
- highlightColor: 0x00RRGGBB - 1st color
- highlightAlpha: alpha percentage for highlightColor (0.0 to 1.0 range)
- shadowColor: 0x00RRGGBB - 2nd color
- shadowAlpha: alpha percentage for shadowColor (0.0 to 1.0 range)
- blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
- blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
- strength: punch strength of the bevel (0.0 to 255.0 while 1.0 is normal value)
- quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0 to 15 range)
- type: "inner", "outer" or "full"
- knockout: true/false - is this a knockout bevel
This is what the filter looks like on the sample text:
Gradient Glow
Gradient Glow applies a glow that uses a gradient within it. The Gradient Glow filter comes with the following parameters you can control:
- color: 0x00RRGGBB - color
- alpha: alpha percentage for color (0.0 to 1.0 range)
- blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
- blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
- strength: punch strength of the glow (0.0 to 255.0 while 1.0 is normal value)
- quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0 to 15 range)
- inner: true/false - is this an inner glow
- knockout: true/false - is this an knockout glow
- ratios: an array of ratios to define a gradient. Same format as for gradient fill drawing API.
This is what the filter looks like on the sample text:
Gradient Bevel
The Gradient Bevel filter applies a bevel that uses a gradient within it. The Gradient Bevel filter comes with the following parameters you can control:
- distance: pixel distance for bevel (floating point)
- angle: angle in degrees of bevel (floating point) (file format is radians) (0 to 360 range)
- highlightColor: 0x00RRGGBB - 1st color
- highlightAlpha: alpha percentage for highlightColor (0.0 to 1.0 range)
- shadowColor: 0x00RRGGBB - 2nd color
- shadowAlpha: alpha percentage for shadowColor (0.0 to 1.0 range)
- blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
- blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
- strength: punch strength of the bevel (0.0 to 255.0 while 1.0 is normal value)
- quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0 to 15 range)
- type: "inner," "outer," or "full"
- knockout: true/false - is this a knockout bevel
- ratios: an array of ratios to define a gradient. Same format as for gradient fill drawing API.
This is what the filter looks like on the sample text:
Adjust Color
You can exert precise color control over your movies with the Adjust Color filter. The Adjust Color filter comes with the following parameters you can control:
- mapImage: an BitmapData object containing the displacement map data.
- mapPt: a flash.geom.Point value that contains the offset of the upper left corner of our MovieClip to the upper left corner of our map image.
- componentX: one of the following values - "R," "G," "B," or "A" - describes which color channel to use in the map image to displace x result
- componentY: one of the following values - "R," "G," "B," "A" - describes which color channel to use in the map image to displace x result
- scaleX: multiplier to use to scale displacement result from map calculation
- scaleY: multiplier to use to scale displacement result from map calculation
- mode: one of the following values:
- "wrap" - wrap our displacement value to other side of source image
- "clamp" - clamp our displacement value to edge of source image
- "color" - if displacement value is outside image, substitute (defaultColor, defaultValue) value
- "ignore" - if displacement value is outside of range, ignore displacement and use source pixel
- color: if mode is "color," what color to use for out of bounds displacements
- alpha: if mode is "color," what alpha to use for out of bounds displacements (range 0.0-1.0)
This is what the filter looks like on the sample text:
Summary
I've only just touched on what you can do with filters in this section of the guide. There is plenty of room for you to experiment with this cool and space-saving feature.