User Guide Cancel

How to add a video in Animate

  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. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. 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. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. 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. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

Animate provides several methods by which you can incorporate video into your Animate document and play it back for users.

Before you begin

Before you start working with video in Animate, it is important to understand the following information:

  • Animate can only play specific video formats.

    These include FLV, F4V, and MPEG video. For instructions on converting video in other formats, see Create video for use in Animate.

  • Use the separate Adobe Media Encoder application (included with Animate) to convert other video formats to F4V. For instructions, see Create video for use in Animate.

  • There are different ways of adding video to Animate, each with advantages in different situations. See below for a list of these methods.

  • Animate includes a Video Import Wizard that opens when you choose File > Import > Import Video.

  • Using the FLVPlayback component is the simplest way to quickly get video playing in a Animate file.

    For instructions, see Progressively download video using a web server.

Methods for using video in Animate

You can use video in Animate in different ways:

  • Progressive download from a web server

    This method keeps the video file external to the Animate file and the resulting SWF file. This keeps the SWF file size small. This is the most common method of using video in Animate.

  • Stream video using Adobe Media Server.

    This method also keeps the video file external to your Animate file. Adobe Media Streaming Server gives you secure protection of your video content in addition to a smooth streaming playback experience.

  • Embed video data directly inside a Animate file

    This method results in very large Animate files, and is only recommended for short video clips. For instructions, see Embed video within an Animate file.

Progressively download video using a web server

Progressive downloading lets you use either the FLVPlayback component or ActionScript that you write to load and play back external FLV or F4V files in a SWF file at runtime.

Because the video file is kept external to the other Animate content, it’s relatively easy to update video content without republishing the SWF file.

Progressive downloading provides the following advantages over embedding video in the Timeline:

  • During authoring, you can publish only your SWF file to preview or test part or all of your Animate content. This results in faster preview times and quicker turnaround on iterative experimentation.

  • During playback, video begins playing as soon as the first segment of video is downloaded and cached to the local computer’s disk drive.

  • At runtime, video files are loaded by Flash Player from the computer’s disk drive into the SWF file, with no limitation on video file size or duration. No audio synchronization issues or memory restrictions exist.

  • The frame rate of the video file can be different from the frame rate of the SWF file, allowing for greater flexibility in authoring Animate content.

Import video for progressive download

You can import a video file that is stored locally on your computer, and then upload the video file to a server after importing it to your FLA file. In Animate, when you import video for progressive download, you are really adding only a reference to the video file. Animate uses the reference to find the video file on your local computer or on a web server.

You can also import a video file that is already uploaded to a standard web server, an Adobe Media Server (AMS), or Flash Video Streaming Service (FVSS).

  1. Select File > Import > Import Video to import the video clip into the current Animate document.

    Select video window
    Select video window

  2. Select the video clip to import. You can select either a video clip located on your local computer, or enter the URL of a video already uploaded to a web server or Adobe Media Server.

    • To import video located on your local computer, select Load external video with playback component.

    • To import video already deployed to a web server, Adobe Media Server, or Flash Video Streaming Service, select Already deployed to a web server, Flash Video Streaming Service, or Stream From Adobe Media Server, and enter the URL of the video clip.

     The URL for a video clip located on a web server will use the http communication protocol. The URL for a video clip located on a Adobe Media Server or Flash Streaming Service will use the RTMP communication protocol.

  3. Select a skin for your video clip. 

    Select the skin for video clip
    Select the skin for video clip

    You can choose to:

    • Not use a skin with the FLVPlayback component by selecting None.

    • Select one of the predefined FLVPlayback component skins. Animate copies the skin into the same folder as the FLA file.

     FLVPlayback component skins are slightly different depending on whether you are creating an AS2- or AS3-based Animate document.

    • Select a custom skin of your own design by entering the URL of the skin on the web server.

     If you choose to use a custom skin invoked from a remote location, then live preview will not be available for the video on Stage.

  4. The Video Import Wizard creates an FLVPlayback video component on the Stage that you can use to test video playback locally. When you finish creating your Animate document and want to deploy the SWF file and video clip, upload the following assets to the web server or Adobe Media Server hosting your video:

    • If you are using a local copy of the video clip, upload the video clip (which is located in the same folder as the source video clip you selected with a .flv extension).

     Animate uses a relative path to point to the FLV or F4V file (relative to the SWF file), letting you use the same directory structure locally that you use on the server. If the video was previously deployed to your FMS or the FVSS hosting your video, you can skip this step.

    • The video skin (if you chose to use a skin)

      To use a predefined skin, Animate copies the skin into the same folder as the FLA file.

    • The FLVPlayback component

      To edit the FLVPlayback component’s URL field to that of the web server or Adobe Media Server that you are uploading the video to, use the Component inspector (Windows > Component inspector) to edit the contentPath parameter.

Stream video using Adobe Media Server

Adobe Media Server streams media in real-time to Flash Player and AIR. Adobe Media Server uses bandwidth detection to deliver video or audio content based on the user’s available bandwidth.

Streaming video with Adobe Media Server provides the following advantages over embedded and progressively downloaded video:

  • Video playback starts sooner than it does using other methods of incorporating video.

  • Streaming uses less of the client's memory and disk space, because the clients don’t need to download the entire file.

  • Network resources are used more efficiently, because only the parts of the video that are viewed are sent to the client.

  • Delivery of media is more secure, because media is not saved to the client’s cache when streamed.

  • Streaming video provides better tracking, reporting, and logging ability.

  • Streaming lets you deliver live video and audio presentations, or capture video from a web cam or digital video camera.

  • Adobe Media Server enables multiway and multiuser streaming for video chat, video messaging, and video conferencing applications.

  • By using server-side scripting to control video and audio streams, you can create server-side play lists, synchronized streams, and more intelligent delivery options based on the client’s connection speed.

To learn more about Adobe Media Server, see www.adobe.com/go/flash_media_server.

To learn more about Flash Video Streaming Service, see www.adobe.com/go/learn_fvss_en.

Embed a video file within a Animate file

When you embed a video file, all of the video file data is added to the Animate file. This results in a much larger Animate file and subsequent SWF file. The video is placed in the Timeline where you can see the individual video frames represented in the Timeline frames. Because each video frame is represented by a frame in the Timeline, the frame rate of the video clip and the SWF file must be set to the same rate. If you use different frame rates for the SWF file and the embedded video clip, video playback is inconsistent.

Note: To use variable frame rates, stream the video using either progressive downloading or Adobe Media Server. When you import video files using either of these methods, the FLV or F4V files are self-contained and run at a frame rate separate from that of all other timeline frame rates included in the SWF file.

Embedded video works best for smaller video clips, with a playback time of less than 10 seconds. If you are using video clips with longer playback times, consider using progressively downloaded video, or streaming video using Adobe Media Server.

The limitations of embedded video include:

  • You might encounter problems if the resulting SWF files become excessively large. Flash Player reserves a lot of memory when downloading and attempting to play large SWF files with embedded video, which can cause Flash Player to fail.

  • Longer video files (over 10 seconds long) often have synchronization issues between the video and audio portions of a video clip. Over time, the audio track begins playing out of sequence with the video, causing a less than desirable viewing experience.

  • To play a video embedded in a SWF file, the entire video file must be downloaded before the video starts to play. If you embed an excessively large video file, it might take a long time for the SWF file to download in its entirety and for playback to start.

  • After a video clip is imported, it cannot be edited. Instead, you must re-edit and re-import the video file.

  • When publishing your SWF file via the web, the entire video must be downloaded to the viewer’s computer before video playback can begin.

  • At runtime, the entire video must fit into the local memory of the playback computer.

  • The length of an imported video file cannot exceed 16000 frames.

  • The video frame rate and Animate Timeline frame rate must be the same. Set the frame rate of your Animate file to match the frame rate of the embedded video.

You can preview frames of an embedded video by dragging the playhead along the Timeline (scrubbing). Note that the video sound track does not play back during scrubbing. To preview the video with sound, use the Test Movie command.

Embedding a video within a Animate file

  1. Select File > Import > Import Video to import the video clip into the current Animate document.

  2. Select one of the following options:

    Load external video with playback component: Imports the video and creates an instance of the FLVPlayback component to control video playback.

    Embed FLV in SWF and play in timeline: Embeds the FLV into the Animate document and places it in the timeline.

    Embed H.264 videos in timeline: Embeds H.264 videos into the Animate document. When you import a video using this option, it is placed on the stage to be used as a guide for your animation at design time. Frames from the video are rendered on the stage as you scrub through or play the timeline. The audio for the relevant frames is also played back.

     When you try to publish your FLA file with H264 video content on a layer that is neither a guide layer nor a hidden layer, a warning is shown if the platform you are publishing to does not support embedded H.264 videos.

  3. Click Browse and select the video file from your computer and click Next.

    Optional: If you have Adobe Media Encoder installed on your computer and you want to convert the video to another format using AME, click Convert video.

  4. Choose the symbol type with which to embed the video.

    Choose the symbol type
    Choose the symbol type

    Embedded Video

    If you’re using the video clip for linear playback in the Timeline, importing the video into the Timeline is the most appropriate method.

    Movie Clip

    A best practice is to place video inside a movie clip instance, because you have the most control over the content. The video’s Timeline plays independently from the main Timeline. You do not have to extend your main Timeline by many frames to accommodate the video, which can make working with your FLA file difficult.

    Graphic

    When you embed a video clip as a graphic symbol, you cannot interact with the video using ActionScript (typically you use graphic symbols for static images and to create reusable pieces of animation that are tied to the main Timeline).

  5. Import the video clip directly onto the Stage (and the Timeline) or as a library item.

    By default, Animate places the video you import on the Stage. To import into the library only, deselect Place Instance on Stage.

    If you’re creating a simple video presentation with linear narration and little to no interaction, accept the default setting and import the video to the Stage. To create a more dynamic presentation, work with multiple video clips, or add dynamic transitions or other elements using ActionScript, import the video into the library. After a video clip is in the library, customize it by converting it into a MovieClip object that you can more easily control with ActionScript.

    By default, Animate expands the Timeline to accommodate the playback length of the video clip you are embedding.

    If the video file contains audio that you don't want to import, deselect Include audio.  

  6. Click Next. Review the confirmation messages and click Finish.

    The Video Import wizard embeds the video into the SWF file. The video appears either on the Stage or in the library depending on the embedding options you chose.

    Finish video import dialog
    Finish video import dialog

  7. In the Property inspector (Window > Properties), give the video clip an instance name, and make any modifications to the video clip’s properties.

    Video clip instance name
    Video clip instance name

Import video files into the library

To import FLV, F4V, or H.264 videos, use the Import > Import Video or Import to Library commands.

To create your own video player, which dynamically loads FLV or F4V files from an external source, place your video inside a movie clip symbol. When you load FLV or F4V files dynamically, adjust the dimensions of the movie clip to match the actual dimension of the video file and scale the video by scaling the movie clip.

 A best practice is to place video inside a movie clip instance, which gives you the most control over the content. The video’s Timeline plays independently from the main Timeline. You do not have to extend your main Timeline by many frames to accommodate the video, which can make working with your FLA file difficult.

  1. To import an FLV, SWF, or H.264 video file into the library, do one of the following:

    • Select File > Import > Import To Library.

    • Select any existing video clip in the Library Panel, and select Properties from the Library Panel menu. You can also rght-click on the video file and choose Properties in the pop-up menu. Click Import. Locate the file to import, and click Open.

    Import to library option
    Import to library option

Change the properties of a video clip

You can change properties for an instance of an embedded video clip on the Stage, assign the instance an instance name, and change its width, height, and position on the Stage using the Property inspector. You can also swap an instance of a video clip—assign a different symbol to an instance of a video clip. Assigning a different symbol to an instance displays a different instance on the Stage but leaves all the other instance properties (such as dimensions and registration point) intact.

In the Video Properties dialog box, you can do the following:

  • View information about an imported video clip, including its name, path, creation date, pixel dimensions, length, and file size

  • Change the video clip name

  • Update the video clip if you modify it in an external editor

  • Import an FLV or F4V file to replace the selected clip

  • Export a video clip as an FLV or F4V file

Change video instance properties in the Property inspector

  1. Select an instance of an embedded or linked video clip on the Stage.
  2. Select Window > Properties, and do any of the following:

    • Enter an instance name in the Name text field on the left side of the Property inspector.

    • Enter values for W and H to change the dimensions of the video instance.

    • Enter values for X and Y to change the position of the upper-left corner of the instance on the Stage.

    • Click Swap. Select a video clip to replace the clip currently assigned to the instance.

     You can swap an embedded video clip only with another embedded video clip, and you can swap a linked video clip only with another linked video clip.

View video clip properties in the Video Properties dialog box

  1. Select a video clip in the Library Panel.
  2. Select Properties from the Library Panel menu, or click the Properties button located at the bottom of the Library Panel. The Video Properties dialog box is displayed.

Assign a new name to, update, or replace a video

  1. Select the video clip in the Library Panel and select Properties from the Library Panel menu.
  2. Do one of the following:

    • To assign a new name, enter the name in the Name text field.

    • To update a video, navigate to the updated video file and click Open.

    • To replace a video, click Import, navigate to the FLV, F4V, or H.264 file to replace the current clip, and click Open.

Control video playback using the Timeline

To control playback of an embedded video file, control the Timeline that contains the video. For example, to pause a video playing on the main Timeline, you would call a stop() action that targets that Timeline. Similarly, you can control a video object in a movie clip symbol by controlling the playback of that symbol’s Timeline.

You can apply the following actions to imported video objects in movie clips: goTo, play, stop, toggleHighQuality, stopAllSounds, getURL,FScommand, loadMovie, unloadMovie, ifFrameLoaded, and onMouseEvent. To apply actions to a Video object, first convert the Video object to a movie clip.

To show a live video stream from a camera, use ActionScript. First, place a Video object on the Stage, select New Video from the Library Panel menu. To attach the video stream to the Video object, use Video.attachVideo.

See also Video and attachVideo (Video.attachVideo method) in the ActionScript 2.0 Language Reference, and fl.video in the ActionScript 3.0 Language Reference.

Update an embedded video after editing its source file

  1. Select the video clip in the Library Panel.
  2. Select Properties and click Update.

    The embedded video clip is updated with the edited file. The compression settings you selected when you first imported the video are reapplied to the updated clip.

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online