Rants,Raves and Ruminations

If you are a security freak and don't want anybody grabbing your video, the Flash Media Server 3 has a rather nifty feature built in to it. The feature? Stream encryption. Herre's how you enable it:

1. Toss your video into either the application folder you have created for the project or into the vod folder.
   
   
2. Open Flash CS3 and, when it opens, whip an FLVPlayback component on to the stage.

This is where it gets really neat:

When you set the content path you usually use the following address:

rtmp://localhost/app/instance/myVideo or, if you are using a Streaming version of the server you would enter rtmp://localhost/vod/myVideo.

To encrypt the video stream you change the address to rtmpe://localhost/vod/myVideo.

Simply adding the letter "e" turns on the encryption feature of FMS3.

Here's a neat little trick... how would you like to load up and run the FLVPlayback component at run time? That means the component isn't on the stage. Here's how:

1. Open a new Flash CS3 document and save it to the same folder as the FLV you will using.
   
   
2. Drag a copy of the FLVPlayback component to the Library. Alternatively you can add it to the stage and immediately delete it from the stage.
   
   
3. Select the first layer and rename it Actions.
   
   
4. Click once in the first frame of the Actions layer and open the Actions panel.
   
   
5. Add the following code:

import fl.video.FLVPlayback;

var myVideo.FLVPlayback = new FLVPlayback();
myVideo.skin = "SkinUnderAll.swf";
myVideo.skinBackgroundColor = 0x999999;
myVideo.source = "myFLV.flv";
myVideo.x = 100;
myVideo.y = 100;
addChild(myVideo);

This isn't terribly difficult to follow.

You import the FLVPlayback class into the movie. You next create an instance of the component - myVideo - and give it a skin, skin color and a source. All of these follow the parameters you would use if you were to have the component on the stage. Just keep in mind you will have to copy the SkinOverAll.swf file to the same folder as the FLA and the FLV. The skins can be found in the Flash folder on your hard drive.

Always copy the skin and paste it into its new location. Moving the swf from the application folder to another folder results in your losing the access to that particular skin.

You then give your instance its stage coordinates and then use the addChild() method to get the component on to the stage from the Library.

New to Flasgh CS3 is the ability to add video to a movie at run time. It is the oddest thing to see a blank stage, an empty library and a single code frame ands still have video play. Here's the code:

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
var listener:Object = new Object();
listener.onMetaData = function(md:Object):void();
ns.client = listener;
ns.play("MyVideo.flv");

Now that everything is wired up, it is time to toss the video on the stage:

var myVideo = new Video();
myVideo.attachNetStream (ns);
addChild(myVideo);

The default stage position for this code is 0,0. If you want the video to be in a specific location the code would be:

var myVideo = new Video();
myVideo.x = 100,
myVideo.y = 100;
myVideo.attachNetStream (ns);
addChild(myVideo);

Go ahead, give it whirl!

Here's a very short excerpt from my new book Foundation Flash CS3 Video to be published later this year by friendsofED.

In mid-December 2007, Adobe quietly released Update 3 for the Flash Player 9, which updated the Player to version 9.0.115.0. It was odd that the release was so quiet because along with the usual bug fixes and so on, Adobe slipped in an update to the FLVPlayback component that allows you to use this component, instead of a video object, to play back HD video.

Shortly after that, in late January 2008, Adobe also released an updated version of the Flash Media Server (FMS). Actually it was two versions: Flash Media Interactive Server 3 and Flash Media Streaming Server 3. Apart from eye-popping price drops (have you ever seen the price of software drop to about 10 percent of its previous value and still include an amazing lineup of feature additions?), the FMS 3 line up includes the capability to stream HD files instead of using the Progressive Download method we have been using throughout this book.

Here’s the Executive Summary regarding the differences between streaming and a Progressive Download. If you use the Progressive Download method, the video file loads into the browser cache and starts playing when enough information is in the cache to start playing the video. A stream doesn’t put anything in browser cache and starts playing as soon as the first bit of information hits the Flash Player.

Included in the Streaming Server is a feature that should appeal to practically everyone thinking of using FMS 3 to stream video. If there was one common “rap” against the FMS, it was the fact it was really hard to learn and required you to master another subset of ActionScript to harness the power of the server. Simply getting a video to stream from the FMS into the Flash Player required you to write both server-side ActionScript and client-side ActionScript. As well, if the files were not in their proper locations, the odds were about 300 percent that the video wouldn’t play. This is now a thing of the past thanks to the inclusion of a video on demand (vod) feature in the Streaming Server.

In this exercise, we’ll give you the opportunity to try out the vod feature and play an HD video using the FLVPlayback component.

I want to thank William Hanna, Dean of the School of Media Studies and Information Technology at the Humber Institute of Technology and Advanced Learning, for permission to use the clip used in this exercise. The clip is taken from a video series (Earley Bird) that was produced by a group of students and graduates known as the Producer’s League.

Let’s get started:

1. You’ll need to install a Developer Edition of FMS 3 on your PC. (There is no Mac version available at this time; FMS 3 only comes in Windows or Linux editions.) Point your browser to www.adobe.com/products/flashmediastreaming and click the Download the free developer edition link on the page.
   
   
2. When the download finishes, double-click the Installer and follow the onscreen instructions. If you are curious or a bit nervous about what will be going on during the installation, one of the authors has written a small guide that walks you through the installation process at www.adobe.com/devnet/flashmediaserver.
   
   
3. Navigate to C:\Program Files\Adobe\Flash Media Server 3\applications\vod\media on your PC and copy the Vultures.mp4 (You can pick it up at the end of this post) file to the media folder found in the vod folder.
   
   
4. This folder is really cool. The vod service lets you stream any file (FLV, MP4, or MP3) located in this folder without your having to write a line of code to build an application or playing with the server. The other really neat thing is that you can use the Flash CS3 or the Flash 8 FLVPlayback component to play the video.
   
   
5. Open a new Flash CS3 document and set the stage size to 854 pixels wide by 520 pixels high.
   
   
6. Add an FLVPLayback component to the stage and set its dimensions to 854 pixels wide and 480 pixels high. In the Property Inspector, set the component’s X and Y coordinates to 0,0.
   
   
7. Click once on the component on the stage to select it and click the Parameters tab in the Property Inspector. Use these settings in the Parameters:

• align: center
• autoPlay: true
• cuePoints: None
• preview: None
• scaleMode: maintainAspectRatio
• skin: SkinUnderAllNoCaption.swf
• skinAuthoHide: false
• skinBackgroundAlpha: 1.00
• skinBackgroundColor: #009933

8. Double-click the source parameter. When the Content Path dialog box opens, enter rtmp://localhost/vod/Vultures.mp4 (see Image 1). Make sure that you do not select Match source FLV dimensions and Download FLV for cue points and dimensions.

Image 1. You have to manually enter the path to the video in the Content Path dialog box.

The address uses an RTMP address, not the HTTP address you are familiar with. RTMP is a proprietary protocol developed by Adobe specifically for the FMS. When an RTMP address is detected, Flash is smart enough to figure out where the server is located (in this case, on your computer) and poke into the applications folder to find the vod folder. From there, it is also smart enough to figure out that the video, if it is in the media folder, is in the vod folder.

9. Save the movie and test it. When the SWF file launches, the video starts to play.

This is a very simple example of the FMS in action. To actually use it to feed a video into a SWF file on a web page, you will need to use the RTMP specifications given to you by your ISP or Flash video streaming service. That, dear reader, is well out of the scope of this book.
What about those of you who don’t have a FMS account? No problem:

10. Save the Flash document to the same folder as the Vultures.mp4 file. Open the Content Path dialog box . Simply enter the path to the MP4 file on your computer into the Content Path dialog box.

If your file is destined for playback from your web site, be sure to enter the path http://www.mySite.com/HD/Vultures.mp4 before you compile the SWF file.

11. Save and test the movie.

Image 2. Enter the path to the video if you don’t have access to FMS 3.

Here’s where this whole thing gets really cool. Earlier in this chapter we showed you how to go full screen with HD content. The project you have been using contains a Full Screen button in the skin. Here’s how to enable the full-screen feature of the skin:=

1. With the Flash movie open, select File > Publish Settings. In the Formats area of the Publish Settings dialog box, select both the Flash (.swf) and HTML(.html) file formats.
   
   
2. Click the HTML tab and select Flash Only - Allow Full Screen from the Template drop-down menu.
   
   
3. Click the Publish button.
   
   
4. Navigate to the folder containing the HTML just generated and double-click it to launch the page in a browser.
   
   
5. When the video starts playing, click the Full Screen button. The video and the skin will expand to fill the browser window (see Image 3 ). How about that? No code!

Image 3. Full skin HD at the click of a button.

6. Press Esc to return the video to its regular size. If you actually want to see what this looks liike in a real,live browser, click here.
   

Now take a deep breath. As we started digging into the use of these files in Flash, we encountered quite a few issues that we are, for now, chalking up to the sheer newness of this technology with Flash. The other critical aspect of our issues is this: it isn’t always Adobe’s fault.

The first issue we encountered was a biggy.

Several of the videos we used, other than ones supplied by Adobe, didn’t work. They were MOV files, MP4 files, and even H.264 files. We found it to be extremely odd because there was no mention of this by Adobe. What we discovered, thanks in part to Adobe’s help, was that not all MP4 files are created equal—and that MP4, not MOV, is the format you need to use. Image 4 brings this into sharp focus.

Image 4. The settings used for the Vultures.mp4 video.

These are the settings we used to create the Vultures.mp4 video. Note the use of H.264 compression in the Video format drop-down menu. Although H.264 compression is acceptable, MOV files that use the H.264 codec don’t always work in Flash (we discovered this with a MOV file). Figure 12-22 shows that this is a MOV file that uses H.264 compression. When we ran it through Flash, the video would not play. Yet, when we re-encoded the video using the settings in Image 5 , the video played.

Image 5. In theory, an MOV file with H.264 compression should work.

This raises a rather interesting question: Knowing not all files are created equal, how do we know which is a “good” movie and which is a “bad” one? The answer is that there is no way to know. You need to make sure that it works by testing it in Flash. If it doesn’t play, you need to go back to the source and get a new MP4 file that is properly encoded.

Here are a couple of things that can cause playback failure:

• Header information: All video files contain a header called a moov atom. The location of the moov atom in the file can result in failure. If the moov atom is at the start of the file and you are using a Progressive Download method, the file will play. If it is at the end of the file, where it is placed by Adobe Premiere and After Effects, the entire file has to download before it starts to play. This isn’t an issue if you are using FMS 3. If you suspect that this is the case , either use QuickTime Pro to re-encode the video or consider using QTIndexSwapper, which is a small AIR application developed by Renaun Eriickson for this very task. It can be picked up at this link.
  
  
• Codec choice: The video codec for the MP4 needs to be H.264, and the audio codec has to be either AAC or MP3.
  
  
• AVC profile: This is the advanced video coding profile used when the file is created. Flash Player 9 supports 66, 77, 100, and 110. It does not support 88,122, 144, or none.
  
  
• Incorrect 4CC: This is nothing more than a four- character code that is a sequence of four bytes used to identify a data format. The Flash Player supports MP3, MP4a, AVC1, TXG3, GIF, PNG, JPEG, VP60, and VP60A. Thus you might have the correct audio and video codecs along with the right AVC profile and the video will still not play. The Flash Player won’t tell you this. You can see a list of all the 4CCs here .
  
  
• DataRate: If the data rate is set too high (you can see where it is set in Image 4 ), there is a real risk that you will experience playback failure.

Vultures.zip

It never ceases to amaze me how many people ask for an easy way to get Flash video up on their pages. If you use Flash CS3, the entire process is code-free. Assuming you have an FLV file handy, here's how:

1. Launch Flash CS3 and open a new ActionScript 3.o document.
   
   
2. When the new document opens select Window>Components to open the Components panel.
   
   
3. Open the Video components and drag a copy of the FLVPlayback component to the stage. When you release the mouse you will most likely see a black square with an FLV icon and a skin under the square.

Image 1: The component and a skin are on the stage

4. To ensure everything will work, save the open Flash document to the same folder as the video.
   
   
5. Select the Component on the stage and click the Parameters tab in the Component Inspector. The Parameters determine how the component will play the movie, what video is being played and even the skin and skin color to be used to control the video.
   
   
6. Seeing as how there already is a skin, let's give the user the opportunity to play the video. Double click the true value in the autoPlay parameter and change it to false.
   
   
7. The next step is to determine the skin.Double click the skin value in the skin parameter to open the Select Skin dialog box.

You get to make a few choices here. If you just want the video and no controller, select None from the Skin pop down. If you do wish to have a controller, your choices are to have the skin Over or Under the video.

Over is a dangerous choice because the user needs to roll over the video to reveal the skin. If there is something in the first frame of the video, in a web page, that video may be mistaken for an image.

8. From the skin pop down select SkinUnderAllNoFulNoCaption.swf. This just ignores adding the Full Screen and Captioning buttons to the controller. You will notice you are being told the minimum width for this controller is 280 pixels. This isn't an issue because the video I am using is 320 pixels wide by 240 pixels high.
   
   
9. Click the Color chip to open the Color Picker and select a skin color.
   
   
10. Click OK to close the Select Skin dialog box.
    

Image 2: A skin and a skin color are set in the Component's skin parameters.

11. Scroll down the parameters to the source parameter. Double click the value to open the Content Path dialog box.
    
    
12. Click the browse button- it looks like a folder- and navigate to the folder containing the FLV.
    
    
13. Double click the FLV to select it check the path. If you see a path like the one shown in Image 3, you are in for a world of "hurt". This tells you that you haven't saved the fla to the same folder as the FLV. That value will get "hard-wired" into the swf and the odds are about 135% the video will not play.

Image 3 : If you see a path to the FLV click Cancel and save the FLA to the same folder as the FLV.

Image 4: If you see this, life is a wonderful thing!

14. Click OK to close the dialog box, save the FLA and test the movie. You should be in the video game!

Image 5: The test is a success.

If you are planning to add this to a web page you need to trim off the extra space. Just be aware there is a really big "gotcha" here so pay attention:

1. Select Modify>Document and when the Document Properties dialog box opens, click the Contents radio button. Click OK to accept the change.

Now here is the gotcha ... and it is a doozy. The stage shrunk to the size of the component but the skin is hanging off the stage. This means you will lose the skin if you try to embed the swf into a web page.

1. Return to the Document Properties dialog box and set the height value to 285. Click OK. You should see a piece of the stage under the skin's shadow.

If you are going for an exact fit with a skin that is under the video, always give yourself an extra 45 pixels of height to accommodate the skin.

At this point you can save and publish the SWF. Just keep in mind that the SWF, the FLV and the Skin.swf files must be in the same directory.

There you have it.... code free Flash Video.

When I was at the recent Adobe Max in Las Vegas, I spent a lot of time just wandering the halls and listening to bits and pieces of conversation between the attendees. What struck me was how closely we are becoming tied to the products we use and how narrow, in many respects, our vision was around what we do. What really sealed this for me was talking to a teacher who was passionately involved with providing his students with online support materials for his classes and how committed he was to “eLearning”, Flash and Captivate.

I will admit I admired his passion but I came away disturbed at how narrow-minded he was and how much he was going to hurt his students if he didn’t stop thinking this way. What he wasn’t doing was “connecting the dots”.

The dots are the devices being used to display the content. As we move into a “specialization” work flow, the sheer number and variety of outlets for our efforts are increasing. I, for one, never expected that anything I do is going to be viewed on everything from a 21 -inch flat panel display connected to a desk top computer to the console of a Jaguar. As we become more “product-centic” or “discipline-centric” the mediums used to display our work are expanding and yet I rarely hear this in conversations among developers and designers.

What we need to be doing is not only asking what information is needed but we now have to start asking how that information will be accessed. When you ask that second question you move into a rather uncomfortable place because you then need to ask: “Is Flex/Flash/Dreamweaver/ColdFusion the technology best suited to a Portable Computer/PDA/ Cell Phone/ PSP/ Jaguar Dashboard Console? ”

People are going to be starting up their portable’s, PDA’s, cell phones, PSP’s, dashboard consoles or any other display and they are going to expect us to deliver the information they need… when they need it …. On the device they are using. The thing is: We can control the message. We have no control over the medium.

One of the more common questions I am asked is “What do you think is the next big thing?” My answer is “Video and knowledge on demand.” The first one, everybody gets but the second one is foreign to most.

I am a teacher. That’s my day job . As an educator, I am terribly uncomfortable around the terms “eLearning”, “Distance Education” and “OnLine Course”. I am sure they mean something to the institutions that use them but the problem is the institution controls the meaning of the term. Each term means different things to different people and they don’t mean a thing to me.

At its most fundamental level the teacher/student relationship is dead simple: Teacher provides knowledge student needs.

How that knowledge is provided is where “connecting the dots” becomes important. In our web-centric universe, knowledge can be provided in ways we have never encountered in the past. The old model of my physically being in a class and orally delivering the knowledge is now just part of the mix. The web enables me to provide knowledge when it is wanted, where it is wanted using media other than paper or voice and through mediums used by the student… not me. This is “knowledge on demand”.

Sitting through the mobile keynote at Max I heard a lot of talk about making people rich and how it was a brave new world that was opening for us. I couldn’t disagree more. Connect the dots through the Adobe products and you discover mobile is nothing more than the “end game”.

To me the cell-phone or PDA is just another medium ...or dot ... I can use to provide knowledge. What I need to be able to do is to provide the knowledge through whatever dot the student happens to be using at the time.

My students can sit in the student lounge, open their Mac and PC portable computers and access course notes through a wireless network provided by the College . They can sit in the bus on their way to class and, using a cell phone, access the notes from the class they just attended or the class they are about to attend. They can sit at home using Desktop Computers connected to a broadband network and work on the projects that will be graded the following week. How that material is provided to the students is through many of the tools provided to me by Adobe and I have to choose the tool best-suited to providing “knowledge on demand.” To many educators this is a frightening prospect because this stuff isn’t easy.

It is no different in the worlds of business and government. At Max I saw a project where the U.S. Army is providing its “war fighters” with real time access to service manuals, tech resources and experts in the U.S. to rapidly fix, in real time, malfunctioning equipment in a combat zone. The technologies used were Acrobat Connect, video, audio, PDF and any other medium that solved the problem. As it was explained to me, “ the experts were available in real time, at any time.” Knowledge on demand used to fix a stalled Hummer.

Ride the subway in Tokyo and you can’t help but be struck by how the Japanese have taken to their cell phones as a point of contact with the world. One of the applications Adobe frequently shows is a weather application. When you really think about it, the salaryman on the Tokyo subway train is gathering the knowledge necessary to plan his next vacation. Knowledge on demand to make an informed decision.

There is a company I know of that is in the process of seriously examining the use of Podcasts and Vcasts to “spread the love” about the company with their clients, employees and peers. These things will be picked up on portable computers, PDA’s and iPods.

The thing is the people consuming this knowledge couldn’t care less whether Flash, ColdFusion, Acrobat, Flex or any other technology was used to create the product. They want to be able to flip open a device and access the information wherever they are ,,, whenever they bloody well feel like it. When Kevin Lynch was tooling around in the Jaguar at Max showing off the Flash–enabled console in the dashboard, I am sure that the 3,5000 people that were there looked at it and thought, “What a cool application of Flash!”

That’s all well and good but do you really think the guy that drives that Jag thinks the same thing when he glances down at the console? He wants the knowledge to figure out how to get from “here to there” … not to marvel that his console is Flash enabled. The fascinating thing about that console, though, is the information it shows can just as easily be provided through a cell phone, a portable computer, a PDA or anything else that can connect to a wired or wireless network.

Knowledge on demand forces us, as developers and designers, to move out of our “product-centric” silos and look at ways of designing interfaces and providing the data flow into those interfaces. It requires us to understand that the projects we are working on simply can’t be repurposed. Each dot has its own unique design approach. You can’t, for example, simply port your web site over to cell phone usage. For example, look at this page on your computer screen then consider how crappy it would look if it was jammed into the screen of the cell phone in your pocket. Maybe Flash is not the technology to do this. Maybe it is an HTML solution or a PDF that is best suited to the knowledge need posed by the cell phone.

As I pointed out earlier, knowledge on demand, is not easy. It requires you to anticipate how that knowledge will be accessed and then to design and develop the interface appropriate to the medium. How you design an interface for a cell phone is fundamentally different from how you design the interface for a computer. It requires you to look at and have a familiarity with new tools that are outside of your current comfort zone. It requires you to have an understanding of which combination of tools are best-suited to the task at hand and, most important of all, to have a deep understanding of the person demanding the knowledge and what technology he or she is using to meet that demand.

That last sentence is important. I had the pleasure of having a short conversation at Max with Jennifer Taylor who is Adobe’s “Engagement Platform” kahuna. I have never really understood the term and asked Jennifer to give me the Executive Summary definition of what the term means. About a minute into the explanation it hit me: The Engagement Platform is the ability to use all of the tools provided by Adobe to meet the knowledge-on- demand need. In a word it is … integration.

It is not Flash, Flex or ColdFusion. It is not Acrobat, Dreamweaver, Fireworks, Apollo, Captivate After Effects or Audition. It is not Illustrator, PhotoShop or InDesign. They are noting more than tools. It is how all of those tools can be brought to bear to meet the immediate need for knowledge at any time, anywhere and on any technology whether it be the desktop PC or the Jaguar that Kevin Lynch used to tool around the Conference floor at Max . The key is not what tools were used. The key is how those tools are used to connect the dots.

Was hanging around with a bunch of my students a few days back and one of them asked: "What exactly is that we really do?"

The answer caught the student by surprise.... we tell stories. In fact we are the storytellers of our age.

Here's a lecture I gave in Hamburg and Toronto a couple of years back that sort of outlines what I mean.

The Art of the Interactive Storyteller

Published a piece on the Rise of Flash Video on the Digital-Web site and the reaction floored me. First the guys at Adobe picked it up and tossed it up on their blogs. Then it was picked up by Techmeme which also showed other blogs and sites which had linked to it.

In the meantime I have received a half dozen emails and a bunch of other stuff that I never expected.

I feel like Roseanne Roseanadanna from Saturday Night Live: Sometimes, you just never know.

Scott Fegette, over at Adobe, and I were at TODCON 06 and started trading Flash Video horror stories. What struck us was the people who were telling us these stories loved the technology but were having a hell of a time understanding bandwidth and data rate when it came to creating Flash Video or FLV files. We teamed up and the result is an article posted simulataneously at Community MX and the Adobe Design Center.