Indycar Race Control is a fully immersive way to experience Indy Racing. Not only
can you watch the live race or in-car video but you can monitor each car's
telemetry data. Here are just some of the features:

• Live race and in-car video (up to 5 simultaneous videos)
• Real-time car telemetry (speed, throttle, RMP, steering, etc)
• Switch any in-car camera to full view and listen to driver & pit crew
• Race standings and scoring
• Configurable driver 'pods' allowing individually drivers to be tracked
• Customizable layouts
• 2 driver compete mode
• Fullscreen mode

Indy Race Control is only available during live Indy Races, please visit indycar.com
for more information on race dates.

Indycar Race Control Technical Details

Indy Race Control is an Adobe Flex application created by The Morphic Group that receives
live streaming video and live telemetry data from the race track during a race.

Race & in-car video
During an Indy car race live video and in-car video are encoded and redistributed from a
Flash Video CDN. Each video stream is encoded at multiple sizes. The Indy Race Control
Flex client is given information on which cars have in-car video and which is the main
video feed. The client allows any of the in-car videos to be switch from the small viewer
to the main viewer.

Real-time race car telemetry
Each car's live telemetry data is acquired by a cluster of Wowza servers. The Indy Race
Control Flex client connects to a Wowza server via a load balanced cluster living on
Amazon EC2. After connecting the client receives real-time race car telemetry data.
The Morphic Group create a Wowza based application that can scale to multiple
thousands of simulations clients.

Video Statistics
Conviva's LivePass gives Indy Racing the ability to view real-time statistics of video
streams being watched with the Indy Race Control.

Indy Racing Control Flex Client
The user interface was created by The Morphic Group using Adobe Flex. This Flex based
client provides the race fan with a huge amount of information displayed in friendly
and useful way. The user can customize the application to meet their needs. Specific
drivers and/or videos can be selected, and these custom layous can be saved.

Visit indycar.com to view Indy Race Control during races.

fix_content_assist.bat

@echo off
REM The following will delete the prefs file in Flash Builder 4 Beta 2 that caused content assist to break
RMDIR C:\work\dev\morphic\myproject\trunk\code\as_fb4\.metadata\.plugins\com.adobe.flexbuilder.codemodel /s /q


From: http://bugs.adobe.com/jira/browse/FB-21566

Close Flash Builder 4 beta 2

Delete this folder in your workspace:

\.metadata\.plugins\com.adobe.flexbuilder.codemodel.

Relaunch Flash Builder 4 beta 2

Here is the sample code I showed in the presentation. Rt-click and select View Source for the source.

http://www2.themorphicgroup.com/blog/flashcamp2009/singleton/Singleton_Complete.html
source

http://www2.themorphicgroup.com/blog/flashcamp2009/observer/Observer_Complete.html
source

http://www2.themorphicgroup.com/blog/flashcamp2009/event/Event_Complete.html
source

C:\Program Files\Adobe\Flex Builder 3\FlexBuilder.ini

Here are my settings
###

-vmargs
-Xms512m
-Xmx1024m
-XX:MaxPermSize=256m
-XX:PermSize=64m
-Djava.net.preferIPv4Stack=true

###
-Xms512m (minimum memory allocated for FlexBuilder)
-Xmx1024m (max memory cap for FlexBuilder)

If you happen to have 8GB of ram you might change your settings to this :).

-Xms512m
-Xms4096m

I found a decent work around. I added a non-breaking space to the end of each string and that was enough of a change to get copy, paste, and delete to show up in my context menu. The unicode character for a non-breaking space is 00A0. The syntax looks like this "\u00A0".

elementContextMenu = new ContextMenu();
elementContextMenu.hideBuiltInItems();
 
var cutItem:ContextMenuItem = new ContextMenuItem("Cut\u00A0");
var copyItem:ContextMenuItem = new ContextMenuItem("Copy\u00A0");
var pasteItem:ContextMenuItem = new ContextMenuItem("Paste\u00A0");
 
cutItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onCutItem);
copyItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onCopyItem);
pasteItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onPasteItem);
 
elementContextMenu.customItems.push(cutItem);
elementContextMenu.customItems.push(copyItem);
elementContextMenu.customItems.push(pasteItem);
 
Application.application.contextMenu = elementContextMenu;

One solution is to put the icon in your button skin, but this would require you to build multiple skins for multiple icons.

Another solution is to use an Image component as a button. However, let's say we want to have different icons used for different rollover states. We could definitely use MouseEvent event listeners to switch the source property of the Image component. Unfortunately, transparent pixels in an image have been known to cause problems with MouseEvents firing properly. To avoid these type of pitfalls, we are going to create our own custom component by doing the following:

package com.tmg.components
{
	import spark.components.Button;
 
	//icons
	[Style(name="iconUp",type="*")]
	[Style(name="iconOver",type="*")]
	[Style(name="iconDown",type="*")]
	[Style(name="iconDisabled",type="*")]
	//paddings
	[Style(name="paddingLeft",type="Number")]
	[Style(name="paddingRight",type="Number")]
	[Style(name="paddingTop",type="Number")]
	[Style(name="paddingBottom",type="Number")]
	public class IconButton extends Button
	{
		public function IconButton()
		{
			super();
		}
	}
}

 
<s:SparkSkin
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/halo"
	currentStateChanging="onCurrentStateChanging(event)"
	>
	<fx:Metadata>
		[HostComponent("com.freckle.oceania.client.view.components.IconButton")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import mx.events.StateChangeEvent;
 
			private function onCurrentStateChanging(event:StateChangeEvent):void{
				switch(event.newState){
					case "up":
						setIcon("iconUp");
						break;
					case "over":
						setIcon("iconOver");
						break;
					case "down":
						setIcon("iconDown");
						break;
					case "disabled":
						setIcon("iconDisabled");
						break;
				}
			}
			private function setIcon(type:String):void{
				if(hostComponent.getStyle(type) != null){
					icon.source = hostComponent.getStyle(type);
				}
			}
 
		]]>
	</fx:Script>
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<s:states>
        <s:State name="up"/>
        <s:State name="over"/>
        <s:State name="down"/>
        <s:State name="disabled"/>
    </s:states> 
 
 	<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
        <s:stroke>
            <s:SolidColorStroke id="outline" weight="1"/>
        </s:stroke>
        <s:fill>
        	<mx:LinearGradient>
        		<mx:GradientEntry color="#ffffff" ratio="0"/>
        		<mx:GradientEntry color="#cccccc" ratio="1"/>
        	</mx:LinearGradient>
        </s:fill>
    </s:Rect>
 	<s:Group
 		horizontalCenter="0"
 		verticalCenter="0"
 		>
 		<s:layout>
 			<s:HorizontalLayout
 				paddingBottom="{ hostComponent.getStyle('paddingBottom')}"
 				paddingTop="{ hostComponent.getStyle('paddingTop')}"
 				paddingLeft="{ hostComponent.getStyle('paddingLeft')}"
 				paddingRight="{ hostComponent.getStyle('paddingRight')}" />
 		</s:layout>
 		<mx:Image
	    	id="icon"
	    	source="{hostComponent.getStyle('iconUp')}"
	    	verticalCenter="0"
	    	alpha="{(this.currentState == 'up')?.5:1}"
	    	/>
	    <s:SimpleText
	    	text="{hostComponent.label}"
	    	verticalCenter="0"
	    	includeInLayout="{( hostComponent.label != '' )}"
	    	visible="{( hostComponent.label != '' )}"/>
 	</s:Group>
 
</s:SparkSkin>
 

One of the first things you may notice is the Metadata tag declaring the Hostcomponent. This is important because it lets this skin component know what kind of component will be using this skin. Note the SimpleText component's text property is set to the hostComponent's label property.

Another key element to this piece of code is the event handler for when the state changes. As you may have guessed from the contents of the states tag, the hostComponent changes the state of this skin for the different button mouse states. By listening to this event, we can change the current source of the icon image component.

This brings us to our last step...

<components:IconButton
		width="100%"
		iconUp="assets/images/icons/toolbar/arrow_out.png"
		iconDisabled="assets/images/icons/toolbar/arrow_out_disabled.png"
		fontFamily="Times"
		fontWeight="bold"
		skinClass="com.tmg.skins.IconButtonSkin"
		paddingLeft="5"
		paddingTop="5"
		paddingRight="5"
		paddingBottom="5"
		/>
 

When implementing your own skins, be sure to set the skinClass property. In this implementation we just set the iconUp and iconDisabled properties. Because of how we wrote the set icon method in our skin, the skin will only use the icons that have been declared. As for the label, we have also coded the skin to not show the text component if the label text is empty, but in this case we do have a label.

So there you have it, a brand new component that uses the new MXML 2009 Spark architecture for skinning. With this new approach, we can break out our UI code into it's own file/component. A benefit of this new method is that we don't have much code in the actual component class. By using component skins, we can not only define the look via MXML but we can also add some logic/code. For example, it would be really easy to add a method that spins the icon on rollover or to change the text of label when disabled.

For more information about this, check out: https://xd.adobe.com/#/videos/video/165

Ben brings his interactive development expertise and professional process to our team. Having worked with Ben on past projects, we had the advantage of knowing the level of code and attention to detail that Ben brings to his work.

Again we are delighted to have Ben aboard...welcome.

Ash is a highly focused seasoned senior software developer, with a well known reputation for delivering quality code on every project.  Co-author of " Adobe Air in Action", Ash also brings to the table a wealth of knowledge which has benefited the greater development community and will no doubt be a great asset to The Morphic Group and it's clientele.

Having worked with Ash in the past, we know The Morphic Group has added another great talent to the team.

Welcome to The Morphic Group.

For a project I'm working on we are having to integrate a feature that uses a .swc provided by the client. This feature, which we are merely integrating and didn't have technical control over the implementation, requires that the Flex application run from a Web server (from an http directive, not from a file directive) in the browser or it won't work. I thought that was annoying, but I realized just how annoying it really was after I ran it from Apache (which I just installed on my machine for this purpose) and my new trace statements didn't show up. After a few minutes I realized it was because the .swf was cached by Firefox. I could clear the cache every time just before running the application. But that was not a very workable solution. instead, I wanted to disable caching entirely.

The way I found to disable caching from Firefox is to run Firefox and in the address bar type about:config. This will take you to a page with a datagrid and a bunch of configuration settings for Firefox. I set browser.cache.disk.enable and browser.cache.memory.enable both to false.

That was all I had to do to disable caching. Oh, and it does occur to me that I *could* have customized the .html template FlexBuilder is using in order to load the .swf with a unique query string value each time, which would have solved the caching issue in a different way. But disabling caching in Firefox entirely seemed far more silly. Plus, it required far less work.

You are trying to call recursively into the Flash Player which is not allowed. In most cases the JavaScript setTimeout function, can be used as a workaround.

In a pinch, I've worked around this error using the suggested JS setTimeout() function or by retrieving data by other means. I've finally decided to see if there was a better way and found one.

For the impatient (like myself), the solution is to use the following FABridge static constants: 

FABridge.EventsToCallLater
FABridge.MethodsToCallLater 

Let's look at a test project:

• FABridge Test
• FABridge Test Source View

Open the FABridge Test and you'll see a bunch of links. Click FireBugLite to open a console. Then click embedSwf() to embed the swf which will output to the console when the FABridge has initialized (see the JavaScript callback() method on the HTML page . You should then see the following in the console:

embedSwf
franky.name: franky
franky.children.length: 2
franky.children[0]: Object
franky.children[0].name: john

The JS callback() method is a simple demonstration of getting data from the SWF through the FABridge.  Now click on the requestRingo() link.  That calls the following JS code:

getRoot().requestRingo();

That in turn calls the following ActionScipt code in FABridgetTest.as which dispatches a ringoRequested event:

public function requestRingo():void {
    var e:NodeEvent = new NodeEvent("ringoRequested");
     e.node = new Node("ringo", 14);
     e.node.children.push(new Node("dingo", 2));
     dispatchEvent(e); // dispatch right away
}

In the JavaScript, we've added an event listener for that event in the callback() method. The JS requestRingoHandler() method is called as a result:

function requestRingoHandler(event) {
    console.log("ringo");
      try {
         var ringo = event.getNode();
         console.log("ringo.name:", ringo.getName());
         console.log("ringo.children[0].name:", ringo.getChildren()[0].getName());
    } catch (e) {
        console.log("error:", e.message);
    }
}

So we've click on the requestRingo() link and will get the following output in the console:

ringo
error: You are trying to call recursively into the Flash Player which is not allowed. In most cases the JavaScript setTimeout function, can be used as a workaround.

The setEventsToCallLater() method registered the fabridgetest::NodeEvent class with the FABridge as an event to dispatch after a delay. This registration is done using the FABridge.EventsToCallLater Object constant. In a normal application you'd hard code these registrations, e.g.

FABridge.EventsToCallLater["fabridgetest::NodeEvent"] = "true";

You can also register the general flash.events.::Event class to cover all cases, but there may be performance concerns so that will have to be tested before I use it in production code.  

In addition to the EventsToCallLater constant, FABridge has the MethodsToCallLater constant which is the same thing but for specified methods for classes. The FABridge registers the following automatically:

MethodsToCallLater["mx.collections::ArrayCollection"]="refresh,removeItemAt";

Between EventsToCallLater and MethodsToCallLater you should be able to avoid many of the "You are trying to call recursively into the Flash Player..." errors.

Have you successfully uses these constants? Are there any pitfalls and/or performance issues?