Stephen McIntyre http://stephenmcintyre.net Young Scottish Web Designer Thu, 10 Jun 2010 15:25:37 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Untold Entertainment Made in jQuery Part 3 – The Project Slider http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-project-slider/ http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-project-slider/#comments Thu, 10 Jun 2010 15:00:46 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=577

Being a showcase for the Flash work of Untold Entertainment, the image slider is used as the main focus of the home page and displays his latest projects. Continuing from the first two tutorials, I’ll now show you how to create this slider with jQuery.

We’ll be treating the slider as a separate element from our Twitter bar before, so no need to use old code here.

With the abundance of jQuery image gallery plugins and scripts it’s safe to say that jQuery makes this sort of thing in particular run a lot more smoothly than with plain JavaScript. This section will be the easiest part of the series.

Let’s dive in.

First have a look at the slider demo.

The Markup

We’ll start with the HTML tags.

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

<div id="slider">
  <div id="image">
    <a id="prev" href="#"></a>
    <a id="next" href="#"></a>
  </div>
  <div id="content">
    <h3>
      <a href=""></a>
    </h3>
    <p>
 
    </p>
  </div>
</div>

#slider: The container element that wraps everything.

#image: This contains the large image and navigation buttons (#prev and #next). The image is actually a background, but more on that later.

#content: Holds elements for the project title (<h3>) and excerpt (<p>). The <a> inside the title creates a link to the page that the project is on.

Setting Up jQuery and the Projects Array

If you’ve followed the previous tutorials, including jQuery is still as straight-forward as it was before. Again, we’ll be drawing it in from the Google Code repository.

I’ve also added an extra empty tag that we can add our own code into.

1
2
3
4

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
 
</script>

JavaScript should go above the main HTML content (at the start of the <body> if your document has it).

Inside the empty script tag, set up our “projects” array like so.

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

  var projects = [{
    image: "http://www.untoldentertainment.com/blog/img/projects/bestEd/hedgeYourBets/thumb.jpg",
    title: "Best Ed – Hedge Your Bets!",
    excerpt: "",
    link: "http://www.untoldentertainment.com/blog/2009/09/17/best-ed-hedge-your-bets/"
  },
  {
    image: "http://www.untoldentertainment.com/blog/img/projects/bestEd/crossingDog/thumb.jpg",
    title: "Best Ed – Crossing Dog",
    excerpt: "",
    link: "http://www.untoldentertainment.com/blog/2009/09/17/best-ed-crossing-dog/"
  },
  {
    image: "http://www.untoldentertainment.com/blog/img/projects/bloat/bloat.jpg",
    title: "Bloat.",
    excerpt: "Our company president created Bloat. in roughly twenty-two hours at TOJam 4, a weekend-long game development expo. Bloat. is a true [...]",
    link: "http://www.untoldentertainment.com/blog/2009/05/05/bloat/"
  },
  {
    image: "http://www.untoldentertainment.com/blog/img/projects/AWTY/eyeInTheSky/EyeInTheSky.jpg",
    title: "Eye in the Sky",
    excerpt: "We created this spot-the-differences game for Sinking Ship Entertainment’s Are We There Yet? World Adventure kids’ travel teevee [...]",
    link: "http://www.untoldentertainment.com/blog/2008/11/28/eye-in-the-sky/"
  },
  {
    image: "http://www.untoldentertainment.com/blog/img/projects/AWTY/trainTrack/trainTrack.jpg",
    title: "Train Track!",
    excerpt: "We were approached by Sinking Ship Entertainment to create an eye-spy game for their kids’ travel teevee show Are We There Yet? World [...]",
    link: "http://www.untoldentertainment.com/blog/2008/11/28/train-track/"
  }];
 
  var project_id = 0;

The script uses JSON notation to create an array of objects, each with the same set of attributes: “image”, “title”, “excerpt” and “link”.

We would print these onto the page using PHP, looping through database rows in a WordPress setup. This won’t be covered as it’s irrelevant how the information gets to the page. This set of example project data will work on its own for now.

The project_id variable holds the array key for our current project data object. This means we can change this number (with the navigation buttons) and call a whole new set of data when we want it to load.

Attaching Clicks to the Navigation Buttons

To allow ourselves to reference our HTML elements, we have to wait for them to load before we call our JavaScript to interact with them. For this we can either place the JavaScript after our HTML, or use jQuery’s nice “document ready” check to do this for us, and still keep our JavaScript at the top.

Here I’ll use the jQuery method. Generally it lets us to load all of our JavaScript first, allowing a smoother page load and cuts out some jerky effects.

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

  $(function()
  {
    $('#prev').click(function()
    {
      project_id--;
      if(project_id < 0)
      {
        project_id = projects.length - 1;
      }
      load_project();
      return false;
    });
 
    $('#next').click(function()
    {
      project_id++;
      if(project_id > projects.length - 1)
      {
        project_id = 0;
      }
      load_project();
      return false;
    });
 
    load_project();
  });

In each case, clicking one of the buttons adds or removes one from project_id. If it is less than zero or greater than our maximum index in projects (five) then it is reset to the other side of the scale.

For example, pressing the previous button when you are looking at the first project (ID of zero), the slider skips to the fifth project in the list. Clicking next from here takes you back to the first element, and so on.

load_project()

This is what is called when the page is loaded and when a navigation button is clicked. It takes the project_id and populates the slider with all information attached to that array key inside projects.

I’ll go through this one a bit at a time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

  function load_project()
  {
    var project_data = projects[project_id];
 
    $('#image').css('backgroundImage', '');
 
    $('#content h3 a')
      .attr('href', project_data.link)
      .text(project_data.title);
 
    $('#content p').text(project_data.excerpt);
 
    if(project_data.excerpt != "")
    {
      $('#content p').append(' <a href="' + project_data.link + '">keep reading</a>');
    }
 
    $('<img src="' + project_data.image + '" />')
      .load(function(responseText, textStatus, XMLHttpRequest)
      {
        $('#image').css('backgroundImage', 'url("' + project_data.image + '")');
      });
  }

Line 5: Removes any overridden background image styles on “#image” to display the “loading” spinner.

Lines 7-9: Adds an href to the title allowing it to link to an external page, and fills in the title text. These are both taken from the current item in the list of projects (referenced here as project_data).

Lines 11-16: The first line fills in the <p> tag with the excerpt text. If the excerpt is not an empty string, an extra “keep reading” link is also added to the end of the text linking to the project page. This is the same link used for the title.

Lines 18 and 19: jQuery creates a DOM element of an image, with its source linking to the current project’s image URL. We can then use this to track how long it takes to load, as done here with the built-in .load() method.

When the element has loaded (read: the image has been fully downloaded into your browser), it issues a callback to JavaScript. Anything we put inside of this callback will only be run once the requested image is available to be displayed. The main reason here being to switch out the “loading” spinner.

Line 21: Here we edit the background of the “#image” container again, this time changing it to the image for the current project and overriding the spinner.

Adding Style

If you’re familiar with basic CSS, these will be pretty straight-forward.

However, pay particular attention to the :hover pseudo on the navigation buttons. Since we want the buttons to animate when we hover over them and not on its own or on a timer, it’s useful to do this with CSS here instead of JavaScript.

Again, this part goes right at the top before everything else (in the <head> section if your document has one).

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

<style type="text/css">
  *{
    margin:0;
    padding:0;
  }
  #slider
  {
    width:466px;
    margin:auto;
    margin-top:100px;
    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  }
  #image
  {
    background:#fff url('loader.gif') 0 0 no-repeat;
    height:340px;
  }
  #content
  {
    background:#eee;
    height:100px;
  }
  #image a
  {
    margin-top:280px;
    width:50px;
    height:50px;
    text-align:center;
    background:none url('prev.png') 0 0 no-repeat;
    text-decoration:none;
    color:#222;
  }
  a#prev
  {
    background-image:url('prev.gif');
    float:left;
  }
  a#prev:hover
  {
    background-image:url('prev-hover.gif');
  }
  a#next
  {
    background-image:url('next.gif');
    float:right;
  }
  a#next:hover
  {
    background-image:url('next-hover.gif');
  }
</style>

And that’s it. Here is what your final slider will look like.

Now comes the fun part. Next week I’ll be showing you how to make that roll-out tongue on the menu bar, all without a bit of Flash.

Connect with my blog’s news stream to get notified as soon as it’s up.

]]> http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-project-slider/feed/ 0 Untold Entertainment Made in jQuery Part 2 – Styling the Twitter Bar http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-styling-the-twitter-bar/ http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-styling-the-twitter-bar/#comments Fri, 04 Jun 2010 00:50:17 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=556 Carrying on from the first part of creating a Flash-less home page on Untold Entertainment, we add to the tutorial on animating Twitter text with some more usability and style.

We start off by generating links (to URLs and Twitter pages) inside the text, make a couple of buttons to skip the tweets backwards and forwards, then animate the Twitter bird and speech bubble as a background.

Try out the new styled Twitter bar demo.

The New HTML Structure

To add in our new elements, we’ll have to mess about with the layout of our HTML tags.

The container still holds the text as before, but we add in the bird image and navigation buttons inside a div. The holder is there to keep the buttons beside the text, and the outer wrapper collects all of it including the bird image.

1
2
3
4
5
6
7
8
9
10
11
12

<div id="wrapper">
  <div id="holder">
    <div id="tweet_buttons">
      <a id="prev" href="#">&#9668;</a>
      <a id="next" href="#">&#9658;</a>
    </div>
    <div id="container">
 
    </div>
  </div>
  <img id="bird" src="bird.gif" alt="bird" />
</div>

The HTML entities are the forward and backward pointing arrowheads you see. These can be images, but the entities will do for now to make things simpler.

Adding Links to the Text

To find URLs and Twitter usernames, we have to do a check on each word. Here we’re looking for anything starting with “http://” and “@” respectively.

We change our add_text() method from last time with the following lines of code. This should replace the line beginning with var new_text = ....

The first three sections change text inside add_text(). For the full replacement code, use the new function at the end of the tutorial.

1
2
3
4
5
6
7
8
9
10
11
12

var word = updates[update_key][word_key];
 
if(word.substr(0, 1) == '@')
{
  word = '<a href="http://twitter.com/' + word.substr(1) + '">' + word + '</a>';
}
else if(word.substr(0, 7) == 'http://')
{
  word = '<a href="' + word + '">' + word + '</a>';
}
 
var new_text = $('#container').html() + ' <span class="rot' + rand + '">' + word + '</span>';

This wraps any usernames and URLs inside an anchor <a> tag and turns them into clickable links.

Animating the bird

These few lines go after $('#container').html(new_text);.

1
2
3
4
5
6

$('#bird').attr('src', 'bird_shout.gif');
 
$('#bird').oneTime(chirp_time, 'blabel_' + update_key, function()
{
  $('#bird').attr('src', 'bird.gif');
});

The variable chirp_time should be added to our list of Variables at the top of the JavaScript section. Here I’ve set it to 100 as it works well for the GIF animation. And while you’re there add in a delay that we’ll use later.

1
2
3
4
5

...
var length_min = 4;
var length_max = 6;
var chirp_time = 100;
var delay = 2000;

This is what makes the bird’s mouth move, held open by the time we’ve specified in chirp_time as 100 milliseconds.

Animating the Speech Bubble

Look for the “if” statement of if(word_key < updates..., add this line just inside.

1

$('#bubble').css('background-image', 'url("bubble.gif")');

This sets the background to be the non-animated image of a speech bubble.

In the "else" of this statement, look for the first timer event (the first line inside). In here we add the code to make the background animate as the text transitions into a new tweet. It's similar to the line above, but instead links to an animated image.

1

$('#bubble').css('background-image', 'url("bubble_animated.gif")');

Setting Up the Controls

To add JavaScript "onclick" events to our navigational buttons, we call jQuery on page load. This is to allow the elements to be created before we bind events to them.

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

$(function()
{
  $('#prev').click(function()
  {
    $('#container').stopTime();
 
    $('#container').html('');
 
    word_key = 0;
 
    update_key--;
 
    if(update_key < 0)
    {
      update_key = updates.length - 1;
    }
 
    $('#bubble').css('background-image', 'url("bubble_animated.gif")');
 
    $('#container').oneTime(delay, 'label_' + word_key, add_text);
 
    return false;
  });
 
  $('#next').click(function()
  {
    $('#container').stopTime();
 
    $('#container').html('');
 
    word_key = 0;
 
    update_key++;
 
    if(update_key > updates.length - 1)
    {
      update_key = 0;
    }
 
    $('#bubble').css('background-image', 'url("bubble_animated.gif")');
 
    $('#container').oneTime(delay, 'label_' + word_key, add_text);
 
    return false;
  });
});

The code should look very familiar to what's inside add_text(). Simply put, the #previous code skips to the previous tweet and #next goes to the one after, so this changes the increment or decrement of the update_key variable.

Updating the Stylesheet

The new styles for these elements are also as follows.

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

#bubble
{
  width:700px;
  height:60px;
  display:inline-block;
  background:url('bubble.gif') 50% 50% no-repeat;
}
#buttons
{
  float:right;
  margin-top:40px;
}
  #buttons a
  {
    color:#999;
    text-decoration:none;
  }
#bird
{
  vertical-align:top;
}

And that's it for now.

Next we'll make the image slider.

(Here's the new code for add_text())

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

function add_text()
{
  var rand = Math.ceil(Math.random() * 4);
 
  var word = updates[update_key][word_key];
 
  if(word.substr(0, 1) == '@')
  {
    word = '<a href="http://twitter.com/' + word.substr(1) + '">' + word + '</a>';
  }
  else if(word.substr(0, 7) == 'http://')
  {
    word = '<a href="' + word + '">' + word + '</a>';
  }
 
  var new_text = $('#container').html() + ' <span class="rot' + rand + '">' + word + '</span>';
 
  $('#container').html(new_text);
 
  $('#bird').attr('src', 'bird_shout.gif');
 
  $('#bird').oneTime(chirp_time, 'blabel_' + update_key, function()
  {
    $('#bird').attr('src', 'bird.gif');
  });
 
  word_key++;
 
  if (word_key < updates[update_key].length)
  {
    $('#bubble').css('background-image', 'url("bubble.jpg")');
 
    set_timer();
  }
  else
  {
    $('#container').oneTime(wait, 'reset', function()
    {
      $('#container').html('');
 
      word_key = 0;
 
      update_key++;
 
      if(update_key > updates.length - 1)
      {
        update_key = 0;
      }
 
      $('#bubble').css('background-image', 'url("bubble_animated.gif")');
 
      $('#container').oneTime(delay, 'label_' + word_key, add_text);
    });
  }
}
]]> http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-styling-the-twitter-bar/feed/ 0 Untold Entertainment Made in jQuery Part 1 – Animating Twitter Text http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-animating-twitter-text/ http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-animating-twitter-text/#comments Thu, 27 May 2010 23:14:55 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=531

Ryan Creighton’s Flash development site Untold Entertainment has a quirky home page with plenty of animation and things to click on (complete with roll-out tongue) and of course is built in Flash. Thing is, I’m against any kind of Flash interface. It’s great for games, but otherwise it’s unnecessary (which includes videos).

With the whole Adobe v Apple debate that’s going on right now (yes, I said I wouldn’t mention it but it applies here ‘kay), it’s safe to say you’d be better placing your chips on the JavaScript and HTML5 end of the table.

The discouraging part is that his website could be done without Flash as most of the scrolling and animating could be done with straight JavaScript, and jQuery will help see things along smoothly.

Today I’ll show you how to animate the text at the top, feeding in from his Twitter feed, complete with jerky timings, slanted text and collecting feed data.

Check out the Untold Twitter bar demo.

Including jQuery, Timer plugin, and Google AJAX Feed API

We’ll start off by including our libraries and plugins. Here I use jQuery, the jQuery Timers plugin, and the Google AJAX Feed API – all sourced from their Google Code hosts.

Admittedly we won’t be using much jQuery here as the code changed quite a bit as it got added to, but it might come in handy in later tutorials. If you know how to change the scripts into plain JavaScript, by all means change those parts over.

1
2
3
4
5
6

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://stikked.googlecode.com/svn/trunk/static/js/jquery.timers.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOURAPIKEY"></script>
<script type="text/javascript">
 
</script>

More information on the API key can be found in my earlier post on Google AJAX Feeds.

This code goes inside the <body> element, right at the top so it loads first. There’s an extra element in there – this is where we’ll add our own JavaScript.

Settings and Variables

To allow us to fine tune the feel of the page later, we’ll set up a list of variables. This bit of code is the first to go inside the empty <script> tag above.

1
2
3
4
5
6
7
8
9

/* Variables - tweak as you like */
 
var username = 'UntoldEnt';
var feed_url = 'http://twitter.com/statuses/user_timeline/21834006.rss';
var entry_fetches = 10;
var interval = 50;
var wait = 6000;
var length_min = 4;
var length_max = 6;

These should be reasonable to understand, and what isn’t obvious will be covered later as the script develops.

Collecting Feed Data

In this example we want to collect the data from Twitter, or more specifically @untoldent’s account. More information on the use of the google object can be found on the same link as above (the Google Feed one).

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

/* Google Feed API stuff */
 
var updates = [];
 
function Initialize()
{
  var feed = new google.feeds.Feed(feed_url);
  feed.setNumEntries(entry_fetches);
  feed.load(function(result)
  {
    if(!result.error)
    {
      for(var i in result.feed.entries)
      {
        var entry = result.feed.entries[i].title.substr(username.length + 2);
 
        if(entry.substr(0, 1) != '@' && entry.substr(0, 2) != 'RT')
        {
          updates.push(entry.split(' '));
        }
      }
    }
 
    set_timer();
  });
}
 
google.load("feeds", "1");
google.setOnLoadCallback(Initialize);

We start off by collecting the RSS feed from the feed_url and check there are no errors like I did before.

The script then loops through each feed element once it has been loaded in and removes replies and retweets. What’s left is added to our array of updates, split word by word into another array inside of it.

When this is done, set_timer() is called to start the actual stuff that makes it look like Untold’s Twitter bar.

Creating Animated Text

Last bit of JavaScript – the fancy part.

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

/* Animated Tweet stuff */
 
function clamp(val, min, max)
{
  return Math.max(min, Math.min(max, val));
}
 
var word_key = 0;
var update_key = 0;
 
function set_timer()
{
  var length = clamp(updates[update_key][word_key].length, length_min, length_max);
 
  var timing = length * interval;
 
  $('#container').oneTime(timing, 'label_' + word_key, add_text);
}
 
function add_text()
{
  var rand = Math.ceil(Math.random() * 4);
 
  var new_text = $('#container').html() + ' <span class="rot' + rand + '">' + updates[update_key][word_key] + '</span>';
 
  $('#container').html(new_text);
 
  word_key++;
 
  if (word_key < updates[update_key].length)
  {
    set_timer();
  }
  else
  {
    $('#container').oneTime(wait, 'reset', function()
    {
      $('#container').html('');
 
      word_key = 0;
 
      update_key++;
 
      if (update_key > updates.length - 1)
      {
        update_key = 0;
      }
 
      set_timer();
    });
  }
}

clamp: In other languages, clamp is usually available inside a Math library, but not this one. So I’ve added this to make the code cleaner later.

word_key and update_key: These are indexes for the updates array and the words inside each element. These increment by one as they are used, and then reset to zero when moving to a new element. They’re kept outside the functions so that they can be called from wherever.

set_timer: First calculates a timing based on the length of the word. To avoid certain words appearing too quickly or slowly, the length_min and length_max are used from earlier to add a constrained limit on either side. It is then multiplied by interval – also set earlier – to work out our timer.

The Timers plugin is then used to add a timer to the container element. This will call add_text() after the set time from our previous word length is up.

add_text: Starts by setting a random number. This sets our rotation later, based on four classes in a stylesheet. Each word is contained within a <span> element to treat each rotation separately.

The .html() method inside jQuery allows us to add HTML markup inside of our container. Here we add our new element (the <span> with a new word) onto the existing DOM.

When the word has been added, the index increases by one to access the next word. A timer is then set to add this word to the queue, which then adds it on the same way as before.

If there are no words left (i.e., the tweet has ended), the script stops for a period defined by wait and some variables are reset to prepare for a new word. This includes word_key, update_key (if needed), and resets the HTML inside the container back to being empty.

Again, the timer is reset to prepare for new words to be added in, once the script has come out of its pause.

Rotation Styles

To keep with the quirky feel of Untold’s header, the text in the tweet bar also tilts word-by-word. As we have already set up our span elements with rotation classes, all that’s left is to style them.

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

<style type="text/css">
#container
{
  font-size:1.4em;
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.rot1
{
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  rotation: 1deg;
}
.rot2
{
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  rotation: 2deg;
}
.rot3
{
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  rotation: -1deg;
}
.rot4
{
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  rotation: -2deg;
}
</style>

As you can see, these styles use WebKit and Mozilla transforms so they’re not native to all browsers. The rotation attribute is also only available as part of CSS3, so again not all browsers will be using this.

The latest version of Firefox runs it fine, although I found problems with the latest Chrome and Safari strangley, even though they use WebKit. Basically, if the text doesn’t look slanted your browser doesn’t support rotation :)

And that’s it. I’ll be seeing how far I can go with these scripts into a pure Flash-less home page.

Next I’ll be adding to this Twitter bar a bit more and taking it from there.

I’d like to know what you think of this project. Should JavaScript be used as a preference over Flash for interface design? Are there parts of Ryan’s home page that can’t possibly be made in this way?

Let me know in the comments, or rant at me on Twitter.

]]> http://stephenmcintyre.net/blog/untold-entertainment-in-jquery-animating-twitter-text/feed/ 0 Copying Images with allow_url_fopen Switched Off http://stephenmcintyre.net/blog/copy-images-allow_url_fopen-off/ http://stephenmcintyre.net/blog/copy-images-allow_url_fopen-off/#comments Thu, 20 May 2010 16:06:56 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=506 I’m working on a Facebook app that needs to collect images from an external server. Normally I could use a function like copy to do this, but this requires allow_url_fopen to be on and a lot of providers like mine have this turned off to tighten server security.

Eventually I came across file_get_contents to do the job. Since this also needs allow_url_fopen to be on, my post on fetching page content with cURL came to mind.

This does the same thing without restrictions on privacy and is available on most current setups.

Fetching Raw Data with get_page_content

We start off with our get_page_content method from the last post, which we use to collect page data. We’re looking to collect the raw data of an image, and here I’ve used the Google logo as an example.

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

function get_page_content($url)
{
  $resource = curl_init();
 
  curl_setopt($resource, CURLOPT_URL, $url);
  curl_setopt($resource, CURLOPT_HEADER, false);
  curl_setopt($resource, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($resource, CURLOPT_CONNECTTIMEOUT, 30);
 
  $content = curl_exec($resource);
 
  curl_close($resource);
 
  return $content;
}
 
$content = get_page_content('http://www.google.co.uk/intl/en_com/images/srpr/logo1w.png');
 
$fp = fopen('logo.png', 'w');
fwrite($fp, $content);
fclose($fp);

The use of get_page_content is the same as in the last post.

For the last three lines we use a few functions for creating a new file.

The first line creates a handle to a file (which doesn’t have to exist), which here we’ve called “logo.png”. This is where our image will be copied to. The “w” parameter tells the script we are opening the file for it to be directly written to, and we save the resource into $fp.

The second line writes the content that we collected earlier into our image. The raw data will make it display properly since it’s being saved as an image file.

Calling fclose on the resource closes the handle to it and frees up memory.

Mimicking the PHP Copy

Now the script will work fine if you use it as-is, but for a more robust way of handling file copying we’re going to create a wrapper around it to be called similarly to the copy function.

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

function copy_file($source, $destination)
{
  $resource = curl_init();
 
  curl_setopt($resource, CURLOPT_URL, $source);
  curl_setopt($resource, CURLOPT_HEADER, false);
  curl_setopt($resource, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($resource, CURLOPT_CONNECTTIMEOUT, 30);
 
  $content = curl_exec($resource);
 
  curl_close($resource);
 
  $fp = fopen($destination, 'w');
  fwrite($fp, $content);
  fclose($fp);
}

Here we have a new function with a $source and $destination parameter, identical to copy.

Handling Failed Requests

To add even further similarity to the allow_url_fopen method I’ll add in some boolean return values.

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

function copy_the_file($source, $destination)
{
  $resource = curl_init();
 
  curl_setopt($resource, CURLOPT_URL, $source);
  curl_setopt($resource, CURLOPT_HEADER, false);
  curl_setopt($resource, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($resource, CURLOPT_CONNECTTIMEOUT, 30);
 
  $content = curl_exec($resource);
 
  curl_close($resource);
 
  if($content != '')
  {
    $fp = fopen($destination, 'w');
    $fw = fwrite($fp, $content);
    fclose($fp);
 
    if($fw != false)
    {
      return true;
    }
  }
 
  return false;
}

So now if there is no content in the external file or the new file can’t be written to your server, the function will return false.

You can add to this with some cURL error checking and a handler on fopen, but it depends how robust it would need to be on your own website.

The great thing is, this script doesn’t just work with images. Just change the destination file to anything else with a change of extension and it’ll work exactly the same.

]]> http://stephenmcintyre.net/blog/copy-images-allow_url_fopen-off/feed/ 1 Messing with Background-Attachment http://stephenmcintyre.net/blog/messing-with-background-attachment/ http://stephenmcintyre.net/blog/messing-with-background-attachment/#comments Thu, 13 May 2010 21:17:00 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=489

Earlier this week I came across an interesting Tumblr theme by Jarred Bishop. The site played with the background-attachment CSS property to show a unique background for each Tumblr post on his main page (depending on which post image he used) and stays static as you scroll.

I started to play around with some code to replicate this effect and instead came up with some different examples, while still manipulating background-attachment. Hit the jump for some demos.

Before we start coding, check these out!

Like them?

Moving the scroll bar on each box changes the effect in which the background moves inside it. You either get a simple scroller (nothing special), two garage-door-style shutters, or a really nice smooth-in animation that desaturates our parrot.

It’s all down to changing the background-attachment from “scroll” to “fixed”.

Styling the Containers

Here’s an example. This is from the last box in the set – the one that looks like it changes into black and white as you scroll. First we’ll set up the styles. These do most of the work.

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

<style>
  *
  {
    margin:0;
  }
  .container, .container div
  {
    height:300px;
    width:200px;
  }
  .container
  {
    overflow:auto;
    overflow-x:hidden; 
  }
  .container div
  {
    background-repeat:no-repeat;
    background-image:url('parrot.jpg');
  }
  .container div.grey
  {
    background-image:url('parrot-grey.jpg');
  }
  .container div.fixed
  {
    background-attachment:fixed;
  }
</style>

The first part sets all margins to zero (if you have a <body> tag it’s better to use that instead of the * “all” pseudo). This means we don’t get weird spacing issues with the background being in the top-left corner.

We set each container and the <div>s inside of them to have the same height and width, both matching your images. Means they won’t overlap each other with weird sizes.

The container class code gives the right side a scroll bar and removes it from the bottom (we don’t need the bottom one).

The rest should be okay.

Adding the Containers

There’s a tiny bit of HTML to add in.

1
2
3
4

<div class="container">
  <div class="fixed"></div>
  <div class="grey fixed"></div>
</div>

That’s all it takes, your CSS will do the rest.

We give our outer div the “container” class that we set earlier. The inside elements then can be given a “fixed” class to set its background-attachment.

Make sure to give the second one a “grey” class to change its image if you want to. For this you definitely do, but for the shutter-style examples it depends how you want it to look.

So now if you want to play around with the different effects, all you have to do is add or remove the “fixed” class from the HTML above.

Be sure to check the source of the example page to see how I did it. Just bear in mind that there are some styles in there that are purely to demonstrate them inside the grid.

Things like the “bottom” and “right” classes and the “position” attribute in the container class were only created for the example, but feel free to play with them and see what you get.

Tracing back to the start of this post, I’ll definitely be putting something else up based on Jarred’s theme, this being the first bit of insight into how it all works.

]]> http://stephenmcintyre.net/blog/messing-with-background-attachment/feed/ 0 Load WordPress Gravatars on the Fly http://stephenmcintyre.net/blog/load-gravatars-on-the-fly/ http://stephenmcintyre.net/blog/load-gravatars-on-the-fly/#comments Thu, 06 May 2010 23:22:36 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=475 Globally Recognised Avatar (or Gravatar) is a service from the WordPress team that allows you to improve your web presence across blogs and specialist websites. It’s one of those “why didn’t I think of that?” products that are so simple but yet have so much opportunity to be integrated into virtually everything. You can see examples of this from the comments below and in my sidebar.

The problem with Gravatars that I find a lot of people mentioning is that they don’t get to see their Gravatar before they post a comment – like the comments section on Shamus Young’s Wavatar post.

You may not think that’s too big of a deal, or perhaps from a marketing point of view that’s your way of driving comments (nasty people), but allowing them to play about with their image in the form will improve their relationship with your site and increase traffic anyway. Saves people deleting and re-commenting just because their Gravatar didn’t show up right too.

So this week I’ve put together a little script that generates these little Gravatars as you type. It’s even got little Wavatar faces on them that change when you make a new address, so you’ll never get bored!

Here’s the demo.

So for this, we need some kind of an MD5 encryption algorithm, as the Gravatar API needs this to secure its e-mail addresses.

I’ve used a script from webtoolkit that does the job perfectly.

The script’s over 200 lines long and you can find it here. I’ve included it in the script as an external file for easiness.

Setting Up

1
2
3
4
5

<img id="gravatar" src="" width="80" height="80" alt="Gravatar" />
 
<input id="email" type="text" />
 
<script type="text/javascript" src="webtoolkit-md5.js"></script>

Here we have our image, the input box, and the script tag that includes the MD5 script.

The Gravatar’s src will change when you start typing in the input field. It uses only a few lines of JavaScript.

Working JavaScript’s Magic

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
 
var gravatar = document.getElementById('gravatar');
 
var email = document.getElementById('email');
 
email.onkeyup = function(e){
    var key = MD5(email.value);
    gravatar.src = 'http://www.gravatar.com/avatar/'+key+'?s=80&d=wavatar';
};
 
</script>

Lines 3 and 5 fetch references to our image and input box to control them with the rest of our JavaScript.

Line 7 sets an onkeyup handler on the email field that is fired when a key is released.

Line 8 uses the webtoolkit MD5 algorithm and generates a key. We then pass this key into the Gravatar’s source and it shows our image. If it’s all worked out, this is where you should be seeing your own lovely face :)

The quicker the user can interact with your application the better. This script allows you to generate Gravatar’s on the fly as the user types it, giving them results straight away.

For practice, try adding things like event timers to decrease the number of image changes at a time, or set the event to onblur so that it only ever fires when the focus is taken away from the field (good for comment forms).

And also, with their recent addition of Gravatar profiles that contain even more information, maybe – with a little more JavaScript – the email address will be all you ever need to type.

Happy coding.

]]> http://stephenmcintyre.net/blog/load-gravatars-on-the-fly/feed/ 4 Randomising Database Output http://stephenmcintyre.net/blog/randomising-database-output/ http://stephenmcintyre.net/blog/randomising-database-output/#comments Thu, 29 Apr 2010 21:13:47 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=294 Collecting a random data set from your database can be useful for all kinds of data driven applications including analytics and “grey areas” in video game outcomes (battles, gambling, etc.).

Here I will discuss the use and methods of randomisation in PHP with data from a MySQL database.

Collecting the Data

First we need to grab our database rows.

For this we uses a simple SELECT statement, where in this example is taken from a “users” table with two fields “ID” and “name”.

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

$db = MySQLi(DB_HOST, DB_USER, DB_PASS, DB_NAME);
 
$query = "SELECT `ID`, `name` FROM `users` ORDER BY `ID` ASC";
 
$results = $db->query($query);
 
$rows = array();
 
while($r = $results->fetch_assoc())
{
  $rows[] = $r;
}
 
echo '<ol>';
 
foreach($rows as $row)
{
  echo '<li>'.$row['ID'].' = '.$row['name'].'</li>';
}
 
echo '</ol>';

This will print out all of the data from our database into an ordered list, arranged by ID from 1 upwards.

Randomise with PHP

To then take this data and shuffle its values, we can then take the conveniently named shuffle method in PHP and apply it to our $rows array.

Add this code to the above script at line 13. It takes the data and again prints it out into an ordered list, this time with a randomised data set.

13

shuffle($rows);

Using the MySQL Query

Now, since here we are already using a MySQL query, we can utilise the RAND() method by adding it to our $query string.

This should be used as an alternative to the PHP shuffle method, so as such should not include the above line with shuffle in it (unless you want to randomise it twice – but it won’t make your data any more unique).

Replace your query string with this, on line 3.

3

$query = "SELECT `ID`, `name` FROM `users` ORDER BY RAND()";

Notice it’s only the last part (ORDER BY...) that changes.

This code – or at least the idea – can be applied to, and is useful for, all programming languages. The syntax will vary between them but fundamentally the results will be the same.

Making a Facebook app? Why not award the user with a random item when they log in once a day, or show a rearranged list of their friends if it’s otherwise too large to show on a page.

Own a blog? Apply this to your homepage and show some old posts. It will also get their page rankings higher if they are being re-indexed by search engines. It’s like fresh content!

It will also help your visitors find posts they never knew they were looking for. ‘Cos we’re all just browsing after all ;)

]]> http://stephenmcintyre.net/blog/randomising-database-output/feed/ 0 UserTweets – A Simple PHP Twitter Class http://stephenmcintyre.net/blog/usertweets-ph-twitter-class/ http://stephenmcintyre.net/blog/usertweets-ph-twitter-class/#comments Thu, 22 Apr 2010 21:20:04 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=445 For those that are unfamiliar with the Twitter API or are looking to quickly fetch tweets from a user’s profile, this class will help.

In PHP, all you do is include the class in your document and construct it with a Twitter username (with some options for extra tweaking).

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<?php
class UserTweets
{
  var $username = '';
  var $page_content = '';
  var $encoded_content = array();
  var $results = array();
  var $user_info = array();
  var $result_count = 0;
  var $connected = false;
 
  function __construct($username, $options = array())
  {
    $this->username = $username;
 
    $request_options = array(
      'since_id', 'max_id', 'count', 'page'
    );
 
    $option_set = array();
    $option_string = 'screen_name='.urlencode($username);
 
    if(!empty($options))
    {
      foreach($request_options as $req)
      {
        if(isset($options[$req]))
        {
          $option_set[$req] = $options[$req];
          $option_string .= '&'.$req.'='.urlencode($options[$req]);
        }
      }
    }
 
    $url = 'http://api.twitter.com/1/statuses/user_timeline.json?'.$option_string;
 
    $connection = @curl_init();
 
    if($connection)
    {
      curl_setopt($connection, CURLOPT_URL, $url);
      curl_setopt($connection, CURLOPT_HEADER, false);
      curl_setopt($connection, CURLOPT_RETURNTRANSFER, true);
      curl_setopt($connection, CURLOPT_CONNECTTIMEOUT, 30);
 
      $this->page_content = curl_exec($connection);
 
      curl_close($connection);
 
      $this->connected = true;
    }
    else
    {
      $connection = @file_get_contents($url);
 
      if($connection)
      {
        $this->page_content = $connection;
 
        $this->connected = true;
      }
    }
 
    if($this->connected)
    {
      $this->results = json_decode($this->page_content, true);
      $this->result_count = count($this->results);
      if($this->result_count > 0)
      {
        $this->user_info = $this->results[0]['user'];
        foreach($this->results as &$result)
        {
          unset($result['user']);
        }
      }
    }
  }
}
?>

Usage

To fetch a user’s tweets with default settings (simple method).

1

$tweets = new UserTweets('_bigSteve');

Setting options with names and values as defined in the Twitter API Wiki. This example returns 5 results posted on or before the update with ID of 12402600172.

1
2
3
4
5
6

$options = array(
  'max_id' => 12402600172,
  'count' => 5
);
 
$tweets = new UserTweets('_bigSteve', $options);

Displaying tweets in an ordered list.

1
2
3
4
5
6
7
8
9
10

if($tweets->result_count > 0)
{
  echo '<h1>Tweets</h1>';
  echo '<ol>';
  foreach($tweets->results as $tweet)
  {
    echo '<li>'.$tweet['text'].'</li>';
  }
  echo '</ol>';
}

…And user info. This data is stripped out of the results array and added into its own named user_info to reduce bloat.

1
2
3
4
5
6
7
8
9
10

if($tweets->result_count > 0)
{
  echo '<h1>User Info</h1>';
  echo '<ol>';
  foreach($tweets->user_info as $name => $info)
  {
    echo '<li>'.$name.' => '.$info.'</li>';
  }
  echo '</ol>';
}

This script will work on server setups with either the cURL library or allow_url_fopen turned on, taking preference over the faster and more secure cURL. If none are in use, most of the object properties will be empty (like results and page_content) and it will handle itself properly without printing errors to the page.

Hope this class will make it a bit easier for developers to start using the great Twitter API in their own mashups.

Comments are welcome as always.

Have fun :)

]]> http://stephenmcintyre.net/blog/usertweets-ph-twitter-class/feed/ 2 5 Steps to Spring Cleaning your Files http://stephenmcintyre.net/blog/5-steps-spring-clean-files/ http://stephenmcintyre.net/blog/5-steps-spring-clean-files/#comments Thu, 15 Apr 2010 19:55:11 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=417 Last week I found a post on Crunch Gear, with a video guide on “Spring cleaning your PC“. He came to the realisation that his PC hadn’t been cleaned in a while, and sets about it with a can of compressed air for ten minutes.

Might have been useful taking this approach myself.

As good as it is to clean out all that collective dust (and I highly recommend that you do), that’s not what this article is for.

After the jump, I’ll show you how to clean up the files in your PC, using some very useful programs and tweaks to get rid of the junk that slows it down.

Step 1: Viruses

First off, you should run whatever anti-virus program you use to get rid of viruses, spyware and rootkits.

Most PCs sold nowadays are bundled with one you can use, so chances are you’ll have one of these at hand.

If you don’t have one, there are really good free alternatives available including AVG. FileHippo is great for finding free software like this.

For AVG:

  • Download, install and open
  • Go to “Computer scanner” tab
  • Click “Scan whole computer”

Step 2: Unused Files

Another great tool that I’ve used for years is CCleaner by Piriform.

There are a lot of files that can clog up your system pretty quickly like your Recycle Bin and pretty much everything that your web browsers use. CCleaner takes all of that and removes it.

I have everything ticked to be cleaned up apart from “Wipe Free Space”, which takes a while to run. Something you don’t need every time you use the program.

As for the rest, you should find out what they mean before you tick them to be deleted. The default settings should still free up loads of space if you’re unsure.

  • Download, install and open
  • Go to “Cleaner” tab
  • Tick every box apart from “Wipe Free Space”
  • (Optional) Click “Analyze” button to see how much space you’ll be freeing up
  • Click “Run Cleaner” button

Step 3: Cleaning the Registry

Programs (and Windows itself) aren’t too clever in cleaning up after themselves within the registry. It holds a lot of crap left behind from software uninstalls and file associations.

I’d go into how much I despise it but that’s for another day. For now we’ll just clean up the mess.

  • Open CCleaner (following on from last step)
  • Go to “Registry” tab
  • Click “Scan for Issues” button
  • Click “Fix Selected Issues…” button when it’s made up the list
  • Click “Fix All Selected Issues” button

Any dialogue boxes that come up will just be checking that you know what you’re doing. Of course you do, you’re the soldier with UAC switched off!

Step 4: Checking for Large Files

Another application I like to use for this sort of thing is SequoiaView. The site isn’t too friendly but you’re looking to download “SequoiaView version 1.3 XP” (works on Windows 7 and Vista).

Basically, this collects file size information from all of the files in your hard drive and displays them as squares inside the window – so I would give it a minute to load.

It groups them into folders and sets different colours for types, making it easier to visualise your file system on-screen.

  • Download, install and open
  • Select “C:\” from drop down menu
  • Click “Colorscheme on/off” button
  • Go to “View” > “Options…” > “Selection” and select “File and entire path”
  • Click “OK”

Step 5: Defrag

Something you’ll want to do every once in a while is a disk defragmentation (not as much as the rest of the list, it takes forever).

Windows has a built in program for this, but if you want a nice interface (or an interface at all) and a folder-specific option, Defraggler is the way to go. It’s another Piriform product.

I’ve heard there aren’t much speed differences if you’re defragmenting a full drive, and if this one isn’t going to be used as often then you might as well just use the default Windows application.

Windows Defrag:

  • Go to “Start” > “All Programs” > “Accessories” > “System Tools” > “Disk Defragmenter”
  • Select drive “C:\” and click “Defragment disk”

Defraggler:

  • Download, install and open
  • Go to “Defrag” > “Defrag” from button at bottom of window
  • If asked to empty Recycle Bin before you start, click “OK”

And there you have it, five simple steps to prepare your PC for another year of hard torture.

Enjoy your nice, clean, faster computer!  :)

]]> http://stephenmcintyre.net/blog/5-steps-spring-clean-files/feed/ 2 Handling Game State Management in C++ http://stephenmcintyre.net/blog/c-plus-plus-state-management/ http://stephenmcintyre.net/blog/c-plus-plus-state-management/#comments Mon, 05 Apr 2010 11:54:15 +0000 Stephen McIntyre http://stephenmcintyre.net/?p=405 One thing that is initially overlooked in game design is handling menus and levels within the user interface. However, we know that it’s always going to be, and is, a crucial part to any successful game, as it helps provide the user with an extra level of control and eases general flow. It’s just a case then of finding the code to do it.

This tutorial will cover a simple technique for handling state management with enums or “enumerated types“. If you have used state management or even just enums in C# before, then this will all feel very familiar to you. There are however some very subtle differences between the markup of the two languages.

First off, I’ll assume that you already have a program that runs inside of a window, ready for holding graphics and text. You should also have a main game loop that you use for any updates.

Setting the Enum Type

We start by setting our enum. It’s set like a structure, in the way that we can create an object with this enum as its type. It doesn’t hold any values itself though – the key is that it can only be set to certain values that you give it. I’ll cover this a bit better below.

This should go before your game loop (so that it doesn’t keep trying to set itself and cause errors).

1

enum eGameState {GSM_MENU, GSM_LEVEL, GSM_END};

Looks a lot like a structure, or even an array.

The first part should be okay. It’s just setting our new enum type and giving it the name of “eGameState” so we can use it later.

The stuff inside the braces are the values that you want it to hold. These technically don’t mean anything, as they’re just given IDs from 0 upwards, i.e. GSM_MENU = 0, GSM_LEVEL = 1…

Basically, each item in that list is turned into a constant (which is why I like to use capitals). It is similar to declaring them separately with #define or const.

The constants shouldn’t be defined before they go into the enum, otherwise you’ll get an error. Creating the type will do it for you.

Declaring the Variable

We then create an instance as we would for a class or struct:

1

eGameState gameState = GSM_MENU;

You can set this to be whatever option you like from the list that you put into your game state type, inside the braces. Remember, ONLY the options from the list can be used (the ones in capitals).

The Switch-Case

To check our gameState var, we set up a switch statement. It means we can check one variable against lots of values, which is what we want. Plus it saves us dealing with loads of really annoying “else if” statements.

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

switch (gameState)
{
  case GSM_MENU :
  {
    // Menu state
  }
  break;
  case GSM_LEVEL :
  {
    // Level state
  }
  break;
  case GSM_END :
  {
    // End state
  }
  break;
}

This goes inside our main game loop.

We then write whatever we like into each part and treat it as a new state. For example, if you check for a button press to go from the menu into your level area, you just change the value of gameState.

1
2
3
4

if(buttonPressed)
{
  gameState = GSM_LEVEL;
}

When the game loop updates again, the switch will then find that the gameState has changed and go to the new screen.

If you already have a game set up without state management, you can replace the code inside your main loop with this, and insert your original code into the “Level state” section.

That should cover it. Any questions, leave some comments below or contact me on Twitter @_bigSteve.

Have fun :)

]]> http://stephenmcintyre.net/blog/c-plus-plus-state-management/feed/ 1