Buttons

You probably have heard this before, but buttons are no longer coded to do their stuff within the button itself. All code must be in the timeline. Here is the typical way to make a button function now. After giving the button a name (myButton in this case), use this sample code:

myButton.addEventListener(MouseEvent.MOUSE_DOWN, doIt);

function doIt(evt) {
trace("I love Actionscript 3.0");
}

What is kind of stupid is that even though I'm not passing anything to the function and should have no need to put anything in the parens after "doIt", it will throw an argument mismatch error if I don't put something in there ("expecting 0 got 1"). So if that happens, just type any old word in there and it'll run. Code purists will flame me, but it works. I think it's actually passing a mouse event, so a lot of people will put (evt:Event) there, but it's really not necessary for it to work.

I also see people importing classes unnecessarily like this:

import flash.events MouseEvent

before they write the button code. The button will work just fine without importing that! Too many people seem to be writing and importing packages to do code that will run without it. There is a time when you want to do that, when you are working on large projects or in groups where you want to control code more, but for most projects it is entirely unnecessary.

Also, it is important to note that if a button is not going to be in the timeline until frame 10, don't put the event listener in for it until frame 10. Otherwise it will throw and error if you have the listener in frame 1 and no button for it to refer to.

Personally, I don't know why you would need to even write an event listener for a button. This would be an improvement to actionscript if it were understood that a button by its very nature should already have a built-in event listener. Hey, whatever. Suck it up I guess. Let's move on.

Controlling Movieclips

If I wanted to use myButton to trigger another movieclip (called movie2) also on the main timeline to play, I would write the function like this:

function doIt(evt) {
movie2.play();
}

But, if I have a movieclip (movie2) on stage and it contains a button that triggers the main timeline to play. I would have to write the event listener and function in the actions within that movieclip. Here is how I write the function (using the same button as before):

function doIt(evt) {
MovieClip(this.parent).play();
}

So, from within that movieclip where the button is, I have to come up a level before I can tell the main timeline to play. You have to tell it that the main timeline (this.parent) is a movieclip or the play function will not run, hence the MovieClip() reference.

So, to get a little more tricky, let's say I want that button within a movieclip (movie2) to control yet another movieclip (movie3) on the stage. Here is how I'd write the function:

function doIt(evt) {
MovieClip(this.parent).movie3.stop();
}

I think you get the idea.

Navigation

Let's say I have a series of photos that I want to create navigation for. To make Previous and Next buttons work, after creating and naming the buttons, I wrote the following code in the first frame, which I named "photo1":

var nextLabel:String = "photo2";

next.addEventListener(MouseEvent.MOUSE_DOWN,goNext);

function goNext(evt) {
gotoAndPlay(nextLabel);
}

stop();

Note there is no Previous button code since I'm only on the first photo. On the first frame of the next photo, I will name the frame "photo2" and in the actions I will have:

nextLabel = "photo3";
var prevLabel:String = "photo1";

prev.addEventListener(MouseEvent.MOUSE_DOWN,goPrev);

function goPrev(evt:String) {
gotoAndPlay(prevLabel);
}

So, in the first line, I'm updating the nextLabel variable to be "photo3" and introducing a new variable called "prevLabel" that points to "photo1". I then add an event listener for my Previous button which is now on the stage along with a new function called "goPrev" that takes me back to the previous frame label. Now for photo 3, all I need to do is to update the frame labels in the actions, which would look like this:

prevLabel = "photo2";
nextLabel = "photo4";

There may be a sexier way to do it, but this works without a lot of hassle dealing with label arrays and such.

Okay, that's it for now. Hopefully this will help you through a few sticking points so you can get on with your projects in Actionscript 3.0.

I was wondering whether something like this could be set up in a classroom to send video content to a computer set up elsewhere to receive and record the signal and prepare it for further distribution. Might be an interesting addition to Apple's Podcast Producer, or what TNS has been looking for to record Polycom conferences.

One big change in 3.0 is that there is no code permitted in buttons. All the code for controlling buttons is written into the actions layer of the timeline. Although it's quite a different way of working and requires more code, the one good thing I can say about this rule is that you don't have to keep opening buttons to see what the code is and where to change it. It's all there in the timeline. The bad part also is that ... it's all there in the timeline. At least opening the button you know what code goes with the button.

Another thing is that buttons don't automatically understand that they need to do something when they're clicked on. You have to tell Flash to listen specifically for when a button is clicked. In AS 2.0, I could click open the Actions panel for a Submit button and type in:

on (release) { play(); }

In AS 3.0 I have to open the Actions panel for a frame in the timeline and first create an event listener object like this:

submitBtn_mc.addEventListener(MouseEvent.CLICK, submitAnswer);

Then I need to write a function that will be carried out when it's clicked on:

function submitAnswer(event:MouseEvent):void
{
play();
}

In my simulation, however, it wasn't as simple as making the timeline play. I needed it to check which radio button was selected, update the counter, and then play so it would have to reload the data in the Flash movie. So here's what my Submit button does when you click on it:

submitBtn_mc.addEventListener(MouseEvent.CLICK, submitAnswer);

function submitAnswer(event:MouseEvent):void
{
photo.removeChildAt(0);

if (button1.selected == true) {
counter = destination1;
play();
} else if (button2.selected == true) {
counter = destination2;
play();
} else if (button1.selected == false && button2.visible == false) {
counter = destination1;
play();
}
}

Note the phrase in the above code that says:

photo.removeChildAt(0);

I had to add this because if I didn't, when I loaded a JPEG image into Flash, it would always stay there and not get replaced when a new one is put there to replace it. The new one would just go on top of it on another level. The code says to remove the child of "photo" (the name of my movieclip that I add the jpeg to) that resides at level 0. This would not have been necessary in AS 2.0, however, it looks like there may be more options if you can load more than one image into a movieclip on different levels.

Another whacky thing that really gave me a WTF Moment was that I could not easily change the font size and color of the text next to my radio buttons. The components in AS 3.0 are different than AS 2.0. I can no longer just change a few parameters for my component in the Component Inspector. To change the size, font, and color, I have to write some special code like this:

var tf:TextFormat = new TextFormat();
tf.color = 0xFFFFFF;
tf.font = "Arial";
tf.size = 14;
button1.setStyle("textFormat",tf);
button2.setStyle("textFormat",button1.getStyle("textFormat"));

That's real intuitive, is it not?

And here is the code I had to use to load the jpeg into a movieclip:

var request:URLRequest = new URLRequest(imageArray[counter]);
var loader:Loader = new Loader();
loader.load(request);
photo.addChild(loader);

No more simple loadMovie() commands.

One thing I do like in AS 3.0, however, is that to make a button invisible, you no longer need the underscore in front of "visible". It's just:

submitBtn.visible = false;

I did manage to get the whole simulation working in AS 3.0, but it took me a lot longer than I had ever anticipated. It also took a few bulletin board posts and some nice people to help me figure out WTF I was doing.

http://www.personal.psu.edu/pzb4/max/ccmbfsite.swf

He designed and animated the site entirely on his own. I only showed him how to code his link buttons properly and how to import the video clips into Flash. Not bad for a rookie, no?

The other neat thing about this is that my kids were able to figure out how to shoot a video using our digital still camera and upload it to YouTube on their own. I was pretty shocked.

My 17 year old is working on a Flash website for FBLA at his high school. It's a website that shows the Centre County Band Festival (he's in the Bald Eagle Area marching band). I'll post a link when he gets it done. I was really amazed at what he can already do with Flash. I showed him a few things, but he figured out the rest. Here is his Chickenzilla video he made in Flash (I've shared it with some of you already):
http://www.youtube.com/watch?v=mNzXX6MpYL8
He worked on it all summer. He had a bunch of his friends over to help him record sound effects. It sounded really weird not knowing what the video was about while they were recording (he used Audacity). I was pretty impressed with what he was able to learn on his own. I'll post the link to the FBLA site soon. He has to have it done by next week, but it already looks pretty good for a rookie.

The children of the digital age I guess. Better add a few more computer workstations to the Digital Commons

I blew the dust off the actionscript I'd written for the anesthesiology simulation with the idea of simplifying it and adding a couple of things. I don't remember if I mentioned before that I will be putting together a hands-on workshop for the 8th Annual International Meeting on Simulation in Healthcare in San Diego this coming January. Sounds pretty hoity-toity. I'll basically be showing people the technical end of how I put this simulation together and how they can use the same template to create other simulations in the healthcare field. And who knows, maybe some rich southern-California company will offer me a job with a huge raise to create such apps for them. And maybe monkeys will fly out of my butt, too.

Anyway, back to the sim. What I wanted to do in this version was to simplify wherever I can. So, I decided to drop using XPath, as cool and as hip as it is, because I was afraid that people would forget to use the data binding part of it and would be frustrated that their code is right but that it doesn't work for them. So I used my more recently acquired understanding of XML to pull in the data and parse it. Once I homed in on the correct path to the data I needed, it was simply a matter of changing one number to get the data for each different field from the database and push it all into their respective arrays. Here is what the code now looks like:

sims_xml.load('xml/sim.xml');
function processXML(xmlDoc_xml) {

// first we start a loop to get all the data from each field from each record

for (var n = 0; n<xmlDoc_xml.firstChild.childNodes[4].childNodes.length; n++) {

// each array corresponds to a field in each record
// the first one is the scene number
numberArray.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[0].firstChild.firstChild);
// then comes the title of the scene
titleArray.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[1].firstChild.firstChild);
// this is the photo associated with each scene
imageArray.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[2].firstChild.firstChild);
// this is the description of what going on in the scene
descriptionArray.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[3].firstChild.firstChild);
// this is the question that is posed to the user
questionArray.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[4].firstChild.firstChild);
// the next 4 things are the possible choices
choice1Array.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[5].firstChild.firstChild);
choice2Array.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[6].firstChild.firstChild);
choice3Array.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[7].firstChild.firstChild);
choice4Array.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[8].firstChild.firstChild);
// the next 4 tell the simulation which scene to go to if that choice is picked
choice1DestinationArray.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[9].firstChild.firstChild);
choice2DestinationArray.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[10].firstChild.firstChild);
choice3DestinationArray.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[11].firstChild.firstChild);
choice4DestinationArray.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[12].firstChild.firstChild);
// this is the background image for the simulation (could be different rooms, for example)
backgroundArray.push(xmlDoc_xml.firstChild.childNodes[4].childNodes[n].childNodes[13].firstChild.firstChild);

}
}

sim_xml.load('sim.xml');

Ok I see your eyes glazing over. The important thing about the above code is this - once I got the code right for one data field, if you look closely, each one thereafter was one number more (look at the last number in brackets for each line). Also note that they must be in the order that they appear in the XML file, so if you decide to add a field in the database, it's best to export it with that field at the end or it will hose the code.

The reason I mentioned the Sport Museum Kiosk was that what I learned in that project I'm also applying here in the sim. The kiosk has been used by the general public now all football season. The one problem we had with it was that occasionally it would act completely weird. Data would get confused with other data and the scrolling list of names would suddenly scroll to the end without even touching it. I was unable to duplicate this problem on my Mac. Worked perfectly every time. What I eventually came to figure out was that the interface was offering links to data that had not fully loaded yet. So, what I had to do was move the display of the links back a frame from where the XML is loaded, then tell it specifically to go to the next frame once all the data is loaded. So far so good. No more complaints. I think I have this problem licked. I'm employing the same strategy with the simulation. Make sure the gun is loaded before you try to fire it.

In a separate version of the simulation from what I'm doing for the workshop, I'll add some features like having a timer and a default scene for the sim to go to if someone takes too long to decide. Another feature is what we might call a dice. By that I mean that if the chances are 80% that something should happen, the Flash simulation should do something else 20% of the time. I haven't fully worked this part out, but I think I have an idea how I'm going to do it. It may involve another field for a time limit and one for the default scene to go to if they don't choose quickly enough.

As far as the 20% of the time idea goes, I'm not so sure how to implement this yet. If you had four different choices, you might have 4 different alternate outcomes other than the one that it would go to 80% of the time. Or perhaps there are only two real results, I don't know. It may depend on what the choices are. We will have to discuss this further, and it definitely won't be something we implement for the workshop in San Diego.

Well, that's all for now. I already wrote a lot more than I'd planned to write.

...

Gave a brief history of animation. Showed Muybridge and talked about persistence of vision. Showed example of animation and exaggeration. Talked about how Hanna-Barbara revolutionized animation. In 1940 a 6 min Warner Brothers cartoon cost $50k. They did a 21 minute animation called Ruff N Reddy for $2800 using "limited animation", which was the concept of keeping the head and body parts separate so that they did not have to be redrawn. Showed 1955 Nash commercial featuring Mickey Mouse (on YouTube).

Created an animation live using "stretch and squash". Draws on the canvas, then pulls points until he likes what he has. Adds features by drawing in a different color, deleting lines underneath that are not needed, then making the color black like the rest of the outline. Duplicated the contour of the face in another color, filled with a lighter color, then moved it to create a highlight and shadow. Separated body, eyes, and head as graphic symbols. Used "flinching" to add to character movement. So, the head would not just move left to right, but would pop up and down slightly while doing so. Used onion skins to create a front view of the character for a smoother change from left to right. Added blur lines to the front view that really helped sell the movement. Said he bought a TIVO and kept slowing down cartoons to see how they did movement. Showed us an animation of a crab (Flash's first mascot) and how it was created. All eye and mouth movements are in one graphic symbol and he jumps to different frames of that symbol to invoke that particular eye movement. Uses Single Frame First 32 in properties to call that individual movement. Important concept is that he uses graphic symbols instead of movie symbols to nest animations. Showed us a show reel that included some video with animation mixed over it (like Roger Rabbit) and told how he pulled it off. Reuses as much animation as possible.

General Session

Bruce Chizen - CEO of Adobe
Feels weird about being a CEO and the pitfalls of being in such of a position, but discussed why it's all worth it to him. Said he got backstage passes saturday night to the Dave Mathews Band and said that they couldn't stop talking about the new Adobe products that the band can't wait to use. Then he headed out to this conference and it dawned on him that 4000 people were paying to come here and that he was just amazed with what people create with Adobe products. His objective was to inspire us, but he is instead inspired but what we do as users.

Steven Webster, Adobe Consulting
Enterprise Applications
A rich internet application experience is dependent upon what goes on at both front and back sides of the glass. Showed MFG.com - Uses Flex to manage data in real time for world buyers and suppliers bidding on RFQs. LiveCycle ES, built on Flex can manage data services, forms, rights management, digital signatures, process management, output, reader extensions, and barcoded forms. They can take a paper form and turn it into a rich internet application. Once a supplier is awarded a contract, the other bidders can no longer view documents that have to do with that contract.

Doug Mack
Scene 7, an Adobe Company
Leading "on demand" rich media publishing services. Enables creation of enhanced website experiences. Dynamically rendered "single master image". Gucci.com - all images are dynamically delivered. Very elegant display of images and closeups rendered on demand. RDV - designing a football uniform that is rendered live on the website. Can render an uploaded logo onto a uniform in real time with perfect photo-realism. QVC has a desktop Air app that allows you to browse products while watching live video feeds.

SHAREbeta
Free gigabyte of storage for people to share files. Can select access level and can keep track of who you shared files with before. Can embed files in blogs and automatically creates thumbnails on the sharing interface.

Danielle Diebler
Pacifica, new Adobe product
High quality voice for Adobe Flex and Air developers.

Nigel Pegg
CoCoMo
Adobe Acrobat Connect - New version built on new client/server architecture code named CoCoMo. It is now based on Flex. Real-time data messaging, real-time AV streaming, user identity presence & permissions, realtime publishing and collaboration. Showed some code that should be easy for developers to include real-time video in their rich web applications. Shared whiteboard is a component that can easily be added as well.

Mark Anders, Steven Heintz
Thermo - RIA Design Tool
Makes it easier for designers to build rich internet applications. Helps them wire in interactivity without writing any code. Has a seamless workflow for developers working with Flex Builder. On a blank canvas, he dragged a rectangle and changed properties such as the color. It automatically wrote some MXML tags to represent what was drawn. Pulled up a static comp in Photoshop. In Thermo, he started a new application and imported the PSD file, preserving all properties of the PSD file. It again automatically wrote the MXML code for the layout. Using the layout as a background, he selected the text and created a text input control by right-clicking it and selecting text input control from a dropdown menu. It retains the same font and style as the PSD file. Selected a row of album cover thumbnails and converted the row into a list of albums. Clicked on one album cover and set behaviors for rollover that includes transitions. Made the rollover state larger just by dragging the icon larger. Added artist name and album name to the rollover state. Transition was a tween between normal and larger state on rollover using a timeline to control speed of the transition (just like flash). Set the album and artist text fields to be dynamic. Created a scrollbar from a graphic of a rectangle by selecting it from a dropdown, then wiring it to the album list visually by making a line to it. No coding was involved at all in creating the interface. Everything is done automatically. This was a very impressive demonstration. Basically, an artist can create a live application from a Photoshop file.

Flash Media Server 3 will be released in 2008 as well as Adobe Media Player.

Introduction to Actionscript 3.0
Chris Florio, Professor of Interactive Media at the New England Institute of Art.
This was a hands-on session, but we mostly observed. There are about 10 different concepts that need to be mastered to know Actionscript 3.0. Actionscript 3.0 differs from the previous versions in that none of the code may go into individual symbols like buttons. All code must be entered into keyframes. AS3 is not compatible with code written in AS3, so there could be some interoperability issues. Even though AS3 is more verbose, the typical user will pick it up quickly once they get the hang of how buttons are implemented via event listeners. Most end up liking AS3 better. It is more consistent in that in AS2, there could be many different ways of doing the same thing, whereas in AS3 there is usually one correct way. It is more like a regular programming language now and is much faster at runtime. This was a good overview of what changes have taken place in AS3 and a good primer on getting up to speed quickly.

Branding and Protecting Flash Enabled Video
Robert Reinhardt, VP Multimedia Platforms Group, Schematic
Not much they can do until Flash Media Server 3 comes out yet as far as protecting videos. Talked about why Flash is a desired platform for video: ubiquity, player dominance, express install and autoupdate, player SDK availability, cross-platform reliability, high quality visual experience, collaborative environments. Showed different sites - ABC.com full episode player and Nicelodeon.com video, and how they can adapt the Flash player to fit their desired audience. Also showed ShopVogueTV, which was built on a Flex framework that doesn't look like a typical Flex site. For people who like to watch the ads and shop for products related to them. New AVC/H.264 codec will have superior image quality and compression. Available in Flash Player 9 update 3. Compared the two codecs, Spark and VP6. VP6 is more desireable because it can deliver higher quality at a lower bit rate. Spark would have to be used to make video backwards compatible with earlier versions of Flash. Turning Smoothing on for playback will result in nicer video, however, some pre-Intel Macs may bog down with it. Not many people know about this playback option (it is not a compression option). http://blogs.flashsupport.com has an interactive video bitrate calculator in the form of a wizard. Video codecs such as On2 VP6 and Sorenson Spark perform better when the frame width and height use multiples of 16. While you can use any width and height in your encoding settings, non-optimal dimensions can result in poor image quality and reduced frame rate. For the best image quality and playback, you should always use width and height dimensions that use a multiple of 4 (good), 8 (better), or 16 (best). Showed a few examples of things from his book including a video class for AS3. Showed an example of captioning component FLVPlaybackCaptioning available for AS3 that can turn captions on and off. Showed how nicely the captions scaled when displayed full screen on the projectors screen. Made a customer skin that hid the playback controls to make the user watch an ad before the video. Used code to completely control the display of the video. Can cue up a bunch of instances of videos for the same FLV playback component.

Shantanu Narayen, president and CEO of Adobe:

How do we engage our audience? Make customer the focus of what we do. Great digital experiences are the exception, not the rule. Lessons learned on user focus:

1. Content is king - interface is often a barrier to to the content. Think about the content first and make interaction flow around it.

2. Make it personal - s/w should provide what the user wants when they want it. Phone demo. Designed for middle aged person, TV-based interface design. Phone interface design for teenager - multimedia, video, fun oriented. Adapt the user interface to the target audience.

3. Less is (still) More - We are in a constant state of information overload. Focus on the heart of the problem and make the user experience simple. Showed demo of Premiere Express - very much like iMovie - drag and drop interface, simplified timeline, add captions, borders, transitions.

4. Movement has Meaning - cinematic affects and transitions can help the user experience. Adobe Media Player - Glide UI - helps your navigation by directing what your eyes see via movement.

5. Create an Experience, Not a UI - California bike race website - shows video of race and overhead view of GPS location of bikers during the race, chat built into the site, mulitple media engagement.

Kevin Lynch:
Applications
Video - Flash is now the #1 video player around the world. Will now support h.264 (embedded into the player). Will be easier to deliver video to multiple platforms. Moviestar - HD video up to 1080p delivered over the internet, multicore cpu boost, Example - Halo 3 - used flash player for interactive experience even though it's a Microsoft site. You'd think they would use Windows Media.
Adobe Media Player- collect and watch videos - catalog of video feeds via rss. Can connect ads to videos to monetize them. Now available.
FlashLite 3 - now available for creating content for mobile devices.

United Way website demo - used Adobe s/w to build their site. Cold Fusion 8 and Dreamweaver CS3 were used to enhance the site. After filling out a form, it creates a more user-centric experience. Pulls in local information, depending on how you answer the form, it may direct you to different pages. If you have children, it will direct you to a page that shows family volunteer opportunities in your area. Used Flex to dynamically generate jpeg images of volunteer tips.

Rich Internet Applications
ScrapBlog (scrapbook blog) - drag and drop images, edit, rotate, create multiple pages. Can make thought balloons over people's pictures, Published directly to the web.

Adobe Air - to enable the creation of cross-platform desktop applications, includes an embedded SQL database, Customer Manager demo - sales rep field tool. Built on html and javascript. Uses web to do update a database of contacts. Can send info back to the live database. Written by one person in a couple of days.

Flex 3 - New features: Flex Profiler, Language Intelligence, Advanced Data Visualization Comps, Flex Framework Caching. Profiler - graphs memory useage over time, detailed view of all objects in memory, shows all methods and the time it is taking to run them. Helps to debug applications. Data visualization gives quick at-a-glance charts of application information. Framework caching - downloads application framework once, never has to again.

Air Developer Derby - Finalists were Spaz.air, Ora Time Tracker, Agile Agenda, SearchCoders, Digimix. Winner was Agile Agenda, which is a project management app. ebay, AOL top 100 videos, SAP, PayPal, Philips, Disney Parks, QVC are all developing Air apps. Disney in partnership with Frog Design created an app that gives travel agents easy access to Disney's travel information. Synchs content from Disney servers. Customer management list for agents, Can embed video and rich media in trip quote. Can drag in custom content to be sent to the customer. Follow-up built in as well.
Other examples:
Tweeter, Snippage (make yoiur own widgets), Pronto (email/calendar app), Analytics Reporting Suite for Google Analytics. PayPal app, can drag and drop content between Air applications. SAP Briefing Book - most recent data, can do data modelling, Digimix (sound editing app) - can add tracks much like Garage Band
WaveIM, Pounce, Nickelodeon app - can interact with web.
Word Processing - Refrigerator magnets for desktop
Buzzword - like GoogleDocs, but nicer looking. XML rendered real time, wraps text around pictures, tables, sharable. Adobe has acquired Buzzword.

Anthropologie - catalog app - amazing sorting capabilities, updates automatically. This could be the way catalogs are distributed in the future. They will update with new content via RSS automatically.

90% worldwide adoption of Flash 9.

Astro - codename for next Flash. Advanced text layout support. New layout engine supports bi-directional languages, text is now an extensible part of the platform. Native support for simple API for transofroming display objects in 3D space, full interactivity, high performance. Custom filters, blend modes and fills. Build your own effects. Hydra - new programming language Adobe is working on that allows you to create your own filters. Very close to Actionscript.

Design Shootout

3 designers showed some of their best techniques. One mapped a logo on a photo of a large builiding in Adobe After Effects, then created a 3D animated movie of the building turning slightly with moving video of sky behind. Another was in Photoshop where the designer added a surfboard to a photo and rotated it in 3D before pasting it. Another was filtering out a cell phone ring using Sound Booth CS3, which is aimed at audio editing for novice sound editors. Removes unwanted sounds like coughing, sneezing, HVAC, etc. Shows a color visualization of the sound wave. You can actually see the cell phone wave image in color. Uses Photoshop-like tools to select and edit out the offending sound. Can select and play only that sound. Can use Auto Heal (like healing brush in Photoshop) to resample the sound around the edited sound to fix it. CS3 includes new video components for Flash video (using Actionscript 3). Explained trigger points for captioning video. Can allow importing cuepoints (xml from Sound Booth). Showed a different way of displaying captions. Made text appear on a piece of cardboard that a guy in the video was holding. Another demo showed animating a 2d picture of a bird on a bicycle wheel. Selected bird and cut it and pasted it to a new layer. Fixed area where the bird was with clone tool. Puppet pin tool was used to choose where you want the object to pivot. He was able to animate the 2d image of the bird and make him start pecking the bike tire. It was very realistic and pretty amazing.

Adobe CS3 Tools Overview

Showed some of the highlights of each of the tools and some very amazing things that are now possible, like mapping a label on a soda can and manipulating the can in 3D. Dreamweaver is able to take a Photoshop design and easily create a web page out of it, incorporating elements of the design and preserving editability. Photoshop - showed how you can take two similar photos of a group of people and keeping the best parts of each photo into a combined photo by creating a mask and painting out the parts your don't want. Also showed creating a seamless panoramic photo created from a series of overlapping photos. You could not tell where the photos were joined. Very impressive. Showed new auto-selection tool and how Photoshop can now treat the original photo as a symbol, which will preserve it even though filters are applied. Makes it easy to undo or adjust filters later.

Flash and After Effects

Talked about 3D text, modifying animation presets, motion tracking, parenting, track mattes, markers, and FLV encoding via the render que. Also covered importing PSD files, importing video, basic actionscript, event cue points. Showed a bike race video with 3d text revolving around a rider. Showed interactive data of each rider.
Started by importing video into After Effects and creating a new composition. Used animation presets to add 3d text effects. You can view previews of each preset in the Adobe Bridge. Selected text revolving in a circle. Adjusted the angle of rotation and entered the desired text. Then adjusted the circumference of the orbit. Used the motion tracker to attach a tracking point to the biker's helmet and linked the revolving text to that tracking point. Text now rotates around biker's helmet no matter where they go in the video. He then created a mask so that the text would appear to disappear behind the biker. Used parenting to link the mask to the revolving text. After Effects can do Flash cue points and FLV compression. Can batch render and render to different formats at the same time.

I mentioned it in a previous blog post that I was working on a touch-screen kiosk that the PSU All-Sports Museum needed. Today the museum installed the kiosk for the public to view. It is located prominently just inside the main entrance to the right of the reception desk.

The museum directors wanted a new kiosk to honor all the media (print, TV, and radio) personnel who have covered PSU sports over the years. Originally, WinMill Software created their other kiosks for each sport. They were done really well, and they wanted to keep this look consistent with their new kiosk. This one, however, would be a bit different. They had ordered a large LCD monitor (much like what we have in the hallway in Rider II) that they wanted to display videos on.

The problem with what WinMill did for them was that they never gave the museum the original Flash (FLA) files if they wanted to make changes or create a new one. So I had to reverse engineer the same functionality into the new one. They had also used many text files that would load the info for each person dynamically. I got to looking at all the files and thought "oh, man, this is a nightmare!" I think he said they had something like 2700 text files they were using for the existing kiosks. No way was I going to deal with a bunch of separate text files.

This was about the time I learned how to use XML and FileMaker Pro to work with Flash. I was able to create a database in FileMaker that could combine all the records for this kiosk into one file. Currently there are over 300 records in the FileMaker DB and each record has 30 entries (first name, last name, whether they were print, radio, TV, or a combination these, their bio, photograph, any videos associated with them, etc.). My experience with this project really helped me figure out what to do with Leonard Pott's simulation.

Some of the challenges I had were to get good quality Flash video for the samples. I used what I typically use, but it just didn't look very good on the large LCD monitor. I ended up bumping up the data rate to 2400 kbits/sec and putting a keyframe every 6 frames. Typically for streaming we recommend a key frame every 5 seconds. At 30 frames per second I was putting one every 1/5 of a second. But the quality looks really nice now and their computer handles it well.

Another challenge was that not everyone has a video associated with them and the ones that did might have anywhere from 1 to 10 videos. Nothing was really standard, so my scripting had to be flexible enough to allow for it. Also, the people's photos varied in width and I had to put the buttons 15 pixels to the right of them. So I had to dynamically place the right number of buttons and also place them to the right of the image depending on how wide it was.

Still another problem was that the computer had 2 monitors and I had some code that makes the Flash module go full screen, but it only works properly for one monitor. So although my Flash animation was 1600 pixels wide, when it went into full screen mode it was getting squashed into 800 pixels. So it meant that I had to manually adjust the Flash player to fill the screen. Not a good idea to have to do every time you restart the computer.

The answer to the monitor problem was to only use a one monitor setup and set the resolution to 1600 wide by 600 high. Then I was able to use the code:

getURL("FSCommand:fullscreen","true");
getURL("FSCommand:showmenu","false");

to make the Flash fill the screens. We were looking into a h/w device called DualHead2Go by Matrox. They make something that takes input to one monitor and stretches is across 2 or 3 monitors. Really a great way to play Halo, to be sure. But, it ended up that we didn't need it after all after changing the monitor settings.

Well, at any rate, I got the kiosk done just in time for the first football game, which was the goal. It looks really good and the Sports Museum folks are happy. So, if you get time, check it out. The museum is on the Jordan Center side of Beaver Stadium at ground level. It's free to go in and look around. It's really an outstanding display of PSU sports memorabilia, information, and videos.

Just to quickly get something to show them, I made separate Filemaker files for each of the first few letters of the alphabet. This, I know, wasn't the best approach in the longrun. Even though it was easier than flat text files it was still pretty unwieldy to have 26 separate files. I did a web tutorial last week on XML and integration into Flash and gained a much better understanding of what I could do with it. By adding a few more fields in the FileMaker database and exporting a different way, I figured that I should be able to slice and dice all the info any way I want using a single FileMaker database. This would be a great time saver for the museum in regards to upkeep.

The tricky part was that the info has to but sliced up in 3 different ways: Print media (writers and photographers), radio, and TV. Some people do more than one thing. It would be easy to make a separate FileMaker DB for each, but I found a good way to just combine them all. I put a field in the DB for Print, one for Radio, and one for TV. If the person is associated with any of these media, I put a "Y" (yes) in the field. In Flash when I load the frame for Radio personnel, for example, I'll just have it make an array of all the people who have a Y in the Radio field. From there, I can sort by last name. Pretty simple and I didn't need XPath to do it, either. What I learned about XML is that it will create an array of nodes automatically if you ask it for all the childNodes at a given level of the XML file. I was able to easily home in on the data I needed once I understood this concept. XML had always sort of escaped me before, but now I can really appreciate what you can do with it. I can be thick as a brick about a lot of coding concepts, but once I finally get it, it is always worth the extra effort.

Anyway, I got there around 8:30 and Dr. Pott met me where the shuttle dropped me off. After chatting a bit about what he wanted to do, he took me on a tour of their simulation room, where if you'd gone to his presentation at the TLT Symposium or watched his video, you saw the dummies that they had to practice on. Here are the pix:
http://www.flickr.com/photos/besong/sets/72157600692216459/

There were partials there that just consisted of a head and windpipe that the students practiced on. I tried it myself and it's not exactly easy at first. He showed me the scope they use that has a camera on the end of a long, maneuverable stem to help them find their way thru the body. There were different sized dummies including infant and toddler sized to give them practice on the varying shapes and sizes they would be dealing with. There were dummy arms there, too, for practicing IVs.

The big dummy (I keep thinking of Sanford and Son), which was a full body, cost about $250,000 and it cost them about $60,000 per year to run the room where it's housed. They can make the dummy do a lot of things from the control room. It can simulate breathing, eyes dilate, emit fluids, sounds, etc, making for a realistic experience for the students being evaluated. The person in the control room can make the dummy go into some sort of trauma to see how the students react as well.

The idea behind the simulation room is that students would practice on the partial dummies to get the physical skill down. The flat screen simulations (like the one I worked on) would teach the mental skills necessary. The big dummy would test not only their physical and mental ability, but also how they can react under pressure.

We then talked at length in his office and he showed me some other anesthesia simulations, some of which were quite complicated. His idea is to not make something quite so complicated, but create a simulation in such a way that other simulations for other areas in the medical center could benefit from as well. I furthered the idea that this could also be done with other disciplines that require decision-making such as engineering and business, for example.

I then showed him in detail what I had done and how it works. Once a decision tree is created, that is translated into a FileMaker Pro database, which is pretty simple to set up. He was able to grasp that right away. From there I would export the database as an XML file for Flash to read. If he had a live FileMaker database, I explained, he could read directly from the server the same way the XML file is read. This is the route he wants to go. Someone there has a FileMaker database on a server, so he will work with that person to develop a database for this project. He wants to do it from a FileMaker server so that he can control and update the content and be able to track usage.

Some new wrinkles he talked about were to have an input text box for each set of choices so that a student can suggest another possible alternative and thereby update the database quickly by capturing the input.

Another ideas was to have a timer on each scene so that if the student took too long, another scene might be triggered automatically ("Your patient is now dead.").

Another was playing on the probability of outcomes. That is, they can say that doing a certain thing would have an 80% chance of a positive result, so 20% of the time, he wants the negative result to occur to add to the realism. I thought we could do this using a random number method in Flash without too much trouble.

We then took a coffee break and chatted outside under the building where they had a breezeway and courtyard. Some guys were on ladders and ropes cleaning the windows of the building above us. A young woman was smoking on a bench there and Dr. Pott went over to admonish her for doing so, since it is a smoke-free campus. She apologised and put out her cigarette. After a minute she got up and walked from where she was. Just as she did we heard a shout and a large pail of soapy water came crashing down where she was sitting. I told her that stopping smoking was already starting to save her life.

We then went to see an operating room where they had an anesthesia cart, so I could take a couple pictures and see how they worked. We had to wait because they were administering shock therapy to a suicidal mental health patient. Would have been fun to watch. It was some older lady that they wheeled out in a few minutes. I mentioned that I didn't think they did shock therapy anymore, and Dr. Pott stated that it is still a quite effective means of preventing suicidal patients from taking their lives when they reach a critical point. They can then get them more therapy. He says it is especially effective on older patients.

After lunch, we talked again in his office and he raised the idea of possibly teaching a workshop at an international conference in San Diego the first week of January. He wanted me to help with the technical end of it. It would be a workshop on creating quick, simple simulations for teaching anesthesia and other medical disciplines. I was willing to help out, but said that it would have to be worked out at a higher level before he would submit an abstract. He would like to come up to UP at some point and talk with Cole and John about his project plans.

Going forward, he is going to work with his colleague to set up a FileMaker database for his project. I'll look into it a little more after that and see if I can interface with it and possibly get some of the other suggestions incorporated into the sim.

Tonti Game
Click on the start button (instead of typing "0").

If you want to play the original game, go here.

This is not supposed to be an exact copy. I'm just trying to emulate the same functionality. So far I was able to create the interface, make the individual movies of the character popping up, getting the keystrokes for 'whacking' the Tonti, and keeping a basic score. I was also able to make a pause button work, which was not as easy as it seems.

First off, to save time I just took a few screenshots of the original game. I roughly made duplicates of a few parts to use for each row of characters.

After doing some web research on determining how to read a keydown event in Flash, I was able to get some interactivity into it. Instead of the little mallet, I used an explosion, which I thought was a little more exciting when whacking the Tonti. The explosion consists of about 13 individual images of an explosion. I had to code it in such a way that you could only blow it up if it were showing. So when the Tonti character gets so far up, I set a variable that it is available to be hit. When it goes back down, it's not able to be hit.

I used a timer mechanism to randomly trigger each of the 9 Tontis to come up. It's not going nearly as fast as the original game, but I can change that by adjusting the timer. I did run into a problem with this. What was happening at first was that if a Tonti was coming up and its number got randomly called again, it would disappear and start over again. So I had to add a variable to tell it to skip a number if its animation was already active. Not sure how the original game pulls this off, but that's how I did it.

The pause button on the lower left works, although you have to click on it instead of typing a "0" key. It was easy enough to stop each of the 9 animations, but when you click it again to resume, that's when it got a bit tricky. I checked to see if an animation is active before telling it to play or I'd be telling them all to play.

Scoring was pretty simple. At the end of the animation sequence where the Tonti blows up, I just increment the score variable by 200 and it's displayed on the lower right.

I decided that 20 Tonti was good enough to be considered a level, so I put a counter in the timer mechanism that counts every time it fires. After 20, it kills the timer.

Not sure how much further I'll take this, but it's helped me think about how to set up a game. I'm a big fan of backwards engineering things to see how they work (or might work).

I also began to look at how to make games in Flash. I thought by doing a knock-off of a popular Flash game, I might gain some valuable experience in game creation. I am taking the game Tonti and sort of backwards engineering it. This is what I had to do for the All-Sports Museum Kiosk I've been working on. Tonti is sort of like "Whack-A-Mole", only you use your number keys to "whack" the Tonti character that emerges from one of the 9 holes. Just to save time, I took a few screenshots of different elements of the game and dropped them into Flash. I was able to get this to the point where the Tonti characters would emerge from their holes at random. It was actually a bit easier than I thought once I started poking around in Flash. Maybe I can eventually make a game that teaches you how to type with this concept.