Well, as we prepare to put the clocks back, I thought I'd show you the clocks going forward. Today's Sunday Matinee is a slice of Granadaland from the 50s, 60s, 70s and 80s...
Sunday, September 19, 2010
Wednesday, September 15, 2010
No Sleep Til Closedown
My interest in all things Granada was piqued recently when I came across a copy of "Easy Go" by Nick Glennie-Smith. This was the breezy mid-80s start-up piece that was usually heralded by a very naff block graphic transition and ended up with Colin Weston talking over it cheerily in-vision to let us know how parky it was outside.
I've always wanted to have the Granada block graphic transition available as a Flash file should I ever need it, so when I got some free time recently I decided to recreate it. For source material I had an old RealVideo file of a VHS recording of a Granada closedown which I downloaded from the web many years ago.
The Granada transition is based on a grid of 32 x 24 squares, meaning that each square was 24 pixels in size making up the full 768 x 576 PAL resolution. So the first thing I did in Flash 8 was change the grid from 18 pixels to 24 pixels. I then added guides every four grid squares to help positioning on screen.
To help me create the animation, I needed to view the video file frame by frame in Avidemux. However Avidemux didn't like my rather antiquated RealVideo source file. Luckily I was able to convert the RealVideo file into an mpeg file using the command line video tool ffmpeg:
After that I trimmed the resulting mpeg file in Avidemux so that it only contained the transition.
I didn't bother turning the video file into an FLV to import into Flash - just as well as it turned out. I had enough problems with memory as it was! As I run Macromedia Flash 8 using the WINE compatibility layer for GNU/Linux, Flash 8's performance tends to struggle with files over about a megabyte in size.
My approach was to use a symbol for my pixel, and build up each frame using multiple copies my pixel symbol.
Although it worked fine at first it was a big mistake in retrospect as it meant I eventually created a large, unresponsive Flash file. This is because when you use Flash in WINE for large files you have to use Save And Compact... for each save to stop the file growing exponentially in size and eventually corrupting. Worse still, whilst it is saving Flash becomes completely unresponsive.
As I worked on the Granada transition each Save and Compact... took longer and longer and would often throw me out of Flash completely so I had to reload it again. Flash also became increasingly slow and unresponsive while I was working. It got so bad that in the end the majority of time was spent "Saving and Compacting" rather than animating.
By the time I'd finished it had taken me an hour to do one second of animation - absolutely ridiculous! My end result was 2.4MB Flash File that took about six minutes to save after each alteration but output a SWF animation that was about 6K in size.
In order to be useful obviously needed a file I could actually work with sensibly. After breaking apart all the square symbols I got a file that was a more manageable 237K - and that could be saved instantly. However the output .swf file went up in size several times to nearly 23K.
I kept my original Flash file so that at a later date I can create a 16:9 aspect ratio version of the Granada transition. But I think I'll wait until the performance of Flash 8 improves in WINE before I tackle that one!
The only other problem I had when creating the transition animation was the RealVideo file I had dropped the odd frame, so I had to create two frames from one at certain points.
Once I had the Granada transition, I decided it would be a shame not to put it to some kind of use, so I decided to recreate a Granada closedown from the mid-80s. I had a recording of a Granada closedown in another ancient RealVideo file and luckily I only needed two extra items - the Granada computer generated station clock and the Granada computer generated ident caption.
I was lucky enough to have some excellent source material for the Granada station clock - the output of the actual clock generator itself courtesy of Greg Taylor. Having the clock output also allowed me to get the RGB values of the actual colours exported by the electronics used to generate the clock and caption. Looking at off-air recordings of the clock and caption in use, I reckon these were often tweaked a bit in the gallery to make them a more Granada-ish powdery blue.
The clock itself was an interesting job. A couple of years ago I would have drawn and animated the entire thing in Flash 8. However, I did a mix and match for this. I drew the bottom of the clock with the Granada Giro G and namestyle in Inkscape 0.47. Then I exported the result as an EPS, imported the EPS into Flash 8 and then drew and animated the clock face itself.
I was quite pleased with this - it meant I could use the best tool for each bit of the job. Inkscape is far more suited to drawing logos and lettering, whereas Flash is far more suited to both drawing and animating things like clock faces.
The clock was a pretty quick job, polished off in under an hour from start to finish.
The Granada electronic caption was another quick job, as I had a large, high quality scan of a genuine caption card from Matthew Gulliver's collection to work from. This caption dated from the same era as the closedown and the proportions of both the logo and lettering were identical.
Once I had all the bits and pieces I stuck them together in Flash 8 and exported the resulting sequence as a PNG sequence. I turned the PNG sequence into an uncompressed AVI file using VirtualDub. Then I imported to AVI file into Avidemux to add audio and export the result as an H.264 video/MP3 audio MP4 file.
I uploaded the finished result to my YouTube channel, and here it is:
It's blue, it's CGI - it's just like Avatar!
I've always wanted to have the Granada block graphic transition available as a Flash file should I ever need it, so when I got some free time recently I decided to recreate it. For source material I had an old RealVideo file of a VHS recording of a Granada closedown which I downloaded from the web many years ago.
The Granada transition is based on a grid of 32 x 24 squares, meaning that each square was 24 pixels in size making up the full 768 x 576 PAL resolution. So the first thing I did in Flash 8 was change the grid from 18 pixels to 24 pixels. I then added guides every four grid squares to help positioning on screen.
Setting the Flash 8 grid
To help me create the animation, I needed to view the video file frame by frame in Avidemux. However Avidemux didn't like my rather antiquated RealVideo source file. Luckily I was able to convert the RealVideo file into an mpeg file using the command line video tool ffmpeg:
ffmpeg -i granada\ close\ 1985.rm -r 25 -target dvd -b 3000kb finalvid.mpg
After that I trimmed the resulting mpeg file in Avidemux so that it only contained the transition.
I didn't bother turning the video file into an FLV to import into Flash - just as well as it turned out. I had enough problems with memory as it was! As I run Macromedia Flash 8 using the WINE compatibility layer for GNU/Linux, Flash 8's performance tends to struggle with files over about a megabyte in size.
My approach was to use a symbol for my pixel, and build up each frame using multiple copies my pixel symbol.
A really stupid way to do it...
Although it worked fine at first it was a big mistake in retrospect as it meant I eventually created a large, unresponsive Flash file. This is because when you use Flash in WINE for large files you have to use Save And Compact... for each save to stop the file growing exponentially in size and eventually corrupting. Worse still, whilst it is saving Flash becomes completely unresponsive.
As I worked on the Granada transition each Save and Compact... took longer and longer and would often throw me out of Flash completely so I had to reload it again. Flash also became increasingly slow and unresponsive while I was working. It got so bad that in the end the majority of time was spent "Saving and Compacting" rather than animating.
By the time I'd finished it had taken me an hour to do one second of animation - absolutely ridiculous! My end result was 2.4MB Flash File that took about six minutes to save after each alteration but output a SWF animation that was about 6K in size.
In order to be useful obviously needed a file I could actually work with sensibly. After breaking apart all the square symbols I got a file that was a more manageable 237K - and that could be saved instantly. However the output .swf file went up in size several times to nearly 23K.
A more sensible approach
I kept my original Flash file so that at a later date I can create a 16:9 aspect ratio version of the Granada transition. But I think I'll wait until the performance of Flash 8 improves in WINE before I tackle that one!
The only other problem I had when creating the transition animation was the RealVideo file I had dropped the odd frame, so I had to create two frames from one at certain points.
Finished Transition in Flash Player
Once I had the Granada transition, I decided it would be a shame not to put it to some kind of use, so I decided to recreate a Granada closedown from the mid-80s. I had a recording of a Granada closedown in another ancient RealVideo file and luckily I only needed two extra items - the Granada computer generated station clock and the Granada computer generated ident caption.
I was lucky enough to have some excellent source material for the Granada station clock - the output of the actual clock generator itself courtesy of Greg Taylor. Having the clock output also allowed me to get the RGB values of the actual colours exported by the electronics used to generate the clock and caption. Looking at off-air recordings of the clock and caption in use, I reckon these were often tweaked a bit in the gallery to make them a more Granada-ish powdery blue.
The clock itself was an interesting job. A couple of years ago I would have drawn and animated the entire thing in Flash 8. However, I did a mix and match for this. I drew the bottom of the clock with the Granada Giro G and namestyle in Inkscape 0.47. Then I exported the result as an EPS, imported the EPS into Flash 8 and then drew and animated the clock face itself.
Clock base created in Inkscape 0.47...
I was quite pleased with this - it meant I could use the best tool for each bit of the job. Inkscape is far more suited to drawing logos and lettering, whereas Flash is far more suited to both drawing and animating things like clock faces.
... and finished off in Flash 8
The clock was a pretty quick job, polished off in under an hour from start to finish.
Inkscaped Granada CGI ident
The Granada electronic caption was another quick job, as I had a large, high quality scan of a genuine caption card from Matthew Gulliver's collection to work from. This caption dated from the same era as the closedown and the proportions of both the logo and lettering were identical.
Once I had all the bits and pieces I stuck them together in Flash 8 and exported the resulting sequence as a PNG sequence. I turned the PNG sequence into an uncompressed AVI file using VirtualDub. Then I imported to AVI file into Avidemux to add audio and export the result as an H.264 video/MP3 audio MP4 file.
I uploaded the finished result to my YouTube channel, and here it is:
Sunday, September 12, 2010
Probably The Ugliest Test Card In The World
When I drew my recreation of the IBA electronic test-card ETP-1 in Macromedia Flash, I only captioned it with the large IBA caption. As I only needed the card to recreate an HTV start-up sequence, I never bothered adding the two best known captions that appeared on the card - for Channel Four and S4C.
This always annoyed me, so whilst I was listening to a podcast this morning I finally decided to finish it off. I used Inkscape to draw the lettering - I'll export it as an EPS file for import into Macromedia Flash at a later date.
If you enlarge the image below, you will see that letter is designed on a 10 x 10 pixel grid, with 2 pixel leading between each letter.
Now all I need to is some KPM tracks by Keith Mansfield and I'm back in the early 80s again.
IBA ETP1 recreated in Macromedia Flash 8
This always annoyed me, so whilst I was listening to a podcast this morning I finally decided to finish it off. I used Inkscape to draw the lettering - I'll export it as an EPS file for import into Macromedia Flash at a later date.
Beautiful calligraphic script
If you enlarge the image below, you will see that letter is designed on a 10 x 10 pixel grid, with 2 pixel leading between each letter.
Snap to Grid and Clone Object are your friends
Now all I need to is some KPM tracks by Keith Mansfield and I'm back in the early 80s again.
Tuesday, September 07, 2010
Distractions...
My children have been nagging me to add internationalisation (i18n) to testpilotmonkey's brilliant game ClapTraps.
Well, the road to good intentions - I got distracted and ended up designing a level.
It was supposed to be very cerebral and contain Repton style apple and grass puzzles but ended up as something to rival Giant Clam in Repton 1. Now, better get back to adding some Magyar to ClapTraps before my daughters get back from school today or they won't be amused!
Well, the road to good intentions - I got distracted and ended up designing a level.
Not bad for a first attempt
It was supposed to be very cerebral and contain Repton style apple and grass puzzles but ended up as something to rival Giant Clam in Repton 1. Now, better get back to adding some Magyar to ClapTraps before my daughters get back from school today or they won't be amused!
Sunday, September 05, 2010
Showing Off
Well, I've had Prof. Steve Furber giving lectures in front of my artwork, now I've got the legendary Sophie Wilson playing with robot arms next to it.
The event was the Vintage Computer Fesitval, which was held on the 19-20th June at The National Museum of Computing in Bletchley Park.
The artwork, a long banner, was produced for R3PLAY - an computer exhibition which is going to be held on the 6-7 November in Blackpool. I've spent a lot of time on various bits and pieces for this event this year.
The extremely striking R3PLAY logo was originally designed as a raster image by Darren Doyle - better known as "Greyfox". I just about managed, using Inkscape, to reproduce this image in vector format so it could be blown up to enormous sizes for use on banners and posters.
The hardest part of vectorising the logo was reproducing the faint images of flags that are superimposed on the lettering - I had to trace these by hand and it was a long and quite fiddly job - particularly because the effect of the flags is quite subtle.
I also had a problem getting the Inkscape filters to superimpose "raster" lines on top of the lettering. I ended up having to superimpose filtered stripes on top of each other several times.
The raster lines themselves are squashed ellipses in a layer with the "Screen" blend mode enabled so that they make the layers underneath them lighter.
The final challenge was getting the red glow around the letters correct. Again, this involved layering several filtered copies of the lettering on top of each other, and it was quite a struggle to get it just right. However, the glows scale unpredictably, which means reworking them every time I resize the logo.
Underneath the logo were vector images I created in Inkscape by tracing photographs I managed to find using Google images. Tracing vector computers is a very straightforward job, and quite a pleasant one provided you have some music to listen to. The only hard part is matching fonts, and even that is easy if you have a Letraset catalogue from the seventies!
Not all the vectors I produced were used. For instance, here is my Acorn Electron:
One trick I used when doing this sort of thing is to make good use of the Inkscape Perspective plug-in to map square on views onto a parallelogram.
The pixel artwork at the bottom of the banner was produced by the world renowned pixel artist Gary Lucken (aka Army of Trolls).
In order to produce magazine advertisements from this artwork I did have to extend it slightly horizontally in The GIMP - I did it by copying elements form Gary's design - I even manage to incorporate the BBC Computer Literacy Project's owl.
Once I had created this expanded version of the artwork I set about creating the artwork for the adverts that appeared in retroGAMER* and gamesTM magazine. This was quite nerve wracking - to be honest I haven't been so nervous since I was first did graphics to be broadcast on television.
After much experimentation I decided on the 50s font Microgramma to be the "corporate font" for R3PLAY. I like the font, it looks both retro and modern and it was also the Commodore font from the early 80s.
I also produced an A5 version for fliers - Dave Moore is one of the masterminds behind the R3PLAY event, and shamelessly uses the fliers for promoting the show at every opportunity.
So my flier was stuck to Daleks....
And brandished by attractive young ladies...
Another early job was creating the tickets for the event. Again, another Inkscape job for a huge print run which I always find nerve wracking. I recreated both the Macmillan logo and the National Museum of Computing logo as vector images as I didn't have vector copies.
The tickets looked rather striking in the end, but Dave Moore told me had to bin the whole of the first print run of tickets and have them reprinted elsewhere in order to do them justice.
The final graphics for the adverts, fliers and tickets were exported as enormous TIFF files. However for things like the roll-up banners I had to produce PDF files. I found the best way to do this from Inkscape was to Print To PDF, rather than export to PDF from Inkscape. The latter method produces absoltuely terrible results, where as printing to PDF produces results which are flawless.
R3PLAY is organised by the non-profit organisation the Computing and Gaming Events Union (CGEU), and I was also responsible for tarting up their logo. The original was again designed by Darren Doyle. I placed it in a roundel, made the Pac-Man image a vector shape and added some depth to him and finally added some lettering in Inkscape:
One of my main jobs for the R3PLAY event was producing its website. In order to "save time" we decided to use Joomla and base the design of the website on an existing Joomla template from a commercial supplier who shall remain nameless.
This was a very frustrating experience as there were numerous bugs and several unfinished bits and pieces in the template we purchased and I ended up having to get rapidly expert in PHP and CSS in order to get the thing working as required. There were also no useful Photoshop templates for the artwork, so I ended up having to recreate all the source files for the graphics in The GIMP from scratch.
Obviously this was all good practice for me but not what you want when you are working against a deadline for a very exacting customer!
One of my favourite jobs on the website was producing the animated Pac-Man gif that is displayed about the advert on the home page.
To do this I took several screenshots from version 1 of Acornsoft Snapper in Tom Walker's excellent BBC Micro emulator B-Em, traced the sprites and animated them in Macromedia Flash 8 and then exported the result from Flash as an animated GIF.
R3PLAY looks like being an absolutely fantastic show, and well worth a visit if you can make it. Besides which, by attending you will be helping to raise money for two very worthy causes - Macmillan Cancer Support and The National Museum of Computing.
It has three strands - Consoles, Coin-Op games (including Pin-Ball) and Computers. The latter includes a strong retro contingent of the well known names such as BBC Micros, Electrons, Archimedes as well as the more obscure things such as Commodore 64s, Amigas, STs and ZX Spectrums.
Sophie's choice
The event was the Vintage Computer Fesitval, which was held on the 19-20th June at The National Museum of Computing in Bletchley Park.
Nice banner, shame about the carpet.
The artwork, a long banner, was produced for R3PLAY - an computer exhibition which is going to be held on the 6-7 November in Blackpool. I've spent a lot of time on various bits and pieces for this event this year.
R3PLAY vectorised - click to enlarge
The extremely striking R3PLAY logo was originally designed as a raster image by Darren Doyle - better known as "Greyfox". I just about managed, using Inkscape, to reproduce this image in vector format so it could be blown up to enormous sizes for use on banners and posters.
Outlined - click to enlarge
The hardest part of vectorising the logo was reproducing the faint images of flags that are superimposed on the lettering - I had to trace these by hand and it was a long and quite fiddly job - particularly because the effect of the flags is quite subtle.
Flags of all nations - click to enlarge
I also had a problem getting the Inkscape filters to superimpose "raster" lines on top of the lettering. I ended up having to superimpose filtered stripes on top of each other several times.
Stripes - just squashed ellipses
The raster lines themselves are squashed ellipses in a layer with the "Screen" blend mode enabled so that they make the layers underneath them lighter.
Five layers of outline with glow filter stacked
The final challenge was getting the red glow around the letters correct. Again, this involved layering several filtered copies of the lettering on top of each other, and it was quite a struggle to get it just right. However, the glows scale unpredictably, which means reworking them every time I resize the logo.
Underneath the logo were vector images I created in Inkscape by tracing photographs I managed to find using Google images. Tracing vector computers is a very straightforward job, and quite a pleasant one provided you have some music to listen to. The only hard part is matching fonts, and even that is easy if you have a Letraset catalogue from the seventies!
Not all the vectors I produced were used. For instance, here is my Acorn Electron:
The thinking man's ZX Spectrum
One trick I used when doing this sort of thing is to make good use of the Inkscape Perspective plug-in to map square on views onto a parallelogram.
The pixel artwork at the bottom of the banner was produced by the world renowned pixel artist Gary Lucken (aka Army of Trolls).
A Gary Lucken masterpiece...
In order to produce magazine advertisements from this artwork I did have to extend it slightly horizontally in The GIMP - I did it by copying elements form Gary's design - I even manage to incorporate the BBC Computer Literacy Project's owl.
...ruined by me. Sorry.
Once I had created this expanded version of the artwork I set about creating the artwork for the adverts that appeared in retroGAMER* and gamesTM magazine. This was quite nerve wracking - to be honest I haven't been so nervous since I was first did graphics to be broadcast on television.
After much experimentation I decided on the 50s font Microgramma to be the "corporate font" for R3PLAY. I like the font, it looks both retro and modern and it was also the Commodore font from the early 80s.
Finished Flyer - lots of Microgramma
I also produced an A5 version for fliers - Dave Moore is one of the masterminds behind the R3PLAY event, and shamelessly uses the fliers for promoting the show at every opportunity.
So my flier was stuck to Daleks....
Stupid tin boxes...
And brandished by attractive young ladies...
Edward Bernays has nothing on Dave M
Tickets, please...
The tickets looked rather striking in the end, but Dave Moore told me had to bin the whole of the first print run of tickets and have them reprinted elsewhere in order to do them justice.
The final graphics for the adverts, fliers and tickets were exported as enormous TIFF files. However for things like the roll-up banners I had to produce PDF files. I found the best way to do this from Inkscape was to Print To PDF, rather than export to PDF from Inkscape. The latter method produces absoltuely terrible results, where as printing to PDF produces results which are flawless.
R3PLAY is organised by the non-profit organisation the Computing and Gaming Events Union (CGEU), and I was also responsible for tarting up their logo. The original was again designed by Darren Doyle. I placed it in a roundel, made the Pac-Man image a vector shape and added some depth to him and finally added some lettering in Inkscape:
CGEU logo tarted up
One of my main jobs for the R3PLAY event was producing its website. In order to "save time" we decided to use Joomla and base the design of the website on an existing Joomla template from a commercial supplier who shall remain nameless.
This was a very frustrating experience as there were numerous bugs and several unfinished bits and pieces in the template we purchased and I ended up having to get rapidly expert in PHP and CSS in order to get the thing working as required. There were also no useful Photoshop templates for the artwork, so I ended up having to recreate all the source files for the graphics in The GIMP from scratch.
Obviously this was all good practice for me but not what you want when you are working against a deadline for a very exacting customer!
One of my favourite jobs on the website was producing the animated Pac-Man gif that is displayed about the advert on the home page.
Snapper is nothing like Pac-Man, honest.
To do this I took several screenshots from version 1 of Acornsoft Snapper in Tom Walker's excellent BBC Micro emulator B-Em, traced the sprites and animated them in Macromedia Flash 8 and then exported the result from Flash as an animated GIF.
I produced a forum Post footer too
R3PLAY looks like being an absolutely fantastic show, and well worth a visit if you can make it. Besides which, by attending you will be helping to raise money for two very worthy causes - Macmillan Cancer Support and The National Museum of Computing.
It has three strands - Consoles, Coin-Op games (including Pin-Ball) and Computers. The latter includes a strong retro contingent of the well known names such as BBC Micros, Electrons, Archimedes as well as the more obscure things such as Commodore 64s, Amigas, STs and ZX Spectrums.
Subscribe to:
Posts (Atom)