Practical Interaction Design for Developers: Slides and Code

This summer we had a fantastic Designer/Developer Workflow Conference (D2WC) run by Dee Sadler. I love the mix of visual creatives and code slingers all putting their minds together to learn from each other and discover better ways to work together towards amazing results. It’s great to dive deep into our own core disciplines, but we cannot neglect our teammates and understanding what it takes to work together.

Anyone who’s played an organized sport knows on some level that you need to know something about all of the positions in order to play your position well.

Here are the slides from my presentation, “Practical IxD for Developers”. It’s full of great quotes and references to books that I highly recommend. They are also listed on my bookshelf.

And the code demo from the end of the presentation is below showing basic data binding and how to manage transitions via custom Layouts.

Code Demo: http://davidortinau.com/exhibits/DataBindingTransitions/index.html

Source: DataBindingTransitions.zip


Categories: FlexInteraction DesignPermalink

Create a Twitter OAuth Application With Tweetr Using Single Access Token

What do you do when you want to use the Twitter API with your own account, and don’t need or want users to login via the PIN OAuth dance? You can use a single access token/secret in place of the authenticated token/secret and get all the access you need.

Note: the authenticated user in this scenario is you, the owner of the application.

For this example I’m using Tweetr, an AS3 library for accessing Twitter from your Flash or Flex application. Tweetr requires as3crypto. Details and downloads here: http://wiki.swfjunkie.com/tweetr:downloads

Make sure you grab the proxy php and load that up on your server so you can have a service host. Run the install.php so it’s ready to go. This is a nice script providing caching so you get a little speed boost and don’t run over your Twitter API limit.

Ok, let’s get to it.

Create a Twitter Application, and make note of the Consumer key and secret on the settings page. Then on the right side of the profile click the button labeled “My Access Token”. Grab that Access Token and Access Token Secret. This is referred to as a “single access token”, “one access token”, or “single user access token”. Docs: http://dev.twitter.com/pages/oauth_single_token

In your Flash application, implement Tweetr with OAuth. Import and other implementation details are omitted below.

var serviceHost : String = “http://your_twittr_proxy_php_setup”;

var tweetr:Tweetr = new Tweetr();
tweetr.serviceHost = serviceHost;       

oauth = new OAuth();
oauth.serviceHost = serviceHost;
oauth.consumerKey = “CONSUMER_KEY”;
oauth.consumerSecret = “CONSUMER_SECRET”;
oauth.oauthToken = “MY_ACCESS_TOKEN”;
oauth.oauthTokenSecret = “MY_ACCESS_TOKEN_SECRET”;
tweetr.oAuth = oauth; 

And then you need to…wait, sorry, that’s all there is. Start making calls to the API and listening for results.

tweetr.addEventListener(TweetEvent.COMPLETE, handleLoad);
tweetr.addEventListener(TweetEvent.FAILED, handleFail);
tweetr.getUserTimeLine(null, null, null, 0, 0);

var tweets:Array = [];
private function handleLoad(event:TweetEvent):void
for(var i:int = 0; i

< event.responseArray.length; i++)
var statusData:StatusData = event.responseArray

  // ... do something magical with the tweets

private function handleFail(event:TweetEvent):void
trace("Failed to get data");
// ... handle the disappointing failure…maybe a whale…just a thought

There are plenty of good tutorials out for using Tweetr, though beware of any too old. Twitter phased out basic authentication August 2010.

A couple I checked out:
Mark Doherty: Tweetr App Video Walkthrough
swfjunkie: PINless OAuth with Tweetr

I also want to note that it’s difficult to secure anything in a Flash application, and the key, token, and secrets are no exception. In this example they are right there in the code, unencrypted. SWFs are easily decompiled. If you dream up a solid security solution that doesn’t require a mountain of effort, please let me know.

Categories: FlashFlexAIRPermalink

Draw Lines Under Text in Spark RichEditableText

On my current project, the design calls for displaying editable text with underlines that scroll with the text. It’s a nice design, and I had no good solution. I talked to a couple people, ideas were tossed around, and after a lot of reading and a couple runs at it I had nothing to show for the effort.

You can already see a working demo below. So how did I get there?

I had a nagging feeling I’d talked to someone about a workable solution, but I couldn’t remember who. Paul Taylor (@guyinthechair) had shown me some of his excellent work with text during 360|Flex in DC last year, and I figured if anyone was going to be able to help it’d be Paul. I put out a Twitter call for help, and, sure enough, he had an idea. And it’s so simple!

Paul extends RichEditableText and adds a handler for Event.ADDED which is triggered for each new line (or specifically for each time anything is added to the display list). Thanks Paul!

import flash.display.DisplayObject;
import flash.display.Shape;
import flash.events.Event;
import flash.events.EventPhase;
import flash.text.engine.TextLine;

import spark.components.RichEditableText;

public class LineyRET extends RichEditableText
public function LineyRET()
addEventListener(Event.ADDED, onChildLineAdded);

private function onChildLineAdded(event:Event):void
var line:TextLine = event.target as TextLine;


var s:Shape = new Shape();
s.name = 'baseline';
s.graphics.lineStyle(1, 0xCCCCCC, 0.5);
s.graphics.moveTo(0, line.descent + 5);
s.graphics.lineTo(line.specifiedWidth, line.descent + 5);


          Either scripts and active content are not permitted to run or Adobe Flash Player version           0.0.0 or greater is not installed.          

                Get Adobe Flash Player




Melville text courtesy of Fillerati.

View and Download demo source here

Categories: FlexPermalink