Advanced Web Design – Evaluation

January 14, 2009 at 12:00 am (Advanced Web Design, Evaluation, Research)

At the start of this project I really didn’t see myself having the enthusiasm to create anything half decent, as I had not ever used Flash before, let alone anything to do with coding and actionscript, I felt immediately overwhelmed with all the talk of variables, integers and strings. If I’m honest, I still don’t really understand the majority of the jargon, although I do now understand the principles and structure of the code. I still feel a dictionary of meanings would be the most effective way of understanding the words, as the subtle differences between meanings can be very off putting.

Although what I have produced is very simple and basic, it meets the brief, pulls information from an RSS feed and changes the graphics based on the information it pulls. There is still loads I love it to do, but for what I have and how long I spent on it I feel more than satisfied, especially as its the first time I’ve used Flash.

The two major regrets I have about the final piece is the lack of movement, the bouncing would have been sweet, and the fact the plus and minus are displayed the ‘wrong’ way round from an aesthetic point of view, although this had worked out ok as it looks like the team selection sheets displayed when games are played on TV, with the ‘attacking’ teams further up the pitch and the losing ‘defenders’ pushed right back against their own goal. So in ways its worked out pretty well.

In conclusion, I feel this project has been a huge learning curve, although there is still so much I could learn about both Flash and actionscript. Im not sure how much further I would push myself as far as codings concered, as I am much more interested in the graphical side of the course, creating stuff like the motion graphics and promotional material using software like after effects, photoshop and even packages like maya. Its been ‘fun’ in ways, although 95% of the time its just plain frustrating.

Here is the final flash file in all its glory…

http://mediaweb.aib.ac.uk/fdashow09/dovey/crests_on_screen.swf

Permalink Leave a Comment

Flash Development

January 13, 2009 at 11:37 pm (Advanced Web Design, Research)

everything-on-screen

This version of the code displays the club creats as well as the dots. The crests were originally supposed to track to the dots, but I found this hard to achieve. Because I had placed the crests on the stage manually the starting position was defined, where as the dots are generted purely from the variables pulled in from the RSS feed. The crests move according to some of the values pulled from the feed, just not all of them. I feel this must be why they don’t display exactly like the dots are arranged. To counteract this I tried creating code to load the crests as movieclips where I originally had the code creating the dots, but this didn’t seem to work. The crests again displayed above the screen due to the negative goal diffenence so I added a value to the end of the co-ordinate code to move each crest down by after calculating its position. Much as I would have loved to continued with this and fully create what I had in mind, it came to a point where I was getting nowhere and running out of patience with actionscript as well as out of time before the hand in. So here is the final image and the relevant code displayed underneath:-

crests-on-screen1

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);

var container:MovieClip = new MovieClip
addChild(container)
container.y = stage.stageHeight / 2 – 50
container.x = stage.stageWidth -500

//standard xml loading
var entries:Array = new Array();
var xml:XML;
//var newMovie:MovieClip = new MovieClip()
//this.addChild(newMovie);

function onLoaded(e:Event):void
{
//load the xml
xml = new XML(e.target.data);
//pull the items from the xml
var il:XMLList = xml.channel.item;
//convert first item text into a string
var str:String = il.description.text()[0];
//split the sting into words b looking for the gaps
var toast:Array = str.split(“,”);

//loop through the first 20 words
for(var i:uint=0; i< toast.length; i++)
{

trace(toast[i])
if(toast[i] == “Liverpool”) {

//make it create some graphics
//100 is the colour, toast[i + 2] set the size, 20 is the x position, toast[i + 3] + 20 is the y position

//container.graphics.beginFill(10);

//container.graphics.drawCircle(0, (toast[i + 2]*7), toast[i + 3]);
liverpool.y = (toast[i + 2]*7 + 150)
//liverpool.scaleX = toast[i + 3]
//liverpool.scaleY = toast[i + 3]
}

if(toast[i] == “Chelsea”) {

//make it create some graphics

//container.graphics.beginFill(10);

//container.graphics.drawCircle(25, (toast[i + 2]*7), toast[i + 3]);
chelsea.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Manchester United”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(50, toast[i + 2]*7, toast[i + 3]);
manutd.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Arsenal”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(75, toast[i + 2]*7, toast[i + 3]);
arsenal.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Aston Villa”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(100, toast[i + 2]*7, toast[i + 3]);
villa.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Hull”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(125, toast[i + 2]*7, toast[i + 3]);
hull.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Everton”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(150, toast[i + 2]*7, toast[i + 3]);
everton.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Portsmouth”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(175, toast[i + 2]*7, toast[i + 3]);
portsmouth.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Bolton”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(200, toast[i + 2]*7, toast[i + 3]);
bolton.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Fulham”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(225, toast[i + 2]*7, toast[i + 3]);
fulham.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Wigan”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(250, toast[i + 2]*7, toast[i + 3]);
wigan.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Middlesborough”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(275, toast[i + 2]*7, toast[i + 3]);
middlesborough.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “West Ham”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(300, toast[i + 2]*7, toast[i + 3]);
westham.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Stoke”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(325, toast[i + 2]*7, toast[i + 3]);
stoke.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Manchester City”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(350, toast[i + 2]*7, toast[i + 3]);
mancity.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Tottenham”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(375, toast[i + 2]*7, toast[i + 3]);
tottenham.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Newcastle”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(400, toast[i + 2]*7, toast[i + 3]);
newcastle.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Sunderland”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(425, toast[i + 2]*7, toast[i + 3]);
sunderland.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “Blackburn”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(450, toast[i + 2]*7, toast[i + 3]);
blackburn.y = (toast[i + 2]*7 + 150)
}

if(toast[i] == “West Bromwich”) {

//make it create some graphics
//container.graphics.beginFill(10);

//container.graphics.drawCircle(475, toast[i + 2]*7, toast[i + 3]);
westbrom.y = (toast[i + 2]*7 + 150)
}
}

}
loader.load(new URLRequest(‘http://doveycodingtest.tumblr.com/rss&#8217;));

Permalink Leave a Comment

Flash Development

January 13, 2009 at 11:18 pm (Advanced Web Design, Research)

black-dots

This was the first stage of my development. The code behind this basically says for each team create a black dot 25 pixels apart from each other. It then states to move the y position to the teams individual goal diffenence amount and the size to the teams amount of points. At first it produced the dots, but as 0 along the axis is alligned at the top of the stage and some of the values were negative, I had to create a container to hold the dots in and move them down to display them in the middle of the stage. This works quite nicely, although more needs to happen. The dots could do with changing colour, depending on thier position in the table or the teams actual playing colours. Another cool addition would be to make the balls bounce, although this would look better if the y axis was flipped so the plus goal diffenence is displayed at the top and the negative at the bottom.

coloured-dots

This one is an extention of the previous code. I have managed to change the colours and have displayed them on a footbal pitch to look like a team selection sheet. Originally I was going to create a football for each club as a representation related to football, although on reflection the clubs crest would be the best representation for each club.

Here is the code to create these dots:-

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);

var container:MovieClip = new MovieClip
addChild(container)
container.y = stage.stageHeight / 2 – 50
container.x = stage.stageWidth -500

//standard xml loading
var entries:Array = new Array();
var xml:XML;
//var newMovie:MovieClip = new MovieClip()
//this.addChild(newMovie);

function onLoaded(e:Event):void
{
//load the xml
xml = new XML(e.target.data);
//pull the items from the xml
var il:XMLList = xml.channel.item;
//convert first item text into a string
var str:String = il.description.text()[0];
//split the sting into words b looking for the gaps
var toast:Array = str.split(“,”);

//loop through the first 20 words
for(var i:uint=0; i< toast.length; i++)
{

trace(toast[i])
if(toast[i] == “Liverpool”) {

//make it create some graphics
//100 is the colour, toast[i + 2] set the size, 20 is the x position, toast[i + 3] + 20 is the y position

container.graphics.beginFill(10);

container.graphics.drawCircle(0, (toast[i + 2]*7), toast[i + 3]);
//liverpool.y = (toast[i + 2]*7)
//liverpool.scaleX = toast[i + 3]
//liverpool.scaleY = toast[i + 3]
}

if(toast[i] == “Chelsea”) {

//make it create some graphics

container.graphics.beginFill(10);

container.graphics.drawCircle(25, (toast[i + 2]*7), toast[i + 3]);
//chelsea.y = (toast[i + 2]*7)
}

if(toast[i] == “Manchester United”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(50, toast[i + 2]*7, toast[i + 3]);
//manutd.y = (toast[i + 2]*7)
}

if(toast[i] == “Arsenal”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(75, toast[i + 2]*7, toast[i + 3]);
//arsenal.y = (toast[i + 2]*7)
}

if(toast[i] == “Aston Villa”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(100, toast[i + 2]*7, toast[i + 3]);
//villa.y = (toast[i + 2]*7)
}

if(toast[i] == “Hull”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(125, toast[i + 2]*7, toast[i + 3]);
//hull.y = (toast[i + 2]*7)
}

if(toast[i] == “Everton”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(150, toast[i + 2]*7, toast[i + 3]);
//everton.y = (toast[i + 2]*7)
}

if(toast[i] == “Portsmouth”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(175, toast[i + 2]*7, toast[i + 3]);
//portsmouth.y = (toast[i + 2]*7)
}

if(toast[i] == “Bolton”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(200, toast[i + 2]*7, toast[i + 3]);
//bolton.y = (toast[i + 2]*7)
}

if(toast[i] == “Fulham”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(225, toast[i + 2]*7, toast[i + 3]);
//fulham.y = (toast[i + 2]*7)
}

if(toast[i] == “Wigan”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(250, toast[i + 2]*7, toast[i + 3]);
//wigan.y = (toast[i + 2]*7)
}

if(toast[i] == “Middlesborough”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(275, toast[i + 2]*7, toast[i + 3]);
//middlesborough.y = (toast[i + 2]*7)
}

if(toast[i] == “West Ham”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(300, toast[i + 2]*7, toast[i + 3]);
//westham.y = (toast[i + 2]*7)
}

if(toast[i] == “Stoke”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(325, toast[i + 2]*7, toast[i + 3]);
//stoke.y = (toast[i + 2]*7)
}

if(toast[i] == “Manchester City”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(350, toast[i + 2]*7, toast[i + 3]);
//mancity.y = (toast[i + 2]*7)
}

if(toast[i] == “Tottenham”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(375, toast[i + 2]*7, toast[i + 3]);
//tottenham.y = (toast[i + 2]*7)
}

if(toast[i] == “Newcastle”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(400, toast[i + 2]*7, toast[i + 3]);
//newcastle.y = (toast[i + 2]*7)
}

if(toast[i] == “Sunderland”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(425, toast[i + 2]*7, toast[i + 3]);
//sunderland.y = (toast[i + 2]*7)
}

if(toast[i] == “Blackburn”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(450, toast[i + 2]*7, toast[i + 3]);
//blackburn.y = (toast[i + 2]*7)
}

if(toast[i] == “West Bromwich”) {

//make it create some graphics
container.graphics.beginFill(10);

container.graphics.drawCircle(475, toast[i + 2]*7, toast[i + 3]);
//westbrom.y = (toast[i + 2]*7)
}

}

}
loader.load(new URLRequest(‘http://doveycodingtest.tumblr.com/rss&#8217;));

Permalink Leave a Comment

Generative Imagery

January 13, 2009 at 10:49 pm (Advanced Web Design, Research)

From examples I’ve seen on the web I feel a lot of what gets produced is above my understanding of actionscript 3, although I’m looking forward to seeing what I can produce. I’ve had a few ideas over the RSS feed I want to use to pull information, the best two being the US presedential election results and the English Premier League table. As the Premier League table has more variables and changes over a longer period of time I feel this would be the best one to use. As I can’t find a decent enough RSS feed for the table, I created my own in a tumblr blog, which can be found here:-

http://www.tumblr.com/dashboard

Permalink Leave a Comment

Generative Imagery

January 13, 2009 at 10:37 pm (Advanced Web Design, Research)

This reminds me of a flock of birds or a shoal of fish, with an organic, natural feel to the movement. Again, it is very hypnotic, the movement creating a calming, smooth feeling that relaxes the viewer. I love the way the text is generated from the swarm, this could definitely be generated from an RSS feed, with certain words or phrases picked up from the feed and inserted into the swarm, although this would again be above my level of knowledge. These are only a few of the many examples available on the web.

Permalink Leave a Comment

Generative Imagery

January 13, 2009 at 10:07 pm (Advanced Web Design, Research)

I really like the symetry involved in this example, the spirals, the movement, the hypnotic effect. Extremely interesting. Much like a kaleiderscope it could keep you engrossed for hours. I think producing something like this at my level of understanding of Flash would be extremely difficult, but I still like the concept. Whether or not the graphics relate to a working RSS feed is debatable, but if it does than fair play, well in.

Permalink Leave a Comment