Flash + After Effects: Add Broadcast Features to Your Flash Designs / Edition 2

Paperback (Print)
Buy Used
Buy Used from BN.com
$31.15
(Save 41%)
Item is in good condition but packaging may have signs of shelf wear/aging or torn packaging.
Condition: Used – Good details
Used and New from Other Sellers
Used and New from Other Sellers
from $12.05
Usually ships in 1-2 business days
(Save 77%)
Other sellers (Paperback)
  • All (13) from $12.05   
  • New (6) from $31.88   
  • Used (7) from $12.05   

Overview

Flash Designers: push Flash to the next level with After Effects' robust toolset. CS5 delivers more complete integration of these two powerhouse applications-so you can expand your multimedia horizons. Flash + After Effects gives you a working understanding of the AE toolset and professional techniques that raise the design bar for web, HD broadcast, or CD/DVD delivery. The companion web site contains project media for hands-on practice of essential production skills, including:

Read More Show Less

Editorial Reviews

From the Publisher
Praise for the first edition: "The definitive guide for Flash designers and artists. Not only does he cover the nuts and bolts of combining these programs in practical and efficient ways, but the examples he uses are wonderfully designed. This is a book I will keep within easy reach in my studio." -Chris Georgenes, Mudbubble LLC, animator and author of How to Cheat in Flash CS3
Read More Show Less

Product Details

  • ISBN-13: 9780240813516
  • Publisher: Taylor & Francis
  • Publication date: 8/29/2010
  • Edition number: 2
  • Pages: 312
  • Sales rank: 1,192,095
  • Product dimensions: 7.40 (w) x 9.60 (h) x 0.80 (d)

Meet the Author

Chris Jackson is an author, computer graphics designer, and tenured professor at the Rochester Institute of Technology (RIT). He teaches a variety of graduate-level courses and professional workshops focusing on 2D computer animation, 3D digital imaging, instructional multimedia, and motion graphics. He is a multimedia consultant for Fortune 500 companies and national museums. Chris' professional design work has received over 25 distinguished national and international awards for online communication. He has presented his research and professional work at Adobe MAX, ACM SIGGRAPH, UCDA Design Education Summit, and the Society for Technical Communications (STC). Chris is the author of Flash + After Effects and Flash Cinematic Techniques: Animating and Building Interactive Stories, and co-author of Flash 3D: Animation, Interactivity, and Games.

Read More Show Less

Read an Excerpt

FLASH + AFTER EFFECTS

Add Broadcast Features to Your Flash Designs
By Chris Jackson

Focal Press

Copyright © 2010 ELSEVIER INC.
All right reserved.

ISBN: 978-0-240-81352-3


Chapter One

Getting Started in After Effects

As your journey towards integrating Flash and After Effects begins, you first need to understand the similarities and differences between the two applications. This chapter introduces After Effects and compares its project workflow to Flash.

* Project Workflow 2

* Creating a Project 4

* Setting Keyframes 13

* Applying Effects 28

* Rendering a Project 33

Project Workflow

Flash and After Effects follow a similar project workflow (Figure 1.1). You start a project by defining what the end product will be. Once you have a clear goal in mind, storyboard and create your assets. Next, you import and arrange the media elements on layers within a timeline. Once everything is in place, you add complexity to the project through either animation or programming. After previewing and refining the project to meet its output goals, you publish the project for its intended destination.

Both Flash and After Effects allow you to import and layer raster and vector images, digital video, and sound. However, when it comes to adding complexity to a project, the two applications differ. Some of these differences are dramatic while others may not seem so obvious.

One major difference is interactivity. Flash has its own native scripting language called ActionScript. ActionScript allows you to create nonlinear interactive content for DVD, CD-ROM, and the web. After Effects provides a JavaScript-based scripting language used for automating animation, not interactivity. It 2 can only render out linear content in the form of a Flash animation, image sequence, digital video, or sound.

Another difference between Flash and After Effects is output. Typically a Flash project is vector-based and is published for the web. Vector art uses math to store and create an image. This makes the artwork resolution-independent. It can be scaled without losing any detail. As a result, vector-based artwork produces rather small file sizes that are ideal for web delivery.

After Effects focuses primarily on pixels, not vectors. These tiny units of color are grouped together to form an image (Figure 1.2). The resulting images tend to be photorealistic and larger in file size. A pixel-based, or raster, image is resolution-dependent. If scaled too large, the pixel grid becomes noticeable. 2 A project in After Effects is usually designed to render out large video files destined for film or broadcast television.

Over the past few years, there has been an exciting evolution in Flash and in the way it handles video content. With each new release, Flash is incorporating more enhanced video playback options and controls. After Effects has also evolved to add cross-compatibility with Flash. After Effects includes the ability to import SWF files with transparent backgrounds and export Flash Video (F4V or FLV formats), editable layered Flash XFL files, and published SWF files.

Flash and After Effects users are discovering the creative potential in combining these two powerhouse applications. It is truly exciting to explore and unlock the artistic possibilities that both applications offer each other. That is what this book is about. You are the explorer and the book provides a road map. It opens the door for you, the Flash designer, in adding broadcast features to your Flash designs. Each chapter explores how to unleash your Flash creativity by learning about After Effects.

So as Flash designers, where does one start in After Effects? You begin by exploring the structure of its user interface, referred to as the workspace. So let's dive in and get an overview of how After Effects works.

Creating a Project

In this chapter, you will build a typical After Effects project. The exercises are broken into four steps: creating a new composition using imported media, animating layer properties, applying effects, and rendering out your final composition. As you proceed through each exercise, comparisons will be 2 made between Flash and After Effects.

Download (http://booksite.focalpress.com/companion/jackson) the Chapter_01.zip file to your hard drive. It contains all the files needed to complete the exercises.

To see what you will build, locate and play the DeepBlueTitle.mov in the Completed folder inside Chapter_01. The goal of this project is to provide an overview on how to assemble a project in After Effects. It is a step-by-step tutorial that introduces you to After Effects, its workspace and workflow.

Exercise 1: Creating a New Project

All your work in After Effects begins with a project file. This file references the imported files and holds the compositions created using those files. When you finish this first exercise, you should know what the Project, Composition, and Timeline panels are and how they work together. In addition to that, you'll know how to import media elements and save your project.

1. Launch Adobe After Effects. It opens an empty project by default.

Whereas Flash can open multiple movies, only one project in After Effects can be opened at a time. This is a key concept to understand. If you try to open another project or create a new project within After Effects, After Effects will close down the current project you are working on.

2. The graphical user interface, referred to as the "workspace," can be configured in many ways. To make sure that you are using the same configuration as the book, locate the Workspace popup menu in the upper right corner. Select Standard. "Reset Standard" restores the workspace to its original arrangement.

The Workspace

The workspace is divided into several regions called frames. The frames consist of docked panels to reduce screen clutter (Figure 1.5). Most of the work done in After Effects revolves around three panels: the Project, Composition, and Timeline panel. If you were to compare these three panels to Flash's workspace, they are similar to the Library, Stage, and Timeline respectively.

Project files in After Effects are similar to FLA files in Flash. Projects are made up of compositions. A composition in After Effects is like a movie clip in Flash. Each composition contains its own timeline. Even though After Effects can only open one project file at a time, there can be multiple compositions within the project. You create compositions from various imported files referred to as footage. Footage can be still images, Flash SWF files, digital video clips and audio.

3. This exercise has several footage files linked to it. To import the footage into After Effects, select File > Import > Multiple Files (Figure 1.6).

4. Within the Import Multiple Files dialog box, locate and open the 01_Footage folder inside the Chapter_01 folder you copied to your hard drive (Figure 1.7).

* Select the Adobe Photoshop file named DeepBlueScene.psd.

* Choose Composition from the Import As menu options.

* Click Open.

5. Importing the footage as a composition retains the layer structure within the Photoshop file. Each Photoshop layer is imported as a separate piece of footage (Figure 1.8). A dialog box appears requesting additional input on how you want the layered Photoshop file to be imported. Click OK.

6. Within the Import Multiple Files dialog box, select the Adobe Illustrator file named DeepBlueTitle.ai. Choose Import As > Composition. Click Open.

7. Select the Fish.ai Adobe Illustrator File. This file contains only one layer. Instead of importing as a composition, choose Import As > Footage. Click Open.

8. Select the Fractal Noise.mov QuickTime File. Choose Import As > Footage. Click Open.

9. Select the SeaTurtle.swf Adobe Flash SWF File. Choose Import As > Footage. Click Open.

10. Click Done to close the Import Multiple Files dialog box (Figure 1.9).

There are many ways to import footage into After Effects. The keyboard shortcut to import footage is Command + i (Mac) or Control + i (Windows). You can also use Adobe Bridge or drag files from the desktop into After Effects. Another import timesaver is to double-click inside the Project panel.

The Project Panel

The Project panel in After Effects acts a lot like the Library in Flash. It displays imported footage and stores the compositions created with these files. When you select an item, a thumbnail image appears at the top of the Project panel along with information about the selected footage. Buttons along the bottom 2 of the panel allow you to search for footage, organize files into folders, create new compositions, and delete selected items (Figure 1.10).

Unlike Flash, footage imported into After Effects is NOT embedded within the project. These files are always linked to the folder they were imported from. If you delete, rename, or change the location of your files after they were imported, After Effects will lose the link and not be able to properly display the footage.

11. Good organizational skills are essential to creating projects in After Effects. 2 Let's organize the Project panel a little better by creating a new "Comps" 2 folder that will only contain compositions. To do this:

* Deselect any selected item in the Project panel by clicking on the 2 gray area under the footage.

* Click on the New Folder icon at the bottom of the Project panel.

* Rename the new folder Comps.

* You can rename any folder at any time by selecting it and pressing 2 the Return/Enter key on the keyboard. This highlights the name and 2 allows you to rename the item (Figure 1.11).

12. Click and drag the two compositions (DeepBlueScene and DeepBlueTitle) into the new Comps folder (Figure 1.12).

As projects become more complex, the Project panel can get quite cluttered. It is not uncommon to have hundreds of footage files. Get into the habit of organizing your footage into separate folders.

To animate or apply an effect to the footage, you first must create a new composition. A composition is a container that holds layers of footage. These layers are manipulated within the space and time defined by the composition.

Compositions act like movie clips in Flash. Compositions are independent timelines. You can have as many compositions as you want within a project. Each composition contains its own unique timeline just like movie clips in Flash.

13. Select the Comps folder in the Project panel. Select Composition > New Composition. Make the following settings (Figure 1.13):

* Composition Name: DeepBlue_FINAL

* Width: 720

* Height: 480

* Pixel Aspect Ratio: Square Pixels

* Frame Rate: 29.97

* Resolution: Full

* Duration: 0:00:05:00

Click OK. The new composition opens with a black screen in the Composition panel. The Timeline opens a tab. These two panels work closely together.

The Composition Panel

The Composition panel (referred to as the Comp panel) acts like the Stage in Flash. You use it to compose, preview, and edit your project. Buttons along the bottom of the Comp panel include controls for magnification, viewing color channels, displaying the current frame, and adjusting the resolution.

The Timeline Panel

The Timeline shows how the structure of your composition is built. The panel is divided into two sections. The right section is the actual Timeline where each layer's starting and stopping points, duration, and keyframes are displayed. The left section of the Timeline panel is broken up into a series of columns and switches. These affect how the layers are composited together (Figure 1.15).

As the Timeline becomes more populated and complex, you may want to zoom in or out. Use the Zoom slider at the bottom of the Timeline panel (Figure 1.16).

14. Click and drag the DeepBlueScene Layers folder from the Project panel to the left side of the Timeline. Release the mouse. Three layers appear in the Timeline and the Comp panel displays the underwater scene (Figure 1.15).

15. Click and drag the DeepBlueTitle Layers folder from the Project panel to the Timeline. Position it above the grass/DeepBlueScene layer. Release the mouse. Two Illustrator layers are added to the Timeline (Figure 1.17).

16. Click and drag the Fish.ai file from the Project panel to the Timeline. Position it at the top of the layers in the Timeline.

17. Click and drag the SeaTurtle.swf file from the Project panel to the Timeline. Position it at the top of the Timeline. Your Comp panel should look like 2 Figure 1.18.

18. Your first project is well on its way. Before you do anything else, save your project. Select File > Save. The keyboard shortcut is Command + s (Mac) or Control + s (Windows). This opens the Save As dialog box.

19. Name your file 01_DeepBlueTitle and save it in your Chapter_01 folder on your hard drive. Click Save. The file has an .aep file extension. This stands for After Effects Project (AEP). The saved file is not meant to be a standalone file such as a Flash projector. An AEP file is only read by After Effects.

Let's do a quick review. The three primary panels you used in this exercise include the Project, Composition, and Timeline. You created a new project, imported footage into the Project panel, and built a new composition using 2 the imported items. Now it's time to learn how to bring this project to life.

After you create a composition, the remaining amount of work takes place 2 in both the Composition and Timeline panels. The Comp panel works in conjunction with the Timeline panel. Any changes made to layers within 2 the Timeline will be reflected visually within the Comp panel.

You will continue to build on this project using the Comp panel to position 2 and move your artwork around. The next exercise focuses heavily on the Timeline panel, where you will set keyframes for your animation and navigate through time. The animation process in After Effects is rather different than animating in Flash. This is where the fun really begins.

Setting Keyframes

Although Flash and After Effects allow you to create keyframe animation, each application handles time rather differently. Flash is a frame-based application, whereas After Effects is time-based. This is an important difference you need to understand as you proceed through this book. To visualize this difference, take a quick comparative look at each application's Timeline.

Flash works with objects and frames. Figure 1.20 shows the Flash Timeline that has one layer named Object. The layer contains an instance of a movie clip with two keyframes and a motion tween applied. The actual Timeline is divided into cells and the unit of measurement is frames. As we see in the Timeline, the Flash movie is set to 24 frames per second. A keyframe at frame marker 24 indicates that this is a one-second animation.

Flash CS4 introduced auto-keyframing and a motion editor. These new features provide the ability to animate each property of an object separately from one another. The Motion Editor panel (Figure 1.21) allows you to fine-tune every object's property such as position, rotation, scaling, color, and filters using a motion graph or by applying preset or custom easing controls. This is similar 2 to how After Effects creates and modifies keyframed animation.

After Effects also deals with properties. Figure 1.22 shows the Timeline in After Effects. Here we have a similar object layer with only the position property keyframed. Each layer in After Effects has transform properties associated with it. These include Anchor Point, Position, Scale, Rotation, and Opacity.

The Timeline displays no individual cells and the unit of measurement indicates seconds. The output delivered is referred to as time-based media. This means that the media content changes with respect to time.

Exercise 2: Setting Keyframes

After Effects stacks layers in the same order as Flash. Layers that are higher in the Timeline panel will appear in front of lower layers in the Comp panel. Just like Flash, you can place or move a layer anywhere in the stacking order.

1. Select the Fish.ai layer in the Timeline panel. Drag it underneath the grass/ DeepBlueScene layer. Release the mouse (Figure 1.23).

2. Before you set keyframes, let's compose some items in the Comp panel:

* Click and drag the Fish artwork in the Comp panel down to the bottom right corner. Notice that the fish are behind the seaweed.

* Click and drag the Sea Turtle in the Comp panel to the upper left corner (Figure 1.24).

You can drag the footage to the Comp panel. This allows you to place it in 2 the Comp panel where you want. You can also drag the footage to the Timeline where it automatically centers in the Comp panel.

There is one important difference between the Comp panel and the Flash Stage. After Effects will only display pixel information for footage contained within the Composition image area, referred to as the Comp panel. Any item that falls outside the Comp panel is displayed as an outlined bounding box.

3. Lock the grass, rocks, and water layers in the Timeline panel. This will prevent you from accidentally moving them when animating other layers. The first grouping of switches in the Timeline panel are the A/V Features (Figure 1.25).

* Click on the empty box in the fourth column next to each layer 2 you need to lock.

* These switches should look familiar to Photoshop users. They are 2 toggle switches; they are either on or off.

(Continues...)



Excerpted from FLASH + AFTER EFFECTS by Chris Jackson Copyright © 2010 by ELSEVIER INC. . Excerpted by permission of Focal Press. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Read More Show Less

Table of Contents

Part I: Bridging Flash and After Effects: Getting Started in After Effects; From Flash to After Effects; From After Effects to Flash; Part II: Enhancing Flash Through After Effects: Alpha Channels; Motion Graphics; The Third Dimension; Character Animation; Visual Effects; Shapes and Sounds; Expressions and ActionScript; Part III: Publishing: Optimization and Rendering

Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star

(0)

4 Star

(0)

3 Star

(0)

2 Star

(0)

1 Star

(0)

Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation

Reminder:

  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

 
Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously

    If you find inappropriate content, please report it to Barnes & Noble
    Why is this product inappropriate?
    Comments (optional)