Blog


4
Jul 12

“Scrolling like iOS”

(This may sound like a commercial, but I guess GreenSock deserves it)

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).

(now try and nail it myself on a rainy weekend sometime soon)


25
Jun 12

iOS application descriptor file notes

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)

1
2
3
4
5
6
7
8
9
10
11
<iPhone>
    <InfoAdditions>
    <![CDATA[
       <key>UIDeviceFamily</key>
       <array>
         <string>1</string>
       </array>
       <key>UIPrerenderedIcon</key><true/>
   ]]>
    </InfoAdditions>
</iPhone>
Low res assets (480×320) fullscreen on high res (960×640) iPhone screen
Add following snippet to the iPhone element shown above.

1
<requestedDisplayResolution>standard</requestedDisplayResolution>

Looks crap while testing on the desktop; The graphics only cover the top-left quarter of the full resolution, but on the device it will be OK.


21
Mar 12

Tweets in your HTML page

[More or less for the class I teach now]

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:

  1. Add one specific HTML element as a placeholder for the tweets
  2. Embed two JavaScript files into your page
  3. 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:

1
2
3
<!-- placeholder for the tweets -->
<ul id="twitter_update_list">
</ul>

The JavaScript files

The two files can be linked to your page from the twitter server, so no need to host them yourselves. The embedding can be done by copy pasting the following code right below the HTML seen above.

1
2
3
4
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=mannobult&amp;include_rts=1&amp;callback=twitterCallback2&amp;count=4">
</script>

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:

1
2
3
4
    <li>
        <span>@<a href="http://twitter.com/druiven">druiven</a> tja, al met al niet goedkoop met overnachting enzo :( early bird en docentenkeurtings helpen gelukkig wel...</span>
        <a style="font-size:85%" href="http://twitter.com/mannobult/statuses/178219079629418496">11 days ago</a>
    </li>

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.

For a more detailed description, see: the twitter docs

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):

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
<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:.2em 0;
        }
       
        /* have alternating colors for subsequent tweets */
        #twitter_update_list li:nth-child(even)
        {
            background-color: #0CF;
        }
        #twitter_update_list li:nth-child(odd)
        {
            background-color: #09F;
        }
       
        /* the tweet text itself */
        #twitter_update_list li span
        {
            display:inline-block;
            color: #000;
            font-size: .8em;
            padding: 0.5em;
        }

        /* Links inside the tweet */
        #twitter_update_list li span a
        {
            color: #000;
        }

        /* 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>

All the above results in the following:
example of embedded tweets