Blog

Trying to mimic the scrolling of iOS’s UIScrollView with Actionscript over a sunny weekend made me lazy. Coding myself: “overshoot, decelerate, ease back into position”, ended up with some funny, fair and not so fair results. It just didn’t feel right. I decided to look a bit further on the interwebs and again…. GreenSock to the rescue! Ok, it comes with a price, but only fair for all those times Greensock saved the day. If you’re prepared to shell out $150 for a commercial license or $99 for a bit more restricted one you’re the proud owner of the ThrowPropsPlugin. Butter smooth “iOS scrolling” (amongst others).

Just some notes to myself and perhaps other people about the application descriptor file and the settings it allow you to configure.

language settings (AIR 3.2)

You can specify the language your app supports including app descriptions in all supported languages. Add snippet below

1

<supportedLanguages>en</supportedLanguages>

more or less anywhere in the rootnode (application) of the application descriptor xml. If your app supports more languages, seperate them with comma’s. Your app does not show up in the appstore in other languages.
(via and more on: http://www.flashrealtime.com/supported-languages-adobe-ai/)

Icons without the default glow

If you want the icon of your app without the default glow Apple adds to it, add line 8 of the snippet below to the InfoAdditions element (at the bottom of the application descriptor)

For showing your tweets (or anyone’s for that matter) in a website, twitter offers two JavaScript files, blogger.js and user_timeline.json. To make it work, there’s three steps to take:

Add one specific HTML element as a placeholder for the tweets

Embed two JavaScript files into your page

Add some CSS to have it show the way you want

Following is a short explanation of how it works.

The HTML

You only need to place one HTML element in your page into which the tweets end up. This element needs to have the id attribute set to twitter_update_list. This is because the scripts need to know where to put the tweets. In the example below I use a unordered list ( <ul> ) as a placeholder. So, somewhere in my page there is this code:

The first can be embedded as is, there’s no settings to it, nor the real need to change it’s code. The second does need some settings. They are discussed after the next section.

blogger.js

The file you just need to embed, nothing more. This file contains two functions to parse the incoming data into chunks of HTML. Each incoming tweet is placed inside a list item (<li>). Usernames (words preceded with the at-char (@)) are made into links to the twitter timeline of that person. Furthermore, all links are wrapped in an anchor tag. Lastly a link to the actual tweet is created from the id of the tweet. The tekst linking to the tweet is the indication how long ago the tweet was placed. This leads to, for instance, the following HTML structure:

Nasty detail IMHO here is the inline styling of the link to the tweet. I guess they had better left it to the CSS of the user. Fortunately there is the !important rule to override it.

The function that does the parsing looks for an element with the id ‘twitter_update_list’ to place all the list items in. Since the parser places the individual tweets into list items, it makes sense to use a list ( (<ul> or (<ol> ) as this html element.

user_timeline.json

This is the script that does the actual request to twitter. Here you can set a number of options to determine what is retrieved from the twitter server. Here is a short overview:

user_id

The id of the user you want to show the tweets of.

screen_name

The screen name of the user you want to show the tweets of (this is the name that appears in the browser address bar when you view that user’s timeline on twitter). Either this one or the user_id needs to be provided, not both.

include_rts

Show what you retweeted or not. 0 or 1.

count

How many tweets you want to show. 1 or more.

callback

Required. Leave as is or write your own JavaScript to parse the data coming in from the server.

All the settings are done as GET parameters on the URL of the script. So, broken into separate lines it reads like:
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mannobult&include_rts=1&callback=twitterCallback2&count=4

The CSS

The CSS you want to add is of course entirely up to you. However, knowing what HTML output the JavaScript generates is necessary.
So you may want CSS for the following elements:

The element you placed yourselves (with id=”twitter_update_list”)

List items that appear inside it (containing all info of one tweet)

A span element inside the list items

Anchor elements inside the span for any links in the tweet

The anchor element which is a child of the list item (with the link to the tweet)

Below an example of what the CSS could look like (comments in the code):

<style type="text/css">/* The placeholder in which the tweets are placed */#twitter_update_list{list-style-type:none;margin:0;padding:0;width:300px;color:#000;font-family: Verdana, Geneva,sans-serif;}/* Each tweet is wrapped inside a list item, have them spaced by a margin */#twitter_update_list li{margin:.2em0;}

/* The link of how long ago the tweet was placed. Note the !important rule to override the inline style rule created by blogger.js */#twitter_update_list li > a{display:block;text-decoration:none;font-size:0.8em !important;color:#FFF;padding:0.2em;background: rgba(128,128,128,0.7);}
</style>