Because the materials we are creating are destined for web training, but budgets are tight, we are working with Flash MX 2004 (a.k.a. "Flash 6") and Dreamweaver (though we create our videos in Final Cut Pro).
As Flash has a steep learning curve (particularly when you are a non-programmer and are working with Action Script) I have decided to post my notes here in this blog post instead of on my physical pad-o-paper notepad (remember pencils and pens and paper?). This way others can benefit from our climb up the learning curve and we can access our notes wherever we happen to be in the world without having to carry a suitcase full of paper!
Step 1: Converting .mov files to .flv files.
Since we begin our process by creating our video segments in FC Pro on a Mac, but do our Flash creation on a Windows XP machine, we should start this lesson by exporting from Final Cut to a Quicktime Movie (.mov). Those files are big -- a 3 minute video takes up nearly 600 MB. We pop that onto a USB stick and carry it over to the PC and copy it into our Flash Video folder. Now we have to turn it into a Sorenson compressed .flv file for use in our web presentation.
A hunt through the user forums revealed this from editorX:
"hi, it´s possible to create .flv in MX2004.
import the chosen movie (embedded) in the flash library. select the movie in the library and then right-click on it. select properties and then export in the appearing dialogue."
Once you do that, you will notice that while the .mov file is now in your library, the .flv file you just created isn't. Don't panic. It should be in the same folder as the .mov file on your hard drive, but it must be now imported into your project library.
How do you use a video in flash?
"Basically, it's like a Graphic symbol because the timeline where the video resides needs enough frames to accommodate the entire duration." says UltraShock Tutorials (a great site to go to to learn all about working with video in flash).
They also say,
"Remember that because Flash compresses the audio at publish time, it's best to only import .flvs with little or no audio compression and adjust Flash's audio compression settings through the publish settings. (to avoid generation loss due to recompression)."
If you don't have Flash MX Pro, there are other ways -- free ways -- to convert .mov files to .flv files:
You can download a free media converter, called Quick Media Converter, here:
http://quick-media-converter.en.softonic.com/download#pathbar
Inserting an entire column of frames (shifting all frames in all layers to the right):
If you want to add frames and extend the timeline for all existing layers accordingly, you merely select the column of frames of all layers at the chosen point in the timeline and F5 them
How to Delete Frames
(from http://multimedia.journalism.berkeley.edu/tutorials/webdesign/flash/frames/)"Note: Flash has two ways to delete frames - Clear Keyframe and Remove Frames. They're a little confusing. The way to figure out which one to use is to ask yourself why you want to eliminate a frame.
If you want to eliminate a frame because you want to reduce the length of the movie, then select a frame, and choose Edit > Timeline > Remove Frames, or Shift-F5.
If you want to remove the status of a keyframe (and therefore, its content), and keep the movie the same length, then select a keyframe or blank keyframe and choose Modify > Timeline > Clear Keyframe (or hold down the mouse and select Clear Keyframe from the menu).
Clear Keyframe changes a keyframe or a blank keyframe into an in-between keyframe. It removes the content it contained. The new in-between frame displays the content of the previous keyframe."
Other helpful notes:
- Motion Tween only works on symbols
- F8 converts to symbol
- F6 inserts a new keyframe
- F5 inserts a frame (and can carry over information from the previous frame)
- ctl-enter is used to view motion
- to advance by a frame use the "." key, to go back a frame use the "," key.
Before you can specify values in Action Script you need to give each text field an instance name in Property Inspectior
Componenets -- movie clips that add advanced functionality without you having to know advanced Action Script.
To labe a Button component: Go to Property Inspector, parameters tab - Label.
Event handler "Handling Events" in Action Scripts
Reference Guide Help
A Button Component has its own timeline. In Timeline hierarchy, component time line is the child of the main timeline. Point to the parent: _parent.
Set audio to 192 kbps
Embedding video: a video over 16000 frames will not sync properly and audio quality suffers. But it is more interactive.
Expand the timeline so all frames are displayed!
"You'll have to provide your own controller for an embedded movie; flash components (and their skins) won't work".
Upload of main swf to server -- unlike uploading streaming video, main swf is the only file to worry about.
Need Flash's video encoder.
Recommended against using scenes; use framelabels instead.
on(release) {
gotoAndStop("scene2", 1);
}
is not ideal. Don't use scene names, just the UNIQUE frame labels and add _root to your path.
Like this:
on(release) {
_root.gotoAndPlay("frame-label");
}
test the scene using (ctl-alt-enter).
DON'T USE SCENES!
"Scenes are an evil kludge created to destroy the minds for otherwise sane flash developers and newbies alike. They are just a way of hiding frame numbers to try and make flash movies more human readable that fails utterly." wrote one flash user on a forum. I agree.
Helpful action scripts for beginners:
The following little scripts are your friend for buttons that go back a frame or advance a frame:
on(release) {
prevFrame( );
}
on(release) {
nextFrame( );
}
My preferred method, if you are going to use the same buttons over and over on every frame, is to attach this action script NOT to the button, but place it in a layer you call "Action Script". If you name the instance of the buttons you can use this function:
this.forward_btn.onRelease = function( ) {
nextFrame( );
}
and
this.back_btn.onRelease = function( ) {
prevFrame( );
}
on(release) {
if(_currentframe = = 1) {
gotoAndStop(10);
} else {
prevFrame ( ) ;
}
The conceptual basics:
- Graphics objects
- Button objects - normal, mouse-over, click, target
- Movie Clip
Movie Clip is similar to Graphics object on the surface but can be used to create entire animations that can be dragged onto the main movie. Animations created as graphics objects simply loop over and over, but you can control movie objects completely.
How I finally got the Media Clip to play:
To get my .flv to play and be interactive, so that I could pause it for the instructional moment and then continue, I first created a mediaclip to embed in one of the frames of my presentation. Then I double clicked on that clip to open its own timeline and created a buttons layer in that timeline and a video layer. I dragged the .flv into the video layer and then created enough frames in the buttons layer to cover all the frames that were in my video layer. Then I created my start and stop buttons and my frame advance and previous frame buttons in that layer. I called them play_btn, stop_btn, prevframe_btn and nextframe_btn.
Rather than attach an action script to the buttons themselves, I created an actionscript layer in the mediaclip timeline, again with enough frames to cover the whole .flv. Then I only had to type in the following code once:
this.play_btn.onRelease = function() {
play();
}
this.stop_btn.onRelease = function() {
stop();
}
this.prevframe_btn.onRelease = function() {
_root.gotoAndPlay(1);
}
this.nextframe_btn.onRelease = function() {
_root.gotoAndPlay(4);
}
Note that "_root" is necessary in order to have the button take us out of the media clip timeline and back into the scene's timeline.
Using the Component Inspector
It took me a while to find the component inspector after I added the Media Component. Now I know where it is: Look in the Properties window after selecting the media component. There should be a button that says "Launch Component Inspector" under text saying "This component's parameters must be edited using the Component Inspector". You should then see two tabs on the right: Properties and Parameters. Click on Parameters.
Keine Kommentare:
Kommentar veröffentlichen