Headed by a group of volunteers, the Apache Flex Project announced their latest version of the Flash-based Flex framework, formerly created by Macromedia and Adobe before being accepted into Apache’s open-source incubation program.

Taken from the Apache Flex offical blog, Apache Flex 4.10.0 highlights include:

• Support for latest versions of Flash Player and AIR runtimes. At the same time, we have made it easier for developers wanting to take advantage of the latest advances in the Flash runtimes by letting them choose the versions during installation. The Apache Flex SDK Installer now allows developers to select various combinations of the Flex SDK, Flash Player and AIR runtimes. All the settings and configurations are taken care of during the installation, so the developer can just start coding!
• Improved support for older Flash Player versions. Enterprise environments have more stringent requirement in terms of upgrading Flash Player versions. Now, because of our improved backwards compatibility, those customers can safely upgrade to the latest version of the Flex SDK without having to force a Flash Player upgrade on their end users.
• Added over 15 new Spark components matching or replacing their mx counterparts. The new components ensure that SDK users can benefit from the advances made in the Spark architecture throughout more of the development process.
• “Out of the box” support for Advanced Telemetry allowing developers to easily profile their application and improve performance using Adobe Scout.
• Better localization for multiple languages. Flex 4.10.0 is better now when trying to make application for multiple countries and languages.
• Better international support for dates in formatters, validators, and the DateField and DateChooser components.
• Better for developer productivity – less Run Time Errors (RTEs) and workarounds required in 4.10.0
• 480 dpi mobile resolution/skin support means that Flex SDK users can now target high resolution devices such as iOS Retina, etc.

You can download Apache Flex here:
http://flex.apache.org/download-source.html

Congratulations to the entire team for pushing Apache Flex to yet another version. We can’t wait to see what’s ahead.

A couple of years ago I started working on a Flex 4 powered social networking application called Xuland.

It was a web-based app that had the look and feel of Facebook with geo-location abilities (based on IP). Essentially, you could change the on-screen map to any location in the world (or it would discover your current location) and you could read or post comments to that area. It was a nice idea…but ultimately didn’t work.

During creation, Apple and Adobe had their infamous falling out and the world moved to a mobile stage. Now Flash on mobile has been deprecated by Adobe and Flex itself has been accepted into Apache’s incubation process. It seems that the days of considering Flex for general public consumption as a web-based application were gone.

I opted to pick up the pieces of Xuland and re-assemble them into an AIR-powered mobile application with a different objective: find a way to make it easier for folks to make friends.

Facebook and Twitter are great vehicles for announcing your current status to your family, friends, fans or followers. But they do little to strike new connections between people.

Xuland attempts to place more importance on a person’s profile. It is through the profile that you can find common similarities in passions, occupations, religion and so forth. Xuland allows you to ask anonymous questions, request that folks “guess” your age or other personal attributes. Xuland tries to ease the connection-making process to allow new friendships to strike without odd winks, pokes, virtual gifts or other gimmicks.

Using Flex 4.6′s mobile enhancements and Adobe AIR, I adapted the previous web-based application to a mobile-based friending app that is now live on the Android Market:

https://market.android.com/details?id=air.com.xuland

The iOS version (using the same code-based) has been submitted to Apple and is currently waiting review. I had to fabricate some test data and accounts to ease the review process and will remove those soon.

Any feedback on the app in general, the concept, appearance or performance is appreciated of course. I rely on the Flex community and have done so for years. Recommendations or questions are welcome!

I’ll post another article once the iOS version has made its way to the Apple App Store. Until then, happy Xulanding!

The new Apache Flex blog has submitted its first post:

http://blogs.apache.org/flex/

“This is the beginning of a new era for Flex. On December 31st 2011, our project was accepted as an incubator podling at the Apache Software Foundation.”

The post also mentions the Apache Flex logo contest which concluded yesterday. Here is a link to all of the submissions so far, which many of them look outstanding: http://incubator.apache.org/flex/logo-contest.html

Good luck to any of you who entered the contest. I can’t wait to see which one was chosen!

“On the 31th of December, 2011, the Apache Software Foundation has accepted the Flex SDK into incubation. Apache Flex is now a community project managed by Apache (ASF). The migration from Adobe to Apache involves a re-branding and you can contribute by proposing the new Apache Flex logo.”

Submit your new Apache Flex logo here:
http://incubator.apache.org/flex/logo-contest.html

I’m sure most have heard about the latest announcments happening in the blog-o-sphere and from Adobe:

http://blogs.adobe.com/conversations/2011/11/flash-focus.html

For many of us, we’re not surprised, although many were. The Flash plugin on mobile browsers has always been an up-hill battle. With Apple and Microsoft’s decision not to support the Flash mobile plugin, the sheer number of emerging mobile devices (with browsers) to support and the wide adoption of HTML5 for mobile browsing animations and effects – it seems this is a timely decision. It would have been nice to continue to see support, but times change. How this will affect the Flash plugin on desktop browsers remains to be seen.

The fast rise and popularity of Adobe AIR has give Flash a new life. AIR is now supported on the PC, Mac, Android, iPad/iPhone, BlackBerry, Amazon’s Kindle Fire, B&N’s NOOK, and Sony mobile devices – amongst others. Platforms that we’d never thought would support Flash now do (like televisions, cars and even alarm clocks)…with more devices to come. It’s the best option there is for deploying games or applications from one single code source to multiple platforms.

This is a step in the evolution of Flash towards amazing GPU-based 3D gaming (which we saw at Max from the Angry Birds and Unreal makers) and Enterprise-level dashboards and RIA’s and away from annoying banner ads. Although Flash “on mobile” is officially dead, Flash in essence will have been resurrected through Adobe AIR.

I’m anxious to see what Flash 12 brings us as it will help bridge the gap between HTML5 and Flash.

Flash Player 11.1 and AIR 3.1 were just released today: http://blogs.adobe.com/flashplayer/2011/11/adobe-flash-player-11-1-and-adobe-air-3-1-are-now-available.html

Other interesting articles:
http://www.leebrimelow.com/?p=3151
http://forta.com/blog/index.cfm/2011/11/9/Some-Thoughts-On-Flash-And-Devices

At the end of the second day of sessions at the Adobe MAX 2011 conference in Los Angeles, Adobe holds their annual Awards and Sneak Peeks gathering inside the huge Nokia Theater. This year Rainn Wilson from NBC’s “The Office” emceed the awards and afterward sat on-stage in a make-shift office complete with desks and leather (or vinyl) chairs alongside Greg Demichillie (Senior Director of Product Management, Developer Tools at Adobe Systems).

The entire show was fantastic. Rainn was on-point and delivered witty one-liners throughout like a veteran comic. But I have to say he was quieted down considerably once Greg, with the help of Adobe’s own engineers, showcased new features that may (or may not) get released in future versions of their products.

As far as I’m aware, for the first time ever Adobe has offered these “sneak peek” videos online for free in full HD:

http://max.adobe.com/blog/2011/max2011_sneakpeeks.html

They’re all amazing, but as far as I’m concerned the real show-stopper was an image “deblurring” feature that Adobe has been working on in collaboration with engineers from MIT:

You truly have to see it to believe it.

Adobe also offers 160+ hours of free training online from most of the sessions offered at Adobe MAX this year. If you weren’t able to find a way to go to the conference, this is the next best thing:
http://tv.adobe.com/show/max-2011-develop

Enjoy!

The full press-release:
Adobe Systems Incorporated today posted videos of the technology “sneak peeks” that were showcased recently at the company’s annual MAX user conference in Los Angeles. Included in the videos is the image deblurring technology, demonstrated in an on-stage demo by Adobe senior research scientist Jue Wang, which has become an Internet sensation.

“We sneaked some early-stage technology from our labs during the recent Adobe MAX conference that exemplify the kind of technology innovation that is thriving across Adobe,” said Kevin Lynch, chief technology officer, Adobe. “Adobe’s technology leadership is ensuring that designers and developers have the tools they need to help shape the future of digital media.”

The sneaks are intended to give MAX attendees a look at future technologies. These technologies may, or may not, make it into future versions of Adobe products. The demos are currently being hosted on AdobeTV, and include:

– Image Deblurring — removing blurriness from digital photos caused by camera shake while the pictures were being taken;

– Local Layer Ordering — a new way for graphic designers to create layered compositions that better reflect the way real world objects act;

– InDesign Liquid Layout — using InDesign to create high quality magazines that automatically adapt layouts across devices and screen orientation;

– Near Field Communications in Adobe AIR — using Adobe AIR to create applications that communicate with the physical world;

– Automatic Synchronization of Crowd Sourced Videos — synchronizing video clips taken with different cameras and from different vantage points into a single immersive video;

– Reverse Debugging in Flash Builder — the ability to step backwards in time while debugging a Flash application to better find the root cause of bugs;

– RubbaDub — automatically replacing the dialog of a video clip with separately recorded audio with perfect synchronization;

– Pixel Nuggets — searching through a large library of images by identifying images that contain the same people, backgrounds, landmarks, etc.;

– Monocle — a new visual tool to help developers find and fix performance problems in Flash applications;

– Video Meshes — an entirely new way to edit videos, including the ability to create 3D fly-throughs of 2D videos and change focus and depth of field;

– GPU Parallelism — using a device’s graphic processing unit (GPU) to accelerate performance of general purpose computing.

About Adobe Systems Incorporated

Adobe is changing the world through digital experiences. For more information, visit www.adobe.com .

(C) 2011 Adobe Systems Incorporated. All rights reserved. Adobe and the Adobe logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners.

SOURCE: Adobe Systems Incorporated

I’m sure this will come in handy for anyone out there looking for the iOS chevron to duplicate in their Flex 4.5+ mobile AIR apps

This is what I’ll be using in my social-friending app Xuland…feel free to copy and modify to your taste…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	height="100%"
	width="20">
 
	<s:Path verticalCenter="0"
		scaleX="2"
		scaleY="2">
		<s:data>
			M 2 0 L 7 5 L 2 10 L 0 9 L 4 5 L 0 1 z
		</s:data>
 
		<s:fill>
			<s:SolidColor color="#666666" />
		</s:fill>
	</s:Path>
</s:Group>

Here’s an example…ignore the test messages

Kudos to the Amanita Design team for pushing all the other paid iPad apps out of the way with a little help from Adobe AIR

http://itunes.apple.com/us/app/machinarium/id459189186?mt=8

According to Lee Brimelow:
“Few in the technology press have picked up on and correctly reported about this workflow that allows Flash developers to target Apple’s popular iOS devices.

Most people still only think of Flash as the browser plug-in that Apple doesn’t allow in Safari on iOS devices. But being able to create apps and games for iOS is a huge win for Flash developers, for Adobe, and for Apple.”

Via:
http://thenextweb.com/apple/2011/09/09/the-best-selling-ipad-app-on-the-app-store-was-created-with-adobe-flash/

This was a two-day project that I started mostly as a way to learn the process of deploying an Adobe AIR app written in Flex 4.5 to Android and iOS devices.

This app is now available on the Android Market, with iOS and Blackberry versions coming soon.

Adobe Feeds in the Android Market

The process of creating the app was generally very easy. I’ll post the source-code here in a separate article that details my experiences later but I just wanted to get a quick little announcement out there for anyone that has ever wanted to view Adobe Feeds in their mobile device through an app rather than the browser

I *would* have the iOS version in the Apple App Store, however I need to upload the app via Mac OS X (which I don’t have)…not surprisingly enough

Once I figure out how to install an emulator on my PC and actually upload the app to Apple for approval, I’ll post the link to that as well.

Let me know if you have any comments or suggestions for the app. Enjoy!

After recently diving into Flex 4.5.1 and starting several mobile AIR-based projects, I ran into an issue with the Google Maps SDK when testing under iOS devices.

Long story short, it didn’t work.

The Google Maps Flash API works great under Android when the mobile project is deployed as an AIR-based application, but when compiled through the PFI (Packager for iPhone) bundled into AIR 2.7 it simply doesn’t ever load.

After a little investigation, the most likely cause was the fact that the Google Maps Flex API attempts to load external SWF’s at runtime from the Google map servers, which is strictly forbidden by Apple’s terms of service thus rendering this functionality completely disabled.

This functionality works fine under Android devices and was actually a pleasure to use, however without iOS, the joy of working with Adobe’s new Flex 4.5.1 SDK quickly subsides and is replaced by frustration.

There are workarounds for iOS, namely through the usage of the JavaScript-based Google Maps SDK and Flex 4.5′s own StageWebView class which can display external HTML content over the Flash content.

Unfortunately, Flex cannot interact with StageWebView content making it very difficult for some apps to function normally as they would in a normal Flash-based SWF rendered through the browser. My own application, Xuland, which depends heavily on the Google Maps SDK required many changes before I could test it’s mobile-version on my iPad.

I can get by with StageWebView, but I prefer a Map object that Flex can interact with directly, apply markers, dynamically zoom or geolocate, etc without having to re-load a URL from my external web-server.

Just today, MapQuest has released a Flex-version of it’s Flash Maps API which supposedly works well under both iOS and Android. I haven’t tested this but I will later tonight for sure

For everyone else, here’s a link to MapQuest’s Developer Reference page and API:

MapQuest Developer Network:
http://developer.mapquest.com/web/products/beta

MapQuest Flash Map Mobile API:
http://developer.mapquest.com/content/as3/v7/7.0.2_MQ_MOBILE_B1/documentation/devref/index.html

Follow me on Twitter for more Adobe Flex & AIR Mobile news and announcements.

The long awaited update to FlashBuilder and the Flex SDK were released by Adobe last night.

Previously with FlashBuilder and Flex 4.5.0, you could export Flex applications to Android devices and ActionScript-based projects to iOS. Now with the 4.5.1 update, you can export all apps to any of the platforms: iPhone, iPad, Android & the new BlackBerry Playbook.

This is a gigantic leap forward to allow developers to implement the “write-once, run-anywhere” ideology that has long been associated with the Flash platform. With Apple’s insistence on preventing Flash from being installed on iOS devices, Adobe has had to invent ways to circumvent those restrictions even going so far as creating a Flash-to-HTML5 conversion tool (“Wallaby”).

With FlashBuilder 4.5.1, you can write easy-to-learn Flex XML combined with the power of ActionScript to product apps that can be approved into the Apple app-store, BlackBerry’s AppWorld and Android’s App Market.

Click here to download the updaters

Adobe says that with Flash Builder and Flex 4.5, developers can now use one tool, one framework and one codebase to create applications that run on desktops as well as smartphones and tablets.

Ed Rowe, Adobe’s VP of Developer Tooling said, “The reaction from developers to the new mobile capabilities in Flash Builder 4.5 and the Flex 4.5 framework has been absolutely fantastic. They are amazed by how easy it is to create great mobile apps for Android devices, BlackBerry PlayBook, iPhone and iPad. Companies can now effectively reach their customers no matter what type of device they have.”

http://blogs.adobe.com/flex/2011/06/flex-sdk-and-flash-builder-updates-available-adds-ios-and-blackberry-playbook-support.html

Congrats Adobe on another victory!

** Technical note: The release notes for FlashBuilder 4.5.1 indicate it’s bundled with AIR 2.6, even though AIR 2.7 was just released. In fact, the iOS packager was updated to AIR 2.7 so even though you only have access to the AIR 2.6 API, your compiled iOS application will gain the performance features added to 2.7. According to Lee Brimelow, “It has to do with different release schedules of various teams. That thought is that it’s better to get it out there now so people can start developing with it rather than making everyone wait longer.”

http://blog.theflashblog.com/?p=2779

Although I am more interested in the Flash Builder 4.5 update that will allow me to export my Flex-powered mobile applications to iOS, we have to take babysteps.

First up, Adobe AIR 2.7 must be released into the wild, which it has today!

The most notable improvement is the dramatic increase in performance of Flex applications on iOS devices (4x faster in CPU mode). If anyone has seen Terry Paton’s Flash-based Meteor Storm (http://pixelpaton.com/?p=3475) running on an iPad, you were probably wondering how it played so well. Terry was given premature access to AIR 2.7. Without it, the game’s performance would have suffered immeasurably.

Meteor Storm running on iOS from Terry Paton on Vimeo.

For a quick video example, watch my former employer Renaun Erickson, Adobe Flash Platform Evangelist, show you an example of the speed improvements:

“Adobe is pleased to announce the availability of Adobe AIR 2.7 SDK and the Adobe AIR 2.7 runtimes. Adobe AIR 2.7 includes new features for both desktop and mobile applications with mobile support for Android 2.2+, BlackBerry Tablet OS* and iOS 4+ operating systems. Companies can build and deploy AIR 2.7 apps using Adobe Flash Builder 4.5 with an upcoming update to AIR 2.7 later this month.”

http://blogs.adobe.com/flashplayer/2011/06/adobe-air-2-7-now-available-ios-apps-4x-faster.html

If you’re not aware of TweetDeck, it started out as an AIR application for the desktop created by a Flex developer, Iain Dodsworth who is still CEO. Rumors have been going around for a couple of months about this acquisition but it’s been confirmed on a few different sites now.

I used TweetDeck for a minute when it first came out and thought it needed some work. They’ve come a LONG way. It’s nice to see that a Flex application can sell for $40-$50 million (cash & Twitter stock).

http://money.cnn.com/2011/05/23/technology/twitter_acquires_tweetdeck/

Another nice win for Flex

“We’re excited to announce that Flash Player 10.3 is now available for Android, Linux, MacOS, and Windows. Flash Player 10.3 improves stability, enhances security and user privacy protection, and provides new desktop video and audio capabilities for enterprises and developers.

On the device side, with the rollout of Android 3.1 users of Honeycomb tablets like the Motorola XOOM will experience performance improvements introduced in Flash Player 10.2.”

http://blogs.adobe.com/flashplayer/

Good job Adobe…keep it going!

The Flex 4.5 SDK, FlashBuilder 4.5 and Adobe Creative Suite 5.5 (along with Flash Catalyst) are now available for download!

The major enhancement to Flex 4.5 is the ability to export ActionScript-only based projects to iOS and Blackberry and Flex applications to Android. This update does not include the ability to port Flex apps to iOS or the Blackberry Playbook quite yet (that update is coming in June).

New features released in this version of Flex include:
• Spark DataGrid
• Spark Form
• Spark Image and BitmapImage enhancements
• Spark Formatters
• Spark Validators
• Video and text enhancements
• Reduced memory consumption for full builds
• Reduced compilation time for full and incremental builds
• Improving the compiler’s RSL linking logic

I’m excited for this release and I’m excited for the next update to Flex coming in June. So excited that I’m actually considering buying an iPad (!)…something I honestly never though I would do but after getting numerous complaints of the inability to visit Xuland on the iPad, I determined its high-time I created Android and Apple app versions as soon as possible.

Congrats Adobe on another big win!

http://blogs.adobe.com/flex/2011/05/flex-4-5-sdk-flash-builder-4-5-and-flash-catalyst-cs-5-5-now-available.html

Adobe AIR 2.6 was released officially yesterday.

In a nutshell:

1. Adobe has been trying to replicate the success of the Flash ideology on mobile devices: “Write once, run everywhere”.
2. Adobe already had the Packager for iPhone (PFI) functionality built into Flash CS5 which allowed developers to code in ActionScript and produce native iPhone IPA files installable through iTunes and uploadable thru iTunes Connect (now that Apple lifted the ban on 3rd party apps)
3. Adobe created the AIR 2.5 runtime to run on Android mobile devices and began introducing the ability to write Flex & ActionScript software using the next version of Flash Builder “Burrito” (I’ve been playing with this and it works well)

Now with AIR 2.6, the PFI has been bundled into the ADT (AIR Developer Tool).

AIR 2.6 includes a host of feature upgrades to better access iPhone’s features (microphone, retina support, multitasking, camera support, etc) as well as Android.

You can also debug directly on the mobile phone thru a USB cable (imagine tapping a button on your phone and hitting a breakpoint in Flash Builder).

This will also mean Flash Builder “Burrito” will get another option to compile your app to iOS.

Pretty slick

http://blogs.adobe.com/cantrell/archives/2011/03/everything-new-in-adobe-air-2-6.html

I’ll post a review here on my blog in about a month

After a lengthy hiatus due to holidays and vacation, I returned to working on my experimental Flex 4 & Swiz social-networking site, Xuland, by adding the Twitter-like ability to follow people.

Only available to logged-in users, the “following” tab allows you to view comments by people that aren’t necessarily in the location shown on the map. There is also a new “followers” tab which allows you to view comments by people that are following YOU.

Although I am still ironing out small bugs here and there, the functionality works rather well. Give it a whirl and let me know what you think!

For my experimental Flex4-powered social networking application Xuland, I wanted to display local news specifically tailored to fit the location that was currently displayed on the map.

A service call to obtain a local newsfeed was easy enough, but I wanted each news title to appear underneath the Xuland map as a link. Using the default Flex LinkButton resulted in something close to what I wanted. Clicking each link opened up the local news story in a separate browser window or tab, however if the title of the news story was longer than the width I had allotted for the LinkButton, the resulting title was cut off:

I needed the LinkButton to essentially wrap without truncating the title. Figuring out how to do so was not easy but after a little digging and a little experimenting, here’s the resulting code.

First, we need to create a non-truncating UITextField that will serve as our textField component within the LinkButton class. The only purpose of this custom UITextField class is to override the truncateToFit Boolean so that it always returns false:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package
{
	import mx.core.UITextField;
 
	public class NonTruncatingUITextField extends UITextField
	{
		public function NonTruncatingUITextField ()
		{
			super();
		}
 
		override public function truncateToFit(s:String = null):Boolean
		{
			return false;
		}
	}
}

Next, we need to utilize that new UITextField class in a customized version of our LinkButton. We’ll extend LinkButton and call it WrappingLinkButton. The primary purpose of this class is to override createChildren and set the textField component property to point to our new NonTruncatingUITextField class.

We’ll also override updateDisplayList to change the y-index of our textField so that it appears higher on the button. At this point, we also need to increase the height of the button to fit our newly wrapped textField. You’ll notice I added a little more logic to underline the text when you mouseOver and to zero out the leading (space between characters):

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
51
52
53
54
55

package
{
	import flash.display.DisplayObject;
	import flash.events.MouseEvent;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
 
	import mx.controls.LinkButton;
	import mx.core.UITextField;
 
	public class WrappingLinkButton extends LinkButton
	{
		private var m_textFormat:TextFormat;
 
		public function WrappingLinkButton()
		{
			super();
			addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
			addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
 
			m_textFormat = new TextFormat();
			m_textFormat.leading = 0;
		}
 
		private function onMouseOver( event:MouseEvent ):void
		{
			setStyle( "textDecoration", "underline" );
		}
 
		private function onMouseOut( event:MouseEvent ):void
		{
			setStyle( "textDecoration", "none" );
		}
 
		override protected function createChildren():void
		{
			super.createChildren();
 
			textField = new NonTruncatingUITextField();
			textField.styleName = this;
			textField.multiline = true;
			textField.wordWrap = true;
			textField.autoSize = TextFieldAutoSize.LEFT;
			addChild(DisplayObject(textField));
		}
 
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			textField.y = (this.height - textField.height ) >> 1;
			height = textField.height + getStyle("paddingTop") + getStyle("paddingBottom");
			textField.setTextFormat( m_textFormat );
		}
	}
}

Now we just need to drop the component into our view. I use mine within a custom ItemRenderer component that serves as the item renderer for a DataGroup component that lists my news items vertically:

1
2
3
4
5
6
7

<component:WrappingLinkButton
          width="245"
          label="{ m_news.title }" 
          textAlign="left"
          paddingBottom="0" paddingTop="0"
          paddingLeft="0" paddingRight="0"
          click="onClick()"/>

My click handler simply calls navigateToURL to send our user to the story of their choice. And this is our resulting newsfeed in Xuland:

Hope this helps others out there looking to create their own wrapping LinkButtons (or Buttons).

To read more about Xuland, visit my other blog post regarding this application.

Erich

Mission: Add a Facebook “like” button to my experimental Flex social networking site Xuland.

I initially thought, “Boy this must be a piece of cake. Surely thousands of other developers have already figured this out!”. Boy was I wrong.

The best example I could find on this specific topic was http://labs.byhook.com/2010/08/03/facebook-like-button-in-flash/. Spend a good half hour digesting the contents of that blog posting and you’ll be ready to scratch the idea altogether.

I wanted a simple implementation that I could knock out in less than an hour. I figured why not just use an iframe!

Here’s the steps:

First, go to http://developers.facebook.com/docs/reference/plugins/like

Fill out the form to get your special iframe code

Next, open up your Flex application’s HTML wrapper (e.g. index.template.html) in FlexBuilder

Copy and paste the iframe code (from above) into the HTML template. I put mine right under the <div id=”flashContent”> section.

1
2
3
4
5
6
7
8
9

<div id="flashContent" style="z-index:-1">
  ...
</div>
 
<iframe 
     src="<< insert your custom facebook like URL here >>" 
     scrolling="no" frameborder="0" 
     style="border:none; overflow:hidden; width:100px; height:21px; z-index:99; position: absolute; top: 0px; left: 100;" 
     allowTransparency="true"></iframe>

Notice the iframe style declaration. Make sure z-index=99, then you can use CSS to position your like button exactly where you want it.

Also notice the flashContent div style declaration. Set its z-index = -1.

In the SWFObject section, add a param for “wmode”. Set it to “transparent”.

1
2
3
4
5
6
7

var params = {};
params.wmode = "transparent";
swfobject.embedSWF(
  "${swf}.swf", "flashContent", 
  "${width}", "${height}", 
  swfVersionStr, xiSwfUrlStr, 
  flashvars, params, attributes);

In the body tag, set the z-index=0

1

<body style="position:relative;left:0px;top:0px;z-index:0;">

That’s it!

The result should look something like this:

Good luck with your implementation!

To read more about Xuland, visit my other blog post regarding this application.

Erich