Flash e-Diagrams



Have you ever wanted to convert your old, badly scanned circuit diagrams, data-sheets or flow-charts into something much easier on the eye? Perhaps you've built some neat electronic gizmo and want to share your skill on the Net or store the circuit-diagrams in a compact, vector format? Or perhaps you've got a ugly, blocky 64x64 pixel GIF image and want to print it out at 300 DPI?

Take a deep breath, ignore the temptation to hit the [ESC] button and discover something actually useful you can do with MacroMedia's Flash. :)

Hey, stop, read this!

Roughly 1 year ago I was given a very, very old Tatung Einstein 8-bit computer and in a fit of pure coding madness wanting to mess around with Z80 and transfer data between it's modest 4Mhz CPU and my Pentium4 monster. I'm sure most of you have never even heard of a Tatung Einstein. It is a rare home computer built way back in the early-middle 1980's. After throwing together a really cheezy cable and using the built-in memory editor I managed to transfer data across. Months later after buying some 2nd-hand user manuals and searching google I managed to find some very badly scanned data sheets for the CPU, Sound-chip, Video, I/O, Timer and Disk chips.The only problem was...

the text was unreadable!

I needed a way to recreate these huge, ugly data-sheet bitmaps into something like a real manual with searchable text.


Believe it, or not, Flash is more useful than you might think - but surprisingly NOT for doing yet another lame-ass website animation banner or terrible user interface with text so small than even atoms complain about its microscopic size. I understand why so many people (including sceners) really hate Flash - but for quickly creating vector graphics, attaching some action scripting and storing pages and pages of (interactive) diagrams in a very compressed way, it is useful.

Basically all you need to do is Import the bitmap you want to recreate into Flash on a Layer and then redraw your funky new version on a Layer above it. So you're simply tracing lines over the background layer. Hey, I never said it would be difficult ;)

The nice thing about Flash is the library and symbol structure. For circuit diagrams where you have lots of repeated components the symbols are a real life saver. For other things such as flow charts or wiring diagrams they save a hell of a lot of work - you only need to draw an item once, turn it into a symbol and you can use it again and again without having to redraw it. For complex diagrams you can simply split parts of it across different layers and then show/hide layers as you go. Of course MacroMedia's program does lack all the technical stuff that a true CAD or 2d/3d modelling package has, but most of these can be done in other ways. The nested structure of 'movie-clips' also helps when tracing a highly detailed image.

Another Way

Another way of tracing an scanned image (especially if its mostly text) is to switch your desktop resolution to the max, load up your favourite HTML editor and use the scanned image as a background. For columns of text split the page using tables and simply re-type the text over the top. Play around with the font size using a CSS (style sheet) and you should be able to type the new text over the top of the scanned image. Once you're finishing retyping the entire page, remove the background image, resize the Font and save your HTML page.

Closing Words

There are of course other ways to reproduce scanned images, for example using a bitmap-2-vector tracing program. Think about this, 90%+ of people have the Flash plugin (whether they like it or not). The beauty of Flash is that objects are stored as vectors so when you print a diagram out it doesn't matter if you have a 150DPI or 12000DPI printer you will get a crisp result. Even when viewing the diagram on the website you can right-click and zoom into it for a closer look (how many times have you wanted to do this with a GIF or JPEG image?). Combine this with the possibility to perform actions such as hiding certain parts of a diagram or displaying information and/or links when the user clicks on a button and it isn't difficult to see how useful Flash can be. IMVHO, it is a shame that Flash is much better at doing things it was not designed for.