Archive for the ‘JavaScript’ Category
ActionScript 3.0: how to make Flash accept JavaScript to access a function
imagine having embedded a Flash in HTML, but you only want the Flash to start when you tell it to start using JavaScript.
so, first of all you need to import the proper class:
then you have to make sure, that the function in Flash accessible to JavaScript.
ExternalInterface.addCallback("startMovie", startMovie);
}
and of course, you need your function too
var newS:String = someString;
ExternalInterface.call("alert", "the new string is = "+newS);
}
if the Flash is embedded in HTML using the name myFlash, the following would be one way to start the animation in Flash from JavaScript:
swfMoviePlayer.startMovie("testString");
if you want Flash to activate a JavaScript-function embedded in the HTML, be sure to read
this blogpost on ActionScript to JavaScript communication
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
ActionScript 3.0: using JavaScript alert instead of trace when debugging
sometimes you need to debug outside the Flash IDE, and then the trace statement doesn’t do you any good.
but it’s quite easy to debug using the JavaScript alert instead..
here’s a trace statement in Flash:
trace(someParam);
and here’s the same statement shown using alert in JavaScript:
var someParam:String = "testString";
ExternalInterface.call("alert", someParam);
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.
placing Flash in the middle of a HTML-page using SWFObject
if you need to publish a HTML-page, with your Flash placed in the middle, you can use this setup:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title of page</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="container_table">
<tr>
<td>
<div id="container">
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
<param name="movie" value="someswf.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="someswf.swf" width="550" height="400">
<!--<![endif]-->
<div>
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</td>
</tr>
</table>
</body>
</html>
besides from this code, you need to add the following:
your someswf.swf
these need to be added too, get them from the official SWFObject-page:
swfobject.js
expressInstall.swf
and finally the CSS-file:
style.css
the style.css file looks like this:
#container_table { width: 100%; height: 100%; }
#container { width: 550px; height: 400px; margin: 0 auto; }
in this example SWFObject 2.2 was used!
showcase: different stuff for MCH Messecenter Herning
have done some different stuff for MCH Messecenter Herning recently.
for the Automatik 2010 I did this simple Flash-intro:
http://campjohn.dk/AS3/Co3/MCH/Automatik/automatikPreloader.html
here you can click any of the 3 menus and the backgroundpicture and text will change.
another Flash-intro is this wacky one for Trendzone:
http://campjohn.dk/AS3/Co3/MCH/Trendzone/trendzone.html
as it’s a crazy mix of ActionScript 3.0 and old school timeline animation, it was a bit more complex to make.
besides that it also plays an external .mp3 and has the ability to call a JavaScript-function in the .html in which it is embedded.
but still… rather simple stuff.
ActionScript 3.0: using JavaScript to open new window with fixed size
wanna open a fixed size window from within Flash?
here’s a version that helps you on your way:
function openSizedWindow(e:MouseEvent):void {
var jscommand:String = "window.open('http://www.campjohn.dk/wp/','win','height=200, width=300,toolbar=no,scrollbars=yes');";
var url:URLRequest = new URLRequest("javascript:" + jscommand + " void(0);");
navigateToURL(url, "_self");
}
check it out here:
http://campjohn.dk/AS3/FixedSizeWindow/test.html
test-results OK;
PC: Firefox, Safari, IE – Mac: Firefox
test-results not OK;
Mac: Safari
any ideas of improvement?
ActionScript 3.0: call to external JavaScript-function
if you want to activate the JavaScript-function called myFunction in the .html the Flash is embedded in, this is the way to do it:
function externalJS(e:Event):void {
if (ExternalInterface.available) {
ExternalInterface.call("myFunction");
}
}
showcase: looping slidegallery made in ActionScript 3.0
yet again, I find myself doing a gallery in ActionScript.
most times new features are developed and added, luckily 
so, this time the gallery should be able to loop endlessly.
in the example below, I add 5 pictures to the Flash through XML. but when rotating the gallery to the right it will not stop at picture 5, no it’ll just continue to rotate to the right, starting from picture 1 again.
check out the looping slidegallery here:
furthermore, the slidegallery accepts another parameter; where to start.
if you want the slidegallery to start at picture 2, you just add this as an URLparameter, like you add the XML.
here’s how it’s added:
var theXML = "PV_showroom.xml";
var theStartpicture = "t03.jpg";
var so = new SWFObject("slideGallerypreloader.swf?whatXML="+theXML+"&whatStartpicture="+theStartpicture.....
the gallery is made in ActionScript 3.0 and uses Tweener.
additional info.
the pictures in this slideGallery are screenshots from the website t-rex-engineering.com, an absolutely amazing site to visit, when you’re looking for new pedals to enhance the sound of your electric guitar.
JavaScript: using jQuery for a picture gallery
having made tons of gallery’s in Flash, I find this option very interesting.
with jQuery it’s fairly easy to make a “flashy” picture-gallery.
check out the first jQuery gallery example here
the timeout, the speed of the transition and the transition itself are easily adjusted parameters, and in this example:
check out the second jQuery gallery example here
the timeouts and fades are slower and the transition-type is a standard fade-in type.
these changes are made with a snap.
I’ll guess I’ll be doing a lot more on jQuery in the future, so stay tuned
all pictures in the examples are photos by Andrew Beierle, thanks