Video Formatting

Creating a QuickTime Source File from After Effects

A "source" file is a perfect-uncompressed file, usually a "LOSSLESS" Apple Animation file.To identify a source file include "-source" at the end of the file name. Reasons for creating lossless source file include:

• Using the video in a composited animation that includes other media such as PSD, SWF, PNG sequence or other videos. It's best to composite un-compressed files if your computer can handle it.

Note: The newest versions of Premier are not capable of exporting a "Lossless" file.

In After Effects:

1. Composition Settings:

- set to 1280 x 720 or 1080 x 1920

- Pixel aspect: square pixels,

- Resolution: full

2. Scale all layers to fill the frame if necessary.

3. Composition > Add to Render Que.

4. In Render Que:

- Output to: click the blue text to change the output name and location

- Output Module: toggle on Audio Output (if there is audio in work)

5. Click "Render" in upper right corner.

Creating a QuickTime ProRes File from After Effects - For use in Garageband and computer playback

An uncompressed "source" file may not play smoothly on a computer. If this is the case, you can create a smaller, compressed file that will play on any computer by creating a file with these settings.

In After Effects:

1. Composition Settings:

- set to 1280 x 720 or 1080 x 1920

- Pixel aspect: square pixels

- Resolution: full

2. Composition > Add to Render Que.

3. In Render Que:

- Output to: click the blue text to change the output name and location

- Output Module:

Format: Quicktime

Format Options: Apple ProRes 4444

audio: leave at default: 48 khz, 16 bit, stereo

4. Click "Render" in upper right corner

creating a QuickTime Source File from Adobe Animate

A "source" file is a perfect-uncompressed file, usually a "LOSSLESS" Apple Animation file.To identify a source file include "-source" at the end of the file name. Example: MyFileName-Source

In Animate:

1. Choose File > Export > Export Video
2. Uncheck "Convert video in Adobe Media Encoder"
3. Click "Browse" and choose the destination where you want to save the rendered file.
4. Click Export

Creating a QuickTime Pro Res file from Adobe Animate - For use in Garageband and computer playback

A "ProRes" compressed file is a high quality mpeg 4 video that has a significantly smaller data file size but maintains very high quality. Use this compressed file in Garageband or for playback on your computer

In your Finder:

1. Open your Quicktime Source File
2. The Quicktime App will open your file and convert it to an "Apple ProRes" file.
3. Save the file with the a "-ProRes" instead of a "-source" in the name.
   • Example: MyFileName-ProRes

For CS6 and earlier Adobe Flash: Creating a QuickTime Source File from a Flash File Using PNG Sequence

A "source" file is a perfect-uncompressed file, usually an Apple Animation file. All compressed files should be created from this file, otherwise you will be double compressing. Upload this source file to YouTube or Vimeo if you are using one of those to put your work online.

To identify a source file... include "-source" at the end of the file name

In Flash:

1. Set up Audio Export:
   1. File > Publish Settings > Flash > Audio Stream and Audio Event > Set To: RAW, 44khz. Uncheck "Convert Stereo to Mono."
   2. Export Image Files
   3. File > Export > Export Movie > PNG Sequence (in dialog box - leave settings alone)
2. Export Audio File
   1. File > Export > Export Video
   2. Leave "Convert in Media Encoder" checked
   3. In Media Encoder, click the drop-down triangle next to H.264 and chose AIFF.
3. Click the green triangle to start the render.

In After Effects:

1. New Project
2. File > Import > Choose first image in sequence (check 'PNG Sequence)
3. Right-click the clip in the Project panel > Modify > Interpret Footage > Main:
   1. - Main Options: Set the frame rate to match the originating Flash file
   2. - Color Management: Toggle on... Preserve RGB
4. Drag Clip to stage
5. Composition Settings:
   1. - Set width/height to 1280 x 720 (typical, but you may have reasons to format differently)
   2. - square pixels
   3. - match frame rate to Flash file
6. Scale imported PNG sequence to fill the 1280 x 720 frame
7. File > Import > File > Choose the .aif audio file
8. Drag the .aif file to the timeline and drag/position it to sync it.
9. Composition > Add to Render Que
10. In Render Que ..
    1. - Leave Output setting at "Lossless"
    2. - Output to > choose file location (add "-source" to end of file name)
    3. - Output Module > toggle on.. Audio Output (leave at AAC, 44khz, stereo)
11. Click "Render" in upper right corner

Importing a video file into After Effects for Further Animation

In After Effects:

1. New Project
2. File > Import > Choose the .mov file
3. Right-click the clip in the Project panel > Modify > Interpret Footage > Main:
   1. - Main Options: Set the frame rate to match the originating Flash file
   2. - Color Management: Toggle on... Preserve RGB
4. Drag footage to stage
5. The Audio will be placed in the timeline along with the footage

Importing an Animate SWF File into After Effects for Further Animation

This procedure is used to composite Flash animation with After Effects animation or video

From Animate:

• 1. Create a layer with a background image or color if you do not want the background to be transparent in Aftereffects.
• 2. Set up Audio Export:
  • File > Publish Settings > Flash > Audio Stream and Audio Event > Set To: RAW, 44khz
• 3. Export Image File
  • File > Publish Movie > SWF
• 4. Export Audio File (if needed)
  • File > Export > Export Video
  • Leave "Convert in Media Encoder" checked
  • In Media Encoder
    • Uncheck "Export video"
    • Click OK
    • Click the green triangle to start the render.

In After Effects:

1. New Project
2. File > Import > Choose the SWF
3. Right-click the clip in the Project panel > Modify > Interpret Footage > Main:
   1. - Main Options: Set the frame rate to match the originating Flash file
   2. - Color Management: Toggle on... Preserve RGB
4. Drag Clip to stage
5. If Audio is needed - File > Import > File > Choose the .aif audio file
6. Drag the .aif file to the timeline and drag/position it to sync it.
7. Perform additional animation in Aftereffects
8. Composition > Add to Render Que
9. In Render Que ..
   1. - Output to > choose file location (add "-source" to end of file name)
   2. - Output Module > toggle on.. Audio Output (leave at AAC, 48 khz, stereo)
10. Click "Render" in upper right corner

Vimeo or YouTube ?

Both provide equally high levels of quality and download speeds. If you want your videos to be compatible with Apple and Android mobile platforms, using one of these video services can be effective.

YouTube

• Has a no wait time after uploading videos
• Compatibility on both Android and iPad platforms is consistent
• Will play High Def. version in a browser embed (user can toggle it on)
• Plays lower res version on iPad than Vimeo
• Best choice for Browser and tablet compatibility: 100 % compatible
• Commercial use of all kinds is allowed
• The largest available audience on the web

Vimeo

• Has a 20 minute wait time after uploading videos - not sure if this is still the case
• Compatibility on Android platform is good but inconsistent
• Good choice for browser and tablet compatibility: about 90% compatible
• Commercial use not allowed but demo reels are OK
• The second largest audience on the web

Uploading a Video to YouTube or Vimeo

1. Create a ProRes video file (see above for instructions) - the file must be at least 1280 x 720 pixels for YouTube/Vimeo to create a high def. video.
2. Log in to your YouTube or Vimeo account.
3. Click the upload button, and locate yourProRes file.
4. Set the privacy setting to public
5. Your video may take a long time to upload, depending on file size and internet speed. In the meantime, you can add the description, keywords, etc.
6. Once your video is uploaded and processes, click publish

1. In the line of embed code, change pixel dimensions to the desired embedded pixel dimensions. Note: For the KCAD DM Portfolio Template use (810 x 456) or (640 x 360).
2. Copy the embed code
3. Paste the embed code into your html, content management system or widget.
4. To achieve a cleaner thumbnail look and eliminate the "related videos" at the end..
   1. Go to your channel on YouTube and log-in.
   2. In the Video Manger > click on your video to open it.
   3. Click on "Share" which appears below theYouTube Clp.
   4. You will then see the option "Embed", click on it.
   5. Uncheck the option "Show suggested videos when the video finishes"
5. To achieve a cleaner thumbnail look and eliminate the "related videos" at the end.... you can also use this code:
6. <iframe src="http://www.youtube.com/embed/m3SAwF-is4Y?rel=0;3&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen="allowfullscreen" width="671" height="371"></iframe>

Embedding a Video From Vimeo into a Web Page

1. While viewing in Vimeo, click the "Share" (paper airplane) button.
2. Under "Embed" click "show options."
3. Turn off all options (or customize as desired).
4. Change the pixel dimensions as desired. Note: For the KCAD DM Portfolio Template use (810 x 456) or (640 x 360).
5. Copy the embed code.
6. Paste the embed code into your html, content management system, or widget.

example: To embed in a Google Site:

1. Go to your Google site.
2. Click Insert > More Options, and search for the Google "embed" gadget.
3. Click the gadget properties and paste the embed code.
4. Change the dimensions to match the video.
5. Uncheck the "Title" and "Border" options (scroll to see these).

Creating a .FLV File to Embed in a Flash (Web or Mobile) Application

A .FLV file is the preferred choice of quality and file size for embedding into desktop-only websites and Flash applications including iPad and Android apps created using Flash.

In After Effects:

1. Composition Settings

- Set width and height to match the desired embedded size. (640 x 360 recommended)

- Pixel aspect: square pixels,

- Resolution: full

2. Composition > Add to Render Que

3. In Render Que ..

- Output to > choose file location

- Output Module

Video

- Format: FLV

- Depth: Millions of colors

- Resize: match embedded size

- Format Options:

- CBR

- Bitrate: 700 (7) Mobile and Web

(adjust as necessary to achieve desired quality/file size)

- Quality: Best

Audio

- AAC

- Quality: High

- 44.1 khz, Stereo

- Format Options

- Bitrate: 256

Maximum Render Quality

4. Click "Render" in upper right corner

Note: If using Premier or Adobe Media Encoder: Toggle on:

- Maximum depth

- Maximum render quality

Creating a .mp4 File to Link Flash (Web-only) Applications

A .FLV file is the preferred choice for quality and file size for embedding into Desktop only websites and Flash Applications including iPad and Android apps created using Flash.

In After Effects:

1. Composition Settings >

- Set width and height to match the desired embedded size. (640 x 360 recommended)

- Pixel aspect: square pixels,

- Resolution: full

2. Composition > Add to Render Que

3. In Render Que

- Output to > choose file location

- Output Module

Video

- Format: mp4

- Depth: Millions of colors

- Resize: match embedded size

- Format Options:

Multiplexer: MP4 > Standard Stream

Video:

- CBR

- Bitrate: 700 (7) Mobile and Web (adjust as needed to achieve desired quality/file size)

- Quality: Best

Audio

- AAC

- Quality: High

- 44.1 khz, Stereo

- Format Options

- Bitrate: 256

Maximum Render Quality

4. Click "Render" in upper right corner

Note: If using Premier or Adobe Media Encoder: Toggle on:

- Maximum depth

- Maximum render quality