Here is the site today:

In this post, we’ll look at the site and find out what makes it tick. Here’s a quick overview: The interface is simple, it consists of only a ComboBox, a DataGrid, a TextArea, a couple Labels/Text components and a LinkButton. All of these Controls are placed in an assortment of Layout controls to assist with the overall look and feel. I then create a HTTPService and a couple quick AS3 functions to populate the ComboBox and handle feed results. The initial feedlist comes from a list of RSS feeds in a custom written XML file (which I’ll share in this post, as well), this could also come from an online service like a custom Yahoo pipe or an OPML file if you really wanted to get fancy.

After the basic app is functioning, I import one of Scalenine’s beautiful and easy to use skins, and voil?†. A feed reader for local filesystem use is ready. This could be run as a SWF or compiled as an AIR app for desktop use. However, if you want to put it online, you’ll need to use a middleware script to serve as a crossdomain proxy loader (this example is going to use PHP). This is needed to get around Flash player’s security sandbox which prevents you from loading XML files from other domains that lack a crossdomain.xml file.

Let’s examine the basic MXML markup before adding any AS3 or style calls:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#0099CC, #2383ac]">
	<mx:HTTPService id="feedList" url="data/feedURLs.xml" />
	<mx:HTTPService id="mdFeed" showBusyCursor="true" useProxy="false" />
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="90%" height="40">
			<mx:Label text="Choose a Site:"/>
			<mx:ComboBox id="siteCombo" labelField="name" />
		</mx:HBox>
		<mx:Text width="90%" color="#000000"
		       text="Drag the divider up and down to resize the panel."/>
		<mx:VDividedBox height="100%" width="100%">
			<mx:DataGrid id="mdGrid" labelField="Choose a Site" height="60%" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="The Dirt" dataField="title" />
				<mx:DataGridColumn headerText="The Date" width="100" dataField="pubDate"/>
			</mx:columns>
			</mx:DataGrid>
			<mx:TextArea right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" bottom="10" left="10" width="150"/>
	</mx:VBox>
</mx:Application>

So, in the markup above, we create the visual components mentioned in the paragraph that preceded the source code, and add two HTTPServices, one for the list of all the feeds we are aggregating, and the other for the actual RSS feed data that we will retrieve once the user chooses a feed they want to review.

Here is a glance of the interface in Flex’s IDE:

In order to add the interactivity, we’ll need to supply a list of feeds for the reader to parse, right? Here is the list of sites and the URLs for their RSS feeds in XML:

1
2
3
4
5
6
7
8
9
10
11
12
13

<sites>
	<site name="egotastic.com"	data="http://egotastic.com/feeds/index.xml" />
	<site name="wwtdd.com"	data="http://www.wwtdd.com/?mode=atom" />
	<site name="defamer"	data="http://www.defamer.com/excerpts.xml" />
	<site name="superficial"	data="http://www.thesuperficial.com/index.xml" />
	<site name="idontlikeyouinthatway"	data="http://feeds.feedburner.com/Idontlikeyouinthatwaycom" />
	<site name="people.com"	data="http://www.people.com/people/web/rss" />
	<site name="eonline.com"	data="http://www.eonline.com/everywhere/rss/index.jsp" />
	<site name="tmz.com"	data="http://www.tmz.com/rss.xml" />
	<site name="usweekly.com" data="http://64.90.166.18/atom/feed" />
	<site name="CelebSlam" data="http://www.celebslam.com/feed/" />
	<site name="I Can Haz" data="http://feeds.feedburner.com/ICanHasCheezburger?format=xml" />
</sites>

Now that we have the XML ready, we need to add the MXML to get the feed to the application tag (creationComplete=feedList.send());):

2

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedList.send()" backgroundGradientColors="[#0099CC, #2383ac]">

Once we have the feedList retreived, we need to do something with it, right? Well, let’s add it to the comboBox, “siteCombo”. Here’s the AS to do it:

[Bindable]
private var sites:ArrayCollection = new ArrayCollection();
 
private function siteListHandler(event:ResultEvent):void{
	sites = event.result.sites.site;
	var siteObj:Object = new Object();
	siteObj.name = "Select"
	siteObj.url = "";
	sites.addItemAt(siteObj,0);
	siteCombo.selectedIndex = 0;
	//trace(event.result);
 }

In that snippet, we created an arrayCollection to store the result. We then add the initial null “Select” option to the comboBox. We also need to add the databinding to the “sites” comboBox, so that it can be populated with the list of sites. Let’s do that now:

8

<mx:ComboBox id="siteCombo" dataProvider="{sites}" labelField="name" />

With the sites ComboBox binded (bound?) to the feedList, we need to add the function to handle the change event, so when the user selects a feed, the RSS feed is loaded. Here it is:

public function chooseSiteFeed(url:String, name:String):void{
myURL = url;
mdFeed.send();
}

Now that the mdFeed is triggered, what do we do? Well, it would be a good idea to bind the mdFeed results to the datagrid, right? Then we can see all the posts in the feed:

13

<mx:DataGrid id="mdGrid" labelField="Choose a Site" dataProvider="{mdFeed.lastResult.rss.channel.item}" height="60%" width="100%">

Now that the datagrid is getting fed with the tasty RSS results, we need to let the user read the description and then click a link to see the full post, right?

19
20
21
22

<mx:TextArea right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" bottom="10" left="10" width="150"/>
	</mx:VBox>

That should work… If not, don’t worry, I’m supplying the full MXML source. But first, let’s make sure we can use this little RSS reader on your site. In order to do this, we need to leverage some serverside scripting in order to load the RSS feed via a proxy script. This will let your SWF file make a call to the script, then script handles the external URL call, returning the result as a local XML file for your flash file. Here is what the PHP looks like:

<?php
	// PHP Proxy
	// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
	// Author: Paulo Fierro
	// January 29, 2006
	// usage: proxy.php?url=http://mysite.com/myxml.xml
 
	$session = curl_init($_GET['url']); 	               // Open the Curl session
	curl_setopt($session, CURLOPT_HEADER, false); 	       // Don't return HTTP headers
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);   // Do return the contents of the call
	$xml = curl_exec($session); 	                       // Make the call
	header("Content-Type: text/xml"); 	               // Set the content type appropriately
	echo $xml; 	      // Spit out the xml
	curl_close($session); // And close the session
?>

So, make yourself a proxyURL.php file with that content in it and save it. If you go back and modifiy the mdFeed function to use the proxy script, everything should be in order… Here, in totality, is the app:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedList.send()" backgroundGradientColors="[#0099CC, #2383ac]">
	<mx:Script>
		import mx.collections.ArrayCollection;
		import mx.rpc.events.ResultEvent;
		import mx.effects.Resize;
 
		[Bindable]
		private var sites:ArrayCollection = new ArrayCollection();
		[Bindable]
		public var myURL:String; 
 
		private function siteListHandler(event:ResultEvent):void{
			sites = event.result.sites.site;
			var siteObj:Object = new Object();
			siteObj.name = "Select"
			siteObj.url = "";
			sites.addItemAt(siteObj,0);
			siteCombo.selectedIndex = 0;
		 	//trace(event.result);
		 }
 
		 public function chooseSiteFeed(url:String, name:String):void{
		 	myURL = "proxyURL.php?url=" + url;
       		mdFeed.send();
		 }
 
	</mx:Script>
	<mx:Style source="css/OSX.css" />
	<mx:HTTPService id="feedList" url="data/feedURLs.xml" result="siteListHandler(event)"/>
	<mx:HTTPService id="mdFeed" url="{myURL}" showBusyCursor="true" useProxy="false" />
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="90%" height="40">
			<mx:Label text="Choose a Site:"/>
			<mx:ComboBox id="siteCombo" dataProvider="{sites}" labelField="name" change="chooseSiteFeed(ComboBox(event.target).selectedItem.data, ComboBox(event.target).selectedItem.name)" />
		</mx:HBox>
		<mx:Text width="90%" color="#000000"
		       text="Drag the divider up and down to resize the panel."/>
		<mx:VDividedBox height="100%" width="100%">
			<mx:DataGrid id="mdGrid" labelField="Choose a Site" dataProvider="{mdFeed.lastResult.rss.channel.item}" height="60%" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="The Dirt" dataField="title" />
				<mx:DataGridColumn headerText="The Date" width="100" dataField="pubDate"/>
			</mx:columns>
			</mx:DataGrid>
			<mx:TextArea htmlText="{mdGrid.selectedItem.description}" right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" click="navigateToURL(new URLRequest(mdGrid.selectedItem.link));" bottom="10" left="10" width="150"/>
	</mx:VBox>
</mx:Application>

IN the code I also loaded the OSX skin from Scalenine. So there you have it. Pretty easy, really, though I understand I may not have explained it all as well as possible. It’s just easier when you are actually going through things in front of a lab or class. If you have questions on how it all works, feel free to drop me a line. You can download the source, here.

1. What company was Rob going to work for? Was it the company in the viral sites for the movie? Tagruato? Seems like it would make sense, but maybe be to convenient/cheesy.
2. What stirred the monster up? Offshore drilling? Is this an environmental statement?
3. Is the “hammer-down” a tactical nuke strike?
4. Was the monster destroyed?
5. How was the camera/tape not destroyed in the “hammer-down”?
6. What is in the parasites bite that causes the victim to burst/explode?
7. What were those air sac things on Clover’s head?
8. How much would a monster that size need to eat?
9. If the monster is living at a depth sufficient to hide it for millenia, what kind of food could be available down there?
10. Does it eat this stuff (used to make Slusho)?
11. Did Tagruato’s harvesting of the “Seabed’s Nectar” cause it to come looking for food?
12.  Did the monster actually come from outer space?
13. Or did the parasites come from outer space and wake the monster?
14. Did the parasites eat the monster’s food causing it to leave it’s habitat?

I’m really interested in hearing from other people that have seen the movie… What do you think? So many questions… Maybe Cloverfield 2 will answer ‘em… hmmm.

Does anyone out there know differently? If it hasn’t been done yet, I may spend some time getting these going… I think MXML would come together quicky, as it could be made by hacking the XML file a bit… AS3 could be made from the existing AS file, but would require a bit more work.

If you know anything about the status of this work, please comment here. I certainly don’t want to build something that’s already done.

I figure, if I’m going niche, I’m going niche. There’s probably like a couple hundred people out there speaking that kind of acronym soup, so I apologize to my family that checks on my blog from time to time. Please, check out the photo links on the right hand sidebar and forget the geek speak.