Archive for the 'Flash Video' Category

OOOii brings Flash and AIR to Star Trek

I’ve been waiting almost a year now to tell you about all the cool Flash work that is featured in the new Star Trek movie. OOOii, which was formally named BlackBox Digital, is a live visual effects company run by Kent Demaine and is located in the heart of Hollywood. They design a lot of the amazing interfaces that you see on computer screens and other surfaces in feature films. Their credits include Enemy of the State, Minority Report, and The Island.

For Star Trek, senior developer Dave August created a complete ActionScript 3 framework for compositing and sequencing various effects that was used live on the set during filming. He also created an AIR application which was used for authoring the various sequences and also to control them as the actors manipulated them.

Today I flew down to Hollywood to interview them about their work. Below is a little teaser of some of the footage. These guys have the coolest Flash jobs in the world! Check out their site and go see Star Trek to witness Flash on the big screen.

Lee

What is the F4V format for?

During my preparation for the Flash CS4 workshop that I’m doing I started to look at a new Flash video format called F4V. So what is the F4V format? Basically it is Adobe’s wrapper for H.264 video. So why do we need this wrapper for an open standard like H.264? Well it turns out the answer is to overcome some of the limitations of H.264 like the inability to embed cue points. I can imagine in the future that we may try to add alpha channel support which H.264 also doesn’t support.

So this proprietary wrapping makes total sense but unfortunately the cue point functionality doesn’t really work. When encoding a video in Adobe Media Encoder I chose the F4V format and then added an event cue point just like I would with FLV. When I then imported the video into Flash and loaded it into the FLVPlayback component I even saw the event cue point in the component inspector. At this point I was really happy. But then I wrote the standard cue point event handler but the event never fired when it hit the cue point.

Rich Shupe saw one of my tweets about it and emailed a way to actually respond to the cue point. The solution was to respond to the XMP data event of the NetStream class. The code sample is listed below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
package {

    import flash.display.Sprite;
    import flash.media.Video;
    import flash.net.NetConnection;
    import flash.net.NetStream;
     
    public class F4VCuePoints extends Sprite {
   
        private var _vid:Video = new Video();
         
        public function F4VCuePoints():void {
            var nc:NetConnection = new NetConnection();
            nc.connect(null);
             
            var ns:NetStream = new NetStream(nc);
            ns.client = this;
             
            addChild(_vid);
            _vid.width = 200;
            _vid.height = 140;    
            _vid.attachNetStream(ns);
             
            ns.play("scaly.f4v");
        }
                     
        public function onMetaData(info:Object):void {

        }
       
    public function onXMPData(info:Object):void {
            var xmpXML:XML = new XML(info.data);
           
            // parse using Namespaces
            var xmpDM:Namespace = new Namespace("http://ns.adobe.com/xmp/1.0/DynamicMedia/");
            var rdf:Namespace = new Namespace("http://www.w3.org/1999/02/22-rdf-syntax-ns#");
           
            var cueFrameRateString:String = xmpXML..xmpDM::Tracks..rdf::Description.@xmpDM::frameRate;
            var cueFrameRate:Number = Number(cueFrameRateString.substr(1,cueFrameRateString.length));
            trace("frameRate for DVA Ticks divisor:", cueFrameRate);
           
            var cuePointList:XMLList = xmpXML..xmpDM::markers.rdf::Seq.rdf::li;
            var len:int = cuePointList.length();
            trace("number of cuePoints:", len);
            for (var i:int=0; i < len; i++) {
                var cueXML:XML = cuePointList[i];
                    trace("\tname:", cueXML.@xmpDM::name);
                    trace("\ttype:", cueXML.@xmpDM::cuePointType);
                trace("\tstartTime:", cueXML.@xmpDM::startTime/cueFrameRate, "\n");
            }
        }
    }
}

Big thanks to Rich for passing this along. It is ridiculous that we have to write that amount of code to respond to F4V cue points. I am hoping that this implementation is not quite finished and we are planning to make it easier in the future.

Update: I have confirmed from an internal source that if you create a navigation cue point on an F4V file, it does not add a keyframe into the video file at that point. Until this is fixed I would advice simply using regular H.264 files with AS cue points.

Lee

Flasher video player with FLA source

I have just finished creating a simple custom video player for Flasher Magazine. It isn’t as full-featured as some players but I wanted to make it look and feel fairly raw to match the style of the videos. There is a basic click-to-seek functionality rather than a more traditional scrubber. Doing true scrubbing requires more work and in my opinion is not even that useful. You can download the source FLA file to see how it was made and also to use it in your own projects if you want. All I ask is that you change the style so it isn’t an exact duplicate of the one I use for Flasher.

Lee

Watch gotoAndLearn on your plasma TV

No I haven’t signed a deal that will bring my tutorials to cable TV. But I finally connected my PS3 to my broadband and updated it with the latest software. The beautiful part of this is that the new browser in the PS3 has Flash Player 9 installed. What’s even more beautiful is that it is at least version 9.0.115 because all of my tutorials can be watched from the comfort of your couch. Connecting the PS3 with an HDMI cable makes the tutorials look amazing.

I’m sure many of you may will immediately think of going to sites like PornHub to watch adult entertainment on your plasma TV. But rather than indulging in that kind of debauchery, why don’t you go over to gotoAndLearn, make some popcorn, gather the family, and learn some new Flash techniques.

I also picked up the Logitech PS3 keyboard which makes cruising the web a joy. Now I can Twitter, check mail, blog, and view web videos without pulling out the laptop. Very cool!

Lee

New tutorial on Flash QuickTime export

As promised, I just finished uploading a new tutorial that shows you how to export ActionScript-based animations from Flash as QuickTime video as well as how to composite them in After Effects. This work flow allows you to create some really cool motion graphics that would be extremely hard to do without using Flash. Below is the finished product from the tutorial. The music is by HECQ, who works a lot with the Ronin. Check out the tutorial at gotoAndLearn().

Lee

Proximity Menu Example and Source

This is an effect that I have seen on some Flash sites so I thought I would deconstruct it. To be honest, I’m not sure I like the effect, but with some tweaking it could be useful. Basically you have a menu of images or icons that react to the proximity of the mouse. If the mouse is close enough to a particular menu item, that menu item will snap to the mouse and follow it. When the mouse gets too far away the item will snap back into its original position.

In this example I created a nice rollover effect using blend modes. You can see how I created it by looking at the FLA file. All the ActionScript code is located in an external Document Class for easy viewing. I was planing on doing a tutorial on this but have decided to instead work on a multi-part tutorial on using AMFPHP. Look for that very soon!

You can download a ZIP file containing the FLA and the external AS file. If you just want to see the ActionScript, then you can view it below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package
{
    // Import Flash classes
    import flash.display.*;
    import flash.events.*;

    public class ProximityMenu extends MovieClip
    {
        private var ia:Array;
       
        public function ProximityMenu():void
        {
            ia = [im1, im2, im3, im4];
            for(var i:uint = 0; i < 4; i++)
            {
                ia[i].buttonMode = true;
                ia[i].ox = ia[i].x;
                ia[i].oy = ia[i].y;
                ia[i].tx = ia[i].ox;
                ia[i].ty = ia[i].oy;
                ia[i].addEventListener(MouseEvent.ROLL_OVER, onOver);
            }
            stage.addEventListener(Event.ENTER_FRAME, onMove);
        }
       
        private function onOver(e:MouseEvent):void
        {
            e.target.gotoAndPlay("over");
            addChild(MovieClip(e.target));
        }
       
        private function onMove(e:Event):void
        {
            for(var i:uint = 0; i < 4; i++)
            {
                var dist:Number =  getDist(mouseX, mouseY, ia[i].ox, ia[i].oy);
                if(dist < 70)
                {
                    ia[i].tx = mouseX;
                    ia[i].ty = mouseY;
                }
                else
                {
                    ia[i].tx = ia[i].ox;
                    ia[i].ty = ia[i].oy;
                }
                ia[i].x += Math.round((ia[i].tx - ia[i].x) * 0.3);
                ia[i].y += Math.round((ia[i].ty - ia[i].y) * 0.3);
            }
        }
       
        private function getDist(x1:Number, y1:Number, x2:Number, y2:Number):Number
        {
            var dx:Number = x2 - x1;
            var dy:Number = y2 - y1;
            return Math.sqrt(dx*dx + dy*dy);
        }
    }
}

Hope you enjoy it!
Lee

Breaking Bad Flash Site

AMC is premiering their latest original series called Breaking Bad on January 20th. It is about a disgruntled chemistry teacher who gets a terminal cancer diagnosis and then uses his chemistry skills to create a mobile meth lab. Bryan Cranston, the father on Malcolm in the Middle and also Dr. Tim Watley on Seinfeld, plays the lead role which is quite a departure for him based on his previous work.

The show has an accompanying Flash site which is pretty darn cool. There are a series of interactive pieces and depending on what you do, you will unlock different parts of the site. One such interaction will allow you to see the entire first scene of the premiere. Does anyone know which agency did this site? (It was Unit9 and Mono. Thanks Felix.)

Good stuff,
Lee

Next Page »