Archive for the ‘FLV’ Category
ActionScript 3.0: tracking video progress using JavaScript and Google Analytics
adding Flash Video (.flv) to the internet is nice, but how can you tell if the video is really being seen?
well, listening for NetStatusEvents in ActionScript 3.0 helps you tell you more.
in this example I listen for 2 different events:
I listen for NetStream.Play.Start that tells me, if the video has started.. and
I listen for NetStream.Play.Stop that tells me, if the video has ended.
in this example the video is only about 15 seconds, but if the video was much longer, it might be useful to track other stuff to Google Analytics.
so, when the video starts I use ActionScript to call this JavaScript function:
ExternalInterface.call(“pageTracker._trackEvent(‘TrackingAfVideo’, ‘Analytics.flv’, ’start’)”);
and when the video stops I use ActionScript to call this JavaScript function:
ExternalInterface.call(“pageTracker._trackEvent(‘TrackingAfVideo’, ‘Analytics.flv’, ’stop’)”);
Google Analytics:
in Google Analytics I can then see how many times the video has started and how many times it has stopped.
check out this screenshot that shows the very first tracking of this video in Google Analytics (click to enlarge).
kinda nice, right?
The ActionScript:
For ActionScripters, all the code can be read here..
import caurina.transitions.Tweener;
import flash.display.Sprite;
import flash.events.NetStatusEvent;
import flash.external.ExternalInterface;
import flash.media.SoundTransform;
import flash.media.Video;
import flash.net.NetConnection;
import flash.net.NetStream;
import MonsterDebugger;
public class FLVAnalyticsContent extends Sprite {
private var _md:MonsterDebugger;
private var _duration:uint = 0;
private var _ready:Boolean = true;
private var _vid:Video = new Video();
private var _conn:NetConnection = new NetConnection();
private var _stream:NetStream;
private var _infobox:InfoBox;
public function FLVAnalyticsContent() {
init();
}
private function init():void {
trace("function init");
_md = new MonsterDebugger(this);
setupVideo();
}
private function setupVideo():void {
_conn.connect(null);
_stream = new NetStream(_conn);
_stream.bufferTime = 5;
_stream.addEventListener(NetStatusEvent.NET_STATUS, streamHandler, false, 0, true);
var videoVolumeTransform:SoundTransform = new SoundTransform();
videoVolumeTransform.pan = 0;
_stream.soundTransform = videoVolumeTransform;
var metaHandler:Object = new Object();
metaHandler.onMetaData = function(meta:Object):void {
_duration = meta.duration;
_ready = true;
//show all metadata in Output panel
for (var i in meta) {
trace(i + ": " + meta[i]);
}
//Resize vid instance if metadata exists
if(meta.width > 0) {
_vid.width = meta.width;
_vid.height = meta.height;
}
}
_stream.client = metaHandler;
_stream.play("Analytics.flv");
_vid.attachNetStream(_stream);
_vid.x = _vid.y = 0;
addChild(_vid);
setupText();
}
private function setupText():void {
_infobox = new InfoBox();
_infobox.x = 360;
_infobox.y = 546
addChild(_infobox);
}
private function streamHandler(evt:NetStatusEvent):void {
//trace("evt.info.code = "+evt.info.code+" & stream.time = "+_stream.time+" & evt.toString = "+evt.toString);
if(evt.info.code == "NetStream.Play.Start") {
trace("VIDEO HAS STARTED");
_infobox.alpha = 1;
ExternalInterface.call("pageTracker._trackEvent('TrackingAfVideo', 'Analytics.flv', 'start')");
_infobox.theText.text = "the video has started, Google Analytics has been informed";
fadeOut();
} else if (evt.info.code == "NetStream.Play.Stop"){
trace("VIDEO HAS ENDED");
_infobox.alpha = 1;
ExternalInterface.call("pageTracker._trackEvent('TrackingAfVideo', 'Analytics.flv', 'stop')");
_infobox.theText.text = "the video has ended, Google Analytics has been informed";
fadeOut();
Tweener.addTween(_infobox, {scaleX:1, time:3.5, onComplete:reStart});
}
}
private function fadeOut():void {
Tweener.addTween(_infobox, {alpha:0, time:2, delay:1});
}
private function reStart():void {
_stream.play("Analytics.flv");
}
}
}
—
Related blogposts on Flash Video:
Knowing how to calculate the compression of your Flash Video (.FLV)
ActionScript 3.0: how to control panning of a SoundTransform Object / laid back jazz video
ActionScript 3.0: using ASCuePoint with Flash Video (.flv)
ActionScript 3.0: how to add a fullscreen option to an FLV
ActionScript 3.0: looping an .flv with the FLVPlayback component
Knowing how to calculate the compression of your Flash Video (.FLV)
If you want your viewers to be able to see your Flash Video on the internet without buffering or other annoying obstacles, you have to consider these 2 parameters:
- the kbps of the Flash Video / the kilo bit per second
- the speed of the viewers internetconnection
Imagine this scenario:
Some random dude wants to view a (progressively shown) Flash Video with a kbps of 768.
In theory he should see the Flash Video without any problems if the user has an internet connection with a speed of 0,768 Mbit.
But, it is not as simple as this.
Friends and I have several times tested the effiency of an internet connection and found, that ca. 20% of the speed of an internet connection is used to “send and recieve packages”..
So, to watch the Flash Video our random dude needs an internet connection with at least this speed:
768 x 1,25 = 960 kbps
Besides that, the following can affect the internet connection too:
- if using wireless internet, the internet connection might not be used fully.
- if using the internet connection to any other things (other tabs in the browser, netradio, etc) it will occupy some of the capacity of the internet connection.
These factors are too undocumented and individually to be a part of this calculation.
The conclusion on the above must be, that if wanting to watch a video on the internet compressed with a kbps of 768, you need a 0.96 Mbit internet connection.. AT LEAST. which would in reality would be a 1 Mbit connection.
hope this was useful :O)
ActionScript 3.0: how to control panning of a SoundTransform Object / laid back jazz video
having seen a video by Morten Andreasen, I was inspired to do some similar stuff.
so I came up with this short, interactive music video of me playing a jazz-piece, enjoy.
the cool thing is absolutely that either the lead or the rhythm guitar can be muted, so if you find the muddy rhythm guitar the more interesting instrument, just unplug that bluesy lead!
the workflow:
the music was recorded in Garageband, the different video-tracks edited in After Effects and dubbed to the Garageband-track, and finally a FLV (Flash Video) file from After Effects was setup in Flash making the whole thing interactive. the nice track is originally by Muris Varajic .. by the way, it took me like forever to learn those crazy jazz rhythm chords 
for actionscripters:
the track is exported in stereo from Garageband with the rhythm guitar in one side and the lead guitar in the other side.
so when choosing one instrument in the video, what is actually is done is telling the SoundTransform Object that controls the panning of the NetStream what music to play. does it have to play full pan left, full pan right or no panning (balanced center between right and left).
the ActionScript (the panning bit):
if(e.currentTarget.name == "rhythm"){
videoVolumeTransform.pan = Math.round(-1);
} else if(e.currentTarget.name == "lead"){
videoVolumeTransform.pan = Math.round(1);
} else if(e.currentTarget.name == "duo"){
videoVolumeTransform.pan = Math.round(0);
} else {
//
}
stream.soundTransform = videoVolumeTransform;
}
other blogposts on music or video:
check out the video for Hawkeye and Hoe band
check out the acoustic variation on Map of your mind by Muse
check out this post on how to use ASCuePoints in ActionScript 3.0
check out this post on how to add a fullscreen option to your FLV’s
check out this post on how to loop an FLV using the FLVPlayBack component
credits:
Morten Andreasen and this video:
Muris Varajic from guitarmasterclass
video for Hawkeye and Hoe Band made in Premiere
a couple of years ago Simon Grevsen and I filmed a concert for the Hawkeye and Hoe Band.
we filmed this track twice in one night and from the 4 angles we created this video in Premiere.
the filming was great fun and making the video a nice challenge. the video is still worth a laugh 
check out the concert video with Hawkeye and Hoe band here
ActionScript 3.0: using ASCuePoint with Flash Video (.flv)
a cuepoint is a marker, in video it’s used to mark an event or a chapter and is very powerful when you want to synchronize your video with animations, speech, music or stuff like that.
cuepoints can be added in many ways, it can be added as the footage is edited, or it can be added in post-production.
in this example I’ll use ASCuePoints, actionscripted ASCuePoints, to trigger a function.
but first, watch the video without any effects here:
little girl screaming her lungs out
to cartoonize the video, I’ve masked it in a cartoon magazine holder.
and, by using ASCuePoints, I’ve added a “Waaaaaaaah” Batman TV-series stylish graphic every time the girl screams.
watch the video cartoonized with graphics and a mask here
here’s the ActionScript used to set this up:
import caurina.transitions.Tweener;
var wah:Wah;
//FLVPlayer.alpha = 0;
FLVPlayer.addASCuePoint(1, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(6.3, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(14.5, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(19.6, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(25, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(30.6, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(35, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(38, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(44, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(47, "scream", {text:"myFirstCuepoint"});
FLVPlayer.addASCuePoint(48.3, "screamveryshort", {text:"myFirstCuepoint"});
FLVPlayer.addEventListener(MetadataEvent.CUE_POINT, reactToCuepoint, false, 0, true);
function reactToCuepoint(evt:MetadataEvent):void {
wah = new Wah();
var myY:Number = Math.random()*150 + 100;
var myX:Number = Math.random()*140 + 120;
wah.x = myX;
wah.y = myY;
trace("wah.x = "+wah.x+" & wah.y = "+wah.y);
wah.alpha = 0;
Tweener.addTween(wah, {alpha:1, time:2});
Tweener.addTween(wah, {alpha:0, time:2, delay:5});
wahholder.addChild(wah);
if(evt.info.name == "scream") {
wah.gotoAndStop(1);
} else if(evt.info.name == "screamveryshort") {
wah.gotoAndStop(2);
}
}
function fadeIn(){
Tweener.addTween(FLVPlayer, {alpha:1, time:1, transition:"easeInSine"});
}
function fadeOut(){
Tweener.addTween(FLVPlayer, {alpha:0, time:1, transition:"easeOutSine"});
}
a big shout out to Esben Hindhede and Maria Bøge Sørensen for inspiration and helping create this post!
ActionScript 3.0: how to add a fullscreen option to an FLV
with the internet connection speed quickly increasing, the option to play a video fullscreen becomes more and more important, as better videos deserve to be enjoyed in larger scales. but how to add that fullscreen option, if you set up your own Flash project?
first of all, check out this video, that can be watched in fullscreen
a simple button activates/deactivates the fullscreen state.
heres the ActionScript for the entire Flash:
import flash.display.StageDisplayState;
var _paused:Boolean = false;
play_mc.buttonMode = true;
fullscreen_mc.buttonMode = true;
play_mc.gotoAndStop(2);
fullscreen_mc.stop();
fullscreen_mc.addEventListener(MouseEvent.CLICK, fullscreenOrNot);
play_mc.addEventListener(MouseEvent.CLICK, pauseOrPlay);
videoplayer.autoRewind = true;
videoplayer.addEventListener(VideoEvent.AUTO_REWOUND, playAgain);
function playAgain(e:Event):void {
trace("starting over");
videoplayer.play();
}
function pauseOrPlay(e:MouseEvent):void {
if(_paused){
videoplayer.play();
play_mc.gotoAndStop(2);
_paused = false;
} else {
videoplayer.pause();
play_mc.gotoAndStop(1);
_paused = true;
}
}
function fullscreenOrNot(e:MouseEvent):void {
if (stage.displayState == StageDisplayState.NORMAL) {
stage.displayState = StageDisplayState.FULL_SCREEN;
} else {
stage.displayState = StageDisplayState.NORMAL;
}
}
besides setting your project up in ActionScript 3.0 you also need to add these parameters to your HTML, to allow the embedded Flash to go fullscreen:
allowFullScreen="true"
if unsure where to put this, check out the source for the linked example listed first in this post.
the Flash is embedded in HTML using SWFObject.
the video in this post was created in After Effects.
showcase: 2 videos for midtconsult
this summer I went to a 2 day conference at midtconsult in Herning.
I filmed a lot, and even made some interviews.
even though I had no light to support my camera and very little filming experience, the footage was good enough to make these 2 small films:
film 1 (mainly for external use):
http://campjohn.dk/AS3/Co3/MidtConsult/MC01.html
film 2 (mainly for internal use):
http://campjohn.dk/AS3/Co3/MidtConsult/MC02.html
the footage was edited in Premiere and exported to FLV.
each film is played in a nifty ActionScript 3.0 FLV player.
at the end of the day; a quite nice experience!
ActionScript 3.0: looping an .flv with the FLVPlayback component
long ago I did this large article on how to use .flv’s in Flash.
back then I wrote, that when placing an instance of the FLVPlayback component on Stage, instancenaming it myFLVPlayer and using this code:
function playAgain(e:Event):void {
trace("starting over");
myFLVPlayer.play();
}
would make the FLVPlayback component loop the .flv.
actually this can be achieved like this too:
myFLVPlayer.autoRewind = true;
myFLVPlayer.addEventListener(VideoEvent.AUTO_REWOUND, playAgain);
function playAgain(e:Event):void {
trace("starting over");
myFLVPlayer.play();
}
the difference?
check out an .flv that loops here
the intro in the video is created in After Effects.
enjoy