About
For many people electronic screens have already supplanted paper as the primary medium for gathering and absorbing information. This trend will only accelerate. That's a challenge for designers, for whom the hard-learned lessons of print are often not easily left behind.
Some of those lessons still matter, some don’t. I’ve been trained in classic graphic design disciplines, but I’ve grown up with screens. I taught myself core web programming skills before I left school, and in the last five years have been investigating rigorously how design really works in digital environments.
As a fully qualified graphic designer I can take a brief and develop it through to execution both in digital and traditional environments.
But I can also work with traditionally-trained designers to help them translate their creativity and insight in ways that will work in digital media. I’ve already been doing this for five years, working freelance while on my degree course at the London College of Communication. I graduated in 2009.
30 July 2010
Some views from Berlin run through my Processing machine
29 July 2010
More and more devices we use are coming with touch screens. This means we now have touch as an option for input. I am finding that my clients particularly want iPad support for their sites.
Tab Qwerty provides a simple method of extending Mootools to work with Mobile Safari's TouchEvent
Once that snippet of code is added we need to add listeners to work out what direction your touch input is going in. To view the demo click here
First of all we need to set up our images that we will be scrolling through. In a folder called images I have 6 images named from 0 .jpg to 6.jpg
var currentPos = page;
var previousPos = 0;
// load in images
var totalImages = 6;
var imageContainer = document.id('imageContainer');
var thumbImgArray = new Array();
for(var i=0; i<totalImages; i++) { thumbImgArray.push('images/'+i+'.jpg'); }
var newImage = new Array();
var thumbImages = new Asset.images(thumbImgArray, {
onComplete: function(){
thumbImgArray.each(function(im, index) {
// inject image
var newEl = new Element('div',{ id:'img'+index, 'class' : 'portfolioImage' }).inject(imageContainer);
var newImg = new Element('img',{ src:im}).inject(newEl);
newEl.setStyle('opacity',0);
newImage.push(newEl);
// if we are on the last elment
if(index == Math.round(thumbImgArray.length-1)){
// fade in our image
newImage[currentPos].setStyle('left',0);
(function() { newImage[currentPos].fade('in')}).delay(500)
}
});
}
});
These images are preloaded in then inserted into an array called "newImage". These images could already be on the page, just as long as you set it up so that they are accessible in the newImage array you will be fine.
We then set up a few variables for managing the touch event
var touchBox = document.id('touchBox'), previousTouchPos = 0, currentTouchPos = 0;On top of the images there is a div tag that acts as our button. If you use the container for the images you will find that sometimes the event gets stuck.
We then have the events.
touchBox.addEvents({
'mousedown' : function(evt, el)
{
previousTouchPos = evt.page.x;
},
'mouseup' : function(evt, el)
{
currentTouchPos = evt.page.x;
if(currentTouchPos> previousTouchPos)
{
currentPos--;
if(currentPos<0) { currentPos = totalImages-1; }
}
if(previousTouchPos > currentTouchPos)
{
currentPos++;
if(currentPos>=totalImages) { currentPos = 0; };
}
var windowSize = document.window.getSize();
if(parseInt(currentPos) > parseInt(previousPos))
{
newImage[previousPos].morph({'left': [ 0, -(windowSize.x)], 'opacity' : 0})
newImage[currentPos].morph({'left': [windowSize.x, 0], 'opacity' : 1})
}
if(parseInt(previousPos) > parseInt(currentPos))
{
newImage[previousPos].morph({'left': [ 0, (windowSize.x)], 'opacity' : 0})
newImage[currentPos].morph({'left': [-(windowSize.x), 0], 'opacity' : 1})
}
if(parseInt(previousPos) == (newImage.length-1) && parseInt(currentPos) == 0)
{
newImage[previousPos].morph({'left': [ 0, -(windowSize.x)], 'opacity' : 0})
newImage[currentPos].morph({'left': [windowSize.x, 0], 'opacity' : 1})
}
if(parseInt(previousPos) == 0 && parseInt(currentPos) == (newImage.length-1))
{
newImage[previousPos].morph({'left': [ 0, (windowSize.x)], 'opacity' : 0})
newImage[currentPos].morph({'left': [-(windowSize.x), 0], 'opacity' : 1})
}
// updates what will be the following previous image
previousPos = currentPos;
}
});
When the user mouses down or touches the area we set the starting position
previousTouchPos = evt.page.x;
and when they release we set the finishing position
currentTouchPos = evt.page.x;
After that we work out if it was going left or right
if(currentTouchPos> previousTouchPos)
{
currentPos--;
if(currentPos<0) { currentPos = totalImages-1; }
}
if(previousTouchPos > currentTouchPos)
{
currentPos++;
if(currentPos>=totalImages) { currentPos = 0; };
}
After that we then tween the current(previous) image off and move the latest one. The multiple if statements are for working out if we are at the end or start of the image loop and what direction we came from.
Thats it in a nut shell. Fairly simple and it will also work with a good old mouse. At the moment its super sensitive and will react if you only move a pixel. So if you wanted to you could add something in that checked that you had moved more than 40 pixels.
I have uploaded a version using the History Manager class I wrote so you can see how it works with that.
29 July 2010
26 June 2010
The Super Graphics site is up.
Exhibition site for LCC GMD 2010.