Controlling external video playback with ActionScript

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Working with video cue points
    9. Draw and create objects with Animate
    10. Reshape lines and shapes
    11. Strokes, fills, and gradients with Animate CC
    12. Working with Adobe Premiere Pro and After Effects
    13. Color Panels in Animate CC
    14. Opening Flash CS6 files with Animate
    15. Work with classic text in Animate
    16. Placing artwork into Animate
    17. Imported bitmaps in Animate
    18. 3D graphics
    19. Working with symbols in Animate
    20. Draw lines & shapes with Adobe Animate
    21. Work with the libraries in Animate
    22. Exporting Sounds
    23. Selecting objects in Animate CC
    24. Working with Illustrator AI files in Animate
    25. Apply patterns with the Spray Brushtool
    26. Applying blend modes
    27. Arranging objects
    28. Automating tasks with the Commands menu
    29. Multilanguage text
    30. Using camera in Animate
    31. Using Animate with Adobe Scout
    32. Working with Fireworks files
    33. Graphic filters
    34. Sound and ActionScript
    35. Drawing preferences
    36. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Best practices - Accessibility guidelines
    12. Accessibility in the Animate workspace
    13. Writing and managing scripts
    14. Enabling Support for Custom Platforms
    15. Custom Platform Support Overview
    16. Creating accessible content
    17. Working with Custom Platform Support Plug-in
    18. Debugging ActionScript 3.0
    19. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Export QuickTime video files
    9. Controlling external video playback with ActionScript
    10. Best practices - Tips for creating content for mobile devices
    11. Best practices - Video conventions
    12. Best practices - SWF application authoring guidelines
    13. Best practices - Structuring FLA files
    14. Best Practices to optimize FLA files for Animate
    15. ActionScript publish settings
    16. Specify publish settings for Animate
    17. Exporting projector files
    18. Export Images and Animated GIFs
    19. HTML publishing templates
    20. Working with Adobe Premiere Pro and After Effects
    21. Quick share and publish your animations

Playing external FLV or F4V files dynamically

An alternative to importing video into the Animate authoring environment is to use either the FLVPlayback component or ActionScript to dynamically play external FLV or F4V files in Flash Player. You can also use the FLVPlayback component and ActionScript together.

You can play FLV or F4V files posted as HTTP downloads or as local media files. To play back an external FLV or F4V file, post an FLV or F4V file to a URL (either an HTTP site or a local folder) and add either the FLVPlayback component or ActionScript code to the Animate document to access the file and control playback during runtime.

Using external FLV or F4V files provides the following capabilities that are not available when using imported video:

  • You can use longer video clips without slowing down playback. External FLV or F4V files are played using cached memory, which means that large files are stored in small pieces and accessed dynamically; they do not require as much memory as embedded video files.

  • An external FLV or F4V file can have a different frame rate from the Animate document in which it plays. For example, you can set the Animate document frame rate to 30 fps and the video frame rate to 21 fps, which gives you greater control in ensuring smooth video playback.

  • With external FLV or F4V files, Animate document playback does not have to be interrupted while the video file is loading. Imported video files can sometimes interrupt document playback to perform certain functions (for example, to access a CD-ROM drive). FLV or F4V files can perform functions independently of the Animate document, and so do not interrupt playback.

  • Captioning video content is easier with external FLV or F4V files because you can use callback functions to access metadata for the video.

Behaviors used in video playback

Video behaviors provide one way to control video playback. Behaviors are prewritten ActionScript scripts that you add to a triggering object to control another object. Behaviors add the power, control, and flexibility of ActionScript coding to your document without having to create the ActionScript code. Video behaviors play, stop, pause, rewind, fast-forward, show, and hide a video clip.

To control a video clip with a behavior, use the Behaviors panel to apply the behavior to a triggering object, such as a movie clip. Specify the event that triggers the behavior (such as releasing the movie clip), select a target object (the video that is affected by the behavior), and when necessary, select settings for the behavior, such as the number of frames to rewind.

Märkus.

The triggering object must be a movie clip. You cannot attach video playback behaviors to button symbols or button components.

The following behaviors in Animate control embedded video:

Behavior

Purpose

Parameters

Play Video

Plays a video in the current document.

Instance name of target video

Stop Video

Stops the video.

Instance name of target video

Pause Video

Pauses the video.

Instance name of target video

Rewind Video

Rewinds the video by the specified number of frames.

Instance name of target video

Number of frames

Fast Forward Video

Fast-forwards the video by the specified number of frames.

Instance name of target video

Number of frames

Hide Video

Hides the video.

Instance name of target video

Show Video

Shows the video.

Instance name of target video

Control video playback using behaviors

  1. Select the movie clip to trigger the behavior.
  2. In the Behaviors panel (Window > Behaviors), click the Add (+) button, and select the desired behavior from the Embedded Video submenu.
  3. Select the video to control.
  4. Select a Relative or Absolute path.
  5. If required, select settings for the behavior parameters and click OK.
  6. In the Behaviors panel under Event, click On Release (the default event) and select a mouse event. To use the On Release event, leave the option unchanged.

The FLVPlayback component

The FLVPlayback component lets you include a video player in your Animate application to play progressively downloaded video (FLV or F4V) files over HTTP, or play streaming FLV files from Adobe Media Server (AMS) or a Flash Video Streaming Service (FVSS).

The FLVPlayback component does the following:

  • Provides a set of prefabricated skins to customize playback controls and the look and feel of the user interface.

  • Lets advanced users create their own custom skins.

  • Provides cue points to synchronize your video with the animation, text, and graphics in your Animate application.

  • Provides live preview of customizations.

  • Maintains a reasonably sized SWF file for easy download.

    The FLVPlayback component is the display area in which you view video. The FLVPlayback component includes the FLV Custom UI controls, a set of control buttons that play, stop, pause, and control playback the video.

Configure the FLVPlayback component

  1. With the FLVPlayback component selected on the stage, open the Property inspector (Window > Properties) and enter an instance name.
  2. Select Parameters in the Property inspector or open the Component inspector (Window > Components).
  3. Enter values for parameters or use default settings.

    For each FLVPlayback component instance you can set the following parameters in the Property inspector or in the Component inspector:

    Märkus.

    In most instances, it is not necessary to alter the settings in the FLVPlayback component unless you want to change the appearance of a video skin. The Video Import wizard sufficiently configures the parameters for most deployments.

    autoPlay

    Boolean value that determines how to play the FLV or F4V. If true, the video plays immediately when it is loaded. If false, loads the first frame and pauses. The default value is true.

    autoRewind

    Boolean value that determines whether the video is automatically rewound. If true, the FLVPlayback component automatically rewinds the video to the beginning when the playhead reaches the end or when the user clicks the stop button. If false, the component does not automatically rewind the video. The default value is true.

    autoSize

    Boolean value that, if true, resizes the component at runtime to use the source video dimensions. The default value is false.

    note: The encoded frame size of the video is not the same as the default dimensions of the FLVPlayback component.

    bufferTime

    Number of seconds to buffer before beginning playback. The default value is 0.

    contentPath (AS2 files)

    String that specifies the URL to an FLV, F4V, or to an XML file that describes how to play the video. Double-click the Value cell for this parameter to activate the Content Path dialog box. The default is an empty string. If you do not specify a value for the contentPath parameter, nothing happens when Animate executes the FLVPlayback instance.

    source (AS3 files)

    String that specifies the URL to an FLV, F4V, or to an XML file that describes how to play the video. Double-click the Value cell for this parameter to activate the Content Path dialog box. The default is an empty string. If you do not specify a value for the contentPath parameter, nothing happens when Animate executes the FLVPlayback instance.

    isLive

    Boolean value that, if true, specifies that the video is streaming live from FMS. The default value is false.

    cuePoints

    A string that specifies the cue points for the video. Cue points allow you to synchronize specific points in the video with Animate animation, graphics, or text. The default value is an empty string.

    maintainAspectRatio

    A Boolean value that, if true, resizes the video player in the FLVPlayback component to retain the source video aspect ratio; the source video is still scaled and the FLVPlayback component itself is not resized. The autoSize parameter takes precedence over this parameter. The default value is true.

    skin

    A parameter that opens the Select Skin dialog box and allows you to choose a skin for the component. The default value is None. If you choose None, the FLVPlayback instance does not have control elements that allow the user to play, stop, or rewind the video, or take other actions that the controls make possible. If the autoPlay parameter is set to true, the video plays automatically. For more information, see “Customizing the FLVPlayback component” in Using ActionScript 3.0 Components or ActionScript 2.0 Components Language Reference.

    totalTime

    Total number of seconds in the source video. The default value is 0. If you use progressive download, Animate uses this number if it is set to a value greater than zero (0). Otherwise, Animate tries to take the time from metadata.

    note: If you’re using FMS or FVSS, this value is ignored; the total time of the video is taken from the server.

    volume

    A number from 0 to 100 that represents the percentage of maximum volume at which to set the volume.

Specify the contentPath or source parameter

If you imported a local video clip into Animate for use with progressively downloaded or streaming video content, update the contentPath (AS2 FLA files) or source (AS3 FLA files) parameter of the FLVPlayback component before uploading your content to a web server or Adobe Media Server. The contentPath or source parameter specifies the name and location of the video file on the server, and implies the playback method (for example, progressively downloading using HTTP, or streaming from Adobe Media Server using RTMP).

  1. With the FLVPlayback component selected on the Stage, open the Property inspector (Window > Properties) and select Parameters in the Property inspector, or open the Component inspector (Window > Component Inspector).
  2. Enter values for parameters, or use the default settings as appropriate. For the contentPath or source parameter, do the following: a) Double-click the Value cell for the contentPath or source parameter to activate the Content Path dialog box. b) Enter the URL or local path to the FLV or F4V file, or the XML file (for Adobe Media Server or FVSS) that describes how to play the video.

    If you do not know the location of the video or XML file, click the folder icon to navigate to the correct location. When browsing for an video file, if it is at or below the location of the target SWF file, Animate automatically makes the path relative to that location so that it is ready for serving from a web server. Otherwise, it is an absolute Windows or Macintosh file path.

    If you specify an HTTP URL, the video file is a progressive download FLV or F4V file. If you specify a URL that is a Real-Time Messaging Protocol (RTMP) URL, the video streams from a Adobe Media Server (AMS). A URL to an XML file could also be a streaming video file from AMS or from FVSS.

    Märkus.

    When you click OK on the Content Path dialog box, Animate updates the value of the cuePoints parameter, too, because you might have changed the contentPath parameter so that the cuePoints parameter no longer applies to the current content path. As a result, you lose any disabled cue points, although not ActionScript cue points. For this reason, you may want to disable non-ActionScript cue points through ActionScript, rather than through the Cue Points dialog box.

    When you specify the contentPath or source parameter, Animate attempts to verify that the video you specified is compatible with Flash Player. If you see a warning dialog box, try re-encoding the video to FLV or F4V format with Adobe Media Encoder.

    You can also specify the location of an XML file that describes how to play multiple video streams for multiple bandwidths. The XML file uses Synchronized Multimedia Integration Language (SMIL) to describe the video files. For a description of the XML SMIL file, see “Using a SMIL file” in the ActionScript 2.0 Components Language Reference.

Media components (Flash Player 6 and 7)

Märkus.

The media components were introduced in Macromedia Flash MX Professional 2004 and are intended for use with Flash Player 6 or 7. If you are developing video content to use with Flash Player 8, instead use the FLVPlayback component introduced in Version 8. The FLVPlayback component provides improved functionality, giving you more control over video playback in the Animate environment.

The media component suite consists of three components: MediaDisplay, MediaController, and MediaPlayback. With the MediaDisplay component, to add media to your Animate documents, drag the component to the Stage and configure it in the Component inspector. In addition to setting the parameters in the Component inspector, you can add cue points to trigger other actions. The MediaDisplay component has no visual representation during playback; only the video clip is visible.

The MediaController component provides user interface controls that let the user interact with streaming media. The Controller features Play, Pause, and Rewind to Start buttons and a volume control. It also includes playbars that show how much of the media has loaded and how much has played. A playhead slider can be dragged forward and backward on the playbar to navigate quickly to different parts of the video. Using behaviors or ActionScript, you can easily link this component to the MediaDisplay component to show streaming video and provide user control.

The MediaPlayback component provides the easiest and quickest way to add video and a controller to your Animate documents. The MediaPlayback component combines the MediaDisplay and MediaController components into a single, integrated component. The MediaDisplay and MediaController component instances are automatically linked to each other for playback control.

To configure parameters for playback, size, and layout for all three components, use the Component inspector or the Parameters tab in the Property inspector. All the media components work equally well with mp3 audio content.

For more information on the media components, “Media components,” in the ActionScript 2.0 Components Language Reference.

Adobe logo

Logige oma kontole sisse