computing.mov on a Mac; computing.avi on a Win

1. File -> Import -> Import to Stage ...

   Navigate to and select the computing file appropropriate to your platform

2. Importing Quicktime:

   If you are importing a Quicktime movie, you will be presented with an additional option which is not relevant to other file formats:

   

   This has to do with the unique nature of Quicktime being more of a delivery system for many different file formats than a unique file format (PSD, GIF, MP3).  Unless you are doing something unique, always select Embed video in Macromedia Flash document.

   1. If you have imported a Quicktime file, click: Next
3. Editing Option:

   After clicking Next (when importing Quicktime) or immediately after selecting the file to import (if it is not Quicktime), you are presented with the option of Editing the video clip first:

   

   As indicated next to the Edit the video first radiobutton, there are some elementary editing options available when importing video into Flash Pro.

   1. Import the entire video  (*)   {selected}
   2. Click:  Next
4. Encoding Options:

   In the last part of the video importing wizard, there are separate options for encoding (similar to JPEG compression for non-static image sequences) and physical characteristics (scaling and several color balance settings):

   
   1. Compression profile -> DSL/Cable 256 kbps
   2. Advanced settings ->  - - - - - - - -    {none}
   3. Click:  Finish

   Once you click Finish, Flash imports and encodes the file.

5. Automatically insert frames:

   When the imported clip is being attached to the main timeline or a movie clip timeline, you will be asked if you want that timeline extended to the number of frames to play the entire video:

   
   1. Click:   Yes

   The video clip has been imported, encoded, and stored as an asset in the Library.  Because we chose to Import to Stage, an instance of this Embedded Video has been placed on the Stage.

   This Embedded Video instance can be moved around the stage just like any other visual Library asset:

   

An instance of an Embedded Video object behaves just like an instance of a multi-frame Graphic symbol: when the timeline on which it is located is stopped, so is the Embedded Video instance.

1. Save and test movie

   The video clip plays along with the Flash movie.

   Check the respective file sizes: the computing (AVI or MOV) clip is about 4,000 Kb; the simple_video.swf is about 380 Kb ... a reduction of over 90% (without changing the height and width dimensions!).

2. On your own:

   Insert two layers, and name them Actions, Video, and Buttons.

   Create your own Stop and Play buttons (or open the Common Library of button symbols), and drag an instance of each onto the Stage.  If you name the instances stop_btn and play_btn, then you can apply this ActionScript to Keyframe 1:

   stop_btn.onRelease = function() {
     stop();
   }
   play_btn.onRelease = function() {
     play();
   }
   

   Apply a stop() action to the last frame of the movie to prevent it from looping.

3. Save and test movie

   When the embedded video instance is placed on the main timeline, starting and stopping is as easy as starting and stopping the main movie.

4. On your own:

   Here's an insight from FlashForward: don't think of embedded video as simply a window or a frame through which you are playing external media (not that there is anything wrong with that): think of it as simply another design element along with shapes, buttons, and movie clips.

   Use a Mask layer to modify the inherent rectangularness of an embedded video instance.

   Example

The process of importing a video clip is fairly straightfoward, and has not changed much from the previous version of Flash.

Next, let's explore the different Advanced Settings that are available.  Note that in a normal workflow, these would be the last settings that you would tweak.  However, these settings are very common for any graphic designer - size, scale, brightness/contrast, etc - so let's cover them now before your head explodes trying to figure out advanced temporal dynamics ...

Video Settings

computing.mov on a Mac; computing.avi on a Win

1. File -> Import -> Import to Library ...

   Navigate to and select the computing file appropropriate to your platform

   1. If you have imported a Quicktime file, select Embed (*), then click: Next
2. Editing Option:
   1. Import the entire video  (*)   {selected}
   2. Click:  Next
3. Encoding Options:

   We will use the same encoding settings as in the last example, and focus just on manipulating the physical characteristics

   
   1. Compression profile -> DSL/Cable 256 kbps    {same as last time}
   2. Advanced settings ->  Create new profile ...

      This opens up your access to the physical settings (Advanced Encoding settings):

      
   3. Under the Color options, enter values or drag the pop-up sliders to apply color corrections to the video image:

      Hue measures the color value, commonly indicated by the color name, such as red or green. Hue is identified as a location on a standard color wheel. Hue value can be between -180° and 180°.

      Saturation measures the strength or purity of the color. Saturation measures the amount of gray in proportion to the hue, indicated as a percentage between -100 and +100. A smaller saturation value indicates more gray. A higher value adds more color.

      Brightness measures the relative lightness or darkness of the color, indicated by a percentage between -100 and +100. A smaller value indicates more black, and a larger value indicates more white.

      Contrast measures the contrast between dark and light in the image, indicated by a percentage value between -100 and +100. A smaller value indicates less contrast.

      Gamma measures the overall lightness levels, indicated by a value between 0.1 and 1.8. A smaller value indicates a darker image. With a larger value, dark elements in the image stay dark and light elements become lighter.

      Reset resets all Color options to their default values.

   4. Under the Dimensions options, enter values or drag the pop-up sliders to adjust the video dimensions:

      Scale: For Scale, enter a value between 0 and 100 to decrease the scale of the video. The Width and Height values indicate the size of the video in pixels. (You cannot increase the scale of the video beyond its original size.)

      Crop: For Crop, enter values for the right, left, top, and bottom edges to crop the video. Guides in the preview window indicate where the cropping will occur.

   5. Under the Track options:
      1. For Import Into, specify what type of object the imported video will be placed:

         Current Timeline imports the video as a video object in the current Timeline in the Flash document.  If you have elected to Import to Library, this option is meaningless and does nothing.

         Movie Clip imports the video and embeds it in a new movie clip (Flash prompts you to add enough frames to accommodate the video).  You can always place an embedded video instance in a movie clip at any later time, giving you all of the manipulability of a movie clip.

         Graphic Symbol imports the video and places it in a new graphic symbol.

      2. For Audio Track, select an option to specify how audio will be imported:

         Separate imports the audio track as a sound object, separate from the video file.

         Integrated imports the audio track as part of the video file.

         None does not import the audio track.

   6. Use the Color controls to address the low lighting condition:

      This clip was recorded without adequate lighting, and is a bit on the dark side. This will make for a great opportunity to work with the Color controls.

   7. On your own, try manipulating the Brightness, Contrast, Saturation, and Gamma controls

      (The Hue seems reasonably close)

      You can scrub the video playback head (the pointer underneath the video preview area) to preview the effects of your different settings.

   8. Since the camera did a pretty good job of establishing the overall balance, you might try clicking the Reset button, and then adjusting just the Gamma to about 1.1 - 1.3; dumping the Brightness to -6%; and pumping the Contrast to +3%

      Two rules: "Fixing it in the mix" will never really remedy a poor recording; and Flash is not a $1,000+ video editing suite.

      To compare this with the previous example, we'll leave the Scaling and Cropping controls alone, although you are welcome to experiment with them as well.

   9. Track Options:
      1. Import into -> Current timeline

         Since we are importing this video into the Library, this setting will have no effect

      2. Audio track -> Integrated
   10. Click:  Next

       Macromedia imagines that you will be working on a project or with similar source material, and will want to re-apply these settings at some point in the future. So at this point they are soliciting a Profile Name, and offer a second text area for you to enter a description of this profile:

       1. Name:  Test
       2. Description:  {leave blank}
   11. Click:  Next

       This brings you back to the Video import wizard, which should now have the DSL/Cable 256 kbps Compression profile, and our new Test Advanced Settings profile.

4. Click:  Finish

   The video clip is imported into the Library with the Color settings applied

The embedded video asset will have the same name as the imported file.

When dragging an embedded video asset onto the stage (or any timeline), you will be prompted to allow Flash to establish as many frames as necessary to contain the entire video clip.

You might have been able to compensate for the low level lighting to some degree, but Flash's Color controls will never be able to fully compensate for poor source material.

You may have noticed that the video encoding worked best on those parts of the video that were changing the least, and did much less well on those parts that were in motion (the flickering of the screen is the best place to look).  We have been working with the Color settings, but it is the compression settings (akin to the JPEG compressions settings when exporting static images) that will have the greatest influence on the quality of the video image.

Let's try an experiment where we re-use the Color settings, and change only the compression settings.

computing.mov on a Mac; computing.avi on a Win

1. File -> Import -> Import to Library ...

   Navigate to and select the computing file appropropriate to your platform

   1. If you have imported a Quicktime file, select Embed (*), then click: Next
2. Editing Option:
   1. Import the entire video  (*)   {selected}
   2. Click:  Next
3. Encoding Options:

   We will use the same Advanced settings (Test) as in the last example, and change just the Compression (Encoding) settings

   1. Compression profile -> DSL/Cable 512 kbps
4. Click:  Finish
5. Drag an instance of the computing embedded video onto the stage, click: Yes to extend the timeline
6. Save and test movie

   You should notice a marked improvement in the video quality, with the visual artifacts much less noticeable. But at the same cost as when compressing a JPEG file: as quality improves, the file size grows.

   Where the file size of the previous example was approximately 380 Kb, the file size of this example is about double that size, around 720 Kb.

7. Close this FLA's document window

    

   The Compression profiles are preset settings that can be used as they were shipped, modified to your own needs, or you can create a new profile from scratch as we did with Advanced settings.

Compression Settings

computing.mov on a Mac; computing.avi on a Win

1. File -> Import -> Import to Library ...

   Navigate to and select the computing file appropropriate to your platform

   1. If you have imported a Quicktime file, select Embed (*), then click: Next
2. Editing Option:
   1. Import the entire video  (*)   {selected}
   2. Click:  Next
3. Encoding Options:

   We will use the same Advanced settings (Test) as in the last example, and change just the Compression (Encoding) settings.

   There are two different ways to approach working with the Compression/Encoding settings: modifying (editing) an existing profile/preset, or creating a new profile from scratch. Obviously, Macromedia put some thought into the profiles which have been optimized for different bandwidths, so those profiles will provide a good reference or starting point for creating your own profiles.

   1. Compression profile -> Create new profile ...
      
   2. Primary compression setting:

      Flash uses the Sorenson Spark codec for video compression. This codec relies on temporal compression. Temporal compression identifies the differences between frames and stores only those differences, so that frames are described based on their difference from the preceding frame. Unchanged areas are simply repeated from the previous frame(s). A temporally compressed frame is often referred to as an interframe (inter == between; interframe == between frames).

      Spatial compression is applied to a single frame of data, independent of any surrounding frames. A spatially compressed frame is often referred to as an intraframe (intra == within; intraframe == within a frame). (JPEG is an intraframe codec.)

      Interframe codecs also use intraframes. The intraframes are used as the reference frames (keyframes) for the interframes. Sorenson Spark always begins with a keyframe. Each keyframe becomes the main reference frame for the following interframes. Whenever the next frame is significantly different from the previous frame, the codec compresses a new keyframe.

      Flash's video encoding settings provides an option as to how to approach temporal compression (the time-based video equivalent of JPEG compression for static images): an approach based upon bandwidth, in which the quality of (individual frame) compression varies to achieve a consistent download speed; or an approach based upon quality, in which a consistent compression setting is applied to all frames. Remember to consider bandwidth as being like a pipeline, and if you exceed the capacity of that pipeline by trying to transmit too much volume (the result of applying the same quality setting to all frames without regard to bandwidth capacity), the information will start backing up (ie, slowing down).

      So you get to choose which is more important: the quality of the video (quality), or the quality of the transfer of the video (bandwidth).  When working with JPEG compression, all we have had to worry about is the quality of an individual, static image.  But with video compression, we not only have to worry about visual quality, we also have to be concerned about temporal quality - the quality of the visual experience over time.

      Bandwidth options range from 0 Kbps to 750 Kbps and specify the approximate download speed, in kilobits per second, for the video. Preset options include 56 Kbps modem, 256, 512, and 786 Kbps for DSL or cable. The quality setting of individual frames may vary, in order to achieve a consistent download speed.

      Quality options range from 0 to 100 (like JPEG compression) and specify a compression level for all frames; 0 is minimum quality/maximum compression; 100 is maximum quality/minimum compression. The download speed/transfer rate may vary in order to achieve a consistent compression level.

   3. Keyframes:

      We are already familiar with the concept of keyframes in Flash: when authoring, you have to be at a keyframe in order to make a change to anything on the stage.

      The term keyframe was appropriated by Macromedia from this (video) context: this Keyframe Interval setting is used to control the frequency of keyframes (frames with complete data) in the video clip. With a keyframe interval of 24, Flash stores a complete frame every 24 frames. For frames between intervals, Flash (the Spark codec) stores only the data that changes from the preceding frame. With smaller keyframe intervals, you can fast-forward or rewind more quickly to a specific frame, but file size is larger.

      The greater the Keyframe Interval, the more often a complete frame of video is stored in the video stream.  Because Sorenson Spark compresses between keyframes, the greater the number of keyframes, the less Spark can do it's compression thing, and the result will be a larger resulting file size AND a stream that will have a greater bandwidth requirement.  The tradeoff, then, is that there is less temporal compression and therefore less de-compression on the client side (less work to do on slower machines).

      The drawback to a high keyframe interval: think of the visual smeariness seen from those videophones war correspondents use: they are operating under extremely low bandwidth restrictions. These videophones have been optimized with the equivalent of a low Bandwidth setting, with a very infrequent (high) keyframe interval.

   4. High-quality Keyframes:

      This setting is only available when working with Bandwidth optimization.

      It's pretty self-explanatory: selecting this option forces a high quality keyframe to be inserted as the staring point for subsequent interframe compression.

   5. Quick Compress:

      This setting is increases the speed of compression/encoding and reduces the quality as a result.

      It only makes sense in terms of speeding up your development time while you are working on a project. Once the project is reaching completion, you could re-import using all of the other existing profile settings but switch this Quick Compress off.

   6. Synchronize Video to Macromedia Flash Document Frame Rate:

      This setting matches the playback speed of the imported video to the playback speed of the main Flash document Timeline.

      When synchronizing, video frames are lost if the frame rate of the Flash movie is slower than the video clip.  However, this option provides a dependable synchronization of video content and Flash content within a project.

      If you are working on a project where the Flash movie is essentially stopped when the viewer is watching an embedded video, then it won't matter if the video is synchronized to the frame rate of the main movie.  It will definitely matter if you have placed the embedded video on the main timeline, for example.

   7. Number of Video Frames to Encode Per Number of Flash Frames:

      This specifies the ratio of imported video frames to main Flash Timeline frames. For example, to play one imported video frame for every main Flash Timeline frame, select 1:1; to play one imported video frame for every two main Timeline frames, select 1:2.

      Dropping frames from the imported video does not slow down the motion of the video. Instead, it displays fewer frames per second, so that the video appears more choppy in playback.

      If you were working on a project where the video clip is of a talking head (and either file size or bandwidth were a concern), you might find it useful to use one of the different ratios.

      It's pretty self-explanatory: selecting this option forces a high quality keyframe to be inserted as the staring point for subsequent interframe compression.

   8. Choices, choices, choices:

      This somewhat bewildering set of choices is a good thing, even if it means you have to reorient yourself from static image compression, to compressing a sequence of images over time while paying attention to issues like bandwidth and synchronization.

      Because our primary focus is delivery on the Web, we have to be concerned about file sizes and transfer rates (bandwidth).  What these settings allow you to do is optimize your video for delivery based upon a project's requirements.

      Just as there is no universal JPEG setting which will always produce the optimum balance between quality and file size - each image must be addressed individually - there is no universal encoding/compression profile which will work to produce the optimum balance between quality and user experience.

      However, this panel is oriented to allow you to make a choice: which has the highest priority: smoothest delivery under bandwidth limitations, or best quality regardless of bandwidth.  Once you've made that decision, the other controls allow you to fine-tune the end user's experience.

   9. One more thing:

      Those designers who have become accomplished at creating quality graphics of low file size - either through JPEG compression or manipulating the bit depth of GIFs - only became skilled by practice, and trial and error.  The same is true with these video compression settings.  Doing this once or twice, or even a couple of dozen times, may not provide you with enough experience where it is not again awkward the next time you import a video clip.  JPEG compression involves modifying just one control; video compression has many potential controls, and it will take time and practice to gain the exprience necessary to become efficient at encoding video clips.

4. Experiment with these settings:
   1. Bandwidth:  360
   2. Keyframes:  24
   3. High Quality Keyframes: [x]   {selected}
   4. Quick Compress:  [ ]   {deselected}
   5. Synchronize Video to Macromedia Flash Document Frame Rate:  [x]   {selected}
   6. Number of Video Frames to Encode Per Number of Flash Frames:  1:1
5. Scrub the video playback head

   This won't show the effect of all the controls, but it will show the result of the initial Bandwidth (or Quality) setting.

6. Click:  Next
   1. (Profile) Name:  Computing

      This is just a name ... you can either name the profile after a project, or something more descriptive of the specific setting.

      It appears that if you are close to an existing profile, you will be see the name or name and description of that nearest profile.

   2. Description:  Bitrate 360 kbps Sync to document fps Keyframe every 24
7. Click:  Next

   This finishes setting up the new profile, and returns you to the Encoding part of the import wizard

8. Click:  Finish

   The video clip has been imported into the Library with the new Profile settings we just created.

1. Insert -> New Symbol ...
   1. Name:  MC Video
   2. Behavior:  Movie clip
   3. Click:  OK
2. Place the video clip into the movie clip:
   1. Drag an instance of the computing embedded video asset from the Library onto the (Symbol Edit) stage
   2. Automatically insert required number of frames:  Click:  Yes
   3. Align the embedded video so that it's upper-left corner is at the symbol's registration mark
3. Exit Symbol Edit mode

1. Save and test movie

   Visually, this should have a quality somewhere between the previous two experiments, where we chose existing profiles with greater and lesser bandwidth settings than the custom profile we just created.

   Now that we have this embedded video inside a movie clip, we can animate the movie clip as we would any other movie clip.

2. Save this document as:  twirl.fla

1. Align the movie clip instance to the center of the stage
2. Insert a keyframe at frames 37, 73, 109, and 145
3. Select the instance at keyframe 1
   1. In the Transform panel:  Skew Vertically: -89.5°
4. Select the instance at keyframe 37
   1. In the Transform panel:  Skew Vertically: 0°
5. Select the instance at keyframe 73
   1. In the Transform panel:  Skew Vertically: 89.5°
6. Select the instance at keyframe 109
   1. In the Transform panel:  Skew Vertically: 179.5°
7. Select the instance at keyframe 145
   1. In the Transform panel:  Skew Vertically: -90.5°
8. Between each pair of keyframes, apply a Motion Tween
9. Save and test movie

   If all went well, it should appear as if the video was rotating about a central, vertical axis ...

   Example 2