Posts filed under ‘Advanced Web Design’

Advanced web revisited – in depth research

I had been looking the possibility of creating a visual representation of of rss feed using lines, the line would hopfully be controlled by keywords it the feeds or length of words.

I was hoping it would display similar to this without using images:

I came up with this sudo code:

Using rss from any news site,

Calculate the length of the word by the number of vowels in a word and connected by the words of a sentence being connected.  Should display something like this.


My efforts to find any kind of code the did anything like this failed and i choose to do something that a knew i might be able to achieve.  I started to look at images and the abilty to import images from the internet into flash and make somekind of flash movie that could be interesting to look at.

I was looking around these websites to see how other people have done this.

and the one i like the best:

The last one uses software to work alongside Adobe flash to pull in the images that is used, i tried to use it but it was complicated and i discide to pull use a xml list flash slider.  It works by using images linked it an xml list, it ramdomly selects one or and uses it in flash. like the examples here

I wanted to be able to randomly display images from the internet and make it look like a movie using only images.


February 27, 2009 at 2:46 pm Leave a comment

My rss circle feed code

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);
//the loop at the bottom then searches the text for occurances of the words
//then counts them
var thecounter:int = 0;
var andcounter:int = 0;
var acounter:int = 0;
//standard xml loading
var entries:Array = new Array();
var xml:XML;
var newMovie:MovieClip = new MovieClip()
function onLoaded(e:Event):void
//trace (;
//load the xml
xml = new XML(;
//pull the items from the xml
var il:XMLList =;
//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< 30; i++)
//trace (toast[i]);
//check for word gad and count it repeat for other words
if(toast[i] == ‘the’) {
//make it create some graphics
graphics.drawCircle(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20 * thecounter);
if(toast[i] == ‘and’) {
graphics.drawCircle(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20 * andcounter);
if(toast[i] == ‘a’) {
graphics.drawCircle(Math.random()*stage.stageWidth, Math.random()*stage.stageHeight, 20 * acounter);
trace (thecounter);
trace (andcounter);
trace (acounter);
loader.load(new URLRequest(“;));

January 14, 2009 at 6:35 pm Leave a comment

My random image as3 code

var listLoader:URLLoader = new URLLoader( new URLRequest(“;) ); // download from
var picLoader:Loader = new Loader();

listLoader.addEventListener(Event.COMPLETE, gotList);

function gotList(evt:Event):void {
var xmlData:XML = XML(; // type of list to look for
var numImages:Number = xmlData.pix.length();

var stImage:String = xmlData.pix[Math.floor(numImages*Math.random())].toString(); // randomise the images

picLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, gotPic);
picLoader.load( new URLRequest(stImage) );

listLoader.removeEventListener(Event.COMPLETE, gotList);

function gotPic(evt:Event):void {
var thisBmp:Bitmap = Bitmap(;
thisBmp.x = 0; // change the x place of the image
thisBmp.y = 0; // change the y place of the image
var thisWidth:Number = thisBmp.width;
var thisHeight:Number = thisBmp.height;

var pHeight:Number = 400; // change the hight of the images
var pWidth:Number = 600; // change the width of the images

thisBmp.scaleX = pWidth/thisWidth; // appily pWidth to scale
thisBmp.scaleY = pHeight/thisHeight; //appily pHeight to scale

picLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, gotPic);
thisBmp.addEventListener(Event.ENTER_FRAME, anything);
function anything(E:Event):void

January 14, 2009 at 6:32 pm Leave a comment

More advanced web design posting and evaluation

My original idea was to created a series of lines using RSS from any news site I wish to calculate the length of the word by the number of words by the number of vowels in a word. A line would then connect the dots by how they line up in the RSS. I will be using AS3 in flash. The outcome could look like this…

what i want

However this was replaced by wanting to use images in the design more so i had a rethink about the idea.

I decided i was going to have a random image slide-show bringing in images from Flickr or Facebook or something like that.  Like this one  This was one of the hardest research projects I had to do,  about 95 percent was look for help and example of code people had already done which i could do.  The code for most of these was incredibly complicated and was looking form the most simplest code i code find that could do bring in an random image from flickr like a wanted because we have to understand the code and hows its working.

After a while i found that i couldn’t do this without allot of code that i don’t understand so i simplified it and by doing what allot of people do, that is using an xml list to located images on the server with the xml file and have the flash code find the images at random this was a big cheat that i had no over way around.

At first i was able to bring up one random image from the web but i tried in vain to get the code to then import another image and then another and so on like a slide-show, i could only bring in the one image.  So i skipped that bit and concentrated on a fade effects to move on to the other image, this was a quick problem to overcome.  Adam give me the tip of randomising the alpha of the image so with his help i did and it look really good, so i pressed on with the problem for a bit longer until i realised the alpha which made the background visible gave the opportunity for another image to be seen.  I copied the code into a new layer and making sure there were no conflicts, tested to find that it was really close to what i wanted.  I pasted the code into a new layer again and i was happy with what i had,  but i started to think what i had at the moment did pull in any rss feeds like the brief wanted from us.

I discovered that something else going on would give the random image thing another dimension that would give the eye something to focus on.

I found some code i did in class with Liam that drew circles whenever a keyword was detected in the rss feed.  I looked for the 3 most common words i could see were appearing in the rss feeds,  they are “the”, “and” and “a” and the more of the keyword there are in the feed the bigger the size of the circle.  The idea was the more keyword counts i get the better the look. so doing that i found that i don’t have enough circles for it to be appealing.  So i put the rss circle as code into another layer and made sure nothing conflicted and did it multiple times.  The idea was to get it to look something like this

This was end result in screen shot form.


I am quite happy with what i accomplished but there given the chance to edit it with another pair of skilled hands i would like the circles to move with a blur trail to correspond it location to the number of times the keyword appears.  I would also like it to be able to import the whole rss feed not just the header.

January 13, 2009 at 5:58 pm Leave a comment

Hey hey, happy new year, sorry to be gone for so long ;-P

To make it up to you here is some stuff on generative flash that i found interesting, its all on this website that I’m sure your enjoy ;-p.

There is allot of interesting generative content that give you allot of thought towards doing it yourself. I know i have. although it doesn’t work when i publish it. 😦

I tried to make it like what this guy did here – but with a difference i had random images flashing and making it more interesting to watch. like this i originally tried to do what his guy did.
However this was very difficult and i had many coding errors doing this. so i cheated :-P.

January 12, 2009 at 9:16 pm Leave a comment

Friday at the AIB, Advanced Web Design

Content is now massively distributed, individuals and companies now disperse their video, graphics, text across the likes of ‘youtube’, ‘flickr’ and ‘facebook’. How do you organise and structure such content?

Using the relevant, api (explain) pull data such as music tastes, video lists and friend’s lists from sources such as ‘youtube’, ‘flickr’ and ‘facebook’ and create a single page to display them. Your page should be an aesthetic and structured interpretation of the data retrieved that gives the user a visual understanding of the information and the relationships between its component parts.

Using RSS from any news site I wish to calculate the length of the word by the number of words by the number of vowels ina word. A line would then connect the dots by how they line up in the RSS. I will be using AS3 in flash. The outcome could look like this…

what i want

what i want

October 24, 2008 at 3:20 pm Leave a comment

September 2019
« Jul    


Recent Posts