I read tons of reports on the net when it first opened and while I’m sure most of it was just hype to advertise its opening, I was kinda expecting something different. But it was just a regular electronic shop. The layout reminded me of PC world, which is just round the corner up at lakeside, but with lots more variety in items. I guess its more like a Currys as it have kitchen appliances and vacuum cleaners and even electric bikes.

It was also my first chance to use an iPad.

I had to queue up with my sister for about 10 mins before one came free to have a play with. But when I did get a chance, I didn’t really know what to do.

I mean sure, there were games and other apps installed to try out, but thats about all you can do with a iPad in store. I’m not going to check my emails or anything in a shop. I’m not going to sit on a sofa and watch a movie, like in the adverts. I dont have any personal photos on it to view. The google maps or whatever isnt much use to me when I’m stood still in a shop, nor is the calendar or contact book. I’m hardly going to type up a documents or knock up a powerpoint presentation. And I’m certainty not going to download one of the who-knows-how-many apps or anything for the iBook store.

So after waiting for ages to give it a try, I realized that after 30 seconds or so, thats was all I really could do with an in store demo, so i walked off.

This reminded me of a conversation I had back at uni with Jamie. You really need to be able to take this kind of technology home to try it out for a week or so before you commit to spending £430 +. If its life altering and revolutionary like so many of the ads say, then after a week of trying it out, I’m going to buy it.

But with no way to know how useful its going to be, how can I justify such a huge cost? Am I really going to play game on it while I’m on the train. Or read a book on it before I go to sleep. Or watch a movie or check my email while I eat my lunch. I guess in reality I can do all that on a laptop that cots a lot less and does a lot more, but lets not there there right now.

So yeah, I really think these kind of devices need to be trailed at home first.

Of course, a system like that is going to be totally open to abuse. People would take them for a trial and not bring them back. Or it could take a tumble down the stairs, or stolen or something. So you would have to leave a deposit, properly a rather large deposit. Some people would proberly go form one store to another taking lots of free trials and never actually buy it. Another problem would be what happens to the triled iPads. I guess you would have a batch of iPads that are never soled and just used for trial purposes.

Ok, there a lot of floors that that solution. But how am I really going to know how much use I get out of such an expensive device from doing some very limited things in store. When you play a demo of a game instore, you get a rough idea of how the game plays. You try out a iPad (or iWhatever for that matter), and you dont really get a full experience.

After following THIS tutorial, I had a go at modeling a small spaceship and using a uv map to texture it.

Below is the unwrapped uv map, first as it came out blank from 3ds max, then colored in Photoshop and finally the uv bump map.

Put it all together, add a random planet, a stary background, a couple of lights and re-purpose my fire effect from my castle project and you get something a little like the below.

Tasks for another day:

Get better with uv maps (some strange black marks on some seams where it looks like I haven’t added color but I have) and try more complex objects.
Find a decent way to export video from max that has reasonable quality and file size (the above video is 51mb)

Hostile Takeover, my second digital media environments project has been finished for… well, ages.

Play it in your web browser (unity plugin required) HERE or download the windows standalone (no plugin needed) HERE and get the critique from HERE.

Although designed to be played with a wii remote, the game works just as well with a mouse. Its just not as fun.

Woo!

You can get it form HERE.

Its actually been finished since last Friday but I a bit rubbish at updating my blog to say projects are finished. Still not like anyone actually reads this, even the lecturers that say they use it as a basis of marking don’t read it, I’m sure they don’t… If one of my lectures are reading this, please leave a comment and let me know I’m wrong!

ANYWAYS, with this project complete, it marks the end of my university life (assuming I pass).

My plan is to still use the blog to keep track of some of the random stuff I do so its all in one place. Maybe… We’ll see how that works out. Might be nice to see how my skills grow over time. Things have sure changed since I started up this blog.

So I had a quick file restructure. All of my files were in one big folder. AS discussed earlier, The main swf pulls in a different swf for each module, which in turn pulls in an xml file for its text content.

With only a few modules done, this folder was beginning to get crowded with a fla, a swf, a xml and any other related files sitting in one big heap. So I gave each module its own folder containing just its fla, swf and xml. This makes navigating my folder structure and locating files much easier. It was something I probably should have done in the first place.

It didn’t take long to recode the relevant bits to take into account the new folders. Mostly just adding a modx/ before the name of the swf  and xml (where x is the module number).

It did cause a few problems when testing the modules without running them through the main file. This was quickly fixed by adding the path name without the new folder structure in the else section of the xml loader if statement. So my xml loader function looks something like this now:

function loadXML(loaded) {
if (loaded) {
moduleTitle = this.firstChild.childNodes[4].childNodes[0].firstChild.nodeValue;
pageTitle = this.firstChild.childNodes[4].childNodes[1].firstChild.nodeValue;
pageContent = this.firstChild.childNodes[4].childNodes[2].firstChild.nodeValue;
moduleTitle_txt.text = moduleTitle;
pageTitle_txt.text = pageTitle;
pageContent_txt.text = pageContent;
} else {
trace("file not loaded!");
//xml not loaded. Could be previewing module not through main file so load xml without folder destination
xmlData.load("module1.xml");
}
}

Next problem was that as I was doing this I noticed a lot of missing font warning popping up, specifically my home pc doesnt have verdana bold. Reason I didn’t notice this before was that Ive been doing most of the development on this on the macs’ in uni. Normally this wouldn’t be a huge problem and I would just make sure to publish the final swf’s at uni and not at home, as I think I’m right in saying that static text is rendered as bitmap by flash to avoid such problems.. The problem is that I’m using a lot of dynamic text boxes, so the font needs to be installed on the pc running the program to be displayed properly. And if I don’t have verdana bold, chances are lots of other people wont either.

Course I could just embed the fonts in all the text boxes. I think that would fix it. But it would boost the file size and its a long and boring task. And I would still have to remember to publish at uni and not at home. SO might as well just change away from verdana bold all together.

So next I need to go through and remove all references of verdana bold. Hopefully I can just replace them with verdana and then make it bold. But Im not sure, dont really know a huge amount about fonts and flash. Will research and get back to you.

Oh and just so I dont find I hve the same problems with verdana (the font Ive used on all body text) I did a bit of research and found its “99.34% on Windows (making it the second most common font on that platform) and 96.06% (seventh most common) on computers running Mac OS” So no worries there.

‘matHughes4d.swf’ is the main file to run. When unzipping, make sure ‘balls.swf’ is in the same directory as ‘matHughes4d.swf’. There may be security issues with the flash player. If these cause problems then run the fla.

The underlying idea is that of data manipulation and misrepresentation.

The app takes data from the Portland Square building and uses the data to manipulate the 3 circles on the screen. The x and y positions and width of the circles is determined from the incoming data.

Press the ‘Refresh Data’ button to load new data into the app. This will also change  the data assorted with each circle, giving them new positions and widths.

To select a circle, click on it. It will become blurry indicating that it has been selected. To deselect a circle, either click the deselect button or click on an empty part of the screen. When a circle is selected it can be dragged around the screen.

The manipulation buttons (‘Stretch’, ‘Shrink’ and ‘Show/Hide Text’) will affect all circles. If a circle is selected then only that circle will be affected.

The dada values are broken down into two sections. The firsts shows where the data came from with the second showing the actual value.

The vertical text shows the data that set the original y position and y speed.

The horizontal text shows the data that set the original x position and x speed.

The diagonal text shows the data that set the original width.

The ‘Start/Stop Movement’ button starts and stops the movement of the balls. The speed that the balls move at is determined by the data that sets the initial x and y positions of the circles. This means a circle may have a very high x speed, but a low y speed.

I was able to find a way to change the color using setRGB(); from here.

The problem was that you had to define the colors it would change to using hex numbers. I had hoped to find a way to change colors using RGB values. That way I could have used 3 different random values from the arch-os array (one for the R value, one for G and one for B).

Another problem was actually trying to get values that were usable with hex values. The arch-os data spits out negative and decimal numbers. -102.52 doesn’t fit with the strict color values (between 00 and FF for hex and 0 to 255). Its easy to put the values as hole numbers using math.round and to invert the negative numbers using maths.abs. What I’m not sure how to do is to ensure that the number is 2 digits (for RGB) or convert it to a hex value. I’m sure it wouldnt be too hard, would just require a bit of research.

However, before I went any further I did a small test run. I used the code from earlyer for the hex values, but split it into three variables. For example setRGB(0x (var1)(var2)(var3) where var1 = 00, var2=11 and var3=22. This of course didn’t work.

With time running out on this project, and my final year project deadline rapidly approaching I decided not to peruse this area of the project any further. I’m not sure it would add a huge amount anyway.

Instead I plant on spending the reminder of my time tidying things up. I will remake the menu buttons add an info box explaining how to use it and make the code a little less buggy.

Tracking the users progress is important as they properly wont complete the course in one sitting. If the learner does some of the course, quits and returns to finish it later, they wont need or want to repeat the parts they have already completed.

I knew how to track a users progress while the flash application was still open, but had never attempted to store this data locally on a machine and then access it later when the flash app is reopened. I knew it was possible, as there are many internet games based in flash that store a players score or progress on the players computer.

After much research on how to accomplish this, I found that I needed to use SharedObject function. By following a few tutorials I was able to create a basic system that remembers a users name from one session to the next.

By adapting this code I was able to implement a system that stored the users name and progress throughout 10 sample modules. At this stage, the tracking only shows users if a module has been completed or not, but could be expanded to show what pages of modules have been completed.

With a tracking system completed I moved on to designing a main menu for the course. Below is a screen shot of the work in progress main menu.

Each button leads to a different module. When that module is completed a tick appears next to the button indicating that it has been finished.

My frame work would consist of a main file and several module files. The main file loads each module life only when needed. This helps to reduce the processing power needed to view the course. It also makes it easier to keep track of content while developing the course. Another advantage of this is that I I wish to remove or add a new module it is easily accomplished.

The first step was to create a module template in flash.

Once the template was completed I needed to populate it with content. To do this I planned on using XML to store the entire textual content of each module in one file. This file would then be pulled into flash and the correct content put on each page of the course.

I chose to place all the content in one XML file opposed to writing the text into flash manually for a variety of reasons. From a development standpoint, it is much easier to have all the content in one place rather than spread about many different places in a flash file. It also means that the content of the course can be edited from any computer with a text editor, not just those with flash installed. Another reason is that if I wish to make a change to the content, I can quickly make that change. If I were to change text that is embed into flash, I would have to remember to publish and test the file after the change is made.

With a sample XML file loading in to flash correctly and placing the correct content in the correct places in my template, I next focused on a way to load the modules in to the main file. This was a simple task and quickly accomplished.

The challenge here is to create a design that not only looks attractive but one that also is good at conveying information. A design that is not attractive will not help to hold users attention and may encourage them to think that as the design is poor, the information contained in the course is also poor. If the design hinders the transfer of information from the course to the learner, the the course becomes useless.

In short the design had to be user centered.

There were some other elements I had to consider in the design such as sizes, fonts and colors. As for the overall size of the course, I decided on 800 x 600 pixels. I chose this as it the standard size for many websites and other web based media. For font I decided on Verdana, as it is a clear and easy to read font and is also standard on most computers. I chose to vary the size of text from 35 for main titles and headings to 20 for sub-titles and 14 for the main body of text. As for the colour scheme, I chose to use a range of greens as main colors on a background of weight and light gray. I chose green as it is a fairly neutral color and also has connotations of nature (appropriate since the course is based on climate change)

Below are some screen shots of my initial ideas. I concentrated mostly on the design of the pages found with in each module, as this is where the learners will spend most of there time.

With this design I was mostly happy with the gray navigation bar at the bottom as well as the large white area. I also like the dark gray background. I did not like the the buttons. Although it is clear what they are meant to represent, they lack visual appeal.

With this design I attempted to try a more minimalist approach, with minimal colors and shapes and a simple lined boreder to hold content. Although I dislike most of the design, I do like these buttons. The rounded and ‘web 2.0′ effect makes them look attractive and still clear on their function.

With a lack of much colour in the previous design, with this one I tried adding lots of colour. It again resulted in a poor design.

This design draws apon the elements I like about the previous designs. It takes the rounded buttons of the later designs with the clear back ground of the first design. I also merged the bottom toolbar with the white information display area. This gives a small about of extra room for content (important when working with limited space.

This design is simply the first design with the round buttons.

Below is my final design.

My final design Is basically the last of my initial designs combined and with a few small tweaks. The buttons have been rearranged to give a better sense of order. Placing them in one group is better from a usability stand point. They have also been raised up the design slightly and given a reflection. This is just a small visual tweak to add to the attractiveness of the design. With its large area for displaying content and simple yet effective layout, I am happy with this design.