IMG_0649.JPG, originally uploaded by skidgel.

Here were are with Bea and Ava's cousins on Tybee Island off the coast of Georgia.

Share This

Share This

Share This

Pumpkin Pirate and Bea, originally uploaded by skidgel.

Allison, Ava, and Beatriz came to the Googleplex on Halloween. We listened to a concert by Asheba, decorated this pumpkin and a trick or treat bag, and Bea managed to go away with a pretty decent haul of Halloween treats. Bea was a princess and Ava was an angel.

Share This

One of the things that I've found difficult is using the markers I've set in Final Cut Pro as cue points in a Flash Video file. I also find using the controls in Adobe's Flash CS3 Video Encoder to be cumbersome. A wonderful thought came to me when Adobe:

1. Improved XML processing in ActionScript 3 with the EX4 classes
2. Updated the Flash CS3 Video Encoder to allow importing an XML file for cue points

When I was on the beta and writing my book, I wrote a utility that listens for cue points in an existing video and traces them to the output window. This was helpful for culling cue points in Sorenson Spark encoded FLVs so I could re-encode the files as On2 VP6 and import the cue points before I re-encoded the file. While I was doing this, I had the idea for simplifying the workflow between Final Cut Pro and the Flash Video encoder. After I finished the book, I created another Flash movie that references a Final Cut Pro XML file and then finds all the markers in it and places them in an XML file for cue points. When the AIR extension for Flash Professional was released, I updated the app to use the File APIs in AIR and voila, I had my first AIR app.

A Few Things Before we Get Started

This utility does not convert Final Cut Project files. It converts Final Cut Pro XML files. To create a Final Cut Pro file, you need to select a sequence in the Final Cut Pro browser and select File > Export > XML. Also, you need to have markers in the sequence, not in clips that are in a sequence.

1. In a Final Cut sequence move the playhead to a frame where you want a marker. Make sure that no clips are selected in the sequence so the marker is added to the sequence and not the clip.
2. Press the m key twice.
3. The Edit Marker dialog appears. Enter a name and click Add Chapter Marker. Click OK.

   

4. Repeat as required.
5. When finished, save your project.
6. Choose File > Export > XML.

   

7. Download the AIR application. You will need to download and install the AIR runtime first and then download and install this application before launching it. Installing an AIR app is easy once the runtime is installed. Unzip the archive and double-click on it. Grant the application permission and the app is installed. I've included a sample Final Cut XML file so you can kick the tires.

   Download Markers to Cue Points »

   Note: While the utility is free as in beer, the application uses the MIT software license. By downloading, you're agreeing to its terms and conditions. If it saves you a few hours, consider buying my book on Flash Video since it has like 27 step-by-step tutorials and the sample Flash documents are quite good.

8. Then launch the AIR application.

   

9. Click Pick FCP File. Select the Final Cut Pro XML file you created earlier.
10. The converted XML will appear in the text box.

    

11. By default, I've disabled editing mode for the text box. If you'd like to edit the XML, click Make XML editable. Be sure to keep it well-formed and using the tag structure specified by Adobe.
12. Click Export FLV XML when you're ready. Name and save the file. I use the following pattern for naming these files: video-name-cuepoints.xml where "video-name" is the name you'll eventually use for the flv.
13. If you haven't exported the video from your Final Cut Pro sequence, you will need to do that. Export the video, launch the Flash CS3 Video Encoder, and add it to the queue. Select the video and click Settings. Click the Cue Points tab and then click the Folder icon to import the FLV XML file you created in step 12.

    

14. Adjust any remaining encoding settings and you're good to go! The cue points will be embedded in the FLV and you can use them for navigation using the FLVPlayback components.

Share This

Adding Closed Captions to Flash Video

1. First, download the example file: captions-player.zip.
2. Unzip this archive, open the folder captions-player and then open captions-player.fla in Flash Professional CS3.
3. Open the Components panel.
4. Open the Video category and drag the FLVCaptioning component to the left of the stage. It need not be on the visible stage to work.
   
   
5. With the captioning component selected, give it a name in the Properties panel (Window > Properties). Name it myCaptioning.
6. In the Timeline window, select the first frame in the Actions layer and open the Actions panel. You'll notice that I've set up most of the code for the player and source video. All that's needed is to add code for the captions. Create a new line after the last line of code and enter:

    
   myCaptioning.source = "captions.xml";
   myCaptioning.flvPlaybackName = "my_Video";
   myCaptioning.captionButton = captionPlayback;
    

7. Save the file and test the movie (Control > Test Movie).
8. If you want to know more about timed text, I've included the XML source with comments below.
   

    
   <?xml version="1.0" encoding="UTF-8"?>
   <tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
     xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
   <head>
   <styling>
   <!--
   The styling goes inside this tag, notice how the attributes are like
   CSS properties. Also notice how a one style can inherit style properties
   from another style by using an id for the style attribute
   -->
   <style id="base" tts:fontFamily="Arial" tts:fontSize="18"/>
   <style id="left" style="base" tts:textAlign="left"/>
   <style id="center" style="base" tts:textAlign="center"/>
   <style id="right" style="base" tts:textAlign="right"/>
   <style id="bold" tts:fontWeight="bold"/>
   <style id="italic" tts:fontStyle="italic"/>
   <style id="red" tts:color="#ff0000"/>
   <style id="orange" tts:color="#ff9900"/>
   <style id="yellow" tts:color="#ffee00"/>
   </styling>
   </head>
   <body>
   <div xml:lang="en">
   <!--
   An individual caption is a p tag. It contains attributes for
   begin time, duration and style.
   Notice how the style tag is used in the p tag to format the text.
   Span tag can be used to style a single word.
   -->
   <p begin="00:00:00.00" dur="1400ms" style="center">
   The <span style="strong red">one thing</span> I would recommend to
    
   <p begin="00:00:01.50" dur="1400ms" style="center">
   all filmmakers, short filmmakers,
    
   <p begin="00:00:03.00" dur="1900ms" style="center">
   or people starting out as filmmakers,
    
   <p begin="00:00:05.00" dur="2000ms" style="center">
   is to go to <span style="bold red">film festivals.</span>
    
   <p begin="00:00:07.40" dur="1900ms" style="center">
   Film festivals are the only place
    
   <p begin="00:00:09.40" dur="1000ms" style="center">
   to see the work of your peers,
    
   <p begin="00:00:10.50" dur="1900ms" style="center">
   people just like you,
    
   <p begin="00:00:12.50" dur="1800ms" style="center">
   who want to break into filmmaking,
    
   <p begin="00:00:14.30" dur="2000ms" style="center">
   that have  a story they want to tell,
    
   <p begin="00:00:16.50" dur="2400ms" style="center">
   or want to <span style="italic yellow">learn how</span> to make films.
    
   <p begin="00:00:19.00" dur="2800ms" style="center">
   Go there and see what other people are doing.
    
   <p begin="00:00:22.00" dur="1900ms" style="center">
   You see the <span style="italic yellow">really great things</span> they did,
    
   <p begin="00:00:24.00" dur="1900ms" style="center">
   and you see the <span style="italic yellow">really bad things</span> that they did,
    
   <p begin="00:00:26.10" dur="1200ms" style="center">
   so you know what to avoid.
    
   <p begin="00:00:27.50" dur="2000ms" style="center">
   Plus, you get to hear other people's war stories,
    
   <p begin="00:00:30.00" dur="1700ms" style="center">
   things that they've already figured out.
    
   <p begin="00:00:31.80" dur="2500ms" style="center">
   There are tens of thousands of people,
    
   <p begin="00:00:34.30" dur="2500ms" style="center">
   probably hundreds of thousands of people,
    
   <p begin="00:00:37.00" dur="2000ms" style="center">
   in this country that are out making
    
   <p begin="00:00:39.00" dur="1500ms" style="center">
   short films every single day
    
   <p begin="00:00:41.60" dur="1500ms" style="center">
   trying to tell stories <span style="bold red">visually.</span>
    
   <p begin="00:00:44.00" dur="1900ms" style="center">
   Be a <span style="italic yellow">part of that big community,</span>
    
   <p begin="00:00:46.00" dur="2000ms" style="center">
   join organizations, there's always
    
   <p begin="00:00:48.20" dur="1800ms" style="center">
   filmmaking organizations in your
    
   <p begin="00:00:50.30" dur="2000ms" style="center">
   area through colleges, through arts
    
   <p begin="00:00:52.50" dur="2000ms" style="center">
   organizations, places like that.
    
   </div>
    
   </body>
   </tt>
    

Share This

To create a very small swf that plays Flash Video without hiccuping on cue points, follow these steps.

1. First download the example file, simple-player.zip.
2. Open the Library Panel. (Window > Library). From the fly-out menu, choose New Video...
   
   
3. In the Video Object properties dialog, name the video object video.
   
   
4. The video object will now appear in the Library panel. Select the video layer in the Timeline window and drag the video object in the Library to the stage.
5. Select the instance on the stage and use the Properties panel (Window > Properties) to set the instance's name, position and size. Call it myVideo. Set its x and y position to 0,0. Set its width and height to 320 × 240.
   
   
6. Select frame 1 in the Actions layer and enter the following code in the Actions panel. Read the comments to understand what each line of code does. I've put in a fun analogy to help those new to video ActionScript code.
   

    
   // create a connection to bring in content into Flash
   // this is like laying down video cable
   var nc:NetConnection = new NetConnection();
    
   // no need to connect when not connecting to a Flash Media Server
   nc.connect(null);
    
   // create a stream and connect it to the netconnection object
   // this is akin to sending a video signal on the cable
   var ns:NetStream = new NetStream(nc);
    
   // attach the stream to a video on the stage
   // this is like connecting the cable to a tv
   myVideo.attachNetStream(ns);
    
   // set the source and play the video
   // turn on the tv
   ns.play("bubbles.flv");
    
   // ignore metadata and prevent Flash player exceptions
   var videoClient:Object = new Object();
   ns.client = videoClient;
   videoClient.onMetaData = onMetaData;
   function onMetaData(info:Object):void {
       // do nothing, or something
   }
    

NOTE: If you have the latest beta of the Flash Player (codenamed Moviestar and also known as Flash Player 9 update 3) and you want to play H.264 encoded video, change ns.play("bubbles.flv") to ns.play("text-tornado.m4v"). Note that you'll need to download the beta player from Adobe Labs and preview the generated SWF in a web browser. Previewing won't work in Flash Professional CS3 at this point in time (October 2007).

Share This

To create a video player with the FLV playback components, follow these steps

1. Download the example file custom-player.zip.
2. Unarchive it, open the folder custom-player, and open the file custom-player.fla in Flash Professional CS3.
3. Open the Components panel (Window > Components). Drag the FLVPlayback, PlayPauseButton, SeekBar, BufferingBar, MuteButton, and FullScreenButton components to the stage. Arrange them as you like.
   
4. Open the Library panel. Double-click any of the FLVPlayback components and then modify their appearance using the drawing tools in Flash. For any button there are states for normal, rollover, down and disabled states. Toggle buttons like PlayPauseButton combine two buttons into one and switch between the two when toggled. Feel free to explore the file custom-player-finished.fla to see how I customized the components.
   
5. Use the Properties Inspector panel to name each object on the stage.
   

6. Use the following table to name your components
   
   

   Component Type	Instance Name
   FLVPlayback	my_Video
   PlayPauseButton	my_PlayPauseButton
   SeekBar	my_SeekBar
   BufferingBar	my_BufferingBar
   MuteButton	my_MuteButton
   FullScreenButton	my_FullScreenButton

7. When you're finished, click the first frame in the Actions Layer.
   
8. Open the Actions window (Window > Actions) and type the following code:

    
   my_Video.playPauseButton = my_PlayPauseButton;
   my_Video.seekBar = my_SeekBar;
   my_Video.bufferingBar = my_BufferingBar;
   my_Video.muteButton = my_MuteButton;
   my_Video.fullScreenButton = my_FullScreenButton;
   my_Video.source = "seamonster.flv";
    

9. Save the file. (File > Save).
10. Add a flv file to the player. Select the video instance my_Video and using the Component Inspector, set the source parameter to seamonster.flv.
    
    
11. Test the movie. (Control > Test Movie).

Share This

Importing video into Flash Professional CS3 is eezee peezee.

1. First, download the example file: video_wizard.zip.
2. Unzip this archive and then open wizard-example.fla in Flash Professional CS3.
3. Select File > Import > Import Video.
   
4. Select On your computer. Click Choose.
   
5. Open the video_wizard folder that was created in step 2. Select the file bubbles.flv and click Continue.
6. On the Deployment screen select Progressive download from a web server. Click Continue.
   
7. In the Skinning panel, select SkinOverPlaySeekStop.swf from the Skin menu.
   
8. The Finish Video Import panel appears. Click Finish.
9. Choose Control > Test Movie and preview your work.

Share This

The First Day of Pre-School, originally uploaded by skidgel.

It's hard to imagine that Bea started pre-school today. Since I'm on vacation, I went with Allison and Bea to her first day. She had no trouble saying "kthanxbai" to mommy and daddy once she saw the big blob of play doh on the table inside her classroom.
The preschool is located in downtown Piedmont. It's a cooperative which means Allison or I will need to volunteer one day per month at the school and help with fundraising etc... We find the amount of parent involvement really attractive and we think the teachers and other parents are great.

Share This