I'm in my thirties now and I've been playing computer games from the age of about four when my dad first brought home the venerable Vic 20 - partly because he was doing a computer science degree at University but mostly because he wanted to tinker.
Through my life I've borne witness to the rise of computer gaming as a media format to rival and now surpass film and I've seen countless witch hunts focus on computer games as being the root of many of society's teenage evils - everything from being the cause of the obesity epidemic to turning children into cold blooded murderers and violent criminals.
I'd like to think that I'm pretty normal - whilst I have my own individual quirks as everyone does, psychological assessments that I've taken for a couple of employers have branded me pretty average on the whole "serial killer" metric. And even though I'm now suffering from the onset of a bit of "middle-agd-spread", as a teenager and child I was pretty skinny.
In thirty years of gaming I'd say I'm "above average" in terms of the amount of time I spent gaming. I wouldn't have hit "compulsive" but as a kid I'd spend a good hour or two a day playing on the computer. Conversely though I'd spend an hour or two playing outside per day though the key factor was that I watched virtually no TV.
You see my parents had a rule in our house - TV or Computer but not both. When my mum thought we had been spending a bit too much time in front of either she'd pull the plug out of the wall and summarily kick us out the door with the instructions that "it was a nice day - go enjoy it" - this held true even if it was raining or the middle of winter!
So, in what seems like a biennial event another review of gaming has been started - the Byron Review this time is being headed up by the very smart Dr Tanya Byron - an expert in Child Behaviour (and TV personality to add some celebrity to the proceedings). Whilst the review is supposed to cover the full range of technology, Gaming and the Internet are always the first things to crop up as being responsible for the decline of morality amongst our youth.
What won't be taken into account properly though in my opinion is how the role of the parent has changed in relation to these technologies. My parents looking back on it were pretty good (though I know I didn't think it at the time) in policing our internet and gaming activities (our family had access to the internet through a BBS at my dad's Uni).
The modern parent has completely divested themselves of any responsibility for policing their childs' activities. This isn't just limited to gaming and the internet but is a wider social epidemic we are starting to see the symptoms of - everything from anti-social behaviour to academic performance.
I know of adults who have bought games for their children aged under 10 that are clearly marked as being 18 certified. All because of pester power and the guilt that they have over not seeing their child because they have to go off and work all day. What scares me is the "oh well" attitude of these parents - and the fact that because the console is in their kid's bedroom they don't see the actual content themselves. For me games were played in the living room in full view of the rest of the house.
In the face of this blatant irresponsibilty from parents, what can the games industry do? They've created a product they have submitted to the classification board, risking censorship and potentially loss through narrowing their market but then the parents ignore it and go buy the game for their child anyway.
After the fact, parents are the ones calling for tougher regulation and a realignment of the game makers moral compass when it comes to producing the content but it is their failure and own moral ambiguity that has caused the problem in the first place.
For all the public outcries about video game related violence and exposure to sexual content, there is deafening silence regarding the lack of parenting skills to avoid exactly this situation. My parents could do it as could those of my friends - how have we lost that skill in a single generation?
Monday, 15 October 2007
Sunday, 14 October 2007
JQuery Slideshow
It seems JQuery is definitely gaining some traction as a useful library - not least because of the development of the ThickBox Gallery library by Cody Lindley which is seeing huge amounts of use around the web at the moment as a means for displaying galleries for product or photos without being constrained by the page template you are building for and by maintaining the semantic integrity of the HTML you have put into the page. The last cool feature is that you don't have to use the dreaded pop up which brings into play the whole pop-up-blocker issues.
It seems redundant to talk about the ThickBox stuff other than to say it's a great bit of kit and well worth checking out if you need gallery display functionality, I've got my own little bit of JQuery code to document here.
This came about due to a client wanting a gallery then not wanting a gallery because they didn't want to maintain all the thumbnails etc and so it evolved into a "slideshow". They didn't want to use flash due to the cost, but they were already using JQuery for other parts of their site anyway. As such I decided to have a go with building a JQuery slideshow with the animation API.
For this example I'm assuming some degree of javascript familiarity so I can get to the guts of the code.
Obviously you'll need the JQuery library - I'm using the current 1.2.1 version that is compressed so it's a light download.
Next up we need a page with an image in it with an an id called "bigimage".
We also need some javascript to set up an array with the image names in it that we want to load so let's do that:
What this function does is set the opacity of the image to 0 (ie invisible) then we get a reference to it in standard javascript and finally attach an event to it which fires on the onLoad event for the image (more about this in a minute).
The addEvent function is given below and is a worker function to add an event handler for a particular object.
Why do we want to add an event for the onLoad of the image? The answer to this lies in how we want to do the animation. Potentially we could have hundreds of images in an array. This slideshow fades an image in, displays it for several seconds, fades out, loads the next image and starts again.
By trapping the onLoad event of the image we can use this event to start the animation sequence which finished with an instruction to load the next image. Only once the image is fully loaded does the sequence begin again.
So our Document Ready method sets up the onLoad event handler, anim() which is listed below:
This function is called every time a new image has finished loading, bringing the image from 0 opacity to 100% over a 1500 msec interval. Next it holds the opacity at 100% for 5 seconds and finally fades out over 1.5 seconds after which is calls the function animNext().
animNext is a function that deals with determining the next image in the sequence (in my case, wrapping back to the start if we get to the end) and then displaying it purely by changing bigimage's SRC property. This is pretty straightforward JavaScript so I'll leave it for the reader to do.
The key thing here is that by adding an event handler onto a low level object in the document along with a couple of animation commands a reasonable slideshow effect was created which works well for the users and was good for the client as it is maintainable and didn't cost a huge sum as it would have done in flash.
It's the ability of JQuery to expose enough variety of basic features to allow you to do this very quickly and easily. I have no doubt that after 10 years of writing javascript that I'd be able to do this all by hand. The questions are "Do I want to?" and "Is it good value for the client if I do?" - my answer to both of these is "not on your nelly".
It seems redundant to talk about the ThickBox stuff other than to say it's a great bit of kit and well worth checking out if you need gallery display functionality, I've got my own little bit of JQuery code to document here.
This came about due to a client wanting a gallery then not wanting a gallery because they didn't want to maintain all the thumbnails etc and so it evolved into a "slideshow". They didn't want to use flash due to the cost, but they were already using JQuery for other parts of their site anyway. As such I decided to have a go with building a JQuery slideshow with the animation API.
For this example I'm assuming some degree of javascript familiarity so I can get to the guts of the code.
Obviously you'll need the JQuery library - I'm using the current 1.2.1 version that is compressed so it's a light download.
Next up we need a page with an image in it with an an id called "bigimage".
We also need some javascript to set up an array with the image names in it that we want to load so let's do that:
var imagearray = new array("image1.jpg", "image2.jpg", image3.jpg");
$(document).ready(function(){
// now we get the image and attach an onload function to it.
$("#bigimage").css({opacity: 0});
var theimage = document.getElementById("bigimage");
addEvent(theimage, 'load', anim, false);
});What this function does is set the opacity of the image to 0 (ie invisible) then we get a reference to it in standard javascript and finally attach an event to it which fires on the onLoad event for the image (more about this in a minute).
The addEvent function is given below and is a worker function to add an event handler for a particular object.
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
}Why do we want to add an event for the onLoad of the image? The answer to this lies in how we want to do the animation. Potentially we could have hundreds of images in an array. This slideshow fades an image in, displays it for several seconds, fades out, loads the next image and starts again.
By trapping the onLoad event of the image we can use this event to start the animation sequence which finished with an instruction to load the next image. Only once the image is fully loaded does the sequence begin again.
So our Document Ready method sets up the onLoad event handler, anim() which is listed below:
function anim() {
$("#theimage")
.animate({opacity: 1.0}, 1500)
.animate({opacity: 1.0}, 5000)
.animate({opacity: 0}, 1500, "linear", animNext);
}This function is called every time a new image has finished loading, bringing the image from 0 opacity to 100% over a 1500 msec interval. Next it holds the opacity at 100% for 5 seconds and finally fades out over 1.5 seconds after which is calls the function animNext().
animNext is a function that deals with determining the next image in the sequence (in my case, wrapping back to the start if we get to the end) and then displaying it purely by changing bigimage's SRC property. This is pretty straightforward JavaScript so I'll leave it for the reader to do.
The key thing here is that by adding an event handler onto a low level object in the document along with a couple of animation commands a reasonable slideshow effect was created which works well for the users and was good for the client as it is maintainable and didn't cost a huge sum as it would have done in flash.
It's the ability of JQuery to expose enough variety of basic features to allow you to do this very quickly and easily. I have no doubt that after 10 years of writing javascript that I'd be able to do this all by hand. The questions are "Do I want to?" and "Is it good value for the client if I do?" - my answer to both of these is "not on your nelly".
Subscribe to:
Posts (Atom)
