At work, we are developing a teaching resource which is utilising the Adobe Flex framework for deploying content through the browser. This is my first foray into Flex so I have spent quite some time reading about and watching tutorials on the workflow between Adobe Illustrator, Adobe Flash Catalyst and Adobe Flash Builder, to create online applications.
I earlier spent some time creating a simple Twitter Widget, so decided I would continue with this theme, and try and recreate a similar widget for a website, but this time using Flex.
I found a very useful series of video tutorials from gotoAndLearn which I have listed below. These tutorials helped me understand how to take mock-up artwork drawn in Illustrator, convert it quickly and easily into an interactive component in Catalyst (without even having to look at any code!), and finally hooking up an http Twitter search to it in Flash Builder to create a fully functioning Twitter widget.
- Flash Builder 4 Data Integration
- Flash Catalyst and Flex 4: Part1
- Flash Catalyst and Flex 4: Part2
The gotoAndLearn tutorials take you through how to create a searchable twitter widget, but I wanted to create a widget that only displayed tweets from my account (PeterPickthall) that contained a specific hashtag (#mm), like the twitter widget displayed here, on the left-hand-side of my blog.
To achieve this I merely substituted the query “flash”, specified in the tutorial with, ”#mm from:PeterPickthall”, which I also used in the Simple Twitter Widget tutorial. to create your own custom Twitter compatible search string, you can use the Advanced Twitter Search creator here.
An example of my final, rough, prototype can be seen working here.
It goes without saying that I need to spend more time on the design and aesthetics of the widget, and I also need to add extra functionality such as making the hastags, @usernames and profile picture clickable links, but I am impressed at how quickly I was able to produce a working model with very little need to get involved with the code!
Tags: Adobe, Flash Builder, Flash Catalyst, Flex, Twitter