Personality In A Site Cont:

As I mentioned in the previous post, I have now added a Portfolio link to my website in order display all of the uni/general work I am producing. Below is a screenshot of this:

It is currently very bare, but this is because I have not yet decided weather or not to add more to it. I like the fact that it is fairly basic as there is very small distraction away from the links on the left which lead to the individual work assignments. I have also placed icon images in the footer of the page which expand on the mouse hovering over them, which doesn't really have much of a purpose, but I felt was a nice touch.

Once the link is clicked it takes you to a separate page where the work is displayed, followed by a small description/explanation, shown below:

The Back link is clearly displayed below the description so it is easy to navigate back to the Portfolio page. I have also added the icon in the footer that is specific to this particular piece of work, making it easier for viewers to see the programme used to produce it.

I have also changed my index page again, only ever so slightly though. I didn't like the link 'ENTER' being dead on centre as it looked out of place, but also as it was text it did not fit the font I had used to create my web address image. To replace this, I used an image with the same font as the web address and changed the logo so that it would switch its black and red colours on the mouse over, allowing the user to clearly see that they can enter the site via the enter image. This is shown below:

OnMouseOver:

OnMouseOut:

Processing Completed:

As shown in the previous post, the finished sketch is very similar and still changes colours between red, green and blue only these colour changes are now dependant on the arch-os feed being taken from the Portland Square Building. By using 'if' statements to check weather the values being taken are greater or less than three different values, the sketch will successfully change depending on the values being received.

To make the sketch a bit more alive I also added classes to send circles/ellipses from top to bottom and left to right that also change colour depending on the RSS values.

Below is a print screen of the sketch in action:

if value is below, or equal to 50:

If value is above, or equal to 100:

If value is above, or equal to 1000:

Another change to this sketch is that I was unable to select just one factor from the xml feed. I had originally planned on only using the temperature values. Now the sketch takes all the different pieces of data from the arch-os and depending on its value will change the colour accordingly.

Personality In A Site:

The personal website I feel should capture/portray the personality it has been designed for. My original site was set to black and red, which is decided to stick with as I liked this look. However one thing I did not like was that the user had to scroll a a lot as the pages content was just run down the page. Another problem was that I had a separate pages for 'about me' and 'NPNG', which were only present as the brief for the first websites assignment was that it had to have four pages and I struggled to think of what to use. The less clicks a site has generally makes it easier to use, so I decided to just give a brief introduction to the site, and change the 'NPNG' page to my portfolio. This also makes the site more specific to me and showcase my university work.

Old Homepage:

New Homepage:

This is the new homepage so far, it isn't exactly how I want it, but definitely a step in the right direction, I do like the fact that my old homepage has a photo of me, as it shows who the site belongs to, the reason I have not yet put one on my new page is that I have not yet found the right one to use, however, I do have a good idea of what I am after. On the left of the screen shows a widget that displays my four latest tweets. This is a nice touch as it also broadens my online presence and will entice people to follow me on Twitter. However it is not exactly original. The idea I have is that I will put a photo of myself in the middle of the page with a blank t-shirt on. I will then position my latest Twitter feed onto the t-shirt. This makes it more creative. The red spiral image that can be seen at the moment is really just a test and temporarily masks the large amount of blank space for the time being.

Another new addition to the page is that I have added icons that link to my other online networks. By clicking on each of the icons the user is taken to my profiles, allowing them to add me as a friend on Facebook, follow me on Twitter etc. This broadens my online presence and helps my brand grow.

Below is what was shown on my NPNG page. This was basically a page dedicated to friends back home that I skate with as it further shows who I am and what I do, but doesn't fit the purpose of my site, but I do want to keep a part of it for my interests. To do this I have decided to keep a separate blog for things other than uni work.

NPNG page, now removed:

CONTACT:

My contact page has also been changed, again my first site followed a brief to be handed in for an assignment, which pointed the contact page to a website: samiam.com. This however is not desired for this site and I want people to be able to contact me by the messages being sent to me. I changed the old page from what is shown below to one that fit the same design as the rest of the site. Again the red spiral image will be changed later to better suit the sites layout, but this shows close to how the page will look.

Old Contact page:

New Contact page:

And finally, my Portfolio has been added to showcase the university work I produce for assignments and such, this will grow with work as my time at university progresses.

The Beginnings Of Something New:

The trouble with the first website I made was that it was difficult to balance what I wanted to design and build, with what I was capable of designing and building. However since the first term idat 101 has been very focused on the improvement of our sites as well as learning more of what we can achieve. Some of which is how we are able to display our latest Twitter feeds on webpages as well as how we are able to host our blogs on our sites ourselves. The advantage of this is that my blog will look exactly like the rest of my site, making it clear that it is my blog, and has the same design as the rest of my site. The issue before was that our blogs were hosted by other sites, forcing people to be navigated away from our sites to a different host. The fact that the blog is now on my site really keeps everything together.

My old Index page was extremely minimal, and by minimal I mean it was a black page with the word 'ENTER' placed in the centre of the page. I always wanted to have a fairly blank Index page, but now I have a logo designed, I also wanted to use this.

Below is the difference between my first Index page, to my new one.

Old:

New:

The new one clearly shows the domain address, my logo, the ENTER link and an image of me.

Processing Ideas:

After several weeks of tutorials on Processing it was now time to use what we had been taught to design our own sketches for an end of term assignment. There are many many different sketches Processing allows users to create, however the amount of sketches I personally was capable of achieving were minimal. The brief included having to have the Arch-os files of one of the university buildings to control the processing animation. I decided that I wanted to choose the temperature of the ground floor, and would design a sketch that fit this changing factor.

I visited processing.org and openprocessing.org I got many ideas for what I wanted to achieve with my design. I wanted a circle in the middle

of the sketch that appeared to go round, and changing colour depending on the temperature. Red for hot, green for an 'in the middle' temperature and blue for cold.

After browsing I found some code that I was able to

modify to change the sketch to fit my design plan. Below are print screens of the different temperatures being displayed. I used 'if' statements to control which colours were displayed.

If cold:

If warm:

If hot:

These are early sketched of the design. With each new ellipse drawn I changed the 'r, g, b' values to random(255) to change the shades of each of them to give the effects shown above. The circles are also constantly being redrawn so it is constantly updated and shows movement.

I still want to add other elements to the sketch, but will wait until I have the Arch-os working to control it, at this stage I have simply given the temperature a standing value to test each of the statements. So far though, a good start.

To make the circle follow the circumference of a bigger circle in the centre of the sketch I used a tutorial which used cos and sin in mathematics. I then placed the centre of the large circle to the middle of the page by positioning it to half the width and height, (height/2), (width/2).

The Paw Print:

After jotting down a few designs on a piece of plain paper I finally decided I was happy with a couple of similar logos. I definitely knew I wanted continue with using red and black as the colour scheme so decided to keep the logo red and black also.

Here are a few of the earlier designs I came up with:

The triangular shaped logo's were simply knocked up in Photoshop just for a rough idea of how they may look in different colours assigned to each of the lines. It also helped me in deciding weather I liked this particular logo idea to be my final choice. I then decided to roughly recreate the logo, but in a a circular shape, to compare and help make up my mind. Shown below:

The reason the logo ended up going in this direction is that I wanted the logo to use the name OLZA, but not by simply spelling it out. I was aiming to use the letters to make up the logo as can be seen in the images above. the white circle around the outside is the 'O', and 'LZA' are in the middle. The reason for taking the designs from paper to Photoshop is that it definitely helped me see how the end result may look, as well as being able to edit an alter part to make it something I was happy with.

After a bit of tinkering and dabbling with this idea, I came up with the final choice which is shown below:

I definitely think this logo will prove to work well with the website through its colours and appearance.

more arduino shiz:

After several weeks of tinkering with the Arduino board, light sensors and trying to get Arduino to communicate with Flash, we were finally able to get all of it working. The light sensor was used to trigger the Arduino programme to trigger Flash into displaying the projection. Once all was set up, we took a video to show this working, shown below:

Clearly this is only a working prototype as the intended environment for this setup is the crossing at traffic lights as I have previously explained in previous posts.

The Arduino board as a sensor shield attached, with a light sensor and LED. Once the Arduino board was connected to a laptop we were able to use Arduino and Flash together to create the projection that was shown in the video. The idea is that the LED represented the light displayed on a zebra crossing, and once that was picked up by the light sensor, the Arduino programme picked up that the LED was on. This was read by flash and on this trigger began a timer. The timer would count the time lapsed during the time the LED was last on. Once the LED was picked up again, flash would then display words that were had the opposite meaning to how Stonehouse was. This reason for this is we were displaying words that were not how Stonehouse was at all but by projecting positive words on the street would slightly improve it for passes by using the crossings at traffic lights. The positive words we decided to display in the projection were words like beautiful, creative, inspiration, happy, colourful etc.

Now that we know the set up and general concept works in the classroom we are now able to set the projection up in our desired location.

Arduino With Flash:

Now we have fairly strong idea of where we want to take the project, we can develop more on the stages we need to complete to get the idea into a working project. As we managed to get the light sensor working with the LED and Arduino board we can now work on how we are going to involve the projector. We felt that the best way to make the projection itself was by using flash. This can be done as the light sensor can only record two pieces of data, which is off, and on. Off and on is represented in data as zero (0) and one (1), zero being off and one being on. Because of this, we can use Action script in flash to determine weather the projection is displayed or not. An alternative to this could be a projection is always displayed, but depending what the value is of the light sensor (0 or 1), will determine which image is shown.

Corporate Identities:

Companies represent their brand through the use of logos to gain visual recognition on their products. My current identity has been 'OLZA' in red and black with the letters O, L, Z and A arranged in the style of the sign at Love park in Philadelphia, the reason for this was explained in previous posts. However, I am now looking for a different logo people can identify with me, without using the style of the Love park sign. I want this logo to be completely original.

Here is the image I have currently been using is shown below:

This was satisfactory for the website at the time but now that I have redesigned my website I feel it no longer achieves the look I am after.

To help gain inspiration I decided to look closer at existing logo's companies use so that I could produce something that fit the bill. As my website will contain a lot of skateboarding content, I decided the best place to begin was simply by checking out their logos. Below shows a mix of logos that are all very different that Im hoping will help me when creati

ng my own.

Time I think to get the note pad out and begin juggling some ideas and designs.

Keepin' it Fresh!

It has come to my attention that I really don't have long before I have to have a pretty decent looking website for this years module. The only problem is I'm struggling on what I want the design to look like. Another website I happened to stumble across was a young surfers, Julian Wilson, who has just made it on to the DC pro team. Below is a print screen that shows what the home page looks like:

The navigation menu is easy to use and simple. The main reason for me being attracted to this site is the way in which it looks. The background image looks good and immediately draws attention. Another feature about the site that I particularly like it that it has a page just for videos. This is definitely something I would like to have on my own site. Although I already do, it's not exactly a page that looks all that good. I will definitely be looking into all the points within the next 2 weeks to improve the site I already have.

And heres the trailer for his new movie coming out in september, 'Scratching the Surface'.

Idea Development:

...still bouncing ideas around in our group, we decided that we don't necessarily need to focus on getting the drivers attention, but could use traffic lights in another way to trigger our sensor. When traffic lights are red, the 'walk' sign is displayed. We could us the light from this signal to trigger our sensor, and in turn project an image onto the zebra crossing. I like this idea as it has more potential with what we can achieve.

The beginnings of an idea...

As I have mentioned this module now requires us to make a project that uses an Arduino board as well as low tech actuators and senors to interact with people in the area. As we had already been focusing on light as a factor last term, this definitely seemed to be the right route to take the project.

We were aiming to use traffic lights as the trigger for the sensor, but as we heard many of the students in other groups were also planning to use them, so we came up with car headlights. If we could pinpoint a spot where car headlights hit every time they passed on their journey along a road, we could place our sensor there.

We then started bouncing more ideas around and came up with how we were going to interact with the drivers of the cars. If we used the sensor to turn on a projector once it was exposed to light, we could project an image on another wall to attract drivers attention as they pass by. The nice thing about this is that it would be triggered by the drivers lights, so it would only be on as long as they passed by. The fact that theres nothing, then suddenly an image appears, and once they pass by its gone again should be enough to get their attention.

As good as this sounded to us, we then realised as effective as it may be, may not be so wise to attempt to attract the drivers attention from the road on purpose...so we decided maybe a good idea to find a spot where the headlights hit while the car was stationary, this way the car driver or any of the surrounding would not be in danger. We also decided we were more likely to catch their attention as they wouldn't be so focused on the road, giving our projection more of a chance to be seen.

Another good example:

Now that I have been researching all the different uses the Arduino board and sensors has, my Youtube account has been flooded with suggested videos that are of a related subject. Below is video that was suggested and shows exactly the kind of hacking this module has been introducing us to.

With all the different possible hacks there is very little that cant be achieved. I also found this particular video useful as we as a group have decided to continue focusing on light as a varying factor. This video uses a light sensor to trigger a switch, which is exactly the kind of hack we want to use. The ideas we came up with will be posted soon.

Arduino Boards With Sensors:

Not only can Arduino deal with simple programming to control its outputs, but it can also have sensors attached and allow inputs to control how the board behaves. (briefly talked about in precious post)

For example, If a infra red sensor was attached to the board, and the board was programmed so that once the infra red detects an object in its path, the board could control something it is connected to to change.

A good demonstration of this example is an Arduino board hooked up to a remote control car, only the cars steering is controlled by the board and the board changes direction depending on the infra red sensor. So, if the infra red detects an object in the cars way, the arduino board changes direction, but if all is clear the car will continue to travel until the sensor detects otherwise.

Arduino Boards:

This module has now taken a leap into a new way of interacting with our audience in the Stonehouse area. By using low tech sensors and actuators connected to an Arduino board, there are many different ways we can develop a project that can interact with people by changes in the environment.

An Arduino board is a printed circuit board with a processor that works along side arduino programming to manipulate its analogue/digital outputs/inputs.

Arduino boards require simple scripting from Arduino software to be programmed to control the behaviour of its pins. The Arduino programming can also be used along side Processing to produce interesting projects.

To look up this example, check out physicalpixel.com

Below is a video that shows a few examples of some low tech sensors and actuators. A sensor picks up a change in its surroundings therefore reacts as a response. By combining all of these the potential for interaction with passers by is enormous. I have now used the Arduino board as well as currently learning processing in IDAT 102, with this and the research I have now done there are many ideas me and my group have to play with.

Low tech sensors and actuators:

Lowtech Sensors and Actuators from Adam Somlai-Fischer on Vimeo.

More Augmented Reality:

Other examples for this technology as I previously mentioned is in entertainment.

Below are a couple of videos that give good examples of where and how it can be used to enhance the enjoyment and visual quality of a game:

I really like the example above as not only does it work along side the game, but it also improves the game play. By showing the angles the shots must take, this will help teach the user and improve their skill once the augmented reality is taken away.

And this final example is my favourite. This is because it makes the game play much more real. By taking a real environment and placing graphic images into the scene with augmented reality also make the game play much more physical. The user must move which makes the game much more interactive. It also provides much more potential to turn the game into a game that can b more enjoyed as well improve the fitness of users.

Augmented Reality:

Augmented Reality (AR) is a real time mixed reality technology that uses computer generated imagery in live video streams to enhance the real world environment. This media has many applications that can effect the users in many different ways.

A commonly seen example of augmented reality is the lines that are visible on live television during sports to display where certain marks are on the pitch, in American football for example, or the lanes of a swimming pool.

Examples of these are shown below:

Other uses can be more interactive, for example education, gaming and entertainment can now be greatly improved through the use of augmented reality.

below is a video I found on Youtube that demonstrates how children can use this technology to further educate themselves in many subjects.

BMW Example:

Below is a video that shows another use of this technology. It no longer requires professionals to be able to carry out complex tasks in any field as each job can be programmed once, which will allow anyone to follow the instructions being shown.

The Finished Animation:

Finishing Touches:

I have now completed the modelling side of the skateboard and is now time to animate. As mentioned in my previous post I want the animation to begin with all the individual components separated to demonstrate that the model is in fact made up of all the necessary pieces and not just one object that is made to appear as if it is.

Above shows the beginning of the animation, showing all the pieces away from each other. I have also added a floor with a concrete material and obstacle with plywood images to give the animation more of a realistic feel, I also used the same graphic as NPNG Skateboards. The reason for this is that I skate in the team myself and links the animation to me.

I have also changed the animation slightly. I figured that with this powerful program I am able to achieve pretty much anything I wish to create, so why not make it better . Instead of simply rolling along and mimicing the motion of a 360 flip, why not use the wooden block I created and making the trick a little more technical. With the beginning of the animation still the same (all components separated and coming together), I will now animate it so that the completed set up will roll to the wooden block, nose manual along, then nollie tre flip off the end. This will make the clip more enjoyable to watch and make the animation a little more exciting. I got this idea of building a wooden block and animating a more complex trick from an old skateboarding video I know well, called Deca 2nd to none, as shown below:

Once I was happy with the animation, It was then time to add the camera to capture the squence. I also positioned a light on one side of the wooden box to give the effect that there was a generator on one side. Below is a screen shot of the camera being positioned:

And below is just a shot to show a close up of all the components together with there materials and graphics applied. (un-rendered)

So Far So Good:

Now that I have a clear focus of the direction I want this 3D object to take, it's now time to begin making it.

I started by building each of the individual components separately by following the photos I took of my own set up, shown below:

Close up of the wheel, bearing and nut:

Close up of the truck:

The con-caved tail/nose:

I then broke the skateboard down into 3 separate objects to make it easier for myself, the deck, trucks, wheels (inc. bearings) as an be seen in the three images above. Firstly I made a wheel, bearing and nut for the truck, each were scaled so that they could all fit together ready for the animation. I also only made one wheel, as after one was complete, it's just a case of copying the object and pasting it back onto the stage, Another reason for doing this aside from saving time is that the scale of each wheel will be exactly the same.

As shown below:

I then built the deck. This requires the least amount of work as it is simply a rectangle, with two circles on either end which I will bend to create the concave of a real skateboard, chamfering the edges for that rounded look.

Shown below: (without concave)

I then made the truck, this was easily the hardest component to build as it requires the most amount of individual parts and all must be angled co

rrectly for them all to fit together realistically.

Below is How the trucks look so far:

And here is how it looks together:

Don't forget it's still early days and far from finished! I still have to bend the ends for the concave look, apply realistic materials to all the components, place the graphic on the underside of the deck and then animate it as I intended in the previous post..but it's certainly a good start.

3D modelling:

For my latest assignment in this module, I have been set the task of producing a 3D object of my choice that represents me in some way. Naturally, I decided to build a skateboard. The programme Vlad has began to teach us to use is 3D Studio Max and in the few tutorials provided it has proven to be a very powerful tool.

Below is a short video as an example of what can be achieved with this programme:

Clearly this is something that has taken a fair amount of time to produce, but I hope to make something similar but by making a skateboard animation.

The animation I am hoping to create is a recreation of the iron giant clip shown below. I am going to have all the individual components of the skateboard separated to begin with, but one by one slowly come together. Once all pieces are in place and become one object, I want to make the skateboard do a 360 flip. The reason for this is because it happens to be my favourite trick and also gives the view a chance to see the underneath of the deck. I want the views to see the underside of the deck as I will have an image on it. The image is going to be either one of two things, either an image of myself which will further link me to the object, or of the NPNG logo. This is because it would also relate to me and mates from back home.

I will decide this at a later date.

Iron Giant clip: (From 10:00 - 11:00 min)

This will allow the viewer to see all the components that make up a skateboard and also show the level of detail in the making.

Finally, below is a 360 flip performed for real to demonstrate how I will be animating the skateboard once all the components are together:

If I can achieve all of these aims I will definitely be pleased with the final result.

Back to the Drawing Board

Now that I have a website with basic HTML I feel its definitely about time I began to develop it and transform it into something I can be proud of. It currently only has small amounts of video and images and mainly consists of text which is exactly the opposite of what I want it to be. as shown in my research all the blogs and websites I have interest in are media based and would very much like to follow that style.

As the site was originally only produced for an assignment it only has a few links on it to different pages. However, this is definitely a site I w

ant to begin to grow. I liked the fact that the links were situated at the top of the page, but now I feel I will soon run out of space along the top as I build the pages and feel it would be much easier when adding links if they ran down the left hand side of the site.

Below is a site that I have recently come across as I have been looking into photography lately.

This is a screen shot of Harookz Photography. This site was actually sent to me by a mountain biking friend who is also very much into photography. The fact that there is not an awful lot going on I find helps focus the links to different areas on the site, as well as the page links being completely separated from the main content. Another reason I like this is it is the images take up the majority of the page. This is exactly the type of thing I'm after. I want my site to be very much a visual based site, rather than a textual one.

Example of a gallery:

Another thing this site has emphasised is that my current website does not have a photo gallery. I have simply placed a small portion of my skate photos onto the HTML page and separated them with page break tags. This is definitely something I must research in to build my own as I have over 3000 traveling photos that I'd very much like to share, as well as a separate skateboarding gallery!

The site also has its own blog hosted upon it. This is another aspect that I definitely would like to use. This would keep by blog linked to my website and keep it all together. I'd also like to make another blog, one for my university work which is the reason for this one, but an additional one for my personal blogging. As I enjoy photography, video making and skating myself, I'd definitely be able to update a personal blog with all sorts of different antics I manage to get myself in.

Example of blog on Harookz website:

All images taken from Harookz Photography website, check it out.

Web space identity:

When I made my website, I also designed a logo/image that I could be identified by. However there was nothing that linked my blog to my website/me. So I have now changed the header of my blog to the same image as my website. This will help identify both my website and blog as being produced by the same person. Not only that but I have also changed my Twitter background to the same image for the same reasons.

Website:

Blog:

Twitter:

It is now clear that these pages are now linked by the same logo and should now make it easier to identify that they all come from the same source.

Visual Complexity:

Visual complexity is a website that displays many galleries of art and images that show different kinds of data representations. One of the galleries I am particularly interested in is its social networks gallery. This gives many examples of the way we can interoperate social networking visually.

Check it out at: Visual Complexity.com

One of the social networks projects I found of interest was the twitter analysis carried out by Akshay Java, and made images based on the results obtained. The two images show the difference visually by people who follow people on Twitter that they do not know, against people who are actually mutual friends.

Below are the images:

This image shows the amount of people who follow each other, but are not mutual friends.

And this image shows the comparison when only looking at Twitter users who are friends. as this shows there are only very few people that actually know the various people they follow.

I find this interesting as being a Twitter user I can agree that there is only a small percentage of the people I am following that I do actually know. This goes to show how much people are interested in others thoughts and feelings even though we may not know them personally.

These images were taken from: http://visualcomplexity.com/vc/project_details.cfm?id=594&index=76&domain=Social%20Networks

GPS Navigation:

Now that I have researched into GPS and have a greater understanding of the possibilities that can be achieved, It was time to create my own. With the same group as last Term we set out with a GPS device and decided to map out a route. The route had a set rule which was to find the nearest security camera to the university, track this location, and then continue to walk until we found another camera, track that one and so on... This would allow us to then plot all the tracked location on Google maps and give us an indication of 'safe zones' within the city centre.

Below is the map with the GPS locations posted which shows the route we took.

This clearly shows where many of the cameras are in the city centre and now this information has been obtained I am able to create a similar map, but colour coded as safe zones in the area. This could be used by others for an indication of how to plan a route when travelling alone, giving the safest possible journey.

Below are the colour coded maps:

The green ovals show the exact locations of the cameras. The fact that the ovals are green represent safe zones in the area as cameras provide protection due to people less likely to committing crimes if they are being watched.

The yellow sphere in the centre is present to show a relatively safe zone, it is not in direct view of the cameras, but the entire yellow area is surrounded by them. This is at least an area that people are less likely to feel at risk.

Finally this last image shows the entire map as a coloured indication of how safe the areas are. The places in direct view of the cameras are in green, followed by fairly safe areas in yellow, then not so much in pink and not at all/unknown in red.

My Flash Game:

Once I had a good idea of what I was aiming to achieve with my game it was much easier to begin. I also however wanted it to be different, I had originally decided to make a game that was in the style of a pigeon shoot, or a space kind of idea, but after hearing of some of the games my fellow classmates had produced I de

cided to change the subject of mine completely. to mix things up I decided to change the vi

ew from shooting things in the air, to being in the air and shooting down. This then led to the theme of the game that the user would become a gunman of a helicopter and the aim would be to catch an escaped criminal. This still uses the same principle of an aim and shoot game, but at a different point of view which I liked.

I definitely wanted my game to have a start screen. The purpose of this is to introduce the game by setting the scene and giving the user some instructions. Once the user had clicked a play button, it would then go into the game play screen where the user would be set a specific time to shoot the criminal before the time ran out. Once the user had hit the running criminal for the required number of times in the time limit, the window frame would show a win, but failure to do so would result in a game over screen with an option to go back and try again.

The game play will involve the user having to catch a criminal that I place randomly on screen using action script with the position (Math.random). once the user has clicked on the criminal 10 times, they win. Although to limit the user from winning every time, I placed a timer so the game play was limited to 10 seconds. I also purposely did not show how much time the user has left, this should give a little more excitement. If the user is unable to click the criminal 10 times in 10 seconds, they fail.
After a few days of writing the action script and checking the game fully worked, this is what I came up with:

Start Screen:

Game Play (day):

Game Play:Winner Screen:

Failure Screen:

For the game change due to an external change, I decided to change the background of the game play frame. Seeing as the criminal is running in the streets, I decided to simply change the background from a map during the day, to a street map that looked as though it was night by giving it a green layer to imply the user is now us

ing night vision. The data pulled in would be the time of the users computer to change this depending on weather it was day or night equivale

nt to real time (If day, game would display day fram

e, if night, game would display night vision frame).

[External Data Change] Time Screen (night):

Now that the game is complete I am happy with the way that the game looks and plays.

I also tried to keep the look of the game specific to my website. The colour scheme on my website consists of red and black, so for the game, I h

ave made all text red on top of a black back ground to try and keep them related.

Below is how the game appeared once I had uploaded it to my webspace, Happy days!