First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
Search tutorials
Author: Stefan Richter Jan Ozer

Now that you know how to shoot, process and encode Flash video, it’s time to dive a little deeper into the delivery platform that is Flash.

A Brief History of Flash
Flash has come a long way since first released just over ten years ago. Back in the mid-nineties, it started life as an animation package called SmartSketch by a company named FutureWave Software. The driving force behind FutureWave was Jonathan Gay, who is now known as the father of Flash. SmartSketch enjoyed great success as an animation package which brought lightweight, vector-based content to web browsers in a completely new form. Comparable implementations inside a browser environment were based on Java and were quickly replaced by Netscape’s plug-in API.

The product was renamed and released as FutureSplash Animator in May of 1996 and you can see a screenshot of the start-up screen in Figure 1.

FutureSplash Animator was successfully used on projects for MSN, Fox and Disney and it didn’t take long for Macromedia to take notice. In December 1996 FutureWave Software was sold to Macromedia, and FutureSplash Animator became Macromedia Flash 1.0. Flash 1.0 was a web animation tool without scripting capabilities or bitmap support, the latter of which was added in 1997 when Flash 2 was released, followed in quick succession by Flash 3 in 1998 and Flash 4 in 1999. This was also the time when the Flash Player reached an installed base of 100 million.


Figure 1: FutureSplash Animator later became Flash 1.0.

Other Flash milestones include the following:

  • The Flash 5 release in 2000 was the first version of Flash that added improved scripting support, which allowed more experienced users to create intelligent applications that were no longer tied to the timeline.
  • Flash MX (Flash 6) was released in 2002. It added support for streaming video via Flash Communication Server, which was released in the same year. Flash MX also allowed for video content to be embedded into the Flash file itself.
  • Flash MX 2004 followed—no, not in 2004—in 2003. It added ActionScript 2 support, which pushed Flash development to a new level. Flash Player 7 was the first Player to support progressive video playback.
  • Flash 8 in 2005 added the VP6 codec as well as filters, bitmap caching and more.
  • Flash CS3 (which is essentially Flash 9) should be released by the time you read this book. This version adds ActionScript 3 support and a new Virtual Machine inside the Flash Player, resulting in an immense performance boost.

What Exactly Is Flash?
What are people referring to when they use the term Flash? Flash can mean a lot of different things to different people and it is important to distinguish the context in which the term is used.

Flash, the File Format
When I speak to a client and refer to building something “in Flash,” I am essentially referring to the finished product, the compiled SWF file to be deployed on a web server and served to website users. Every SWF file starts life as an FLA file, the source file which, once compiled, produces a SWF. The SWF file is generally embedded into an HTML page, often displayed alongside traditional image and text content and presented to the user inside a browser. Figure 2 gives a brief overview of the formats and also includes FLV (Flash Video files) for reference.


Figure 2: Flash file formats and their respective icons (icons may differ depending on installed Flash version).

SWF files can contain a variety of content, ranging from text to sound files, from bitmaps to vector graphics and from XML data to video. SWF has become a universal container for a whole range of media and it offers easy access to external data via SOAP web services, XML or HTTP/S, among others.

The Flash Player
The Flash Player is the most important feature in the Flash platform. The Flash Player is a ubiquitous client that is installed in the form of an ActiveX control to Internet Explorer or as a plug-in to Mozilla-based browsers. One major factor leading to its success is its small file size, currently around 1.4 MB, making it accessible even to dial-up users who can retrieve it in a matter of minutes. According to Adobe, the Flash Player is currently installed on nearly 98 percent of Internet-enabled desktops; new Flash Player releases achieve over 80 percent penetration in less than 12 months via an ever more sophisticated distribution and update mechanism.

The Flash IDE
The term IDE stands for Integrated Development Environment and it basically refers to the Flash authoring tool, including Flash CS3 and Flash 8. The IDE is where you create and edit FLA source files and subsequently compile them to SWF format.

Just like the Flash Player, whose releases normally go hand in hand with updates to the IDE, the authoring tool has undergone a huge transformation over the years, moving from an animation tool to a sophisticated development environment that in its latest incarnation supports ActionScript 3.

Looking Ahead
Flash’s future continues to look positive. The Flash Player is now the most pervasive piece of software ever, outnumbering even Windows itself, due to its cross-platform support. In one way or another, it could be argued that Flash has won the race inside the browser.

Rather than sitting back and enjoying Flash’s success, Adobe is pushing forward with new technologies that leverage Flash as a platform and distribution channel, including Flex 2 and a project code-named Apollo.

Flex 2
Adobe Flex 2 offers developers an alternative way to produce content in SWF format. Flex 2 is a web-application framework that is mainly aimed at producing data-driven applications, delivered via Flash Player 9 and above.

The Flex 2 platform consists of several key elements:

  • Flex Builder 2. This is an Eclipse-based IDE that allows developers to use a combination of MXML (a form of XML) and ActionScript3 to build sophisticated web applications in a visual programming environment that also offers easy access to the underlying code. Figure 3 shows a screenshot of Flex Builder 2 in design view.


    Figure 3: The Flex Builder 2 IDE.

  • Flex Framework and SDK. This is a component-based framework for developing and delivering content in SWF format via the Flash Player. Applications built upon this framework are cross platform, meaning they run on any operating system or device that supports the required Flash Player. In fact, an end user may not see a significant difference from a SWF produced in Flash; the delivered format is still a SWF file but in the case of Flex includes a more sophisticated and powerful web application framework, when compared to a SWF that originated from Flash. Flex is therefore arguably better suited to develop enterprise-level applications than Flash.
  • The Flex 2 SDK, class library and compiler are available free of charge. Figure 4 shows one of my own projects, a Flex 2-based video chat application that uses Flash Media Server as its back end.


    Figure 4: FlexVideoChat is a video chat application built using Flex Builder 2.

  • Flex Charting 2. Flex Charting 2 is an add-on for Flex Builder 2 that provides a library of rich graphs and charts. Drill-downs, rollover effects and data binding are all supported by Flex 2’s charting components. Figure 5 shows one of Adobe’s Flex sample applications utilizing the charting components.


    Figure 5: A Flex 2 dashboard application.

  • Flex Data Services 2. Flex Data Services 2 is an enterprise-level server-side data management platform. It extends the client-side Flex framework by providing sophisticated data connectivity and business logic.

More and more Flash developers (as opposed to Flash designers) are adding Flex 2 to their toolkit. I personally use Flex 2 for certain applications that require heavier data interaction, and stick with Flash to build less complex projects or create assets to use within Flex. The line between the two products is still blurred and will likely remain so. What’s important to remember is that, whichever product you choose, you are still targeting the Flash Player as your delivery channel. Note that Flex 2 applications require Flash Player 9 or above.

Apollo
Apollo is the code name for a cross-platform desktop runtime that Adobe is currently developing. It will support Windows, Macintosh and Linux operating systems and allows developers to build desktop applications by utilizing traditional web technologies and skills (think Flash/ActionScript, HTML, PDF, JavaScript/Ajax).

Apollo applications behave like “real” desktop programs, run outside the browser and offer many new features when compared to browser-based applications, due to a tighter integration with the user’s operating system. Adobe refers to these applications as desktop RIAs (Rich Internet Applications). It is to be expected that most existing Flash and web applications can be enabled to run inside Apollo with a minimum of effort. Flex 2 applications will be particularly suited for this.

Figure 6 shows a screenshot of the San Dimas project, an eBay desktop client developed in Apollo. It can take advantage of the desktop’s features and provide things like local storage and desktop notifications very easily, setting it apart from a browser-based equivalent.

You can read more about San Dimas at http://blogs.zdnet.com/Stewart/?p=197 and find info on Apollo at http://labs.adobe.com/wiki/index.php/Apollo.

Author's Tip: At the time of writing, Apollo has not yet been released. It is expected to go into public beta in early 2007 with a 1.0 release later in the year. Apollo is a code name that will likely change upon release.


Figure 6: San Dimas is an Apollo-based eBay client.

The Evolution of Flash Video Codecs
Initially, Flash video was created by placing sequential video images on the Flash timeline and exporting these as Flash animation. This was primitive and worked poorly with real-world videos.

Then Macromedia released Flash MX with the FLV format and a true video-compression technology called Spark from Sorenson Media that boosted video quality significantly, especially if you used Sorenson’s own encoding tool, Squeeze. Still, in use, video quality trailed codecs offered by Real, Microsoft and Apple, and maintaining synchronization between the audio and video components was a significant problem.

Synchronization issues were largely resolved with the introduction of Flash Professional MX 2004, which streamed video from a server rather than including it in the Flash timeline. Then On2 released the VP6 codec for Flash, which achieved comparable video quality to the other codecs available to streaming developers. At this point, Flash’s natural advantages, design flexibility and player ubiquity, took hold, and Flash Video began to dominate.

Today, Flash video is the primary codec for many broadcasters, including ESPN and CNN, and is also extraordinarily popular among Fortune 500 and other organizations with a large web presence.

Delivery Options for Flash Video
Support for Flash video content has grown steadily with every recent release of Flash and the Flash Player. Initially the Player’s video features were pretty basic, and the main delivery platform for video in Flash was on CD-ROM. Today, you have several deployment methods at your disposal, so let’s examine them in more detail.

Embedded Video
Embedding video files into a Flash application has been supported since around 2001/2002 with the release of Flash MX and Flash Player 6. In previous versions, video could only be simulated with a series of bitmap or vector images.

When imported, video is compressed using the Spark codec, then decompressed again when the SWF is played back. Embedded video content and associated SWF files can be placed on and delivered via any standard web server.

Embedding video into your Flash SWF has a number of disadvantages, including:

  • Large file size – Because the video content is part of the Flash application, the resulting SWF files grow significantly in size.
  • Difficult to update – Since the video is integrated into the SWF, any updates require editing and re-exporting of the FLA source files, making updates a laborious process.
  • Synchronization issues – Audio and video tracks tend to get out of sync when video is embedded. This is because the frame rate of the video content may be different from that used in the Flash application.
  • Time restrictions – The timeline in Flash is limited to 16,000 frames and longer video clips are therefore not supported.

Due to these limitations and the availability of better delivery mechanisms, embedding video is no longer recommended. Some niche cases, such as video used for Button rollover effects, do exist, but in order to deliver any meaningful length of video in Flash, you should now concentrate your efforts on the following methods.

Progressive Download
Added to Flash Player 7, the method of downloading a FLV file progressively into a Flash application was a milestone for Flash video popularity. Most major sites including YouTube and Google Video deploy their Flash video content via progressive download.

With this technique, FLV content is maintained externally from the SWF file and a download into the SWF and subsequently to the user’s machine is initiated once the Flash application requests it. This has several advantages over embedded video, including:

  • Easier updates – Since the FLV is separate from the SWF, you can easily swap content without editing or modifying the Flash application itself.
  • Smaller file size – No unnecessary video content bloats the SWF.
  • Better playback – The frame rates of the FLV and SWF operate independently so there are no audio sync issues or premature endings.
  • Fast start-up – Video playback starts as soon as enough data has been down-loaded.

Since progressively downloaded FLV files can be served from any web server, it is the most widely adopted form of Flash video delivery today. Many casual website authors as well as professionals use this method to publish Flash video content quickly and with minimal hassle. This process is being made even simpler by the export features in Flash CS3 and Flash 8 as well as Dreamweaver’s video wizard, both of which I cover in more detail in the next chapter.

Streaming Delivery
Streaming delivery is only available when distributing video via a specialized streaming server, such as Flash Media Server. This technique offers many of the benefits of a progressive download, plus a few of its own. It is also well suited to deliver long video files or to distribute video to a large number of simultaneous viewers. Other benefits include:

  • Advanced seeking – A user can seek to any point within the video without having to wait for this part to be downloaded first, as is the case with progressive delivery. Instead, any part can be accessed after a short buffering time.
  • Efficient use of bandwidth – Video is delivered as it’s being watched, so if the viewer stops watching, little bandwidth is wasted. Progressive delivery delivers the entire file as quickly as possible, which can result in wasted bandwidth if the viewer stops watching.
  • Low system requirements – Memory and disk space usage is very low when using streaming, as no file is being downloaded.
  • Security – Files are not cached on the user’s hard drive, which complicates copying and repurposing of the streaming content.
  • Live video and recording – Only streaming Flash video offers the possibility for live video and audio broadcasts as well as recording facilities.
  • Advanced features – Flash Media Server offers bandwidth detection features and failover capabilities that are hard to replicate on other platforms or delivery mechanisms.

FVSS Delivery
FVSS stands for Flash Video Streaming Service and it is offered by several companies approved by Adobe to deliver globally distributed Flash video streaming services. Currently this service is offered by Akamai, Limelight Networks, VitalStream and Mirror Image Inter-net. In a nutshell, this service offers a CDN (Content Delivery Network) based delivery for streaming Flash video.

The experience for the user is essentially the same as when video is streamed via a single Flash Media Server, but it offers scalability and availability features that are only possible via a CDN. FVSS is therefore the recommended platform to deliver large volumes of Flash video content to a globally distributed audience. Recent competition and falling bandwidth prices mean that CDN services are now within the financial reach of even small- to medium-sized businesses.

Author's Tip: Note that you can use the same FLV file using either progressive download or streaming (be it via your own server or FVSS), meaning the file itself contains no prerequisites that tie it to one or the other form of delivery.

Note, however, that FVSS supports video streaming only. That’s because other Flash Media Server features like text chats and custom server side scripts aren’t possible on a CDN due to its distributed nature. Live video, however, is being offered by more and more providers and I expect to see a growth in the live Flash video arena over the coming months.

Flash Player Compatibilities
Each release of the Flash authoring tool saw the introduction of new features that were not previously supported by the Flash Player, meaning that every release of the authoring tool went hand in hand with a new release of the Player. Video features weren’t unaffected by this, so you need to be aware which features and video codecs are supported by which version of the Player.

Flash Player 6
Player 6 was the first version to support embedded as well as streaming video. In both cases, the Sorenson Spark codec was utilized to compress the video content.

As embedded video is no longer preferred and progressive download not supported by Flash Player 6, streaming to this player is your only option. Specifically, Flash Player 6 was released at roughly the same time as Flash Communication Server 1.0 (now named Flash Media Server). The server enables live and on-demand streaming Flash video delivery to Flash Player 6 using the Sorenson Spark codec.

Flash Player 7
As the first Player to support progressively downloaded video, again utilizing the Spark codec, Flash Player 7 was a milestone in the evolution of Flash video. Being able to serve video progressively meant that everyone with access to a web server could now deploy Flash video content; no longer was this area reserved to those with a Flash Communication Server license.

Most of the large video portals, including YouTube, were built on top of this technology, serving progressively downloaded FLV files to an audience requiring Flash Player 7 or above.

Author's Tip: Newer Flash Players are always backward compatible with features from the previous Players. This means that you can be certain that Spark-encoded videos that played fine in Player 6 will still work reliably in future versions of the Player in years to come.

Flash Player 8+
Another milestone for Flash video was the release of Player 8 in 2005, as it introduced support for a new, higher-quality codec: On2 VP6. Developers were now able to deliver progressive and streaming Flash video content with much higher video quality at the same bit rate or indeed the same quality at a lower bit rate, saving bandwidth costs. The introduction of VP6 brought Flash into line with other technologies such as QuickTime and Windows Media and meant another push for Flash as a video-delivery platform.

Flash Player 9 did not introduce any significant video features, but it is likely that Adobe will add support for additional video codecs to future versions of the Flash Player.

While VP6 has yet to reach its peak on the Flash video stage, there is no doubt that Adobe is working hard on implementing new codecs and features to the Player.

Summary
You should now be aware that not every version of the Flash Player supports all video features and codecs. If you want to have access to both Spark and VP6 in both progressive and streaming form, then Flash Player 8 or above is the version you need to target.

When choosing your codec and distribution technique, you obviously need to be in touch with the Player version installed by the bulk of your target users, especially in situations where they can’t auto update to the latest Player.

For example, On2’s VP6 codec was widely (but certainly not universally) adopted by general-purpose sites because they knew that their target audience could and would generally update to the latest Player to watch their video. Conversely, in a locked-down corporate, government or institutional environment, where users can’t choose to update even if they wanted to, it would be folly to use a codec that the standard machine can’t play, which is one of the key reasons many large organizations with large internal video distribution use the Spark codec for their streamed and progressive delivery.

Always ascertain your audience’s capabilities first, and then choose the most complementary codec and delivery mechanism. I’ve summarized these capabilities by Player version in Figure 7.


Figure 7: Video capabilities and codec summary by Flash Player version.

Conclusion
I hope that this chapter has given you a good overview of some key Flash video concepts as well as the milestones in Flash’s 10-year-long history. There is no doubt that this platform, which started life as a simple animation tool, has matured into one of the most popular technologies on the Internet.

This article includes text and images excerpted from "Hands-On Guide to Flash Video,". Copyright © 2007. Reprinted with permission from Focal Press.

This article originally appeared on WebVideoUniverse.

» Level Intermediate

Added: 2009-01-28
Rating: 4 Votes: 3
(10 being the highest)
» Author
Flash Expert
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.