All Your Base Are Besong To Us

Fun with green screen and Flash

Sun, 24 Aug 2008 20:56:18 -0500

Over the past couple of months, I've been working on a project called CHANCE (Connecting Humans and Nature through Conservation Experiences), which is a site that that addresses the need to train Pennsylvania 9th - 12th grade teachers in environmental science and ecology. ETS has agreed to help out on this project due to the loss of the project's Flash developer who graduated and moved on. The modules we are working on have to do with global warming, and in one of the activities the project lead, Jackie McLaughlin, wanted to have Dr. Richard Alley speak about what he does in taking ice core samples in Greenland. To make it more interesting, we thought we would put Dr. Alley on site with the help of a green screen (or a green painted wall in our case). So we had him come in with a coat and goggles with the intention of putting him on a snowmobile to take the students out to the research site in Greenland. I had Kim Winck act as my videographer and Justin Miller was also helpful with lighting and camera settings. I had Dr. Alley sitting on a chair to give his little spiel. After a quick dry run, I had to have him be somewhat less animated than he normally is, so that his hands wouldn't get cut off from the video boundaries. I also had a tripod in front of him with a black bar on it to simulate the steering handlebars of a snowmobile. He would grab them at the end of his talk and take off on the snowmobile. Here is a couple shots of the greenscreen:

I also took a couple still pix of him sitting on a box to simulate the snowmobile for his "ride" in Flash.

Dr. Alley is a great speaker and was able to nail his little speech on the first try, but we had to redo the end because he forgot to put on his hood and goggles to start his snowmobile ride. With the magic of Adobe After Effects, I was able to create an alpha channel from the green background after which I exported the movie as FLV. I then imported it into Flash as a video to the timeline where I could view it easily. I then placed a snowy image from Greenland behind him and cut out an image of a snowmobile to put in a layer in front of him. I had to cut the windshield out of the snowmobile and create a new symbol for the windshield in Flash, which I then made to look translucent and added a few highlights.

Although this is unfinished, here is how it turned out...

Actionscript 3.0 Survival Guide

Mon, 28 Jul 2008 21:57:42 -0500

I know it's been a long time since I last posted. I've been busy and haven't felt much like writing. I decided to bite the bullet and only code in Actionscript 3.0 from now on. I've been using Actionscript 3.0 for a few months now and have a few projects under my belt. I'm slowly coming around to seeing the benefits, but it's not been easy. I'm proposing a sort of "survival guide" of code that will help people get through the initial shock of trying to get something done in a new coding environment. Here are a few tips on coding Buttons, Controlling MovieClips, and doing Navigation. So, here goes. 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.

Lawrence Lessig Keynote at the 2008 TLT Symposium

Sat, 29 Mar 2008 10:10:45 -0500

I attended the keynote at the 2008 TLT Symposium and found Professor Lessig's talk very thought-provoking. He showed many examples of remixed video/audio that would probably not pass muster under today's copyright laws. People have been doing this type of thing long before Al Gore invented the Internet, but the Internet just made them more easily accessible by many more people. Although I agree for the most part that these types of remixes should be protected as artistic expression, it made me think about what we really should be teaching our students at Penn State, particularly those who create videos with music at the Digital Commons. We have always played it safe and not allowed students to use copyrighted music in videos they display on the Digital Commons Web site, but I think the big concern is whether or not someone is profiting from the distribution of such works. If they are not profiting from their work, it should be considered creative expression and allowed to be featured. Prof. Lessig cited an example of a housewife who put a video of her 2 year old dancing with a song by Prince playing in the background. She was slapped with a takedown notice by representatives of Prince. While I question her choice in music, she in no way was profiting from Prince's music. If anything, YouTube was profiting from her use of Prince's music. They sell ads and whatever drives people to YouTube to watch videos is okay with them. So, I'm sure they're all for the use of remixes in videos they host. We are not in the ad-selling business, however, so this is not a comparable argument for preventing students from having their work featured on the Penn State sites. I think Professor Lessig's message warrants more discussion here at Penn State about what our policies should be regarding copyright and creative expression.

Making accessible movies a bit more painless

Thu, 27 Mar 2008 07:56:45 -0500

I attended a presentation by Bill Welch, Director of the Office of Disability Services here at Penn State, and he gave us some insight as to what his department does for students. It was very informative for me, as I really had no clue what all they did there. It also gave me a chance to show him something I've been working on on my own since last summer when we got a request from his office to make the LARCH 060 course accessible. We had transcripts, but they had to be listened to and massaged a bit so they matched what was actually recorded. Dave Stong captured the Flash animations as QT movies and we had Auto Synch Technologies create the text tracks that Dave then imported into the movies. I thought that it would be great if there were an easier way for us to do this in the future, so I started working on a little app to help with creating captioned movies. It came in handy with our Blended Learning course PHIL 12, where Dean Blackstock had to create text tracks for movies that were being delivered via Flash video. I was able to get the app to not only make QT text tracks, but also Flash XML text tracks for use with Flash CS3 video, which includes a new caption display component. So, the process for PHIL 12 worked something like this. Dean would use Dragon Naturally Speaking to get the bulk of the pre-recorded video content to text. He'd then listen to it and straighten out any errant words. These transcripts were just saved as text files. He could then import that text into the app and it would separate the text into separate captions. Then it was a matter of loading the movie and clicking a button as each caption is spoken. At the end of the movie you just click a button to create the Flash XML caption file. It can also create embedded QT caption tracks as well as several other formats. When I get the app a bit more complete I'll try to set up some kind of demo and perhaps get it on the lab machines for general PSU use. The app is Mac only, however, it will allow you to create SAMI text captions for Windows Media if you have the Flip4Mac plug-in on your Mac. Perhaps we can streamline the process for ODS to get accessible media to students.

Creating Accessible Movies for iPods

Sun, 09 Mar 2008 13:41:52 -0500

A shortfall of the video iPod is that while it does support TV-type closed captions, it does not support text tracks for captioning, so the average Joe can't do it. And, if you do know how to embed a text track of captions into your QT movie, it will get stripped out when it goes to the iPod as well. I did find a workaround, however, if you need to display open captions on your iPod videos. The trick is to combine the video track with the caption track. After importing your caption text into the QT movie, all you need to do is to export your movie as MPEG-4. This will create a .mp4 file that will have a combined video and text track which works fine on video iPods.

International Meeting on Simulations in Healthcare - San Diego, CA

Sun, 20 Jan 2008 15:28:13 -0500

I'm just now finding time to blog about this trip. In case you didn't know, I was asked by Dr. Leonard Pott of the Hershey Medical Center to co-present at this conference on a Flash-based simulation I created for him this fall. San Diego was just a beautiful place to be, especially in the winter. When we took off from UP airport on Monday, they had to de-ice the wings. It was about an hour and a half to Atlanta where I caught my flight to San Diego. San Diego was quite a climate difference from State College. It was a balmy 74° there that afternoon. The hotel was right on the ocean and only a couple miles or so from the airport. My plane was a bit late when I got to San Diego and my room was not ready, so I didn't get to see a whole lot of the conference that day. I did take a quick look around through the vendor exhibits, however, and I was quite amazed at what I saw there. More on this in a bit. I met with Dr. Pott and our other co-presenter, Dr. Arne Budde and we discussed our strategy for our presentation the next day.

The presentation went really well. Dr. Budde and Dr. Pott showed some examples of different types of simulations, which were more complex than the one we developed, however, what we developed is much more attainable by more people. After they showed examples of different computer-based simulations, and Dr. Pott led them in an exercise in creating a decision tree on index cards, it was my turn to show the proof of concept I'd developed for Dr. Pott and speak about the multimedia developer's perspective. The idea was that people would have a better understanding of what it takes to develop such a Flash-based simulation and what they will need to know and do to approach a developer to create a simulation. I showed them how I took Dr. Pott's decision tree and translated it into a FileMaker Pro database, exported an XML file from FileMaker, and imported it into Flash where it ran the simulation. There were very close to 50 attendees at our workshop, and the feedback we received during and after the workshop was quite positive. I had many questions from attendees, and had to cut them a bit short to end our workshop on time.

After the workshop (and lunch), I spent the rest of the afternoon exploring the vendor exhibits, since the presentations that were left that day were not of value to me. The exhibits were pretty amazing. One of the most memorable was from Forterra (http://www.forterrainc.com/), who creates a virtual world very much like Second Life as a virtual training ground for many different types of disciplines. The salesman was demonstrating a simulation that had a scale replica of Baghdad, where military personnel can go in and train together. He said that he was involved with simulations in the first gulf war. They practiced the whole plan for the first day many times before the first shots were ever fired. This involved taking out Iraqi radar and early warning systems and placing forward observers behind enemy lines to coordinate the attack. Attack helicopters paved the way for armored vehicles that cut through the enemy installations. I can just imagine the distinct advantage we had by practicing such a large scale attack before it took place. Other types of training they would do was for first responders to a terrorist dirty bomb attack in a major U.S. city (can't remember which one) where they again had a scale model of the city to walk around in and even the university hospital where the injured were taken was recreated in incredible detail. You could actually read all the signs on the walls. There were police, firemen, haz-mat teams, and FBI-types all training together on the simulated emergency from the scene of the incident to the surgery rooms where the injured were transported. This was quite an amazing piece of work!

Most of the other simulations either dealt with teaching haptic motor skills (where you control instruments while looking at a computer monitor much like surgeons do - videoendoscopic surgery). Some taught you skills such as using the controls to sew stitches (pretty difficult), controlling a camera and laser to zap tumors, or just generally getting the feel of moving things with the controls. I found these activities very difficult to do in my initial attempts and I figure it must take many hours on the simulators to get the feel of it.

Most of the other displays dealt with simulated body parts and mock patients, many of which were hooked to computers to provide patient feedback or to control the patient's reactions. There were infant models, genitals to practice urology/gynecology procedures, a life-sized birthing model, and even models that had severe trauma, such as severed legs. Something for everyone, I guess. It was both morbid, in a way, and fascinating to see all of that in one big room.

After the vendor room closed, I took a couple hours to walk along the oceanfront. No beach, but a paved walkway. I took lots of pix with my phone's camera. http://flickr.com/photos/besong On Wednesday I had to catch a 9:00 AM flight to Atlanta, so I couldn't attend the closing sessions. They really didn't seem applicable to what I do anyway. Too bad I didn't stay another day in San Diego, however. We flew into Atlanta where they were having an unusual snow/ice storm. When I boarded my plane for State College at 5:00 PM, they announced that they were backed up with de-icing planes and it would take us an hour to leave. There we sat for the next hour or so in the plane. Finally we were given clearance to taxi to the runway to get in line for de-icing. Again, there we sat for the next 3 hours on the tarmac until the pilot said that they were giving international flights priority for de-icing and that they only had one set of equipment (for the "busiest airport in the world") to de-ice. He said they were doing 4 planes per hour and that there were 12 planes ahead of us. That would put our departure time at about midnight, but due to FAA regulations, the pilot would have had to have the plane in State College parked by 11:20 or it was a no-go. Besides that, we had used up most of our gas idling on the tarmac. The flight was canceled and we didn't get to deplane until about 9:50, almost 5 hours after we boarded. After some confusion I was able to get confirmed on the next flight out (5:20 the next day). Luckily I have a brother that lives about 30 miles or so from the Atlanta airport and I stayed with him that night. So, it worked out for the best I guess. I got to visit with my brother and his family before heading back the next day. I sure was glad to land in State College. Amazingly my luggage was there, too. I thought of the palm trees and 74° weather as I scraped about 3" of snow off my car in the airport parking lot.

SlingBox - this is pretty neat

Mon, 17 Dec 2007 10:26:52 -0500

I happened across this product today that I thought might have some value to higher ed. It's called a SlingBox. What it allows you to do is to watch what comes over your TV connection from any internet connection in the world. The box is plugged into your internet router at home, then into your TV signal receiver. It can then broadcast TV over the internet. I'm not sure exactly how it works, but it basically creates a video stream of pretty good quality that you can watch from any computer that has the SlingBox player s/w installed. It works on both Mac and PC and will even work on cell phones and palm devices. Here is the link:
http://www.slingmedia.com/
(Watch the videos on the site. I like the one with the mime.)
It's fairly cheap, too, starting at $129, $179, and $229 for the Pro model, which has the capability to be able to control the channel like a virtual remote), and send out HD video even over a DSL connection. Customer reviews are for the most part very favorable.

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.

Actionscript 3.0 - First Impression

Fri, 14 Dec 2007 22:24:29 -0500

Honestly, my first impression was - WTF? Actionscript 3.0 is quite a departure from 2.0. There are quite a few differences that will change the way you develop in Flash. I thought a good way to learn 3.0 was to take the simulation I did and recode it to meet 3.0 specs. I figured if I was going to give this away in San Diego, I might as well try to be current and give it a little longer shelf life. This was no easy task as I was to find out.

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);

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.

"Centre County Marching Band Festival" - Flash site created by my son

Sun, 02 Dec 2007 17:52:19 -0500

My son, Max, a senior at Bald Eagle Area High School, has been learning Flash on his own. For his FBLA (Future Business Leaders of America) project, he wanted to do a website on the Centre County Marching Band Festival of which he participated as a member of the BEA Marching Band (he's the trumpet section leader this year). As promised in my previous blog post, here is the link to his site. I put it up in my personal space temporarily until the high school puts it up on their server.

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 kick is down(?) and it's....good!

Tue, 27 Nov 2007 19:37:16 -0500

My two sons (age 15 and 11) were playing Madden football. One was kicking a field goal, the other was playing defense. They were pretty amazed at this play, so they captured the replay. The center hikes the ball and it hits the defender's leg as he attempts to block the kick. The defender falls on the ball, but if you look closely at the referee, he signals that the kick is good. The ball actually goes up through the uprights even though the kicker is nowhere near it when he kicks. So, this is either a glitch in the game, or one of the game developers is just a major Jason Elam (the kicker) fan. Watch the video...
http://www.youtube.com/watch?v=sZl38fDmUes&feature=RecentlyWatched&page=1&t=t&f=b

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

Test of h.264 Video Playing in Flash Player via Blog Space

Thu, 08 Nov 2007 10:50:35 -0500

This is going to be a test of whether or not we can possibly use blog space to do some flash video a la YouTube. I had to manually place some javascript code in this blog post (via SFTP transfer) to embed the FlowPlayer in my blog page. I have a folder called "video" in my blog folder now that I can upload to by clicking the Upload File button in my blog interface, then selecting Set Upload Path. From there I choose and put "video" in the field next to it. I can then either make a post around that file or get the HTML to put it into my blog post.

BTW, to view the video, you would need to download the beta Flash 9 plugin that supports h.264, called "MovieStar". You can get that here:
http://labs.adobe.com/technologies/flashplayer9/
Note that it requires that you uninstall previous versions of the Flash player (see instructions on that page).

Update on the Simulation project and the Sports Museum Kiosk

Wed, 31 Oct 2007 14:26:07 -0500

I haven't posted for a while, mostly because I just hadn't had that much to say, but have also been busy with other things.

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

// 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.

Adobe Max 2007 Conference - Day 3

Wed, 03 Oct 2007 16:24:28 -0500

XML 101
Robi Sen, Senior Partner at Twin Technologies
Spry is Adobe's open source Ajax framework. Not a presentation language. Just a way of formatting text. XML is easy to read by a computer and easy to read by a human. Why use it? Clear separation of data, meta data, and presentation, W3 recommendation, easy to read and understand, easy to extend, great tool support, used by many applications and platforms. When to use it? For a common way of sharing data, storing data (but not a database) as a flat file, RSS, ATOM, XHTML, WML, Abstraction layer. Don't use it when you need to operate in a low bandwidth environment, when you need fast or high performance, when you are dealing with data that should be in a relational database, when XML's various benefits are not actually requirements for your project. Has root and child tags. Showed examples of XHTML and RSS. XHTML is a standardized form of HTML that is very strict in order to play well with all browsers. Showed how he uses Cold Fusion to save data as XML. Talked about XML nodes and tags. Everything is a node. Attributes are children of nodes that are simple properties of that node (name, phone, width, class, etc.). Generally don't need to comment since it's pretty readable as is, but comments are done like standard HTML comments. All nodes must be closed, it should have a single root node, should be properly nested (

...

), tags and attributes are case sensitive, attributes have to be quotes. Need to escape certain data. Can use for email: . A namespace is a unique identifier. Points to a url where the namespace is defined. So if 2 docs have the same idenditifer, it will know which definition to use. XML Schema vs. DTD. DTD is the old way of doing things. XML Schema is the new way. Should use schemas instead. Can use Dreamweaver to validate XML. It does not have very good support for schemas and DTDs, however. XSLT is a stylesheet language. "CSS on steroids". Can translate docs from one format to another (xml to pdf). XPath is a language for querying XML.

Introduction to Flex
Tom Ortega, Flex Developer, Workday, Inc.
silvafug.org has breeze tutorials on Flex. Uses Flex Builder as an IDE. Flex is component oriented. Uses AS3. States are different page layouts, effects, transitions between states (fades, pushes, etc.). Components - can be skinned to give your application a new look. Flex Builder is a complete IDE with debugger. First, start a new project and specify how you want your application to access data. Basic mxml file is created automatically. Can switch between Source (code) and Design (interface) by clicking a button. You can drag and drop coponents onto the blank interface. Double-click to edit component attributes. Changing "lyout=verticl'" will automatically apply layout defaults to the interface. Buttos and label tags are nested in the mxml code. He demostrated creating a olgin form for an app. Added a Submit button and a cluck function for it. He then created a function in a CDtat tag.
public function changelabel():void;
{
formlabel.text = username.test;
}
]]>

Although this presenter didn't do a very good job of presenting, I think I got enough out of this to get started with Flex.

How to Shoot, Edit, Encode, and Author Video for the Web
Shooting - 3CCDs is better. Use HD if you really need to get detail, like in close-up shots of a flower, for example. Onboard mic is only good for about 5-10 feet from the camera. Next best thing is a shotgun mic, which can be aimed at the speaker, or use wireless mic or handheld. Use a tripod for steady shots. Fluid head has smooth operation for pans and tilts. Keep backgrounds simple to not only keep the subject the primary focus, but it will also render better for the web if the background is less complicated. White balance manually to get proper skin tones. Aim the camera at a white card and manually adjust the white balance on the camera after zooming in to the card. Properly expose your subject with lighting so as to not lose information either in the lights or darks, which could be unrecoverable. A Neutral Density (ND) filter will block out light when the light is too great. Adobe OnLoaction - PC app that helps you with lighting in the field. Key light is main light, fill light brings up detail opposite of the key light. Light background separately. Don't break the 180 degree rule. Do not shoot 2 subjects where they appear on the same side of the scrreen. Use balanced audio cables (most XLR cables are balanced) to avoid noise. Keep sound level out of the red zone on the VU meters. Record 2 channels - 1 normal and one low, so if someone ends up shouting, you can switch to the lower level.
Encoding - avoid long transitions and fades. They don't compress well. Break up the video to make it more user friendly. They only download what they need to see. Captions - more accurate at encoding time instead of relying on actionscript which may not hit a keyframe at the proper time. You should de-interlace after editing or while encoding to preserve detail. Should try to shoot in progressive mode to begin with. Keep an ear for interactive sound bites that might be useful later. MovieStar will support h.264 and AAC audio. Will scale much better across many mediums. Talked about general encoding options, which were pretty much review for me. Captions are now supported via XML file in Flash video via FLVPLaybackCaptioning and FLVPlayback components in tandem. The XML file is linked externally to the FLVPlaybackCaptioning component just as the FLVPlaybackComponent is linked to the external FLV file. You must use a Flash document that is based on Actionscript 3.0 to use these components. Once compiled, the captions play below the Flash movie.

Building Applications using Actionscript 3.0 for Air
Grant Skinner, Chief Architect/CEO gskinner.com
Cross-plaform deployment via ".air" file or through "badge install". Leverages your experience with HTML, Javascript, AJAX, MXML, and Actionscript 3.0. Script bridging allows you to bridge the gap between actionscript and javascript. Free download of AIR tools. Air is based on Central 2.0, which was a miserable failure for Macromedia. They're not making the same mistakes with AIR. There is full access to the file system (no sand box), no shared interface, applications appear as standard applications to the user. and a much more robust API. AIR is NOT a robust desktop programming environment (yet). Slim subset of APIs to work with, it's not extensible via libraries. Many online services are migrating to the desktop using AIR. Casual gaming is becoming popular as well. Installations and kiosks are also a good use of AIR. The support market can also benefit from AIR. New components and libraries could be more easily distributed. Showed some examples of new AIR apps: DiggTop (sharing top news stories), gTimer (synching timetracking data).BuzzWord (document handling), RichFLV (displays que points and keyframes of Flash videos). AIR can create apps that have a clear window so it looks like they're on your Desktop.
To start using AIR:
Download and install the Flash CS3 update for AIR, create a new FLA and set the publish settings to Adobe Air 1.0. The AIR API consists of a new set of libraries for actionscript 3.0. Used Air Application and Installer Settings to make the window transparent. ID should be your domain name. Set the Window Style to Custom Chrome (transparent). He went through some of the code for an app he was building. Showed how it could interact with the screen properties, how to do a drag/drop event, how to check the content type of a flle that is dragged, so you know whether or not to accept the drop or not. Showed that he could get it to create a new file on the user's computer from a file dropped on the interface.

Adobe Max 2007 Conference - Day 2

Tue, 02 Oct 2007 17:11:10 -0500

Character Animation with Flash CS3
Sandro Corsaro, Creative Direcotr for Disney Online

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.

Adobe Max 2007 Conference - Day 1

Mon, 01 Oct 2007 10:29:26 -0500

I'm going to try and blog while I watch this presentation. There's like 4000 people here in one room, very much like the Apple keynote at WWDC. The geeks are in frenzied anticipation. There is a triple screen in the front of the room and music is blaring to the animated slides.

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.