Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

MAX 2005 – Macromedia Flash Video For The Masses

A Look Back at Tom Green's Popular MXDJ Column from Our June Issue

Writing in MX Developer's Journal recently, Tom Green (pictured) mused on the benefits of the Macromedia Video Kit, and described how a $99 investment gets you easily and painlessly into the Web video game.

When I first published my observation that "QuickTime is dead" in this publication, I never expected the response that article would garner. It ranged from, "Dude, you are sooo wrong!" to "Finally, we are free." Earlier this year, Macromedia, as is so typical of the company, quietly dropped the "Macromedia Video Kit" on the developer community and suddenly, video was available to practically everybody who designed Web sites.

Since the introduction of the Video Kit, I have had the rather interesting experience of demonstrating it at a number of major events such as Digital Design World, Web Design World, MXimize, and to my local Dreamweaver user group. Presenting in these forums is a unique experience because these are the very users to whom the product is targeted and their reaction has been a unanimous, "Come on Tom, it can't be that simple." Not only is it that simple, it is code free. The implication is quite powerful: Macromedia has put the power of Flash video in the hands of everybody who designs sites using Dreamweaver and has a "Not for me, dude" attitude toward Flash MX and Flash MX Professional. In fact, my first reaction to seeing it and using it as one of the "Flash Video Voices in The Wilderness" was, "Great, they just put me out of a job." In this article I will walk you through the creation and addition of a Flash video to a Dreamweaver page using the "Kit" which is a steal at $99.00 and is available in Mac and PC versions through the Macromedia store.

Once you download and unzip the "Kit" you will discover it is composed of two major elements: A Sorenson Squeeze 4 Lite installer and a Dreamweaver Extension. Install the extension and Sorenson Squeeze. With those two tasks out of the way you are ready to get into the "Flash Video Game."

"Squeezing" Video
The version of Squeeze you will be using is the "Lite" version of the application. The full version, available for $449 through Sorenson Media, is an invaluable tool if you are doing a lot of video. The difference between the "Lite" version and the "Professional" version is an expanded number of output options. For example, video output in Lite is limited to .swf, FLV, .mov and MP3. The pro version adds output to MPEG4, MPEG 1/2, Realmedia, and Windows media.

To "squeeze" a video, follow these steps:

  1. Open Squeeze Lite. The interface that opens is really simple to follow. In the upper left corner you can import a file, a bunch of files, or even connect a camera to your computer and capture that. The filters allow you to "play" with video and the "Format and Compression" settings allow you to choose a preset for the output. On the right side of the screen is where the work is done. The preview is at the top and the compression is done below it (see Figure 1).
  2. Click the "Import File" button and navigate to the location of the video to be used in the Web page. When you click "Open" the file will appear in the Preview area of the interface. There is another way of importing a file. If you drag the video file from the desktop or a folder onto the interface, the file will import and appear in the Preview area.
  3. Open the "Macromedia Flash Video (.FLV)" section. A number of presets will appear. Select the 56K_Dial_Up_Stream and click the "Apply" button. The stream will appear in the Compression area - Sorenson calls this area a "Batch Tree" - under the preview. You can also drag the preset across to the Compression area. When you release the mouse it will drop into place. The file will be named using the preset. You can change this later.
  4. Click the arrow beside the Preset to open the video and audio presets. Double click either the MP3 or the SparkPro item to open the Audio/Video Compression Settings dialog box (see Figure 2).
  5. Click and hold the "Method" pop down and select "Sorenson 2-pass VBR." This compression option, in very simple terms, compresses the video twice resulting in a smaller file size.
  6. If you want to match the video playback to the Flash default playback of 12 frames per second, click and hold on the "Frame Rate" pop down and select 12.
  7. Click OK. The dialog box closes and the changes will appear in the compression area.

    You can also double click a preset in the "Format and Compression Settings" and change its values. This is a very dangerous action because the change will apply globally and will change the application preset. Knowing that you can change the setting for the movie means that you should never need to change the preset values. Also keep in mind that if you do change the preset, this action cannot be undone. Consider yourself warned.

  8. Click the "Squeeze It" button. The video compression starts as indicated by the progress bars in the compression area (see Figure 3). If you feel you have made a mistake, click the "Stop It" button to halt the compression and return to your settings.

    When the compression is completed you will be notified. One feature you will notice is the addition of a "Play" button beside the file name in the Compression area. Don't bother clicking it. If you do, you will launch Flash and then be told the file can't be opened. FLV files are imported into Flash and can only be played back from the Flash timeline through a Flash .swf file. This is why there was an error message.

  9. Quit Squeeze. When you quit, Squeeze asks you to save the file. This is a really neat new feature in the application. You aren't saving the .FLV, you are saving an .sqz file. This file is a "life saver." If you double click it, Squeeze will open and display the Compression settings used to create the .FLV. The beauty of this feature is the ability to make changes without having to remember or note the settings used to create the file (see Figure 4). If the client complains about the "quality" of the FLV you can simply open the .sqz and go back to work.
If you now compare the resulting file sizes, you will most likely have the same reaction as many people when I demo this process. The original movie that I compressed weighed in at 10.2MB. And the FLV comes in at 472K. The reaction? For that massive a reduction there simply has to be a corresponding reduction in quality. Not really.

The AVI, for example, contained a sound track that output to 44Khz, 16-bit stereo. The compressor knocked that back to 11Khz mono which, in itself, has a profound impact on file size (see Figure 5). The physical size of the file changed from 320 X 240 to 192 X 144, which also has a huge impact on the final file size. A low data rate and the 2 Pass VBR also has an impact on file size. Again, play with the settings. For example, I have found a 300 kbps data rate with mono sound, 2 Pass VBR compression, a 320 X 240 frame size, and 12 frames per second output works very well for my purposes.

Adding the Video to a Dreamweaver page
Once the FLV is created, adding it to a Dreamweaver page is a painless process. You simply:

  • Indicate where the video is to go
  • Import the video into the page.
  • Determine the playback controls.
  • Set the physical size of the video.
  • Upload and play.
Here's how:
  1. Open the Dreamweaver document where the file is to be placed and click once on the page or in the <div> where the video is to appear.
  2. Select Insert>Media>Flash Video... to open the Insert Flash Video dialog box (see Figure 6). This is the extension that was installed into Dreamweaver MX 2004.
The first thing you will notice about the dialog box is that it has been divided into two sections. At the top you choose the type of video you will be using. Your choices are Progressive Download, Streaming, and Flash Video Streaming Service Lite. If the FLV is to sit on the web server, choose Progressive Download. If you are using a Flash Communication Server, select Streaming; if you have taken advantage of the third-party Streaming services offered by Macromedia, such as VitalStream, you would select the third option. Just keep in mind, selecting the streaming option will require that you to have an "rtmp server address" used by the Flash Communication Server and that selecting the third option will result in a dialog box asking you to log into your Streaming Service account and for you to paste the Embed Code for the account into the dialog box.

If you have access to neither the Flash Communication Server nor VitalStream, you will be selecting Progressive Download. This option uploads the FLV file to your Web server and the resulting .swf file will essentially make a "call" to the server that will "feed" the FLV into the .swf.

Having made that determination, the next step is to tell Dreamweaver where the video is located, what player to use, and the physical dimensions of the video.

  1. Click the Browse button and navigate to the folder containing the video. Select the video and whether it will use a relative or absolute address (see Figure 7). Click OK.
  2. Select a "Skin" from the pop-down menu. You have six choices that will be shown to you when you make a selection. Pay attention to the minimum widths.
  3. Click the "Detect Size" button. The dimensions of the FLV file will appear in the height and width areas of the dialog box. These dimensions are important because they contain the metadata necessary to play the video in the Flash Player 7.

    The next two choices- Auto play and Auto rewind - are optional. I prefer to let the user control when to play the video, which means I always leave Auto play deselected (see Figure 8).

  4. Click OK and the video will appear as a gray box with an FLV icon on the page (see Figure 9).

    If you use CSS-p to drive your page design, you are in for a very pleasant surprise. Adding a video to a <div> allows you to actually run text around the video as shown in Figure 9 or place it anywhere on the page. This means you now control the "Web turf" and the video plays exactly where you want it to play, not where Apple, Microsoft, or Real decide the video should appear. In fact, video can now be treated almost like an image with a caption.

  5. Save the file and press the F12 key to preview the file in your browser (see Figure 10).
If you need to change any of the settings select the file on the Dreamweaver page. The Property inspector will change to reflect your selection (see Figure 11). If you click the Upload Media button, the FLV and the files required for the skin will be uploaded to your Web server.

Conclusion:
As you have seen from this article, a $99 investment gets you easily and painlessly into the Web video game. Squeeze 4 is simple to use and the addition of a .sqz file allows you to rapidly make changes without having to note the compression settings.

In Dreamweaver, the addition of video to your Web page has been simplified to a menu item and a dialog box. Hopefully, if we bump into each other when I am "demoing" the Macromedia Video Kit you won't have to ask, "Come on,Tom, it can't be that simple?" It is.

More Stories By Tom Green

Tom Green describes himself as 'teacher, author, chief cook and bottle washer.' He is an instructor at Humber College's School of Media Studies in Toronto, and is also the author of 'Building Web Sites with Macromedia Studio MX' and 'Building Dynamic Web Sites with Macromedia Studio MX 2004,' both published by New Riders.

Comments (6)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


IoT & Smart Cities Stories
Moroccanoil®, the global leader in oil-infused beauty, is thrilled to announce the NEW Moroccanoil Color Depositing Masks, a collection of dual-benefit hair masks that deposit pure pigments while providing the treatment benefits of a deep conditioning mask. The collection consists of seven curated shades for commitment-free, beautifully-colored hair that looks and feels healthy.
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
We all love the many benefits of natural plant oils, used as a deap treatment before shampooing, at home or at the beach, but is there an all-in-one solution for everyday intensive nutrition and modern styling?I am passionate about the benefits of natural extracts with tried-and-tested results, which I have used to develop my own brand (lemon for its acid ph, wheat germ for its fortifying action…). I wanted a product which combined caring and styling effects, and which could be used after shampo...
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.