Woven Interactive » Actionscript http://woveninteractive.net Flash, Flex, Papervision, Interactive Agency Wed, 11 Nov 2009 17:36:15 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Tracking Time : Brightcove with GAForFlash Event Tracking http://woveninteractive.net/2009/04/tracking-time-brightcove-with-gaforflash-event-tracking/ http://woveninteractive.net/2009/04/tracking-time-brightcove-with-gaforflash-event-tracking/#comments Wed, 15 Apr 2009 16:49:56 +0000 admin http://woveninteractive.net/?p=115 brightcove-and-google

When your business is making money based on time then tracking time is of obvious importance. With a little Flash wizardry and the GAforFlash tracking classes you can easily accomplish this task.

In our tests the 3 important metrics to test against were:

1) Player load time
2) Amount of time it takes for the first video to play
3) Duration player was being viewed (5 and then 10 second interval )

To get the player load time and then the video playing time we first grab the current time when the swf initially loads:

PLAIN TEXT
Actionscript:
  1. startTime = new Date().time;

When brightcove loads the player we listen for the template loaded event

PLAIN TEXT
Actionscript:
  1. _player.addEventListener(ExperienceEvent.TEMPLATE_LOADED, onTemplateLoaded);

Now that we have our first metric to work with we send that information to google and start working on our next metric:

PLAIN TEXT
Actionscript:
  1. protected function onTemplateLoaded(evt:ExperienceEvent):void
  2. {
  3.     //Time to load tracking
  4.     timeToLoad = (new Date().time - startTime);
  5.         tracker.trackEvent(String(playerID),  String(playlistID),"Player Load Time", timeToLoad);
  6.  
  7.         //Get the Experience Module
  8.     expModule   = _player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
  9.  
  10.     //Get Modules from BEML
  11.     _videoItem  = expModule.getElementByID("videoPlayer") as VideoPlayerModule
  12.        
  13.         //Now that the template is ready we can start tracking media events
  14.         _videoItem.addEventListener(MediaEvent.BEGIN, onBegin);
  15.  
  16. }

Next is to track when the user sees the first video playing:

PLAIN TEXT
Actionscript:
  1. protected function onBegin(evt:MediaEvent):void
  2. {   
  3.         //This is fired each time a new video begins. One way around this is to
  4.         //set a Boolean as to if any video has started - or remove the event listener
  5.         //since we were tracking other items we chose to leave the listener alone
  6.     if (videoStarted == false)
  7.     {
  8.         timeToLoad = (new Date().time - startTime)
  9.         tracker.trackEvent(String(playerID),  String(currPlaylistID),"First Video Playing", timeToLoad);
  10.     }
  11.     videoStarted = true;
  12. }

Our final metric was one that we were most interested in. This tracks the time spent actually viewing the entire video player.

The solution to this is very simple. Our solution was to use a timer based solution as follows. You can download the foomonger later classes here. Or just use a the built in Flash Timer.

PLAIN TEXT
Actionscript:
  1. Later.call(this, sendEvery10, 5000, true);
  2.  
  3. protected function sendEvery10():void
  4. {
  5.     Later.call(this, sendEvery10, 10000, true);
  6.  
  7.     if (firstTimeRecord)
  8.     {
  9.         tracker.trackEvent(String(playerID),  String(currPlaylistID),"Amount Spent Viewing", 5);
  10.         firstTimeRecord = false;
  11.     }
  12.     else
  13.     {
  14.             tracker.trackEvent(String(playerID),  String(currPlaylistID),"Amount Spent Viewing", 10);
  15.     }
  16.            
  17. }

This report will now show you how long your video player is live on a persons computer. If you want to track this on a per session basis you would just want to add a random variable as follows:

PLAIN TEXT
Actionscript:
  1. tracker.trackEvent(String(playerID),  String(currPlaylistID + "-" +myRandomVar ,"Amount Spent Viewing", 10);

Hopefully this saves some of you a lot of time with implementation into your own video players.

If you or your clients need any help, feel free to contact our interactive agency. We will be happy to assist.

]]> http://woveninteractive.net/2009/04/tracking-time-brightcove-with-gaforflash-event-tracking/feed/ 4 Side Scrolling Fish Swim Game with APE Physics Engine http://woveninteractive.net/2009/04/side-scrolling-fish-swim-game-with-ape-physics-engine/ http://woveninteractive.net/2009/04/side-scrolling-fish-swim-game-with-ape-physics-engine/#comments Tue, 14 Apr 2009 17:57:50 +0000 admin http://woveninteractive.net/?p=90 ape-engine-game

In an effort to find a very simple and easy to use physics engine we stumbled upon APE. Although this is not the most powerful of Flash physics engines it does seem to have a rather minimal learning curve.

There are several other physics engines in AS3 available. The one that seems to currently be the leader of the pack is Box2D. Box2D is a port from C++ so package names / method names etc do not follow Actionscript best practices (lowercase package names & uppercase method names). Not really a big deal but a little odd at times.

For this game it seemed that APE had plenty of features and power to get the desired result.

Monsters (fish), and coins were easily placed in an array

PLAIN TEXT
Actionscript:
  1. var monsters:Array = [ { x:1500, y:150, type:Starfish }, { x:1700, y:300, type:Octo }, { x:2500, y:180, type:Starfish },
  2.         { x:2700, y:330, type:Octo }, { x:3200, y:150, type:Starfish }, { x:3700, y:300, type:Octo }, { x:3900, y:180, type:Starfish },
  3.         { x:4000, y:330, type:Octo }, { x:4300, y:300, type:Octo }, { x:4500, y:180, type:Starfish }, { x:5000, y:330, type:Octo },
  4.         { x:5500, y:150, type:Starfish }, { x:6000, y:300, type:Octo }, { x:6200, y:180, type:Starfish }, { x:6700, y:330, type:Octo },
  5.         { x:7000, y:120, type:Starfish }, { x:7700, y:350, type:Octo }, { x:8300, y:180, type:Starfish }, { x:9000, y:330, type:Octo },
  6.         { x:9300, y:300, type:Octo }, { x:9800, y:180, type:Starfish }, { x:10000, y:330, type:Octo },
  7.        
  8.         { x:1600, y:220, type:Coin }, { x:1900, y:220, type:Coin }, { x:2200, y:220, type:Coin },
  9.         { x:3500, y:220, type:Coin }, { x:3800, y:220, type:Coin }, { x:4600, y:220, type:Coin },
  10.         { x:9600, y:220, type:Coin }, { x:11000, y:220, type:Coin }, { x:12000, y:220, type:Coin }
  11.        
  12.        
  13.         ]

Movement is as simple as adding force to an object:

PLAIN TEXT
Actionscript:
  1. protected function onKeyDown(evt:KeyboardEvent):void
  2.         {
  3.  
  4.             if (evt.keyCode == Keyboard.UP)
  5.             {
  6.                 forceAmountY = -25;
  7.             }
  8.             if (evt.keyCode == Keyboard.DOWN)
  9.             {
  10.                 forceAmountY = 25;
  11.             }
  12.             if (evt.keyCode == Keyboard.RIGHT)
  13.             {
  14.                 forceAmount = 6;
  15.             }
  16.             if (evt.keyCode == Keyboard.LEFT)
  17.             {
  18.                 forceAmount = -6;
  19.             }
  20.         }

All together the creation of this game was not difficult. With some more time spent on adding sounds, animations to monsters, and general fluff you would have a sweet fun game.

If you or your clients need any help, feel free to contact our interactive agency.

]]> http://woveninteractive.net/2009/04/side-scrolling-fish-swim-game-with-ape-physics-engine/feed/ 4 Twitter in Flash – Getting Past the SecurityErrorEvent http://woveninteractive.net/2009/02/twitter-in-flash-getting-past-the-securityerrorevent/ http://woveninteractive.net/2009/02/twitter-in-flash-getting-past-the-securityerrorevent/#comments Wed, 18 Feb 2009 22:34:12 +0000 admin http://woveninteractive.net/?p=45 woven-interactive-twitter

We took on a small task today to add our latest Tweet's to the homepage of our site. We decided to go with the library twitterscript. It's a nice simple wrapper around the twitter API and allows you to quickly create your app. All this with one catch. Out of the box it only works locally due to twitters cross domain policy.

To get around this we had to make a few tweaks to the code and add a proxy file.

Twitter.as - Changed lines 55 - 98

PLAIN TEXT
Actionscript:
  1. private static const LOAD_FRIENDS_URL:String =
  2.             "/proxy.php?path=statuses/friends/$userId.xml";
  3.         private static const LOAD_FRIENDS_TIMELINE_URL:String =
  4.             "/proxy.php?path=statuses/friends_timeline/$userId.xml";
  5.         private static const PUBLIC_TIMELINE_URL:String =
  6.             "/proxy.php?path=statuses/public_timeline.xml"
  7.         private static const LOAD_USER_TIMELINE_URL:String =
  8.             "/proxy.php?path=statuses/user_timeline/$userId.xml"
  9.         private static const FOLLOW_USER_URL:String =
  10.             "/proxy.php?path=friendships/create/$userId.xml";
  11.         private static const SET_STATUS_URL:String =
  12.             "/proxy.php?path=statuses/update.xml";
  13.         private static const SHOW_STATUS_URL:String =
  14.             "/proxy.php?path=statuses/show/$id.xml";
  15.         private static const REPLIES_URL:String =
  16.             "/proxy.php?path=statuses/replies.xml";
  17.         private static const DESTROY_URL:String =
  18.             "/proxy.php?path=statuses/destroy/$id.xml";
  19.         private static const FOLLOWERS_URL:String =
  20.             "/proxy.php?path=statuses/followers.xml";
  21.         private static const FEATURED_USERS_URL:String =
  22.             "/proxy.php?path=statuses/featured.xml";
  23.         private static const GET_DIRECT_MSGS_URL:String =
  24.             "/proxy.php?path=direct_messages.xml?";
  25.         private static const SEND_DIRECT_MSG_URL:String =
  26.             "/proxy.php?path=direct_messages/new.xml";
  27.         private static const SEARCH_URL:String =
  28.             "/proxy.php?sd=search&path=search.atom?";
  29.         private static const VERIFY_URL:String =
  30.             "/proxy.php?path=account/verify_credentials.xml";
  31.         private static const UPDATE_LOCATON_URL:String =
  32.             "/proxy.php?path=account/update_location";
  33.         private static const RATE_LIMIT_STATUS_URL:String =
  34.             "/proxy.php?path=account/rate_limit_status.xml";
  35.         private static const END_SESSION_URL:String =
  36.             "/proxy.php?path=account/end_session.xml";
  37.         private static const GET_SENT_DIRECT_MESSAGE_URL:String =
  38.             "/proxy.php?path=direct_messages/sent.xml";
  39.         private static const SHOW_INFO_URL:String =
  40.             "/proxy.php?path=users/show/${id}.xml";
  41.         private static const FRIENDS_IDS_URL:String =
  42.             "/proxy.php?path=friends/ids/${id}.xml";
  43.         private static const FOLLOWERS_IDS_URL:String =
  44.             "/proxy.php?path=followers/ids/${id}.xml";

Then adding a proxy.php file to our server:

PLAIN TEXT
Actionscript:
  1. <?php
  2. // PHP Proxy
  3. //for higher security just put the url you want here or build
  4. //your url with GET or POST parameters. Not the best idea to
  5. //pass the entire url
  6.  
  7. //make sure we're using http
  8. $url = 'http://';
  9. if (isset($_GET['sd']) && $_GET['sd'] != '')
  10. {
  11.     $url .= $_GET['sd'].'.';
  12. }
  13. //ensure only twitter domains are used
  14. $url .= 'twitter.com/';
  15.  
  16. if (isset($_GET['path']) && $_GET['path'] != '')
  17. {
  18.     $url .= $_GET['path'];
  19. }
  20. //you can change this to set mimeType via parameters, but
  21. //chances are you want xml
  22. $mimeType = 'application/xml';
  23.  
  24. $response = file_get_contents($url);
  25.  
  26. if ($mimeType != "")
  27. {
  28.     header("Content-Type: ".$mimeType);
  29. }
  30.  
  31. echo $response;
  32.  
  33.  
  34. ?>

Do this and you'll be rid of the Security Errors and able to integrate Twitter into your Flash site.

If you or your clients need any help, feel free to contact our interactive agency.

]]> http://woveninteractive.net/2009/02/twitter-in-flash-getting-past-the-securityerrorevent/feed/ 9 Look Mom No Javascript : Google Analytics Flash Event Tracking http://woveninteractive.net/2009/02/look-mom-no-javascript-google-analytics-flash-event-tracking/ http://woveninteractive.net/2009/02/look-mom-no-javascript-google-analytics-flash-event-tracking/#comments Tue, 17 Feb 2009 18:27:34 +0000 admin http://woveninteractive.net/?p=30 google-analytics-screenshot


If you have not heard already, Google has a new tool for tracking Flash Analytics. Unlike the first version we tested a year ago, this new code base requires no javascript to implement. Why is this important?

Here is the scenario:

I create a killer Flash widget and would like to track how users interact with it. If the widget is only on my site then a javascript / flash tracking solution works great. But, if I want to spread it virally and still track my results I can't rely on a javascript solution.

This is where google event tracking enters the picture: gaforflash

While you can use this to track page views button clicks etc you can also get creative and track much much more.

Our Interactive Agency decided to track Flash page load times. This would allow us to determine if the average user was waiting too long to view a page. Example code below:

google-analytics-event-tracking

PLAIN TEXT
Actionscript:
  1. _controller.mainLoadTimer  = new Date().time;

PLAIN TEXT
Actionscript:
  1. public function set pageReady(val:Number):void
  2. {
  3.     _pageReadyTime = val;
  4.     var currentPage:String = Gaia.api.getCurrentBranch();
  5.     var timeToLoad:Number = (_pageReadyTime - _mainLoadTimer)
  6.    
  7.     if (initalPageLoad)
  8.     {
  9.         initalPageLoad = false;
  10.         tracker.trackEvent("Page Load Times", "Initial Load", currentPage, timeToLoad);
  11.     }
  12.     else
  13.     {
  14.         tracker.trackEvent("Page Load Times", "Site Browsing", currentPage,timeToLoad);
  15.     }
  16. }

This can also be done to track video start times as seen in the example by Matthew McNeely.

Before you can view the event tracking data in your Google Analytics account you will need your profile to be white-listed by Google. Get started today even if you are not yet white-listed as your account will retroactively display the results from when you first implemented the code.

If you or your clients need any help getting started feel free to contact our interactive agency.

]]> http://woveninteractive.net/2009/02/look-mom-no-javascript-google-analytics-flash-event-tracking/feed/ 4