Creating an Interactive Typewriter in Flash.

I created this Interactive Typewriter for an Assignment while I was studying at Central Institute of Technology. The assignment required me to create a digital simulation of a real world object of my choosing in Adobe Flash. Some examples given to us were of a toaster that would cook a digital piece of toast to various levels of darkness depending on the setting chosen, or a digital Zoltar Machine that would tell your fourtunes. We were given an unusually generous amount of time to work on the project, so I decided to challenge myself an create an old fashioned Typewriter.

The first part of the assignment was to present a document that completely planned out the design and interactivity of whatever object we decided to simulate. I started by creating a flowchart of the interactivity that goes into a typewriter. Luckily the interactivity of a typewriter is fairly straight forward; The user presses a button, and that corresponding letter gets printed on the page. However a typewriter can be in a number of modes when a button is pressed, for example, if the shift-lock button is engaged then any letter printed would be in Uppercase, or if the Fig key is engaged then the corresponding symbol would be printed instead. And of course when the typewriter reaches the end of the page then the bell would ring and the user would need to perform a carriage return to get a new line. When creating this documentation I could start to see the computer logic needed when scripting the Typewriter later.

After finishing and submitting the documentation I'd created, I began to work on the look of the Typewriter. Since this was to be created in Flash, I wanted to be true to the medium and use all vector graphics for my typewriter. This also gave me the opportunity to improve my vector drawing skills since I hadn't done much of that previously. I started out with a reference image of a typewriter which started out as a free 3D Model created by VideoCopilot, and began to recreate the various elements as vector graphics. Since I had a generous amount of time to work on this project I could really pay great attention to detail to the shapes and gradients.

Attention to Detail

After finishing the graphics for the typewriter it came time to animate it. I had to separate every moving part into their own separate movieclips; every button, type-bar, the tape, and the carriage, and then enable each of these movieclips to be controlled via ActionScript. I then animated every button of the keyboard being pressed down over five frames, and then back up for five frames. On the fifth frame, when the button is in the down position, a snippet of ActionScript is called to trigger the corresponding letter to be printed onto the page. This is so the letter only gets printed when the button is in the down position, and not immediately when the button is clicked. I then painstakingly animated each type-bar to rise and strike the tape over the same number of frames. After I'd gone through and animated each of the buttons and type-bars it was time to focus on the ActionScript that would make it all work.

5th January 2014


Software Used:

  • Flash