Dan Zen Expo Code Dan Zen Museum Dan Zen Expo Archives

November 24 Dan Zen Expo Exhibit

Code 2

Dedicated to Lee Brimelow and the Flash Team

Coding or programming is how the logic and interactivity of a system like a game or an app are applied. The Code 1 Exhibit showed Dan Zen coding from 2014-2015 as he moved over to JavaScript with CreateJS and ZIMjs. This exhibit explores Zen's years coding in Adobe Flash 2002-2014. NOTE: make sure to press the SEE CODE buttons! Firstly, we present the Dan Zen Museum Coding Tour if you would like an introduction to coding.
Dan Zen Museum - Coding Tour
Coding Tour (2014) ▲ The Dan Zen Museum Coding Tour provides an example of what code can do and how it works written for people who have never coded. The purpose of the exhibit is to show how wonderful and important coding is in our information age primarily so that parents will encourage their kids to consider becoming programmers. The tour also gives a history of Dan Zen coding. TAKE TOUR
Droner (2014) ▲ Droner is the mobile app to control your friends! Droner is a multiuser app written in Adobe Flash ActionScript and published to Apple iOS devices and Google Android with Adobe AIR. The code is quite complex for the following reasons:
  1. Droner uses Flexive Design LIVE EXAMPLE - created by Zen to fit content into various screen sizes and later used as the basis of the ZIM Layout class.
    Dan Zen Code - Flexive Design
  2. Droner is a multiuser app where one or more people (Droners) simultaneously control one or more other people (Drones) for a period of time based on a code word. The multiuser is done with Robin (Flash and NodeJS) part of the Flash Feathers series by Zen (see below).
  3. Droner features packs of extra commands which are in-app purchases. Third-party code is required to hook up the purchases.
  4. There are over 150 commands to fit into a mobile app. Zen developed an elegant sliding interface to hand Drones and Droners and then a radial interface to handle basic commands and swipe menus for the packs.
VISIT DRONER SEE CODE
Dan Zen Code - Hipster

Dan Zen Code - Hipster Rotation

Dan Zen Code - Hipster Cropping

Dan Zen Code - File Uploading
Hipster (2012) ▲ Hipster lets you upload pictures of Hipsters and rate pictures on mundane tags like hair, pants, lame, etc. The app is for desktop or mobile and was programmed in Adobe Flash ActionScript and put in app stores via Adobe AIR. Dan Zen did a talk at CreateInTO on the Re-rise of Vectors - here are the talk slides where Zen discussed some of the coding techniques that went into Hipster including scaling for different devices, navigating multiple pages (later to become ZIM Pages), rotation, cropping and uploading. VISIT HIPSTER SEE CODE
Dan Zen Code - Tilty
Tilty (2013) ▲ Players hold their devices and physically jostle one another while keeping a rolling ball (via device accelerometer) in the middle of a target to avoid losing points. Tilty is coded in Flash ActionScript and published to mobile devices with Adobe AIR. Tilty follows the same page flow as Touchy, the 2008 Dan Zen game that was featured on Dragons' Den.

Zen initially coded Touchy in Objective C the native iOS language but eagerly ported the code to Flash when Flash was allowed in the iTunes store. Here is the code comparison with Flash being about 10 times simpler than Objective C in iOS.

Both Tilty and Touchy use a page system called ZenPages that was later turned into ZIM Pages. The ProportionDamp class made by Zen was introduced in Tilty to apply damping (easing or friction) to proportional values. For example, the acceleration x and y were converted to radial movement but this was not applied right away but rather a percentage was applied over time to simulate movement with momentum. This code was later used in the ZIM Code module. VISIT TILTY SEE CODE
Dan Zen Code - Hangy
Hangy (2012) ▲ Hangy provides an invisible grid interface. It also has adaptive design by changing layout for portrait and landscape orientations. Hangy is coded in Flash ActionScript and published to mobile devices with Adobe AIR. VISIT HANGY SEE CODE
Dan Zen Code - Blog
Dan Zen Blog ▲ There are more mobile Flash / AIR apps created by Dan Zen such as Gobstop, Trippy, Swoodle, Touchy and Wavy. During this time, Flash fell out of favour with the ad agencies because Steve Jobs banned Flash from the browsers of iPhone and iPad devices. Flash, despite being a superior platform and the huge number of Flash AIR apps on Apple devices has not quite recovered. Dan Zen wrote many blog articles in support of Flash such as: In the end, Zen has moved over to JavaScript with his library ZIM which makes heavy use of CreateJS to provide interactive media modules (See Code 1 Exhibit).
Dan Zen Code - Easy ActionScript
EASY ActionScript (2011) ▲ Dan Zen coded a light helper library to provide easy ways to do things in ActionScript. This type of thinking and some of the code, as well, was used later in ZIM Wrap and ZIM Code. VISIT SITE SEE CODE
Dan Zen Code - Flash Feathers
Flash Feathers (2009) ▲ Flash Feathers is a set of open source advanced interface classes coded in Adobe Flash ActionScript. Dan Zen coded these over a period of seven years while he helped pioneer the building and teaching of multimedia now termed interactive media. Here are some 2010 statistics: Here are the Flash Feathers:

ROBIN – multiuser chat and realtime game classes with Flash and PHPSAMPLE VISIT SITE SEE CODE
FALCON – easy data transfer between Flash and server scriptsSAMPLE VISIT SITE SEE CODE
HUMMINGBIRD – parallax effect with mouse movement for 3D menusSAMPLE VISIT SITE SEE CODE
GOOSE – multitouch emulator and processor with just Flash and BrowsersVISIT SITE SEE CODE
PENGUIN – tilt emulator and processor for tilt and translation appsSAMPLE VISIT SITE SEE CODE
WOODPECKER – sound frequency and wave animation for MP3 and FLVSAMPLE VISIT SITE SEE CODE
OSTRICH – motion capture so a cursor follows your Web cam motionSAMPLE VISIT SITE SEE CODE
DODO – blob detection to provide blobs anywhere there is Web cam motionVISIT SITE SEE CODE

Robin formed the basis if ZIM Socket - Dan Zen's JavaScript socket module that sits on top of SocketIO and NodeJS. Hummingbird is included as a Parallax class in ZIM Code. Penguin is now handled by device tilt data and Dodo is handled by multitouch events. Zen will be bringing gesture (cam motion capture) and sound animation into ZIM in the future as well as potentially some data classes similar to Falcon. VISIT FLASH FEATHERS
Dan Zen Code - Kitty Tartan
Kitty Tartan (2012) ▲ Desktop app made with Flash and published with Adobe AIR. A unique payment system was coded to activate when purchased with PayPal. The code analyses colors in a picture of a cat that can be dropped on the app and then makes random tartans (plaid) based on the colors in the picture. A spec with measurements and colors to make the tartan is also provided. VISIT KITTY TARTAN SEE CODE
OrbitZoom (2008) ▲ Desktop app made with Flash and published with Adobe AIR. OrbitZoom is a picture viewer where you can easily zoom and pan. You click on the picture where you want to zoom in on and then move the cursor away from the point you clicked. Click again to stop zooming. Then drag to pan. Orbitzoom also acts as a slideshow of the pictures in the same directory. The zoom technique was developed for Zen Picture Pan Zoom. VISIT ORBITZOOM SEE CODE
Dan Zen Code - Opartica
Opartica Tunnel (2010) ▲ Opartica Tunnel features extensive dynamic drawing with parallax for a 3D effect. The code includes a 10 level loop and condition set with commands like: pattern.graphics.drawCircle(startX+Math.sin((j+i*twist) *Math.PI/180)*radius, startY+Math.cos((j+i*twist) *Math.PI/180)*radius, smallRadius*pO["mod"+k].val); Fun stuff! Opartica also lets users share text based code to recreate shapes. VISIT OPARTICA SEE CODE
Dan Zen Code - A Million Clouds
A Million Clouds (2008) ▲ A custom JET particle class for a physics engine was written by Dan Zen for this light fluff of fun where you fly a guy in a jet pack around in slightly less than 1000000 clouds. // x, y, radius, thrust, angle, fixed, mass, elasticity, friction; myJet = new JetParticle(myBackground.width/2, myBackground.height/2, jetRadius*2); FLY JET PACK SEE CODE
Dan Zen Code - Zen Mix
Zen Mix (2006) ▲ One of the last Dan Zen apps to be programmed in ActionScript 2 on the Timeline of Flash - the old way! Zen Mix features resizing and blending of videos and pictures as well as an editing and publishing suite in this early Vlogging tool. VISIT ZEN MIX SEE CODE
Dan Zen Code - Zen Deck
Zen Deck (2005) ▲ Zen Deck powered the Dan Zen Deck interface as well as the Rich Deck game which is as complex as Ebay. The interface was kept separate and turned into a white label turn key system used by others for site interfaces. Zen Deck read in XML and was an early example of a rich Internet Web App. Programmed in Flash in ActionScript 2. Zen Deck also featured the Iconomizer component which allowed images to be scrolled by dragging them or by dragging a bar in the background of the component which acted like a scroll bar. This unique component was used in Zen Picture as well.
VISIT ZEN DECK SEE CODE
Dan Zen Code - Zen Picture
Zen Picture (2005) ▲ Zen Picture pans pictures across a square display - landscape pictures move horizontally and portrait pictures move vertically. This movement is seamless and speed increases based on the distance of the mouse from the center of the picture. Zen Picture Pan Zoom also introduced the complex zooming and panning interactivity later used in Dan Zen's desktop application, Orbitzoom. Zen Picture uses the Iconomizer component to scroll through pictures in the show. The show is specified by XML in which backing sounds and annotation text can also be indicated. Zen provided a sorting tool to visually organize pictures and then produce the XML for the show. Zen made almost 100 shows over the years until he turned to Flickr or OrbitZoom.
VISIT ZEN PICTURE SEE CODE
Dan Zen Code - Kirputnik Cam
Kirputnik Cam (2002) ▲ One of the first Flash apps created by Dan Zen is a tour of the workshop by Zen's robot, Kirputnik. The ride is a little bumpy and Kirputnik runs out of energy a lot. There is a little zoom going on here as well. Shades of things to come in augmented reality. Zen likes the little indicator in the corner showing which direction Kirputnik is facing.
VISIT KIRPUTNIK SEE CODE

This concludes our CODE 2 EXHIBIT which shows examples of Dan Zen's Flash coding. Certainly not all of the features are presented here but a representation from various years. In an upcoming coding exhibit we will look at back-end coding with PHP and PERL and early coding in Director. The exhibit gives a good idea of the hidden work and expertise that goes into a career in interactive media.
Dan Zen Creativity Framework