Flash video component tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(20 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{under construction}}
{{Incomplete}}
{{Incomplete}}
{{Flash tutorial|CS6, (CS4, CS5)|beginner|}}
{{Flash tutorial|CS6, (CS4, CS5)|beginner|}}
<!-- <pageby nominor="false" comments="false"/> -->


== Introduction ==
== Introduction ==
Line 10: Line 10:
<div class="tut_goals">
<div class="tut_goals">
; Learning goals:
; Learning goals:
: Learn how to encode *.flv and (older) *.flv files
: Learn how to encode *.flv and (older) *.f4v files
: Learn how to use the Flash 9 (CS3) video component for simple video playback
: Learn how to use the Flash 11 (CS6) video component for simple video playback


;Prerequisites for the first part
;Prerequisites for the first part
Line 20: Line 20:
;Moving on
;Moving on
: [[Flash augmented video tutorial]]
: [[Flash augmented video tutorial]]
: [[Flash video captions tutorial]]
: The [[Flash]] article has a list of other tutorials.
: The [[Flash]] article has a list of other tutorials.


Line 33: Line 34:


* The FLVPlayBack Video Component is really easy to use since it provides a series of ready-made skins (user interfaces) from which you can choose.
* The FLVPlayBack Video Component is really easy to use since it provides a series of ready-made skins (user interfaces) from which you can choose.
* The Caption component requires some XML Editing.
* The Caption (subtitle) component requires some XML Editing. Read the [[Flash video captions tutorial]].
* For more sophisticated video-animation interaction you need to code with ActionScript.
* For more sophisticated interactions with a video you need to code with ActionScript, as explained in the [[Flash augmented video tutorial]]


; The executive how-to summary for simple video playbacks
; The executive how-to summary for simple video playbacks
* Encode your video with the Video Encoder. Flash has its own *.flv video format.
* If your video uses a format that is not *.flv, *.f4v or *.mp4 of if you plan to reduce its size or trim it then prepare it first with the Adobe Media Encoder. This tool is included in the Flash distribution. It may differ a bit from the full CS6 version.
* Drag the FLVPlayBack Video Component to the stage.
* Drag the FLVPlayBack Video Component to the stage.
* Open the component inspector panel. Choose a skin and provide the file name or URL of the *.flv video
* Open the component inspector panel. Choose a skin (user interface configuration) and provide the file name or URL of the *.flv video


== Preparing your video in CS3/CS4==
Note: In CS3 and CS4, only the Adobe *.flv format was supported. Since Flash 10/CS5, Adobe provides the more efficient *.f4v format and also directly supports other formats for playback.


In CS3 and CS4, Flash uses a special video format (*.flv) to render videos. You may directly encode your formats with the CS3 or CS4 video encoding tool (that's what I suggest) or wait until Flash will prompt you to encode when you import a video in non *.flv format.
== Using the Flash video component ==


Flash CS5 allows to directly play other formats, e.g. *.mp4. However it is often necessary to adapt the video to your special needs (e.g. make it smaller, clip it, remove frames from the start or the end) and therefore to use the Media encoding tool. In addition, Flash 10/CS5 supports a new more efficient Flash video format: fl4. See below, for a short "how to".
Using Flash CS6 (and CS5) component is really easy
* You can use *.mp4 videos without prior encoding to a Flash video format
* All operations are centralized in the properties panel
* The only difficulties relate to file path operations (correct paths and copying files)


=== Video encoding with Flash CS3 ===
In most cases, you would have to adapt your video file, i.e. at least make it smaller and cut of unwanted beginning and end.


The Flash package includes a video encoder with which you can transcode various video formats into *.flv format. It also lets you define cue points and edit (somewhat) the video.
Just below we explain the procedure for an *.mp4, *.flv or *.f4v video that already is "ready" for production.


[[image:flash-cs3-video-encoder-tool.jpg|frame|none|The Flash CS3 Video encoder tool]]
'''Step 1: Drag the component to the stage and save the file'''


Now, open the '''Flash CS3 Video encoder''' program directly from the Desktop (i.e. not from Flash!).
# Open the components panel (Menu Window->Components or CTRL-F7)
# Drag FLPLayback 2.5 on the stage
# Now '''save your Flash file''', else it will not work, since Flash will not find the video file !
# Copy the video file into the same directory as your flash file (unless you know how to deal with relative file paths, something that you may have learned creating HTML pages using pictures)


==== Video transcoding ====
'''Step 2: Configure the properties of the component'''
# Select the component
# Set the name of the video file with ''source'' in the '''Properties panel''' (e.g. BFB-BBC.mp4). '''Make sure to shorten the file path!'''
#* Bad: C:\...\flash\ex6\screenshots\my_video.mp4
#* Good: my_video.mp4
# Select an appropriate ''skin''. A skin will define what kinds of controls the user will have. You also can make adjustements to the color
# Keep the defaults for starters, e.g. maintainAspectRation for starters.
... That's it.


The tool supports most current video formats. You can for example import *.mov, *.avi, *.mpeg, *.dvi, *.wmv, *.3pg and *.mp4 formats in this tool. If you need a video file to play with see the [[#Artwork|Artwork links]] at the end of this tutorial.
[[image:flash-cs6-video-component-annotated.png|thumb|800px|none|[[RapMan]] video from BBC]]


; Opening a video file
'''Step 3: Publishing a flash file that uses video'''
* Open the Flash CS3 Video Encoder tool
* Click on the ''Add ...'' button to add a new video.


; Edit
If you plan to publish the flash file on a web site or if you mail your application, '''do not forget to include all the files''', for example
* Click ''Settings'' to define output settings and to add video cues, etc. You can just leave the defaults if you like, unless your video file is long and/or big and you want to trim it down.
* flash-cs6-mp4-video.html (the HTML file, optional)
 
* flash-cs6-mp4-video.swf (the Flash file)
; Encoding
* BFB-BBC.mp4 (the video)
* Click ''Start Queue'' to encode your video. By default, the resulting *.flv file will be saved in the same directory as the source video. Flash will not overwrite an older *.flv version but rather renumber the new version.
* SkinUnderAllNoFullscreen.swf (the skin library)
 
==== Video Editing ====
 
The Flash Video Encoder tool has some limited editing capacity you can access through the settings button. Since videos quickly can become huge, you may want to crop off space from top, bottom or left and right and also make it shorter. You also can choose from various levels of video and audio quality.
 
; Look at the contents
* Move the horizontal glider (yellow triangle) from left to right.
 
; To resize and crop
* Select the "Crop and Resize" tab
* You can crop the video (i.e. take of space on top, bottom, right, left.
See the screen capture below.


; To crop off frames at start and at the end
Example files:
* You cut off frames from the beginning and the end of the original video (move the little triangles below the playhead as shown in the screen capture below.
* [http://tecfa.unige.ch/guides/flash/ex6/component-video-intro/flash-cs6-video-component.html flash-cs6-video-component.html]
* [http://tecfa.unige.ch/guides/flash/ex6/component-video-intro/flash-cs6-video-component.fla flash-cs6-video-component.fla] (Flash source)
* [http://tecfa.unige.ch/guides/flash/ex6/component-video-intro/BFB-BBC.mp4 BFB-BBC.mp4] (original video)
The video shows the first 3D printer I owned, a [[RapMan]] (bought sometimes in 2009).


[[image:flash-cs3-video-tool-editing.jpg|thumb|800px|none|Cropping and resizing the length of a video - listening to sound with QuickTime Player]]
== Using File import ==


Tip: If you want to hear the video, just listen to it with an other tool, e.g. the QuickTime Player if your source is *.mp4. Both tools show time in seconds.
As an alternative, you could use the File import menu. However, you might make wrong choice and therefore we do not recommend this procedure. This procedure will use the standard FLVPlayback component (not the more versatile version 2.5)


It is import to make a video as small as possible if you plan to do timeline animations as shown in the [[#Import_a_video_into_the_timeline| Importing a video to the timeline]] section.
(1) Import the video file


; Typical quality settings
* Menu File -> Import -> Import video
* Select "video" and "audio" tabs
* Video: For short videos I use the medium Flash quality with default codecs
* Audio: If video quality is bad from start (e.g. made with your cell phone) you can reduce audio to 64 kpbs mono or even less since it can't get worse than it already is.


==== Cue Points ====
[[image:flash-cs6-import-video-select-video.png|thumb|600px|none|Importing a video file]]


{{quotation|Cue points cause the video playback to start other actions within the presentation. For example, you can create a Flash presentation that has video playing in one area of the screen while text and graphics appear in another area. A cue point placed in the video starts an update to the text and graphic, while they remain relevant to the content of the video. (Adobe CS3 Video Encode Help, sept. 2007)}}
(2) Select the skin


You don't need cue points for just playing a video, so you may come back later and read about inserting cue points.
[[image:flash-cs6-import-video-select-video2.png|thumb|600px|none|Select the skin]]


There are several ways of adding cue points.
(3) Click next and adjust the parameters


; (1) Adding Cue points in the video encoder
== Using the Adobe Media Encoder CS6 ==


* Select the Cue Points Tab
The Adobe Media encoder can be found in the Program menu of your system (Windows/Mac) or in the File Import process in Flash CS6 as explained in the previous section.
* Glide forwards and backwards the video play head to select positions you'd like to mark
* Click on the + to add a new cue point.
* '''Event cue points''' are used to trigger ActionScript methods when the cue point is reached, and let you synchronize the video playback to other events within the Flash presentation.
* '''Navigation cue points''' are used for navigation and seeking.


The difference between these two kinds of cue points are only manifest if you use cue points to search for something. e.g. to trigger animations from cue points, it doesn't matter if the cue point is of type "event", "navigation" or "actionscript". However if you seek a cue point, there will be a difference.
'''Important''': You cannot transcode or edit *.flv files !! Use another source format like *.mp4 ! I can't explain why, but it's Adobe's choice ....


[[image:cs3-video-encoder.jpg|thumb|600px|none|Adobe CS3 Video Encoder Cue Points]]
=== Simple transcoding ===


Each cue point consists of a name, a type and the time at which it occurs and we then can retrieve this information in Flash as you will see in [[#Handling_events_from_the_movie|handling events from the movie]] section below.
# Click on ''+'' to add a video for encoding
Anyhow, I rather suggest to add cue points through ActionScript or the component's parameters, since you then can add/remove cue points whenever there is a need.
# Select the video format. By default, the Flash F4V format is selected
# Select the quality
# Press the green arrow button to launch the encoding. The resulting file will be put in the same directory as the source video.


; (2) Adding "ActionScript" cue points with the component inspector
[[image:flash-cs6-media-encoder.png|thumb|600px|none|Adding a video to the Adobe Media Encoder CS6]]
* Through the FLVPlayBack component's parameters, i.e. open the parameter or the component inspector panel (see below). I recommend this method for beginners.


; (3) Adding "ActionScript" cue points with ActionScript
=== Editing ===
* In ActionScript with the addASCuePoint() method, example:
video_component.addASCuePoint(10.5, "wonder");


The advantage of the ActionScript method is that you easily can change these cue points when adjustments are needed. E.g. you may notice at some point that your video file is too big and you may want to shorten it down. It's '''much'''faster to change AS code or XML descriptors than entering the cue points again with the encoding tool and faster than editing the component through the inspector.
The Media Encoder allows to "edit a video file in various ways. It is not a full video editor like Premiere, but allows to do a few very useful operations:
* You can remove frames in the start or the end
* You can clip each side (top, bottom, left, right). This is particularly useful, if you shot the video yourself, e.g. with a cell phone.
* You also can add so-called cue-points. However we suggest not to use this feature and rather use so-called ActionScript cue points.


Disadvantage is that some methods made for ''navigation'' cue points will not work.
The '''editor is difficult to find'''. Do the following
* '''Select the output video line''' (underneath the imported video, see the screen capture ''above'': the *.flv file is selected)
* Menu Edit -> Export settings or hit CTRL-E (...fine name ....)


AS3 example:
The picture below explains, how to make a few edits.
video_component.addASCuePoint(40, "End");
* Clip the video: Click on the ''Source'' tab first, select the rectangle icon to the left, then either change the values of left, top, right, bottom or use the clipping rectangle
''video_component'' is the name you gave to the component instance
* Look at frames: Move the yellow play head
* Remove frames from the start and/or the end: Use the small white triangles


[[image:flash-cs6-media-encoder-export-settings-annotated.png|thumb|800px|none|Adobe Media Encoder editing (export settings)]]


=== Other transcoding tools ===
Once you are done:
* Click on OK
* The click on the green arrow button to encode (as above)


Your modern cell phone may encode video with MP4. Flash 9 (CS3) can not directly import this format. If you don't have access to the CS3 Flash Video Encoder tool (an older Flash version may not encode newer formats), you may download the free SUPER tool (it has more features than many commercial tools).
== Links ==


Read the [[MP4]] article to see how I managed to use this free (and excellent)  [http://www.erightsoft.com/SUPER.html SUPER] encoder to go from MP4 to MPV with MPEG3-v2/MP3.
=== Finding videos on the Internet ===


=== Using the FLVPlayback component ===
'''Finding and downloading videos'''
* You may download videos from the Internet (make sure that copyright allows you to do so). Getting videos from sites like YouTube is not easy without download helpers (see below). Therefore, try sites like http://vimeo.com first.
* Firefox video download helper extension: https://addons.mozilla.org/en-US/firefox/addon/3006
* Google video search: http://video.google.com/. Use [http://video.google.com/videoadvancedsearch advanced search] in order to restrict search to duration.


Let's now import a video and use it the simple way. In this example we will show how to import a video I (quickly) made with my Nokia N73 cell phone. The easiest strategy is to directly import a *.flv file.
Video sites:
 
* http://vimeo.com/ Includes open source (creative commons) videos. After a search, you can tick a box for only showing downloadable videos.
=== Using the video with the component first method ===
* http://vids.myspace.com/ Needs special tools to download
 
* http://youtube.com/ Needs special tools to download
The most simple procedure to use a video with the '''FLVPlayBack''' component is the following one:
 
; Step 0 - Get/create a *.flv file
* See above.
* Put it in the same directory as your Flash file.
 
; Step 1 - Open the component library
* Menu ''Window->Components'' or hit Ctrl-F7.
* Dock it next to your library.
 
; Step 2 - Drag the video component to the stage
 
* Drag the '''FLVPlayBack''' component from the components library to the stage.
 
; Step 3 - Tell FLVPlayBack where to find the video
* Open the '''Component Inspector panel''' (''Window->Component Inspect'') and dock it next to the library.
* Add the name of a video file in the source field of the parameters. Click on the field and then either type the file name or use the file chooser menu.
* Tick ''match source FLV dimensions''. This will adjust the size of the video control widget to your video.
* Make sure to remove the directory path from the file name. For example, instead of:
:E:\schneide\te\coap2110\ex\component-video-intro\office-dks3.flv
just keep the file name
:office-dks3.flv
Else when you copy both the *.sfw and the *.flv file to some other place you flash file won't find the video anymore and the playback will break.
 
; Step 4 - Adjust the skin
* Play around with various skins in the component inspector panel. Basically you can add/remove various user controls.
* Click on the value of the "skin" parameter. A popup menu will let you select from various skins.
* Finally, you can change the color of the component.
 
[[Image:Flash-cs3-video-select-skin.png|thumb|500px|none|Select the video component skin]]
 
Enjoy ....
 
=== Importing the video with the import method ===
 
Here is an alternative and longer method for using the FLVPlayBack component.
 
; Step 1 - FLV files
* Encode the video as *.flv file as described above.
* If you directly import other formats, i.e.  *.mov, *.avi, *.mpeg, *.dvi, *.wmv, *.3pg (but not MP4), Flash will at some point open the Video encoder tool. So the result is the same: a *.flv file. It will be saved by default in the same directory as your original video file.
 
; Step 2 - Import the video
* Create a new layer and call it "video"
* Menu ''File->Import->Import Video''
 
You then can from a popup menu choose how the video should be deployed (see next step).
 
; Step 3 - Choose "Standard web server / progressive download"
* If you only have access to a standard web server: Choose "progressive download" from a web server.
* You then can choose from a variety of built-in video control skins for the '''FLVPlayBack''' Video Component which will be automatically added to your library (you later can change the skin again, so don't worry now).
The video you will import will simply use the standard video playback component that you also can find in the "Components" panel.
 
; Step 4 - Fine tune the stage
* Change the background
* Adjust stage size to video size or alternatively add some text or graphics if the stage is bigger. Create a new layer for these.
* You also can change the skins for the video control skin. Simply open the Parameters panel. Scroll down to the skin field and select another one from the popup menu. Same thing for other parameters. You can quite safely play around with them.
 
; Step 5 - Fix the source file location
You must tell Flash where the video file will sit on your server (see also the next step)
* Click on the video component
* Open the parameter panel (menu ''Window->Properties->Parameters'' in case it's not already docked) or the open the ''Property inspector'' panel. I prefer the latter since I have it docked next to library and don't need to scroll as much as in the bottom panels.
* Change the '''source''' field, scroll down if needed (!). In our case I killed everything in front of the file name ''office-dks.flv''.
For example, instead of:
:E:\schneide\te\coap2110\ex\component-video-intro\office-dks3.flv
I only kept the file name since I plan to put all files in the same directory on the server. Also on my desktop the files sit in the same directory.So I shortened down the path:
:office-dks3.flv
 
[[Image:Flash-cs3-video-component-source.png|thumb|800px|none|Configuring the video component]]
 
; Step 6 - Tune some parameters
In the property inspector or '''parameters panel''' you may set things like:
* Volume: I suggest to turn it down to 0.3 since you will be fed up listening to your video after a while
* AutoPlay: True means that the video will start playing after it loads. False requires the user to press the play button
 
; Step 7 - Copy the *.flv and *.swf skin file to your web server (optional)
* I suggest to put all files in same directory since they will be easier to manage that way. If you don't, go back to step 5. Also remember that the *.flv file may sit in the same directory where you original video is.
* Do ''not forget'' to copy the "*.swf skin file, for example ''SkinUnderAllNoFullscreen.swf''.
 
; If the video doesn't play...
* Most likely you forgot to define the right source path, either a full URL, a relative URL, or a *.flv file name that sits in the same directory.
* File names are case sensitive on most Web servers ! Also avoid using blanks and other strange characters in your file name.
** Good = ''myvideo.flv'' - Bad = my ''Video.flv''
 
; Results
* [http://tecfa.unige.ch/guides/flash/ex/component-video-intro/flash-cs3-video-simple-server.html flash-cs3-video-simple-server.html]
* Source: [http://tecfa.unige.ch/guides/flash/ex/component-video-intro/flash-cs3-video-simple-server.fla flash-cs3-video-simple-server.fla]
* Video file: [http://tecfa.unige.ch/guides/flash/ex/component-video-intro/office-dks.flv office-dks.flv]
* Directory: http://tecfa.unige.ch/guides/flash/ex/component-video-intro/
 
== The Flash CS5 Video component and the Adobe Media Encoder CS5 ==
 
=== Using the Flash CS5 video component ===
 
Using Flash CS5 component is somewhat easier than prior versions and for two reasons:
* On can use *.mp4 videos without prior encoding to a Flash video format
* All operations are now centralized in the properties panel.
 
Procedure for an *.mp4, *.flv or *fl4 video that already is "ready" for production.
 
# Open the components panel (Menu Window->Components or CTRL-F7)
# Drag FLPLayback 2.5 on the stage
# Set the name of the video file with ''source'' in the '''Properties panel''' (e.g. BFB-BBC.mp4)
# Select an appropriate ''skin''
... That's it.
 
[[image:flash-cs5-video-component.jpg|thumb|800px|none|[[RapMan]] video from BBC]]
 
In order to publish the flash file do not forget to put all the files on your web server (!), e.g.
* flash-cs5-mp4-video.html (the HTML file, optional)
* flash-cs5-mp4-video.swfl (the Flash file)
* BFB-BBC.mp4 (the video)
* SkinUnderAllNoFullscreen.swf (the skin library)


=== Using the Adobe Media Encoder CS5 ===
=== Adobe documentation ===


; Importing a video
* [http://help.adobe.com/en_US/flash/cs/using/WSb03e830bd6f770ee-70a39d612436d472f4-8000.html Flash Professional / Create video files for use in Flash], at Adobe, retrieved Feb 18 2013.
* [http://help.adobe.com/en_US/flash/cs/using/WS62A31643-EF23-45ec-80D0-04DB8CE1AB1F.html The FLVPlayback component]
* [http://helpx.adobe.com/media-encoder/topics.html Media Encoder Help / Help and tutorials] at Adobe, retrieved Feb 18 2013.


In the welcome screen,
* Click on ''Add...'' to add a video for encoding
* Select the video (click on the line) and click on ''Settings ...''
[[image:adobe-media-encoder-cs5-1.jpg|frame|none|Adding a video to the Adobe Media Encoder CS5]]


; Make adjustments to the settings
[[category:Digital video]]
* We suggest to select a preset F4V format
* To left, you can remove frames for the start or the end (move around the playhead)
* If you shot the video yourself, you likely also want to do some clipping
* As a general rule, we suggest to add cue points (if needed) in Flash CS5 and not during the encoding ...
[[image:adobe-media-encoder-cs5-.jpg|thumb|800px|none|Adobe Media Encoder CS5 Settings]]

Latest revision as of 15:39, 25 March 2018

Introduction

Video components are prebuilt interface elements (widgets) that will speed up video integration. In particular, the FLVPlayBack Video Component allows to render videos without any ActionScript programming. It includes a nice choice of skins for user controls. Videos also can be enhanced with captioning or they may interact with the rest of the animation. This is discussed in the Flash augmented video tutorial

Learning goals
Learn how to encode *.flv and (older) *.f4v files
Learn how to use the Flash 11 (CS6) video component for simple video playback
Prerequisites for the first part
Flash CS6 desktop tutorial
Flash drawing tutorial
Flash component button tutorial
Moving on
Flash augmented video tutorial
Flash video captions tutorial
The Flash article has a list of other tutorials.
Quality
This text should technical people get going and may not be good enough for self-learning beginners. It can be used as handout in a "hands-on" class. That is what Daniel K. Schneider made it for...
Level
It both aims at beginners (FLV encoding, using the video playback component and embedding a video in the timeline) and intermediate Flash designers (inserting captions and using cue points to trigger animations).
The executive summary about Flash Videos

Flash has built-in video management components.

  • The FLVPlayBack Video Component is really easy to use since it provides a series of ready-made skins (user interfaces) from which you can choose.
  • The Caption (subtitle) component requires some XML Editing. Read the Flash video captions tutorial.
  • For more sophisticated interactions with a video you need to code with ActionScript, as explained in the Flash augmented video tutorial
The executive how-to summary for simple video playbacks
  • If your video uses a format that is not *.flv, *.f4v or *.mp4 of if you plan to reduce its size or trim it then prepare it first with the Adobe Media Encoder. This tool is included in the Flash distribution. It may differ a bit from the full CS6 version.
  • Drag the FLVPlayBack Video Component to the stage.
  • Open the component inspector panel. Choose a skin (user interface configuration) and provide the file name or URL of the *.flv video

Note: In CS3 and CS4, only the Adobe *.flv format was supported. Since Flash 10/CS5, Adobe provides the more efficient *.f4v format and also directly supports other formats for playback.

Using the Flash video component

Using Flash CS6 (and CS5) component is really easy

  • You can use *.mp4 videos without prior encoding to a Flash video format
  • All operations are centralized in the properties panel
  • The only difficulties relate to file path operations (correct paths and copying files)

In most cases, you would have to adapt your video file, i.e. at least make it smaller and cut of unwanted beginning and end.

Just below we explain the procedure for an *.mp4, *.flv or *.f4v video that already is "ready" for production.

Step 1: Drag the component to the stage and save the file

  1. Open the components panel (Menu Window->Components or CTRL-F7)
  2. Drag FLPLayback 2.5 on the stage
  3. Now save your Flash file, else it will not work, since Flash will not find the video file !
  4. Copy the video file into the same directory as your flash file (unless you know how to deal with relative file paths, something that you may have learned creating HTML pages using pictures)

Step 2: Configure the properties of the component

  1. Select the component
  2. Set the name of the video file with source in the Properties panel (e.g. BFB-BBC.mp4). Make sure to shorten the file path!
    • Bad: C:\...\flash\ex6\screenshots\my_video.mp4
    • Good: my_video.mp4
  3. Select an appropriate skin. A skin will define what kinds of controls the user will have. You also can make adjustements to the color
  4. Keep the defaults for starters, e.g. maintainAspectRation for starters.

... That's it.

RapMan video from BBC

Step 3: Publishing a flash file that uses video

If you plan to publish the flash file on a web site or if you mail your application, do not forget to include all the files, for example

  • flash-cs6-mp4-video.html (the HTML file, optional)
  • flash-cs6-mp4-video.swf (the Flash file)
  • BFB-BBC.mp4 (the video)
  • SkinUnderAllNoFullscreen.swf (the skin library)

Example files:

The video shows the first 3D printer I owned, a RapMan (bought sometimes in 2009).

Using File import

As an alternative, you could use the File import menu. However, you might make wrong choice and therefore we do not recommend this procedure. This procedure will use the standard FLVPlayback component (not the more versatile version 2.5)

(1) Import the video file

  • Menu File -> Import -> Import video
Importing a video file

(2) Select the skin

Select the skin

(3) Click next and adjust the parameters

Using the Adobe Media Encoder CS6

The Adobe Media encoder can be found in the Program menu of your system (Windows/Mac) or in the File Import process in Flash CS6 as explained in the previous section.

Important: You cannot transcode or edit *.flv files !! Use another source format like *.mp4 ! I can't explain why, but it's Adobe's choice ....

Simple transcoding

  1. Click on + to add a video for encoding
  2. Select the video format. By default, the Flash F4V format is selected
  3. Select the quality
  4. Press the green arrow button to launch the encoding. The resulting file will be put in the same directory as the source video.
Adding a video to the Adobe Media Encoder CS6

Editing

The Media Encoder allows to "edit a video file in various ways. It is not a full video editor like Premiere, but allows to do a few very useful operations:

  • You can remove frames in the start or the end
  • You can clip each side (top, bottom, left, right). This is particularly useful, if you shot the video yourself, e.g. with a cell phone.
  • You also can add so-called cue-points. However we suggest not to use this feature and rather use so-called ActionScript cue points.

The editor is difficult to find. Do the following

  • Select the output video line (underneath the imported video, see the screen capture above: the *.flv file is selected)
  • Menu Edit -> Export settings or hit CTRL-E (...fine name ....)

The picture below explains, how to make a few edits.

  • Clip the video: Click on the Source tab first, select the rectangle icon to the left, then either change the values of left, top, right, bottom or use the clipping rectangle
  • Look at frames: Move the yellow play head
  • Remove frames from the start and/or the end: Use the small white triangles
Adobe Media Encoder editing (export settings)

Once you are done:

  • Click on OK
  • The click on the green arrow button to encode (as above)

Links

Finding videos on the Internet

Finding and downloading videos

Video sites:

Adobe documentation

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Flash_video_component_tutorial&oldid=67248"