A Flash Developer Resource Site














Internet Commerce

Partners & Affiliates














Developer Channel

internet.com


Featured Flash FLA
Gallery Downloads 11255 Flash Movies | 9 New Flash Movies Added
What's New | Top 100

Featured FLA

» Author: Knife Butterfly
» Title: SkullCandle
» Description: Simple Skull with a candle burning on it.
» More by Knife Butterfly


Random FLAs | Add Flash Movie
Featured Flash Site
Gallery Downloads 6392 Flash Sites | 0 New Flash Links
What's New | Top 100 Flash Site

Featured Site

» Posted in the Flash Kit Links section
» Title: Cesar Kobashikawa - online portfolio
» Comments: Cesar Kobashikawa's Portfolio


Random Links | Add your own Flash Related Links
Flash Tutorials 1201 Tutorials 7 New Tutorials Added!
What's New | Top100

» FLV Converter for Mac
» After Effects Quality Effect using AS3
» FLV to 3GP: Convert video files from FLV (Flash Video) to 3GP for Mac
» create Christmas business flash presentation with hyperlinks
» Let Photos Show Your Happy Family this Christmas and Upload YouTube
» PowerPoint show to DVD slide show--- PPS to DVD
» How to burn FLV to DVD for Mac
» How to Create Christmas Flash Greeting Ecard with photos and music
» Getting Started In Flash
» Unknown Tag: Title10
Random Tutorial | Add Site

bbm.netBBM.net is designed to save you time and deliver the highest quality royalty-free music for your multimedia projects. Features include: over 450 Music Loop Packages from some of the best composers in the business, our music search engine to speed your selection process, alternate music versions & bonus sounds to use for rollovers or transitions, free technical support and free consulting.

Click here for details »

Web Page Production
Aquent
US-MD-Owings Mills

Justtechjobs.com Post A Job | Post A Resume


Tutorials Home What's New Top Rated Submit myTutes Random!

Search Tutorials


Tutorials Tutorials » Animation/Films

Categories Using Flash for video animation
Author: Harry Thomas | Website: http://www.saphotodj.com |

 
Page 1
1

Using Flash for video animation

Using Flash for video animation

Assumption: that you know how to create simple, non-interactive Flash animations, such as the "Ray of Light" text or cartooning animations. If not, there are plenty of good tutorials and volumes of books already published on those subjects. This also assumes you have a suitable video editing program, of which a wide range are available. Part 1 is applicable to any video editing program; Part 2 requires a video editor of higher quality, such as Sonic Foundry's Vegas Video, Adobe's Premiere, or Apple's Final Cut Pro that is capable of chromakeying.

This tutorial is divided into two parts; exporting a simple animation into a format such as Windows AVI or QuickTime Video; and creating animations that overlay other video sources, such as titling and cartoon effects over photographic backgrounds. These options rasterize the vector format of Flash, so all interactivity is lost. So forget those fancy interactive buttons and effects - this is straightforward animation. Also be advised that rasterizing tends to make letters look 'jagged,' so be sure to use those fonts at larger sizes. In the same vein, smaller objects tend to get lost, so make everything as large as possible. And this is one time you can't worry about large file sizes. If you don't have the space on your hard drive, get another one. Most video editor programs recommend a 7200 rpm speed one; some require it.

Part 1: Simple export to Windows AVI or QuickTime format.

  1. Determine what size ratio you are going to use. Most full-screen video is in the 1:33 format, so set your movie's dimensions accordingly. For Part 1, select the background color you wish. Set the frames per second to 30. Yes, I know television uses 29.97, but the difference is negligible. If your video is intended for the Web, you're better off sticking with Flash .swf files, but that's your prerogative. If you insist, I'd recommend dimensions not higher than 360x240, and 15 frames per second, unless you're creating content meant to be downloaded by high bandwidth users only.
  2. Create your animation in Flash. Make it as fancy as you like. Use an old one you created, if you just want to test this out. You can use music/sound if you like, but I would recommend that you add that in your video editor instead, as it will come across better. Test it out. I created my own version of the Ray of Light, seen below (resized to 360x240).

  1. Select File>Export Movie. Select Windows AVI or QuickTime, based on which format you prefer or which system (Mac or PC) that you have. Select the directory that you are saving to (preferably to a 7200 rpm hard drive)

  1. When the Export Windows AVI box comes up, be sure to set the dimensions to your original ones (720x480, in this case), and click Maintain aspect ratio. Select 32 bit color w/ alpha and smooth under Video Format, and deselect Compress Video. Enable sound if you used it.

  1. If you have a video editor installed, another box will come up, asking you to select a codec. Select Full Uncompressed, unless you know what you're doing with a codec. (If you don't have a video editor installed, it won't come up, in which case it should default to Full Uncompressed.
  2. After the file has been created, import it into your video editor and place as desired.

Part 2: Creating overlay text effects for use in video

Most of us have heard of "bluescreening;" the technique used in special effects films/television shows such as Star Wars or Star Trek to superimpose the action on top of a fanciful background, such as a star field or planetscape that would be too expensive to get a live shot of the object in question. This technique is also called chromakeying. In this example, we're going to turn it around, in that we are overlaying effects on top of video instead of the other way around.

Once again, this part requires the use of a video editor of higher quality, such as Sonic Foundry's Vegas Video, Adobe's Premiere, or Apple's Final Cut Pro that is capable of chromakeying. And while it is true that these products offer some very good text effect editors, you may want to use some of the creative freedom of Flash to create even more distinctive text effects. You might also want to use this technique to add cartooning animation over video.

The really tough part here is correctly positioning the effect so it appears exactly where you want it to in your video project. You might have to do this a few times to get it right. Be patient.

  1. Look at the video that you want to superimpose text over. Note the color of the area that you are planning to superimpose over.
  2. Set up your movie as required by the video project you're creating (dimensions, etc.). Set the Background color to something you can work with. Just be sure that you know the exact RGB color numbers. For example, Blue (R0, G0, B255).
  3. Create your animation. Suggest that you create something that you can move easily, or know the exact pixel points you want it placed in the final project. And make sure that you're not using the same color for your text that is in the video background. For example, white text doesn't show up very well against snow.
  4. Export the file as outlined above in Part 1, using whatever format you're planning to work in.
  5. Import the rendered video file into your video editor and lay it over the video that you are using in your project. Follow your video editor's instructions on how to chromakey the Flash video file (subtract the background color that you selected for your movie in Step 2).
  6. Test it out. You might have to do this a few times to get the effect you want, but you wouldn't be reading this if you weren't interested in getting it right.

Good luck!

Harry Thomas

SAPhotoDJ.com

1

» Level Intermediate

Added: : 2002-01-29
Rating: 6.70 Votes: 145
Hits: 11563
» Author
Graphic artist for the San Antonio Express-News; own and operate SAPhotoDJ.com, a one-stop company for wedding photography and disc jockey services.
» Download
Download the files used in this tutorial.
Download (37 kb)
Get conversion and unzipping tools for PC and Mac here!

» Forums
More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.
10 9 8 7 6 5 4 3 2 1
Read or Post Comments
 
   
 

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks

Symantec Whitepaper: Converging System and Data Protection for Complete Disaster Recovery
Intel Whitepaper: Comparing Two- and Four-Socket Platforms for Server Virtualization
IBM Solutions Brief: Go Green With IBM System xTM And Intel
HP eBook: Simplifying SQL Server Management
IBM Contest: Are You the Next Superstar? Join the "Search for the XML Superstar" Contest to Find Out
Intel PDF: Quad-Core Impacts More Than the Data Center
Intel PDF: Virtualization Delivers Data Center Efficiency
Go Parallel Article: PDC 2008 in Review
Avaya Article: Communication-Enabled Mashups: Empowering Both Business Owners and IT
Intel Whitepaper: Building a Real-World Model to Assess Virtualization Platforms
PDF: Intel Centrino Duo Processor Technology with Intel Core2 Duo Processor
Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008
  Go Parallel Article: Q&A with a TBB Junkie
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
IBM eBook: The Pros and Cons of Outsourcing
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Symantec Whitepaper: Comprehensive Backup and Recovery of VMware Virtual Infrastructure
MORE WHITEPAPERS, EBOOKS, AND ARTICLES