I often spend idle half hours looking around flickr for anything of interest. The other day I found a very nice Anglia logo from 1959. Obviously, I couldn’t resist recreating it in Inkscape while I was listening to a pod-cast:
Click to enlarge
This stylised Anglia pennant logo formed the basis of Anglia Television’s original end-caps, including the one seen on their opening program.
Roddy is a lighting engineer, electrician and visual effects designer. He is now based in South Yorkshire but grew up in ATV Land. Roddy’s TV career started in the Central Television film department, working as a spark on such programmes as Peak Practice and Boon.
As with Oliver Postgate, Roddy’s branching out into visual effects design happened quite by chance when a director noticed how practical he was and decided he’d be the perfect person to knock up a semi-practical suitcase nuke for a film!
In 2009 Roddy thought he’d like to have a go at creating a working replica of the ATV station clock from the sixties. As far as I know, this clock only exists as an off-air photograph in the Transdiffusion archive.
Station clocks used to be shown at numerous times during the day by all televisions stations from the 1950s to the early 1990s. Giving the correct time was not only seen as a valuable public service to the viewer, but the clock equipment was used to sync the studio’s signals with external sources. This was vital to prevent visual glitches such as this:
Roddy asked if I could supply him with the artwork in a format suitable for printing, something I was only too happy to do. I sent him two Inkscape files, one for the clock face, the other for the hands:
Watch your face…
Roddy soon had other things on his mind – a new addition to his family! – and I thought no more of the model clock.
However, earlier this year Roddy started asking me questions about my Flash recreation of the BBC Schools dots. The BBC Schools dots were shown in the minute immediately preceding BBC One’s programmes for schools and colleges between September 1977 and June 1983.
In the final year the dots were digitally originated using technology similar to Richard Russell’sGNAT clock, but before that the dots were a mechanical model in the “Noddy room”.
The Noddy room was a special studio in the BBC that held various mechanical models and 12″ by 10″ captions. These were captured in black and white by a remote controlled camera that used to “nod” up and down as different ones were selected – hence the name “Noddy” room. Colour was usually added electronically to the images before they were broadcast.
Roddy discussed the lighting for the dots:
The lighting for the BBC Noddy wasn’t anything specialised. It consisted of two P38 flood lamps (available from all good DIY/Electrical stores) – these are likely to have been photographic lamps – however the only difference being is the price and box they come in. They are the same voltage, wattage and colour temp. The lamps were attached to the camera, so wherever the camera was pointing that area would be lit.
So I supplied Roddy with the dots artwork as an Inkscape SVG file and I also uploaded my latest recreation of the dots in Flash to YouTube:
In May I was delighted to receive a mail from Roddy with a photograph of this prototype dots model:
Prototype dots, courtesy Roddy Buxton
The clock face is made from hardboard; though I am not happy with the results; as the dots are not that hard edged. I think I will end up using this clock face as a template to make the actual clock out of punched steel/aluminium – that way I can get hard edged dots.
Here are some more of Roddy’s pictures of making the prototype:
Holes drilled through the hardboard
Temporary captions applied to check sizing
Matt paint added to remove the reflections
I thought the prototype looked absolutely fabulous, and by now I was looking forward to seeing the finished product enormously. I didn’t have long to wait – on the 11th June Roddy wrote to say:
The artwork for the BBC “Dots” has arrived in printed form. The company I have used did all of my printing for me for £11 including P&P, and to the correct sizes – and in a matt finish too.
And on the 6th of July I finally got to see how the final schools dots model was progressing:
I showed the progress so far to my friend Rory Clark who summed it all up beautifully when he said:
Bloody hell – they’re impressive!
Not only that, but Roddy had started work on something else as well!
In Colour – the ATV Station Clock replica
Roddy assures me:
Another week and the dots will be vanishing ;-)! (Finally)
I’m very much looking forward to that. And I’m also hoping Roddy will also recreate some other models from times past – and it looks like I’m in luck!
Roddy tells me:
On the “to do list” – I have always wanted a BBC Globe – so will look at that. The “Diamond” is pretty easy to do (will definitely look at that!)
I’ve finally worked out I can put YouTube videos in my blog that can be viewed without having the Flash plug-in installed. Which is handy for me, as I don’t have the Flash plug-in installed. And presumably it’s also a boon for anyone using one of those ingenious new Apple etch-a-sketch things.
So, now I can watch stupid rubbish without using my daughters’ computer, here’s some that I (and Rory) made earlier…
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.
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’ve always had a fascination for the BBC schools diamond. In case you are not familiar with it, the BBC schools diamond was a mechanical model devised by Murray Andrew for use in the last two minutes of intervals before BBC programmes for schools and colleges.
I am ancient enough not only to remember it, but to have watched it as nature intended at primary school every week before a programme. I was always mesmerised by it, but my unimpressed teachers used to complain that it wasn’t as easy to understand as ITV’s schools clock.
Another day, another video of a rather lame mock uploaded to YouTube. We’re back to 4:3 again, and a short video a did to teach myself how to use Adobe Premiere Elements:
Before I bought Premiere Elements in early 2008 I’d never done any video editing before, so it was all very new to me. I did huge a number of videos to experiment and work out a good workflow to transfer my material from Flash or Fireworks to video. I recorded my work over and over again onto the same DVD-RW and then scuttled downstairs to the television to see how the results looked on a CRT television rather than an LCD monitor. As you can see from this video, I hadn’t yet worked out things like interlacing or how to age transparencies properly.
Although the first BBC 1 globe symbol I remember from my childhood was the black and cyan version with the italic “COLOUR” lettering, the first BBC 2 symbol I remember was the striped cylindrical 2. I saw this countless times waiting for Play School on weekday mornings or Play Away – the strange oasis that appeared between boring black and white films – on Saturdays. BBC 1 and ITV were showing wall to wall sport at the time due to their regulatory obligation to provide programming for the hard of thinking. Channel Four didn’t even exist. Play School mornings were usually accompanied by a cup of Mellow Birds made with milk. Despite being Julie Steven’s favourite beverage, it never seemed to dissolve properly back then, so you’d get little brown bits on the top…
When the computer generated ==2== symbol replaced the cylinder on BBC 2, I never really took to it. The cylinder’s animation was far more interesting, so I often wondered what would have happened if the stripey cylindrical 2 had been kept but updated. The end result, my “lolly sticks” symbol was created in Swift 3D. The animation does a very similar thing to the cylinder – the coloured stripes rotate in opposite directions – but to make it more interesting the camera does a 270 degree trip around the stripes as they do so.
Swift 3D – click to enlarge
One interesting thing about the lolly sticks symbol is that I created it at 400 x 300 in Swift 3D. As I was exporting it in vector format as a .swf it didn’t matter what size it was so long as the aspect ratio was 4:3. Vector 3D is something that Swift 3D really excels at, although it’s very good at raster 3D as well. After more experimentation I’d later scrub this approach in favour of working at 720 x 576 and correcting in advance in Swift 3D itself for non-square PAL pixels.
Thin hairline 2 in Flash
To get the striped 2 into Swift 3D in the first place, I drew it in Macromedia Flash 8. I drew it as a series of hairlines, and then turned the hairlines into thick rounded strokes.
Exactly the same graphic, stroked in Inkscape
After doing this, I turned the strokes into fills, and exported the resulting graphic as an Adobe Illustrator file for importing into Swift 3D.
GNAT Flash – Click to Enlarge
The clock is my Macromedia Flash 8 version of BBC Engineer Richard Russell’s computer originated GNAT (Generator, Network Analogue Time) clocks. The GNATs were used by BBC 1 and BBC 2 throughout the 1980s. There was even a rather nice yellow and blue Open University version for a few years. You can download a screensaver created using the final version of the GNAT software from Richard’s site. Richard has also written an article that discusses the history of the GNAT.
Teacher’s discipline problem #5435 – POW!!!!!!!!
The schools dots is again another one of my Flash 8 concoctions. This is the second version, where I finally got the font right! This, along with the clock, is the sort of animation that’s very easy to do in Actionscript, but a real pain to produce a version you can export to use in video projects.
Henry Woolf was even better with Charlie than with Pinter
The slide was based on a BBC1 version I did around ten years ago now for the sadly soon to be defunct BBC Cult website. I simply traced a screen capture in Flash that the BBC supplied to me from the opening titles of the programme “Words and Pictures”.
My treatment of the slide was very unsatisfactory – both in terms of the fading and blurring I used and the very bad banding that appears on the image. It looks very fake indeed, and one day I must get round to writing a post about how I would have gone about doing that job properly.
The music is from one of my favourite programmes – 4Square – and was composed by Ian McKim. The music was designed as a tension bed underneath a computer generated (Acorn Archimedes) maze game and made for a very exciting minute of television.
Anyway, technically a rather unaccomplished little video of another lame mock. But it brings back lot of memories and I enjoy watching it from time to time.
I had finished creating my BSB Squarial font on December 16th. It was now the December 17th, the event was on January 9th, Rory hadn’t yet received any BSB material from Kaleidoscope and time was getting short.
So, to make sure I had a fighting chance of getting an ident ready in time for Rory to use, I turned to the ever reliable TV-Ark site. I found some wonderful scans of BSB promotional material that I could use as source material. I started putting as much of this as I thought would useful into Inkscape.
The first thing I did were the channel logos – Movies, Now, Sport, Galaxy and Power Station. Due to the good quality of the source material I ended up being able to produce nice vector versions of these logos in Inkscape.
Five Inkscape BSB channel logos
I also used Google Image Search which sucessfully came up with some other source material I thought may be handy. At the fascinating Vintage Broadcasting site I found a fantastic IBA breakdown caption, which I recreated in Inkscape.
Inkscape IBA/BSB breakdown caption
…and a test card used for engineering tests. Again I recreated it in Inkscape.
Inkscape BSB Engineering Card
Another thing I found was the caption that was broadcast when BSB transmissions on the Marco Polo satellite ceased. Again here’s my Inkscape recreation.
Inkscape BSB Closure caption
It was interesting that they used Friz Quadrata rather than the BSB corporate font for this. I suppose they must have been past caring by then!
Once I’d done all this I sent it all off to Rory in Inkscape SVG format so that he could use or edit any of the files I created if he needed to.
The good news was that Rory had received the BSB material from Kaleidoscope. The bad news was that it seemed to be mainly third generation VHS stuff. This is a nightmare source material for recreation because the VHS format chucks away so much picture detail and colour information that recreating anything from grabs of VHS material is slow, frustrating and largely down to guesswork.
However, Rory did send back ident grab of a BSB logo which was very handy, and which I duly recreated in Inkscape. The letters are a bolder weight of the BSB font than the one used in the caption below it, so I drew them from scratch.
Inkscape BSB logo
The coloured ring in the BSB logo is quite interesting. To do this I created a coloured background that was made of a red, yellow, green and blue fills overlayed on top of each other and grouped into a single object.
Inkscape BSB logo with the ring mask unset
Then I created the shape of the ring, and used that as a mask over the coloured background.
My final port of call was Mike Brown’s excellent mb21 site. The mb21 site contains an extensive library of scans historical documents related to UK Broadcast transmission. What I was after was the famous BSB testcard complete with the girl who won the newspaper “be a the satellite test card girl” competition.
I created the testcard with a green circle in the centre in place of a photograph and a Kaleidoscope logo in place of a channel logo. The green circle was so that Rory could key in whatever he wanted.
Inkscape BSB/Kaleidoscope test card
Once I had done this, and sent it to Rory I had done about all the still images I usefully could so I couldn’t delay doing the animated ident in Flash any longer. I still had no audio too, but I decided I’d start creating an ident anyway and hope for the best.
After Channel 4 burst onto the scene in 1982 with its famous CGI blocks logo there had been a glut of shiny plastic and metallic 3D shapes whizzing about the screen in television presentation. That meant that by the time BSB came along just seven years later that sort of thing was all old hat. What was now in vogue was creating lots of soft fluttery layers of images on top of each other with subtle lighting changes.
This actually suited me, as I don’t have my copy of Swift 3D here in Hungary with me, so I couldn’t have created something very three dimensional anyway (although if I had had Swift 3D my finished BSB ident would have been much nicer).
The brief from Kaleidoscope was to create an ident with the BSB logo and the legend “The Quest Continues…” underneath it. Obviously thoughts of space and Star Trek and Dr. Who came to mind.
“The Quest Continues…” text would be easy – I’d simply zoom it into view with a trail Tyne Tees 1979 stylee. Clichéd, naff and typical of me…
Tyne-Tees style text zoom
For the background I used a nice picture of Pleiades star cluster that I found on Wikipedia. I’d used this before for a Rediffusion Christmas ident that I’d recreated for Transdiffusion. You can see it below, behind the Rediffusion ad astral logo – you’ll probably have to click on the image below to see it.
Flash 8 Rediffusion Xmas recreation
One of the things I wanted was to make a nice form-up of the diamond shape around the BSB logo that represented the BSB “squarial” receiving dish. I also wanted to make this a bit kaleidoscopic, in honour of the fact that the ident was being done for Kaleidoscope.
I decided on the simple device of making the sides of the box zoom in with coloured trails using Flash motion tweens.
I did an early test with solid colours – and this looked all wrong. It looked like a 1970s cel animated ident.
However, with some gradient fills and some alpha transparency it suddenly looked all right.
What a difference a fill makes…
Rory sent some audio and a genuine BSB Galaxy ident – this was handy because I hadn’t actually seen any real BSB presentation at this point.
I realised that I needed to make the ident longer, and I also needed to add some more elements to layer it a bit more and make it a bit more “Lambie-Nairn” than “Lamey-Dave”. I came up with some ribbons accompanied by Galaxy-style five-pointed stars.
Animating the ribbons in Flash
These were simply animated using shape tweens (shape morphs) in Flash. As well as tweening the shape of the ribbons, I anmated the gradient fill inside them to simulate the lighting effects. I used primary and secondary colours rather than the subtler shades that Lambie Nairn used as I wanted to get over the idea of “television”.
Completed ribbons layer
Again, drawing the ribbons in Macromedia Flash 8 was a horrible job and every second of doing it made me miss Inkscape terribly. Using Bézier handles in Flash 8 is fiddly and unintuitive and I can’t believe how much work I actually did using them!
I could have used Flash 8 Professional filter effects in my ident, which would have allowed Gaussian blurs, compositing effects etc. and made the end result both more pleasant to look at and created an effect more faithful to the genuine BSB idents. However I decided against this as if I had relied upon them and Rory couldn’t import them his end we would have been stuck. I didn’t have time to post him a DVD of an exported video file from Flash.
Rory, as always, immediately spotted what was wrong with my ident and added some beautiful stars that slowly moved towards the viewer, which made all the difference to the finished product. And here it is:
The finished BSB “Quest” ident
I’m really, really pleased with the way the finished ident turned out. My comfort zone is doing material from the 50s, 60s and 70s so I was really dreading doing a job that was supposed to evoke the late 80s. So to get anything approaching half-decent was a huge relief.
When I posted about my VHS and PAL plug-ins for The GIMP, I forgot to say why I originally wrote them. As I was using the VHS plug-in last night, I thought it might be interesting to explain what I was using it for.
I often find myself taking captions found on old multi-generation VHS tapes, and trying to recreate them in Inkscape (or, in the old days, in Macromedia Flash).
The trouble is that VHS changes can change the way captions appear. In particular, it changes the way the text on captions appears. This makes it very hard to match the typefaces used on captions with ones I have in TrueType, Postcript or OpenType format.
Take this caption, for example (click on it to make it bigger).
Could you help someone coping with franchise loss?
When I saw it, I knew immediately that the “PUBLIC SERVICE ANNOUNCEMENT” text was in Compacta Bold. However, when you create the caption in Inkscape it simply doesn’t look right (click on it to make it bigger).
Together we can beat pipe smoking.
As you can see, the text looks so much thicker it’s almost as if I’ve used the wrong font weight. But I know that the text is not Compacta Medium – that would be far too thin. And I also know there were no other weights of Compacta available to Scraggie and his friends in the Mecanorma or Letraset dry transfer lettering catalogues in the 1970s. So what’s going on?
If I load the Inkscape caption into The GIMP and put it through my VHS filter, which reproduces the mangling that VHS inflicts on television pictures, you get something that looks like this.
Dinage isn’t the problem it was.
The weight of the font in the caption above looks more like the original – and I’ve clearly used the right typeface all along.
The Southern Television logo is used courtesy of Nic Ayling.