Concept Crazy:

The possibilities are endless, but architecture is first of the list (want to interact with architecture? Go and open a door...) Sifting through the clutter (or debris) of broken model making materials (models?) I uncovered my old magazines I used to buy as a kid. The internet of course, has made them redundant. These can be divided into cars and computers, and after finding a learn flash cd on a computer magazine, you know which topic I went for...

Having recently assembled a computer using bits and pieces I had lying around and some second hand items from ebay (never a good idea), I have plenty of knowledge about the topic. However, judging by the number of magazines I accumulated over the years, computers is a very, very broad topic.

I decided to focus on computer history. This was only covered in one magazine, quite briefly in about 10 pages. How hard can it be? And hence my concept is born - A Brief History of the Digital Age.

References: Australian Personal Computer Magazine, Dec 2003

Edit: After further research, a lot has happened since 2003.

Further References: http://inventors.about.com/library/blcoindex.htm <--- Even About.com only got up to 1985...

Some Tutorial Notes;

• Use Illustrator with Flash to achieve better visual style.
• Illustrator can make text follow a vector path
• Illustrator press tab to remove tools
• Use Keyframes / Frame Labels in Flash (F6)
• Free Transform Tool to manipulate (Alt)
• Use Symbols, especially Movieclips (_mc)

Presentation 1 - Concept:

I've listed some key ideas regarding my concept below.

Computer History is naturally boring, bland and broad because no one actually understands it. Hence the need for an interactive visual explanation. The challenge then, would be to condense the information and minimise the techno speak.

Techniques to engage the audience when presenting info:

• Non-linear approach, e.g. by country, or by component rather than chronological order
• Focus on most recent history the most, e.g. Web 2.0 business model resulting in facebook, youtube, wikipedia and online applications
• Avoid the bulk of the content but rather present small interesting facts. Windows increased the incidence of cyanophobia throughout the world (BSOD).
• Use parrallels with actual historical events, e.g. WWII and Enigma cryptography machines
• Time as a navigation aid using buttons or sliders. Also time as a method of comparison (faster pcs, less calculation time).
• Use popular culture (media, comics, ads) to get mindset of people at the time.
• Comic book like characters with dialog and actions essential when telling a story. Caricatures required though

Content: (Early Computing Highlights)

• John Napier invents logs and devises a mechanised multiplication calculator
• Charles Babbage designs two-tonne difference engine (video)
• US Census machines speed up counting from 8 years to 6 weeks
• Enigma machines, Colosseus machines during WWII
• more to come...

Presentation Ideas: Computers can be seen as either a:-

• Living, moving, machine. A physical object
• A virtual, unreal world of pixelated, jagged, high contrast graphics (video)

Overview: I summarised computer history into the following basic categories

• Early Mechanical Machines (e.g. with gears)
• Electronic Machines with vacuum tubes (e.g. ENIAC)
• Invention of Transistor, Development of Microchips
• Rise of Manufacturers (e.g. Apple, IBM)
• Creation of the WWW, email, Mosaic
• Portability Boom - rise of laptops, mobile phones, pdas etc.

References: http://blogs.intel.com/technology/2008/06/we_made_it_1_billion_pcs.php <-- Intel Celebrates 1 billion pcs -->

This week I spent a lot of time in Maya, a 3D modelling software package, to create a 3D model, complete with textures of my PC.

I am proud to say that I suceeded! I stitched together 6 photos (one per side) using Photoshop. Then I measured the physical chassis dimensions, and accurately modelled it in Maya. Finally I applyed the textures to the model in Maya. Phew!

Video Here

Edit: 3D in Flash is tricky and not recommended in general. It's best to work in 2D in Flash and thats the way I'll go, hence this is somewhat of a dead end.

Some Tutorial Notes:

• Discovered interesting zoom effect:
• Overlay 2 identical images, larger copy at top, smaller copy at bottom
• Mask larger image with a shape (e.g. circle)
• Create motion tween with circle moving around the stage
• Now you have a magnifying glass effect without actionscript!
• To view click here. FLA file here.

Presentation 2 - Storyboard:

Experimenting with Photoshop = Very useful in exploring visual styles and memes for project. Can see what is appropriate and how it appears in relation to other elements.

Underlying visual style idea = Blueprint / Diagram. Interesting electronics diagrams contain various symbols and line elements interweaving to create "inside the pc" mindset. (here)

Additional visual style idea 2 = PC componentry. Zoom inside an open computer and navigate across various components (CPU, memory etc.) When mouse over on a component - component is engaged and displays history information using drop down menu system. (here)

Additional visual style idea 3 = Processor Die / Silicon Wafer. These microscopic images of the integrated circuit inside a CPU silently highlight it's staggering complexity. Despite the unreal appearance of microscopic images, they behave as texture and are unobtrusive, calm and harmonious. They add the physical object perspective of computers to the project. (here)

Additional visual style idea 4 = 10101010. Binary numbers can offer a very strong visual style to an image. Binary is the blood of computers, flowing throughout the circuits and components. I generated a batch of binary numbers via a custom written visual basic application and used it to create a background. (here)

Extra: Binary creates texture, solids and voids, 1's & 0's. Computer Patterns. Interesting.

Additional visual style idea 5 = Revolving computer chassis. Using my Maya model (see above), I could import a rendered movie clip into Flash. When you click on the revolving computer chassis, you zoom in, and the internals of the pc open up before you.

Change In Subject Matter:

As the project due date is getting nearer & after two presentations feedback from Neil and Rob, I've decided to ditch the Brief History of the Digital Age idea. Here are the reasons:

• Interactive.
• Multimedia.
• Design.
• Not massive amounts of text and information overload!

Put simply, a history is the wrong way to go in a project where interactivity and visual style dominate. Minimal writing should be present rather than vast quantities of text.

Although the "Computer" theme will remain, I've brainstormed the following new ideas:

• How Things Work = Multiple Gadgets (GPS, Mobile Phone, MP3, DVD) are visual blown apart into their sub components to show how they operate. Several issues of the Australian Personal Computer magazine have done this. Then you can zoom out and see the whole device.
• Information on one retro component, for example the transistor = While similar to the old history idea, the subject matter is much much smaller and more specific.
• Computer Guide = A guide for people who know little about computers how their computer works. e.g. what is cpu, memory, hard drive etc. for and how does it work

While I am still considering the merits of each concept, I am leaning towards the concept mentioned at the first dot point. To help get throught these dark times, click here to read a computer themed online comic, Ctrl-Alt-Del. It really conveys the mindset of the people on various issues in a light hearted way, using characters and actions to better communicate the story.

Animating Text With Flash:

You've probably already seen this as the into to this page but...

After yesterday's tutorial on animating text with flash, I thought I'd try it out for my process diary...

If you suffer from epileptic seizures you might wanna skip this one.

You have been warned. To view click here. FLA file here.

The Concept:

Ok, I have a concept (drumroll...) a Computer Selector / PC Creator Applet. Basically a user inputs their budget ($ amount) and user type (business, gamer etc.) and the applet selects the appropriate computer for the user.

What this means is that the Computer Selector shows exactly which individual components the user needs. The user can later put together all the components (which are all compatible) and assemble them into one computer. This computer will be optimum for the user type and meet their budget.

Additionally, each component will have information attached to it which states it merits, specifications and features. This way components from different systems can be compared.

At the same time the applet offers a high degree of interactivity, visual style and design to convey some of the previous ideas and concepts I discussed earlier. These include the computer as a physical object concept (processor die texture) and virtual enviroment (binary texture, command prompt interface).

For the first time, I am truly satisfied with my concept. It feels just right and I am truly motivated to start creating it. Even though the work ahead is demanding...

For a very early draft preview click here. FLA file here. Note: Unfinished Work!

Edit: Have to mention the three very useful flash feature / actionscript code utilised in the project *note may not be present/complete in draft preview:

• World Map Tutorial (by Rob) - allows user to navigate the stage using mouse over, drag and the keyboard. Smooth motion physics too...
• Movie Clip Buttons (Google It) - because standard Flash buttons just don't cut it! Allows buttons to animate and support much more functionality.
• RGB Slider (Google It) - allows user to use sliders to change an object's colour. I customised the actionscript to start black ---> white fade and then display a host of unpredictable colours the user can customise. Allows for a unique, individual end user experience.

On Research:

A project like PC Creator demands extensive research that is impossible to document fully. This applies especially to component selection part of PC Creator where often much more information is processed and only selected information used. Yet knowing the "bigger picture" of how various hardware works / performs is essential. Below are some websites I used for research (to go to their site, Google them):

• Xbit Labs <- Core i7 information
• Bjorn3D
  AnandTech
• ExtremeTech
• GadgetAdvisor
• Bit-Tech.Net
• Intel
• AMD
• Seagate
• Western Digital
• Dell
• Netgear
• Gigabyte
• MSI
• Kingston
• OCZ
• Corsair
• Cisco Systems
• DFI
• Trendnet
• Sony
• Nvidia
• Wikipedia <- Good for information on prefetch buffer :)

The Final Debug:

Right, it's been a hectic last few couple of weeks and finally I'm done. To cut a long story short, I'll post the final release project files below for you to play with. Following this I'll add the necessary release notes and further info.

Final Release PC Creator click here. FLA file here. Note: Finished Work! Latest Release 3.3.0

Additional Mirror: here (SWF) here (FLA)

(Missing Links? Look in Dropbox)

Release Notes:

Adobe Flash Player 9 is required (duh!)

Fonts - Custom Fonts resembling a digital clock are used and should be embedded into the SWF file. However you may need to download them if you experience issues:

• Download Fonts Here (ZIP)
• Extract all 4 font files
• Copy them into C:\WINDOWS\Fonts (PC) or System Folder (MAC)

One new element you'll notice straight away is the preloader. Although initially I used another basic preloader script as a reference, I created a completely new preloader with my own code and design. The " Binary Preloader" is designed to convey the computer as a living, moving machine with blood of 1's and 0's.

To see the preloader in action (please..!) use a mirror with a slower connection such as here or download and use sloppy, a slow connection simulator here. Recommended connection speed: 1.5mb

Like this post is titled, the final debug (yay!) I did a lot of debugging while creating this project. I can confidently say that final release flash movie is solid as a rock. To the best of my knowledge, there are no bugs in the code, and whatever the user tries to do, it'll well, work.

Have to say again though my actionscript skills improved heaps, and I feel confident now to program in actionscript.

One function that you may not be aware of is that at the first preloader screen, you can hit space instead of pressing on the mouse button. Ensure Flash Window is selected first though.

Regarding price / budget information - This does not include the network router displayed. The component selection / price quote was accurate at the time of publishing (November 2008). The "Extreme" catergory has no price limit on components, indicated by the "+" in "$5000+".

The information/text for PC Creator is sourced from many sources and rephrased in my own words.

In creating this project I wanted to give the user an unpredictable, customisable interactive experience. What this means is having the ability to select background colour of their choice and having a completely random number preloader system that's never the same!

For support email me: dsaz8325[at]mail.usyd.edu.au or denis001[at]gmail.com

Cheers,

Denis Sazonov.