Thursday 26 March 2009

David's typography world

http://www.visibleart.net/david/temp/ntu/flash/typo49.swf

 

Check it out. He's kind of one of our own, and he's added great visual design to his repetoire. Not only can he do PHP, but he knows good typography too.

I really like how the sun, for example, has been fashioned to represent one, using just the words. The varying sizes of the type too make this really interesting. Even the tiny detail of how the man runs, still incorporating just typography, is fluid and impressive. He fades in colour when losing life. That's a simple but great touch.

A month or so ago I criticised an effort from Honda for being too bland. This time though, David just seems to have got it right. I don't know what it is I love about typography so much, perhaps it's just the beauty of words and the respective typeface, but I definitely credit this example.

In all, this is great. It definitely deserves recognition.

@

Nintendo Fanboy

With me being a big Nintendo fanboy, this made me laugh.



Every single console that Nintendo produce, makes them a profit. Compare that with Sony who are seriously in debt from their last year of trade "-$1BILLION" fiscal reports quote and I know which ship I want to be on.

It's interesting how recently DSi application producers have been told to make non-game like products. Seems to be the iPhone way of life is the way forward. Good job as well - I'm planning on making iPhone centric websites next year, hopefully! Clients should lap that up.

With over 100 million DS's sold, it goes to prove that people love to touch. My question is, where do Nintendo go from here? ...I can't wait to find out!

@

Wednesday 25 March 2009

Amazing Memory - evaluation

Having now finished Amazing Memory, here's the bits that didn't make the short evaluation.

My main problem namely was initiating the hit test object for the maze walls. Having used an object that the character sits within, instantly the code would recognise it as a hit and bar any movement due to how it was programmed.
I eventually overcame this by swapping to hit test point which can register x and y values, identifying co-ordinates. Now, when the character is inside the maze it can move freely and then on colliding with a wall, the stop movement is activated.



This then led onto the next problem! Whilst hitting a wall, my code removed key presses so that in theory, the user couldn't carry on through. I managed to find a solution by getting it to re-buffer away from the wall by 5 pixels - not noticeable to the player but code-wise a viable option.

The rest was reasonably simple. Courtesy of David Downes' example Flash files, the count down clock worked in it's three forms for my game. I learnt the need to disable key presses whilst the remember/reveal options were active, as the user tried to cheat and move through whilst the walls were viewable.

I noticed a bug in regards to the clock timer going past 0, i.e. counting -1, -2. In my code I had specified when timerclock==0, stop - abbreviated form. David suggested to overcome this by using <=0 as this will encorporate the switching between code and timeline and rectify it so that when it goes past 1, it will activate the stop. Rather than getting to 0, telling it to activate the stop and by this stage it has already decreased to -1 and so on.



Lastly, when updating the graphics the flower became difficult to see when placed in certain areas of the grass background. I remedied this by adding a white padding hopefully making it more legible now.



There were initally the typical problems of embedding the custom font 'Lazy' from dafont.com and me not embedding all the required glyphs. To save problems in the future, I will now just embed all caps, lower case, punctuation and numerics - this covers the span I will likely use.




In all, I found this assignment achievable by splitting it up into manageable development stages. To sit down and code this from start to finish would have been daunting and I probably wouldn't have accomplished it. If I were to make a game again, I would definitely handle it in this way - it's a sound time management system that I have since incorporated in my other modules, such as PHP.


Overall, I am pleased with my game and although difficult to play at first, I find it a different, but interesting game. Submitting it to amateur online games sites however could prove or disprove my opinion completely!


@

Sunday 22 March 2009

Social networking site - recycling is good

My last post about Flash banners for Get In: Get Gaming was unfortunate in that I went to the effort of making a banner which I then didn't think was good enough for the site and so didn't use it! 

However, as I'm increasingly finding with design, every idea has a worth and is useful. 
Back when I was making Villains I did an initial batch of logos, naturally, only one being chosen to use. When needing a specialised header for the pages, I combed through my original designs and successfully implemented/incorporated them together, thereby fuelling a recycling scenario.

I have been fortunate enough to do this again for the social networking site. 

The light blue tone was the main problem the first time around - it stuck out too much and downgraded the overall feel. 



The image above I darkened by adding a darker filter along with a black border. Alas, it was to no avail. I still wasn't pleased with it.

Cut to a few days before hand in and me turning my attention to filling the pages with content and I had an idea. Utilising the gradient background that already proved successful I decided to do a typographic sort motion piece just reinforcing the title of the website. Naturally, the choice of neon light blue was instantaneous. This time however I went for a techy, digital feel using LCDDOT custom font from dafont.com.

>

Initially I expected this to go onto the main page, but it ended up placed to appear once the user has logged in. In terms of literary meaning, I know this is a little off: "get in: get gaming" probably should be before they login, but it was the second banner, courtesy of recycling, a gaming legends banner that felt more apt on the homepage. It served a better purpose: attracting the attention of potential visitors.

Whereas previously the gaming icons floated, spun, faded on and off the horizontal banner, this time I just decided to go with a scrolling from right to left effect. 

>

I dropped images that weren't square i.e. having whitespace etc so to conform to the square rigidity of the piece. I think this is an effective Flash banner as it should draw in the eye to the gamer on first loading the index page, particularly as the colourful images make for a strong contrast against the black backing. Furthermore, the scrolling effect makes for a nice piece of motionary graphics.

In terms of Flash complexity, I wanted to loop it so the first one would join with the last one, making it cyclic. Unfortunately with limited time and PHP being the key priority I merely inserted a second string of images after the first load. Should the user hang around long enough on the first page they will see it scroll through but hopefully not long enough for it to get to the actual end where a black void will appear momentarily!

In all, this was an exercise that showed and proved that ideas are not dead and gone the first time they don't fit. It is reassuring and feels good to know the effort you put in is worth it. Furthermore, being a fan of motion graphics, I'm pleased with these pieces as they play nicely on the eye.

@

Friday 20 March 2009

Amazing memory - the designs/refining

Today is the deadline and today I will submit my completed Flash game.

Having gone from a rather blank idea - remember a maze, I'm pleased with the progress. I initially put off the design side to things, unusual because I usually enjoy getting involved with that. But encouraged by the likes of Sarahs and Jacqui's visuals, I knew I had to make an effort. 

The initial look I tried was a sand background. I just wanted something that wasn't the flat and plain white background.


I then decided to try inverting it so it was the maze that had visuals. Admittedly this idea fell short pretty soon as the walls disappear, so I would have been back at square one - white!



However, I liked the grassy look. The hue and saturation is really vivid and strong. It looks good. I thought about it and tried to develop a  scene that would resemble some sort of wildlife/nature in the backyard feel. I added a ladybird as the 'ball' and flower as the 'end'. It worked well.



I went on picking out a typeface and colours that would bode well. I think the red contrasting against the green is perfect. There is a distinct clarification. 



I decided to add a cooky sort of indie typeface which again bodes with and makes up a good thematic visual. 

Making the item you navigate around with a character, named as Dotty, it gives the game a more sort of personal feel, a little life/character to it. I like this touch.



From my experience, I knew that instruction page was important. I was aware it definitely shouldn't appear too crowded, yet I didn't want to make the instructions so sparse that they weren't informative enough. 

It's minimal, but I like the visual representation of the game's aim here - get to the flower, with a curved dotted line from Dotty the ladybird. This should connect much quicker with the audience who probably don't wish to read all the text.

--

In terms of the coding/structure, I have added a points score system that collects the time left after each level and combines into one large score at the end. As with other similar games, the incentive to 'better your score' should prove encouraging enough to want to replay, being quicker and more skilled in remembering the mazes.



I am really pleased with the design after having completed it. It looks a lot like the current branding used by Robinsons. Perhaps this was an unconscious influence.

All that needs to be done now is user testing. From experience, I have found this to be vital in pointing out bugs or making me aware that something isn't clear enough/needs evolving.

@

Thursday 19 March 2009

Amazing Memory? more developments

Compared with PHP, Flash this year has been a relative breeze. Perhaps it's error reporting is a little more specific, but I've enjoyed the game making process so far.

Since last time I've started to add an important part to games - scoring. It is this aspect that often encourage repeat plays in the hope of bettering previous scores. 


From my original game plan, I wished for any time left on completing a level to be converted into their score. Initial attempts had me trying to calculate the total time of a level (40) - timeremaining. This wouldn't function however. After a surgery session with David, I discovered it was as simple as printing the time when it stops (when they hit the finish line).

It is now simply a case of inserting the seperate score display between each of the stages. Admittedly, the graphics are currently below par. This will be addressed, although I've put it off so far! This will likely be the last development I make. I think I am going to struggle a little over graphics that are qualitative. I suppose the main essence of a game is gameplay, yet I clearly listed uninspiring graphics as a no-no in my game objectives, so I will have to commit myself to it.

Next up, the decision to include a reveal option is a great help for those struggling. It stops the main level timer whilst itself counts down for a limited period. However, I noticed that you could then cheat your way through the entire game by hitting it at any moment you become stuck. To counteract this, I decided to impose a set amount of strikes. 5 in particular, for the whole game. Even that might be too generous? I am going to conduct user testing to find out!



Lastly, I noticed just like the ping pong game, that the controls seemed a little sluggish/unresponsive. In response, I have set any key press to be a boolean: key up-true, key down-false etc. When they press the left key for example now, in the code it activates function keydown by making it true. Admittedly, the difference isn't that great compared with pingpong as I am using one frame per level, whereas ping pong streamed through 3. Nonetheless, it is perhaps still a more advanced method input for movement.

I am surprised at my development with Flash, in all. Whereas PHP has felt a bind, the syntax of ActionScript3 seems more straight forward if that's possible. Reverse a year and a bit and I would have been the complete opposite. Perhaps I can now add to my C.V: Other languages: French... German... AS3... 

@

Tuesday 17 March 2009

Social networking site - one step forward, one step back



I've spent quite a few hours trying to implement various pieces of code to try and achieve the register page, or upload image page. Unfortunately, all to no luck. It's highly frustrating and wedges even more distance between me liking PHP. 4 hours of one massive circle doesn't bode well, each time.

To combat the feeling of incomptency, I noticed that the top header section of my site appeared a little bare. It currently stands as a black box. 


The Playstaton site uses scrolling banners that feature gamers, or gaming characters behind a semi opaque colouring. I admired this in my earlier analysis.



I decided to try and make a Flash banner that incorporated the colour highlight of my current design and then mix it in with legendary gaming characters.





The neon light blue was naturally the most in keeping but also a distinct enough colour to draw attention. The grey was too drab, and the blue a little too much of a different hue to appear to aid continuity with the design.



Notably, framing it within a curved corner border made it more fitting with the sort of on screen game menu graphics we are used to. I liked the motion tween movement of the characters that I inserted, it varied between moving across the screen, fading in, spinning out, growing and having tremors. It certainly wouldn't be amiss on all the other typical gaming sites.

Feeling that development wasn't over, I tried to add a little more visual interest, as the blue with a character did look a little uninspiring. 

Firstly, I added a graph paper grid behind. This added that sort of visual detail that I was seeking but wasn't stylish enough in my opinion. I exchanged it for raised dots from my sugar lump design. I love recycling designs.




Thinking that I'd made a worthy banner, after having tweaked with the colouring of the light blue - lighter, darker, more blue, more grey, I added it to the site.

It looked OK, but it didn't fit in with the sophisticated visual elsewhere. I've noticed more and more since completing the design that the grey gradients and black make for a real sophisticated feel. The addition of the neon light blue make for a contemporary twist. I am proud and pleased with this design, I think it embodies stylishness. However, the banner looked tacky. It was difficult to get the colourisation of the blue to match when using a reduced alpha channel, and so, regrettably, I decided not to even use it.

Talk about one step forward, one step back. This PHP is tainted!

So, moving forwards, I hope to fix some code together to get the site to function. As I said, I am pleased with the design, and if I document what I intended the site to do, I think the premise is good. Just a shame that the code and I are not currently friends.

@

Wednesday 11 March 2009

Memo:

Flash game update - 'Amazing Memory?'

Since my last post, I've made and implemented quite a few new features. I have found that development is manageable by doing it in reasonable stages: level designs, alpha transformation to 0, countdown clock, reveal option. 

Firstly, one of the key objectives I set out beforehand was to have levels that increased in difficulty. Henceforth, I have created 7 designs which I think will cater for a decent amount of gameplay. I did discard some other designs as I felt them a little too repetitive. However, luckily I noticed that by altering the start and end positions will make for variety within the game, sometimes you'll be heading clockwise, sometimes anti-clockwise, sometimes north and so on.

I was cautious of making the first level in the least simple, so to ease the player in and encourage them to enjoy the game.



From then on, the gameplay becomes more difficult by adding in more complex routes, or little walls that will get in the way if not remember and eat up some time as the user tries to get around the obstacle.

 
  

Importantly, these are not how the designs will stay, visually. At the moment they provide a function. On completing all the additional code based tasks, I will return to the designs and update them. I am considering themes, such as an Aztec look, or Roman, along with Egyptian or Japanese. 

The unique selling point of the game relies upon the fact that the user must remember the route/maze as it disappears within a set period of time. I moved onto installing this event.

After having researched online, I learnt that it was possible to create fading tweens within the action script. However, it appeared long and quite laborious, so I decided to opt for a straight reduction in the alpha state - from 1, to 0. 


This is achieved only after a 'remember time' clock counts down. So I had to install this too.
Courtesy of David Downes' Flash examples, I was able to look up the code required for a countdown clock. 

I decided a suitable amount of time was 8 seconds, and so set the remembertimer variable to 8. However, I soon found on testing the movie that whilst the 'remember clock' counts down, the user is able to begin their route through the map. Hence, I had to remove the stage event that listens for key events whilst the remembertimer is active.

Here is the code that now is required to suitably allow the user to remember the maze, not play, but then be allowed to play when remembering is over: 

 
maze.alpha=1;

var remembertime=8;
// total time to countdown

var remembertimer:Timer = new Timer(1000, 0);
//(delay in milliseconds, number of repeats)

function remembertimerStart() {
   // start timer and starts timerHandler function when the act is completed
        remembertimer.addEventListener("timer", remembertimerHandler);
        remembertimer.start();
rememberclock.text=remembertime;
}

function remembertimerHandler(event:TimerEvent):void{
      remembertime=remembertime-1; // remove 1 second every 1000 milliseconds
      rememberclock.text=remembertime; 
 // when clock reaches 0 then it will stop the timer and the walls will become transparent
 // the keys will become usable
 // the clock will be reset ready for the next level
      if (remembertime==0) {  
 remembertimer.stop();
  rememberclock.text="";
 maze.alpha=0;
 stage.addEventListener(KeyboardEvent.KEY_DOWN,detecthit1);
 leveltimerStart();
 }
}

As can be seen, this activates the next timer, the leveltimer, which is the total time allowed to hunt round the maze. It was necessary to use rememberclock.text="" when it completes as I decided from a design point of view to have the clocks in the same position. Otherwise, I encountered the problem that the rememberclock read 0 and overlapped the levelclock which counts down.



Lastly, through playing the test versions myself, I became aware of how difficult the game can be when not paying full attention. This resulted in me allowing more generous time allowances per maze, upping it from 30, to 40, yet still this could prove difficult in the latter stages. I am wary of extreme difficulty, as it was sometime I found I disliked through my Flash game analysis.

To combat this, from an early stage I realised the option for a 'reveal' button would be helpful. I found the implementing of code easy enough... or so I thought. Harking back to my very first days using Flash, it was a case of setting up an event listener for when the reveal button is pushed:

revealBtn.addEventListener(MouseEvent.CLICK,revealtimerStart);
 

However, I received an error concerning the third countdown clock I have working in this game. It repeatedly sought a type of event. Having always been a little unclear on the purpose of myEventObject, or e:event, or event:MouseEvent  it was courtesy of a surgery session that allowed me to get it cleared up.

Now, the 'remember clock' counts down, the 'level clock' then is cued, and should the user need it, they can push reveal and the 'reveal clock' will be activated, which pauses the 'level clock' but then makes it continue after the alotted time. 



I am pleased so far with my progress. I have tried to steer away from quick fixes, and unlike my previous history with Flash, my coding is not too superfluous. The functions that set up and make the game run are all on the first frame. Thereafter, the following slides just require calling the rememberTimerStart () function, which begins the processes.



So far I have been fortunate in encountering little trouble in the development of my game. Nonetheless, advances can still be made. As I mentioned beforehand, the design needs enhancing, but then also, I would like to add in bonus points, which that in itself requires sorting out a points score system. I have tried a little but failed in my efforts. Lastly, if time feasible, I want to limit the amount of times reveal can be used. This will no doubt concern using a variable options setting up the amount. 

@



Saturday 7 March 2009

Collaborative mindmapping online - internet app

Courtesy of BBC Click, I found out about this app for creatives: online mind mapping.

According to the reporter, it's intuitive, clutter free and great for collaboration as you can share the mind map online, or you could print it off, or export it as a PDF etc.



Should be good for group projects.
@

Girl Effect - a different kind of website

When I was first introduced to the FWA I plunged into the greatness that is Flash. The possibilities seem unlimited, if you want it to look like this, it can, if you want it to do this, it can.

However, with time, and perhaps influenced by a more HTML focus this year, I found Flash sites to sometimes be a little over the top. Is it really necessary to be swinging around 360' when all you want is to find out their phone number? Hence, CSS became my new favourite thing. Well actually, being more specific, large background websites using CSS.

I am surprised, therefore, that a site I've come across uses Flash but in a genre I'm starting to like, increasingly reminding me of postcards. The visual web really is the new postcard. Enter The Girl Effect.




Striking, bold and quite brash, the large black, domineering text instantly creates for the site a sense of character. By directly addressing the user and asking them to agree of disagree with it's opinion through the choice of two options you do feel directed involved. Straightaway, you can tell that this isn't really the sort of stuff you'd expect to receive on a postcard. - Another clever idea implemented by the creators.  



On choosing an answer, the postcard flips (a recurring visual technique) and then goes on to show a sort of advanced Powerpoint presentation. Each time you click a link, the flip reveals an image, briefly, of a real life girl, before then flipping again to the textual information. I think this is a clever technique - it brings you closer to reality, it puts a concrete image in your mind of the sorts of girls that the site, as a whole, informs and talks about.

Before getting access to the site, you are shown a slightly advanced form of a Powerpoint presentation. Using this medium on a website usually means I ditch it and go look at another site, however, the relatively charismatic but quaint background music, quite akin to what Apple sample in the background for all their TV adverts, made me stay tuned and give it a go.


There are no images* (OK, there is one repeated graphic) within the presentation, merely text. It is sharp and to the point, often with only a few words per slide. I liked this brevity, it provided a pace to the piece, which actually increased throughout the presentation, signalling momento and then a build up to the big, main event. At one stage I did start thinking that people who couldn't read very well would be lost, but the language being used was simple and regardless of how little it appeared on screen, I found myself keeping up and following. 

Normally informative pieces can be very dull and when there is a political/charitable purpose it can sometimes be quite encouraging to make you switch off. However, with the simple information flashing on and off the screen in good time, along with an informal register that tells the story, I found myself engaged. 



There are some nice motion graphic effects at play here - motion graphics being something that I too have an interest in, and so found myself approving of their techniques. Even the simple colour palette - black for anything none girl related, orange for the girl focused bits meant that you could tell a distinction between what it was highlighting as good and bad. 

I feel that they got it right in regards to their 'Powerpoint' on womens' right to education. The  size of the text varies throughout, however the large, domineeting words are clearly emphasising key information, and definitely increases the impact of what is being said. This, I found, was another clever design. Alongside the informal, simplistic language and quaint music in the background, it altogether tied in to make a successful informative piece. Even when the words were so large that they were being split in half, you accepted it and read it fluently, as it has been implemented right. 






Coming out of the presentation, the design is notably consistent. The postcards use the same typeface and form for their layout, in addition to their colourisation. I particuarly liked the large headings. They make it very simple to tell what the content is about. The content too is all quite short, sharp and to the point, being concise and clear. However, after the limited nature of the presentation's, certain points within the site feel a little information overloaded. Nonetheless, the white space consideration in regards to the page surrounding the postcard means you never feel too cramped. 



There is a simple three option navigation bar that looks like a bookmark, which is consistently located in the top left hand corner. Again, I praise their minimalism, and how they have neatly tied in their ingenius logo too. At first glance it's a recycling arrow, but then after going through the site, it becomes clear it is infact a 'g' for girl.



If I were to aim any criticism at the site I would probably question the lack of images or iconography within the site. Yes, there almost full screen images upon each click, but when you are viewing the postcards it does appear a little bland. Icons could address this. This is only a minor suggestion though, as I support this site for what it sets out to do and how it actually achieves it.

Yet again, I've found another form for a website that I could experiment with and develop. It even uses a Powerpoint type presentation which is informative and entertaining. I love web for how unlimited* it is. 

@

* Bearing in mind browser capabilities, the user's internet connection, whether they are using a screen reader, if the font is available on their operating system, what version of a plug in they have, or don't have... lol

Friday 6 March 2009

Great graphics practitioners

Courtesy of a link from Jools on the NOW and Netdiver, I today found some excellent visual designers.

Sometimes when you come across someone good, you can instantly recognise it but don't fully tie in yourself with what they are or what they do. Two things that I personally like are colour, and substantive graphics/type that have a real presence on the "page".

The first artist I found emulates this very well: Joevw.



These thumbs are individual samples of what he's done. It pangs of colour and geometry. 

Of them all, I prefer this ribbon like one. The different layers, where sometimes it goes over another string, whilst then it can be underneath another ribbon makes for an interesting piece to look at. Furthermore, such work allows the mind to create images itself. The symmetry in his work is notable and I find it beneficial, it seems right to the eye and the mind - a sort of necessary semblance. OK, it is just a stream of intertwined lines, but you certainly take a good look at it.



Notably I found it humorous where he has added his own captions alongside certain works. This next image does have quite a spacey feel, with the gradients on the silver providing a metallic look, which is again referenced by the effect on the type. 


On first reading it you think, "what?", but then on second thought, it does somehow make sense. In the deep expanse of space, 'look me up some time' is quite a good one liner. Juxtaposed against the symmetrical alien figure though adds that oddness that can get works noticed.

---

Somewhat maintaining the geometric design theme, but also exploiting typography, Sicksystems makes creative works that are eye catching, being hugely stylish and contemporary. 



One personal favourite is this grey and light blue piece. Perhaps because I have ties logo-wise with such a colour palette, and loving Wii.


I like the contrasts found within the piece. The phat but curvy typeface in the background makes for a good constrast against the thin linear strokes. Colour is well used, with the grey gradients proving a good distinguisher against the black and then the neon light blue. It takes a good look to see what is being said initially, but its the indetermant combination that makes you pay attention at first. 

I like his use of iconography in this hellride logo. Again, it took a second to regist what the image below the text was, but then it pretty well symbols up the genre of the sport it represents, being semantic. 

This next slanted piece is really effective, in my opinion. It's angular nature adds a dynamacy that attracts the eye. Again, his semantic use of the laces in the image reminds me of myself and how I laterally design things.

It is a small feature, but Sicksystems slices half of a letter and then shifts the bottom bit across slightly, creating a jagged look. This is really easy to achieve but it adds a uniqueness to his work, perhaps being his signature design device

I never really considered wallet design as a viable medium, but really it is an area that is open and appeals to the fashion savvy. The use of the large 'CASH' inside is a really nice touch, again being quite semantic, but works humorously.



@