QuickTime • 1:18:50
If you've been creating interactive QuickTime for a while and want to take it to the next level, you won't want to miss this session. It explores how you can exploit the more advanced interactive features of QuickTime to create cutting-edge multimedia experiences.
Speakers: Glenn Bulycz, Mike Shaff
Unlisted on Apple Developer site
Transcript
This transcript was generated using Whisper, it has known transcription errors. We are working on an improved version.
Hi, everybody. Let's get started. I'm Glenn Bulycz on the QuickTime team. You're in Advanced QuickTime Interactivity. One note, a housekeeping note, the feedback forum for QuickTime, ever popular, has been moved, not to Cupertino, but to the Marina Room. So our speaker today really doesn't need an introduction. In the QuickTime world, Michael Shaff's done some amazing work and is recognized as one of the leaders in delivering and helping developers create applications and then also helping content folks put out the most interesting interactive content there is.
You know, he's the only person here who got special dispensation on the shoe requirement, and so he's allowed to wear special sneakers. So I'll let him get started, and if we could keep the questions till the end. And during the Q&A, if you would please use the microphones and tell us, you know, your name and what company you're with, and speak really closely to the microphone so that the translators can accurately translate your question and Michael can answer appropriately. Thanks, Michael.
Am I loud enough back there? Good. Excellente. So we are going to be talking about QuickTime Interactivity today, and what advanced means, I've come to realize, is a bit of a range, shall we say. So I'm actually going to start off maybe not quite advanced, and we're going to work our way over to there.
All right. So I'm going to start off with the tool. I use a whole set of tools, I should say. But the tool that I use to integrate media is LiveStage Pro. The current version 4.1 is a personal favorite of mine. And it's a personal favorite of mine for many reasons, but I personally am somewhat lazy. So I really hate to work hard on something that I've done many times before. Probably many of you are the same way.
And so Totally Hip got together and they thought, well, how can we make developing QuickTime Interactivity easier, but still let people like me do all sorts of strange and crazy things to it? And the idea came about to do what we call FastTracks. And FastTracks allow you to create advanced interactivity, but not have to be a rocket scientist, not have to be a gearhead or a script monster. And let me show you some of this stuff. I'm going to start off by creating a skin FastTrack. And I can do that a couple of ways.
I can click on this bar right over here that will bring up an editor for doing work with skin FastTracks. And automatically, QuickTime, excuse me, QuickTime, LiveStage Pro has already put in some default media. Not some of my personal favorite media, so I'm going to bring in some other media.
I've got special media just for this event, the WWDC theme down here. And you'll notice I have a folder down in my library window called Skin. Now, there's a couple ways I could do this. I could bring in my media one piece at a time, and I can say, well, is this a window shape? Nope. Is it a drag area? Nope.
Is it my skin background? Yes, definitely. And right away it gets replaced. Or I could bring in the entire folder. FastTrack for Skins has a close button. It's very valuable to put a close button if you're going to use a skin. No close button, confused users. Confused users are rarely happy.
So what I'm going to do is I'm going to grab onto this whole skin folder. I'm going to bring it over here, and I'm going to drop. And poof, everything gets swapped out for me. I now have a new close button. I'll grab that and drop it over here.
And I've got a new full screen button. I'll grab that. Notice the stage kind of rolls around for me. And you'll notice that as I move things around, there's a lot of information about what's going on. And these are new features to Live Stage Pro version 4. We thought, go figure, designers would like to have this information rather than have to calculate it out on their calculator.
So I'm going to zoom out. And a lot of these instructions are just like you would expect from Photoshop. If I hold down my space bar, I get this kind of what I call an active scrubber. And just like in Photoshop, if I hold down my option key, I can do the toggle between zoom in and out. We've tried to make the tool as much like the tools that you're already using as possible.
Reason? We don't want you to work in the tool. We want you to be able to do the work in the tool. any harder than you have to. There's a lot of space in QuickTime interactivity. Let's focus in on the things that you bring to the table that are unique and not have you jumping through all types of new hoops.
So once I've done this, I can close that out and I can see my stage over here. I'm going to zoom out on that one as well. "Scrub around and zoom back out. Now that's good. That's a help. But what about the rest of the stuff that I may want to do? Well, hey, someone took away my outline." That's bad, because amongst the many things that I am is forgetful.
I'll be able to handle it, but we might skip a point and I might come back. What I'm going to do here is I'm going to grab another FastTrack, this one dealing with linear media control. I could either create it from here, a menu, and I can come on here and say, it's going to let me do a playback controls fast track.
Believe it or not, I have used the application, but we have built in a lot of redundancy. So there are different ways of working with Live Stage Pro, just as there are different ways of dealing with QuickTime. So I've created a linear control that has has beginning, go back to the beginning, rewind, stop, play, fast forward and end, and all those are pre-scripted for you. So if I look at my stage, I can grab onto my linear controller and drag it around. Or as I showed you somewhat prematurely, I can just grab onto a control and move it around in here, and it will automatically resize the track for me.
Once I've done that, I'm going to bring in some, not surprisingly, some media that I'm able to play. So I'm going to find some video. And then I'm going to bring out the HIP bot. He's brought out quite a lot. So I drag him on the stage. And again, you can see all these annotations.
Now, I'm going to do something that I've done myself accidentally a number of times. Are those my outlines? Oh, Jim, you are a savior. Thank you very much. So I bring back in a close button and I'm going to try this out. So I press the play, excuse me, I press the preview, which does a preview inside of Live Stage Pro. And you can see I can drag this skin around. And now I go over and I click on the close button and Nothing is happening.
And I've done this, I can't tell you how many times I've done this wrong. And the reason is that my drag region, the region that allows me to drag the window, is a key component to a skin. So what I'm going to do is I'm going to turn on the stage, show me where that drag area is. And you can see it's right here at the top, right where I've put my close button.
So first mistake that, or first thing you want to check for is when you're placing your controls is, are they in an area that the window is going to be dragged from? If so, move them, because they won't work. So I'm going to grab this, I'm going to put this right over here and drop it. I'm not going to do too much aligning because I bet you folks believe that I can align things and you don't want to watch me doing it.
So once I've done that, let's do another preview. And it builds that back up again. And in a moment, I can both drag and, of course, I can close. But I don't actually want to close quite yet. I'm going to use these buttons just to prove that it can be done.
Sorry Ryan, I didn't max that out before you told me. Okay, so I've got these all the way up and you can see these work. Just like they should. And that close button works. Now that would be great, except for one thing. Let's say that I was trying to learn the product.
I actually wanted to understand not only how the product worked, but I wanted to learn how to do this stuff myself. What we've enabled you to do is click on a fast track and ask it to be decompiled. Now no bits are going to go flying off the screen, so no one has to go running in any panic. And notice it changed my fast track down here.
from one color to another. And it also changed its icon over here to show me that this is now a sprite track. We'll be talking some more about the timeline on the bottom. When I open that up, I can see each one of these controls and exactly how they were scripted. So, for instance, if I want to know how we're doing the fast-forward, I can just click on it, take a look at the script, and find out that on mouse down I'm doing this script.
I'm not going to focus on this particular script right now. I'm going to just focus on the fact that you can use the product at a high level for building fast tracks, and we have a number of features that can be built just in this drag-and-drop fashion. And then once you get comfortable with them, you can dive in and learn from them, or you can also use them as the basis for extensions that you're going to do.
And far from just being basics for beginners, these are great bases for cutting down your time in production. And I'll be showing some other methods that we've built into Live Stage Pro for making things faster and easier. As I've oftentimes told Steve, Steve Israelson being the lead architect of Live Stage Pro, we want Live Stage Pro to drive like a sports car, like that neat BMW car. We don't want it actually to drive like one of those big diesel trucks.
All right, so I've showed linear media and fast tracks. A lot of new features came in on Live Stage 4.1, and I would be remiss if I did not tell you that there is a special discount for all of you folks out there and any attendees of this session. Guy calculated it out. I think it's a 60% discount or some odd from the list price. What I'm going to do is show some of the new VR features inside of Live Stage Pro.
I'm going to grab on to, let's do this cubic right over here. I'm going to drag and drop that. Actually, I'm going to kill that, and I'm going to turn off a fixed stage. There's two different ways of viewing the stage in my mind in Live Stage Pro. You can have it as a fixed stage, in which case if you have already designed out your skin and you know exactly what the sizing is going to be, you can enter that sizing right in here and it's all locked down. Handy.
But oftentimes you want the flexibility of having a dynamic stage where you can just move things around freely and the stage will automatically adjust for you. I like dynamic things, so I'm going to turn off fixed stage. So I've turned off fixed size, and I don't want an extra background put in, so I'm going to turn that off as well.
I'm going to grab on to this cubic, and I'm going to drop it in there. Okay, we've got a cubic. It marks down in the timeline that it is a... A VR, and I have one node in that, and I can go out here and stretch its duration.
Which occasionally you want to do if you're trying to match it up to audio that's going to be in the background? I'm going to open it up and we have a brand new VR editor with more features than I could tell you in several hours. So I'm going to focus in on some of what I believe are the keys.
I love a number of the stitchers that are out there. However, when I create VR, it's not always going to be used the same way each and every project. Sometimes I'll want it to be one way on one project and another way on another, but I'm not going to want to go back to the original stitcher and redo all that work.
Glenn Bulycz, Mike Shaff I love a number of the stitchers that are out there. However, when I create VR, it's not always going to be used the same way each and every project. Sometimes I'll want it to be one way on one project and another way on another, but I'm not going to want to go back to the original stitcher and redo all that work. Glenn Bulycz, Mike Shaff I love a number of the stitchers that are out there. However, when I create VR, it's not always going to be used the same way each and every project.
Sometimes I'll want it to be one way on one project and another way on another, but I'm not going to want to go back to the original stitcher and redo all that work. even though the original stitcher put it out in a very different view. The next thing that we wanted to be able to do was create hotspots inside a VR so that you could have a beautiful stitching but you could put new hot spots based on the particular project that you needed to get done.
So I'm going to switch over to hotspots. This particular VR already has a number of hotspots, and you can see them right up here. They have both IDs and names. The IDs can be very helpful when you're scripting. You can enable and disable them. And the names, I'm partial to words myself, so I like to be able to see that and work at that level.
I can also set the cursors that are associated with, excuse me, the cursors that are set from that hotspot when I mouse over. I'm going to do a turtle for mouse over. I'm going to leave the other two alone. So now I'm going to create a new hotspot.
I'm going to look around over here. And I'm going to create my hotspot right over here. I have different tools that I can do that. I'm going to create just a simple rectangle. That right there. And that pretty much obscured whatever was behind it. So I'm going to actually change the opacity so I can see better my actual content. Once I've done that, I'm going to change the type of action associated with that hotspot. I've got different actions that I can do. I can link to another node. There's only one node in this VR right now. So I'm not going to do that.
I can do a go-to URL, which will either trigger a browser or trigger a new movie, or the ever-favorite blob, which is not a 1950s movie, but rather the ability to have arbitrary actions associated with a spot. I'm actually going to do a go-to URL here. And notice, again, I guess we could call LiveStage Pro the slacker aid, codependent maybe. I hate to look things up, but I oftentimes... forget syntax.
So we've got all the different syntax for go-to URL right here for you. And I'm going to choose one for a browser. And I don't know, does everybody want to watch me type? No raising hands. So I'm going to skip actually typing in a URL. And you folks will all trust me that that will actually do the right thing.
I'm going to close that up for a moment. And then what I'm going to do, it, whoops, didn't actually mean to close that up. I'm going to do some fast tracks associated with VR. Now this stuff, what I'm about to show, these fast tracks, this, just probably eight months ago, would have been advanced QuickTime Interactivity. It would have been stuff that we would have gotten deeply in the scripting of. How do you actually do that? Not these first ones, which are just controls.
I'm going to say, yes, I would like some new controls. Same type of thing here. I can get new controls. I'm going to bring in some new media. Again, the folders can be used in order to get production. I'm going to grab onto a pan left folder. I can do them one at a time.
Well, that's the down image. This is the up image. This is the over image. Or I can click on my control and I can grab onto a folder full of images, in this case, Pan Right. Just drag it and drop it and it does all three of them for me at once.
So I've got those two out there, and I'm going to turn off, actually I want tilt up and down to be there. I actually want all of them to be there, so I'll just leave them alone. Ordinarily in a real project course, I would go through and replace all these so they have the same media, but I'm not going to do that right now. So at that point, I have my VR, and I have my VR controls.
So if I preview this. I can tilt up, I can pan around, and of course I still have my old controller. We have the ability to set just about anything you could ever want to set in QuickTime, and then some. So I'm going to go through, I'm going to say, okay, leave that QTBR controller there. What I'm going to do is grab that same skin track.
Creating a new skin track. You can see my VR right there. I'm going to go grab it, drop it, poof. And now I can adjust my VR. I can grab onto my FastTracks. So I can use all of this. Notice I've done no scripting, which, if you've been to some of my previous talks, is impressive.
So I grabbed this and I dragged this stuff around. Everything's been drag and drop to this time. And now, because... I'm doing a demo. I want to actually do something a little bit beyond that. I'm going to go out and create a compass that will follow my movements around.
So I do that and it asks me quite politely whether I really want to do this and I feel certain that I do. And automatically I get a new compass. Now the reason why we're always supplying default media is because we want to encourage people to experiment. Interactive QuickTime has so many different ways of doing things that it's valuable to do experimentation.
It is, shall we say, a cultural experience to do this kind of experimentation. And we don't want you to have to go looking for media just because you need media. We're going to pop it right in there and then if you have media, you're certainly welcome to replace it. In this case, I'm going to leave this media alone.
The next piece of functionality has been oftentimes requested by users. We want to make a map off to the side of our VR, and we want a few things. We want to be able to put nodes on that map. So if you click on the map, they'll go right to that node. And we also want to be able to have some compass indication right on those nodes. Now, if I have one node, I have a very boring map.
So what I'm going to do is I'm going to bring in a second node, and I'm going to actually create a multi-node right inside of Live Stage Pro. You were never able to do this before. Before, if I wanted to create a multi-node, I had to go back to my VR authoring environment, create a multi-node, export it, come back over to Live Stage Pro, look at it, and see that everything works. Now that's gotten a lot easier. All I have to do is come over to my library. This, by the way, is my library window. We'll be talking some more about that a little bit later.
And I'm going to grab an object movie. Now, an object movie is going to be combined with a cubic movie to create a heterogeneous So I drag this over and it says, "Can't drop it there. Nope, can't drop it there, but there you can drop it." So I drop it.
Notice that all of my fast tracks automatically adjusted their durations because I had added this in. It's a big drag for users when they get everything set up and they have their controller set at a duration of one second and they bring in their three-minute video and poof, the controller lasts for one second and then it's gone. Which is wonderful functionality if you want to use it, but if you don't, it can be awfully disconcerting when your controller disappears. So I've brought that in. I'm going to open my window back up. Okay.
And notice I was able to switch between the different nodes. I can also do that with a menu. I'm going to switch back over to my cubic and now back over to my object movie. I can switch back and forth and work with cubics, cylinders, or objects, even multi-state objects, which we'll be talking about some, all inside of the same editor without any fuss or muss. Now, you'll have to stretch your imagination just slightly because I'm going to be having a map which is going to point off to this object movie. I'm going to create a new map fast track.
This is okay. Once again, we've popped in some media for you. I don't know where this actually is, this map. It pops up often. I'm going to place it. Now again, much like Photoshop, if I switch to my resize tool, which Guy tells me is the letter T, which matches up with the key that would be used in Photoshop, I don't actually use that particular key in Photoshop, so I never know that. And now if I hold down my Shift key, it will constrain my aspect ratio. So I've adjusted my map. I'm going to place it.
And now I've got two nodes. I have, and I click on it, and drop this any place on my map. That node represents the node associated with the cubic, and this node over here is associated with my object. Ordinarily, of course, if we were building a map like this, they would all be similar kinds of things.
So you may ask, why did you grab the hip-hot movie then? And I wouldn't really have a good answer, except I like the hip-hot object. All right. Now, those are both pretty cool pieces of functionality. I've got my map. I've got a compass. Let's take a look at this.
Drag that around. I look around. My compass is moving right over here. It looks like I should have set the transparency mode on that. And you'll notice that also the node right over here is indicating where I'm looking as well. I can set the north spot on this VR so that north is north. And now if I click on this node, I automatically go to my object, and now I have completely different type of media in the same space. That's cool. I like that. Close that up.
Sound, spatial sound. It's been done. It's somewhat tricky to do strictly on a scripting basis. Pretty fun to decompile and take a look at what we've done to actually implement that. But we've wanted to make spatial sound easy for you. Click on Sounds Fast Track. It's going to create a new one. It's done it. Now I don't have any sounds in my sound list at this point, so I'm going to use my handy-dandy library.
I'm going to close some of these things out since I have less screen space than usual. Here's my sound. And I'm going to bring in two different kinds of sounds. The first kind of sound I'm going to bring is actually going to be a MIDI soundtrack, and I'm going to use that as my ambient sound. So this is a sound that's not gradual or sudden. It's non-directional. I always want it to be playing. I could adjust the volume if I wanted to. I'm going to drop it down a little bit so it doesn't overpower everything.
And plop that right there. And now since it's non-directional, there are no spatial components to this. The next sound I'm going to want to do, and all of your cell phones are turned off right now, right? The next sound I'm going to want to do is this cell phone ring. And cell phones can be non-directional when you're at a place like this and everybody's cell phone is going off, but I actually want them to be at a specific place.
I'm going to pop over to my cubic, and I want my cell phone to be associated with this heavenly statue right over here. My bad. I should have created my soundtrack in my cubic, and I didn't do that. So, without further ado, I'm going to use my timeline to kill. Remember, no electrons were hurt while I do this. I'm now killing my soundtrack and opening back up again. I wanted to be in my cubic when I was having this experience, so I created a new sound fast track.
And yes, as you just saw, you can have different sound, spatial sound associated with different media. Once I do that, I'm going to go back out and grab my in-flight, switch that back to non-directional, come over to my cell phone, drag and drop. Now, I want to be right here when this sound happens. So, I'm going to grab this.
I'm going to turn it to where I'm currently facing. This arrow indicates where I'm facing. And I'm going to spread this out. I can set the extent of the sound. When am I going to start to hear the sound? I can also set it how much tilt do I need. Well, I want it to always happen, so I'm going to stretch that tilt over the entire extent of the movie. So once I've done that, I'm going to change that from gradual to sudden. And now I'm going to preview that.
Okay, first we can hear the, if you listen very closely, yes, the MIDI that was non-directional. So as I look around here, I'm getting this lovely media experience. I'm able to have my media map show me where I'm pointing. And now when I come across here, I can be interrupted by a cell phone just like real life. You can't get any more immersive than that. All right.
Now, I could dive down into the debugger, but that would be the old, brutal, advanced mic. But we're going to-- we'll get there. OK, so we're going to close that up. So we saw a lot of advanced functionality in VR. And except for showing that I could decompile, I've done absolutely no scripting. That does not mean, however, that Live Stage Pro doesn't have scripting chops. It definitely does. And in our next couple of pieces, I'm going to showcase a couple, you can see this.
By the way, before I show those, I wanted to show a really lovely piece. I just love this piece. Notice we have a skin. We have a cylinder VR that we can look around. We've got controls that we're able to roll over and move around. And we have a map that we're able to check things out. All of this functionality is now pretty much drag and drop. That's pretty impressive.
Which goes to show that human beings are getting caught up with sooner or later. I guess there's a new movie coming out that's going to show us that the machines will rise too. So I'm going to open up Superfluid and we'll be talking more about this piece. We're actually in a few moments going to start to look underneath the hood of things. A little more detail at what is involved in hardcore advanced. And when I pop in here, we have really many of the same things. I've got a controller that I can move around.
I have a volume slider. We have behaviors that allow you to create this kind of a slider without any scripting knowledge. And if I click on one of these pieces... It automatically loads in the VR and now is panning around. This system is actually set up to pay attention to how much activity I'm doing. Notice when I clicked on this, the media stopped and now I can control it. But the idea was that if the user's not doing, the media gets progressively more psychedelic. And that was the intention of the band.
Sometimes you want to just sit back and chill to what's going on. And as you can imagine, if I go full screen on this, I put the wrong version on this one. A real full screen would actually go full screen, but this will do since I have a very large monitor here. Notice that as I haven't done anything, the media is now getting more and more excited. It's adjusting the FOV or the field of view.
It's doing a pan. And as I move around, it gives me control. A lot of what advanced QuickTime Interactivity is about is about paying attention to the user. If I switch over to the finder, what happened to my movie? It shrunk itself down. When I come back to the media, poof, it brings itself back to life.
See, we were thinking about the doc and the expose stuff just along with Steve. So the same type of control that you would expect from a QuickTime experience. I can drag this around and play with it. Some things you might not expect from VR: the ability to change its graphics mode.
So now I have a somewhat more psychedelic experience. Let's go see Hollywood Friends. We all have friends in Hollywood, right? And I can, of course, turn these things off. All of a sudden I went, did I go to an X-rated one? I was pretty sure I didn't, but let's go to Monsoon because that's a little less controversial. And the idea that the band really wanted to get across here was this kind of kaleidoscope between music and space.
And one of the ways that we were able to capture that was to use cubics in order to encase this. Notice it's now realized that, hey, Mike's talking, so it's going to go off and start to entertain you. But we also realized that we could express some philosophical points on this media, such as the ability to feel fenced in.
So you notice we've dropped an overlay over the entire UI. Still working. And once again, I can be in control or the movie can be in control. And just in case you want to know whether you can do two overlays at once, yes, indeed you can. Or I can reset these.
Now, overlays and all the rest of this media is great, but if you have to download all of the media associated with superfluid in one very long push, it's going to be very unpleasant. So, we've done a couple of things on this. One, those overlays, and there are a number of them here, are all dynamically loaded.
QuickTime, starting with version 6, introduced the ability to dynamically load sprite images. In addition to all the other wonderful things that sprites could already be getting their media from, such as video tracks or flash tracks or even URLs that you've hard-coded, now we can actually dynamically load those in.
So, all of the media associated with the overlays are loaded on user request only, and then cached so that... if I ask for it once, I don't have to go back and reload it a second time. And... I think that's all I want to say about Superfluid. A very fun piece.
Oh. One last thing I wanted to say. Now, Dee hates this feature, so I will point that out right away, but I happen to love it. The idea is that when I am closing something, I don't necessarily want, as a content creator, just to let, if you'll excuse the expression, let the user just vanish. So in this case, what we do is we fade out the music, show a logo, and once the music is all the way faded out, poof, the movie goes away.
All right, now this piece, since I've been talking about what Guy doesn't like, this is some of the stuff that Guy does like. Guy was very involved with this piece. I think this, I don't know, it was obviously done for Acura, but I don't know what I'm going to show you how a company actually did this. But you'll notice there's a number of hot spots around. And as I move around, I can select one of them. I'm going to select on the dashboard. I do a transition.
I pop up new media. The Acura Bose music system in the TL Type S includes AM/FM stereo, a cassette player, and a six-disc in-dash CD changer. The user is able to move things around, still know where they come from. Notice the lines that are indicating where this feature comes from.
Select further points inside of my VR. Did I say this was all created with Live Stage Pro, by the way? I'm supposed to say that a certain number of times per half an hour. And I can do all the types of adjustments that you'd like to do right as they are relevant. And there was a wonderful talk given here yesterday by Laurie Schwartz and Mark Sando.
Mark pointed out that each of these little details in and of themselves is not rocket science. It's not incredible. But it's the attention to those details that makes the experience down here in the gut feel something immersive, something unique, something that you want to get involved with. And as an anecdotal evidence, because I'm not actually able to release the actual statistics, we did a series of studies for retention on these things.
And I think that's what we're going to see in the future. And I think it's going to be a huge challenge. But we're going to see how much activity did people do when they were actually using these environments. And you would be staggered by the amount of time that people actually spend on these if they're actually able to interact with them.
And that includes straight-out video. Just putting it in a skin already helped on user retention. Having all the branding be consistent helped them keep on message. Then if they were able to look at background information and other things, I think it's going to be a huge challenge. But I think it's going to be a huge challenge.
[Transcript missing]
I mentioned that LiveStage Pro now works with multi-state VR. Does everybody know what multi-state VR is? You are so much ahead of me, John. I didn't know what it was. I looked at this thing and went, multi-state VR, that means what? Well, let's take a look at what it means.
Nice VR. Object movie, I can roll it back and forth, I can tilt it. That's nice. Ah, another state. Aha, a third state. A wonderful piece of functionality. All in the same space, all in the same media container. The ability to have the same object at different states. Not a big surprise. I don't know why I didn't figure it out. So how do we do that? Let's go out and take a look at what Guy has done.
I have over here a Sprite track. And notice as I pull this up, some people in the back of the rows are happy and some people who are worried that I'm going to pull out the old scripting monster start to lean back in their seats. And indeed, you're right. So I've clicked on this and I can see the different tracks that I've got. This one here named Sprite 1 with an untitled sample, shame on you, Guy. I'm going to open this up and I'm going to first change this to be a nice name, State Modifiers.
Now, does anyone know why I am -- well, actually, I'm not allowed to ask you because you have to go up to the microphone. The reason I am so fastidious about naming these things with real names is because invariably some amount of time goes by and then the content owner either calls me up or sends me an email and says, "I want you to change or extend or fix something that has a bug." And I look at it and if I haven't put in reasonable names, then I have to hunt around for what I've done. I don't like to do that. And I'm betting you don't like to do that either. So I'm encouraging you all to use names in order to make your projects easier to understand.
So what have we here? We've got digits 1, digit 2, and digit 3. Very interestingly named. And if I look at mouse clicked, aha, everybody knew I was going to pull out the old script. Now notice some of the nice functionality we've gotten for is the ability to get more screen space when you need it.
Right over here, Guy hasn't put in any comments, and I can bet that Guy's going to punch me several times after making fun of him so many times. But I'm going to put a comment over here, and that is, if the state is not current, and you'll notice that if I had all of this typing... You want me to change the color? I will certainly do that, but let me show you this first.
If I had it in the original way, I would not be able to see that content, and I would get to get scrollbar happy. Now, I don't like scrollbar happy, so I close these things off as appropriate, and then I'm able to not see it, but I can because I can go over to my preferences.
It's just in like the last few months that I don't do the old OS 9 thing and come over here. And I can come over here and say Editor. And I can change all of these things. So that is Comments. And notice its color is gray. And I can come over here and say, well, let's make it orange and kind of bright.
And notice my, oh, that's a bad choice because it happens to also be similar to our constants. But I could change the color of my constants as well. So once I've done that, what he's doing here is he's finding out the current view state. And then he is setting the image index. He's not doing it by name. He's setting the image index by number. And if this were me, Boy, am I in trouble, because he's bigger than me. I would say, view one on.
And what I would do is come right over here and put this dollar sign, which indicates that it is part of a definition. And I would say, view one-- View 1 underscore on. And now I would be using a symbolic reference to my image. Now there's two advantages to this.
The first advantage is the one I've already mentioned, that projects are easier to work with. The second advantage may be a little less noticeable. Let's say that my graphic artist says, you know, I don't like that background. I'm going to put in a new background and I want you to put it right here. And I drop this in.
And I drop this in. If I've hard-coded my index, if these numbers change, my project breaks. If, on the other hand, I do them by name, then no matter if I take this one and pull it all the way back here, it still works. I like things that work. All right, so we've taken a look at VR view states.
Oh, I should mention one other thing. A common question that we get is, are those actually variable at runtime, those constants that we put out? And as the word indicates, constant, no, they're not. What happens is we take a look at the name, we find out what that number is, and that's the actual value that goes out there.
I won't name any names, but I did get a very amusing email from somebody in New Zealand, a former QuickTime engineer, who couldn't understand why he was not able to change this variable, and I was amused. But I'm amused easily. Okay, now I want to show the same persons, to give you some indication of who that might be, a tool that I use a lot with LiveStage Pro. Which is Deliverator. Deliverator. And what I use Deliverator for is working with media that I'm going to actually deploy.
I'm going to take an original exported from LiveStage movie, I'm going to drop it on Deliverator, and it opens up two windows. The first window is the actual movie content. This piece, by the way, was shot, the VR was shot by Janie Fitzgerald, and the skin, which ordinarily would be a skin. Except in this environment. Was done by Robert West. And in here, I am able to do a number of amazing things. Useful amazing things. Time saving amazing things.
What I'm able to do is simulate what the different download rates would be like. Now, right now, we've got a 100-base intranet, and things are good. John Alper was downloading something, and he said various expletives that I'm not allowed to repeat on this microphone, but they were all happy expletives. But most people still today have this kind of experience. Remember, this was the original output from Live Stage Pro Movie. Yes, that is a very nice blue cube.
Yep, okay, we're loading. You'll notice it shows the percent of the movie, how much K has been downloaded, and the number of seconds this person has endured this experience. Ah, I have a blurry VR. Very nice. Okay, I've, oh, yeah, I have a piece of good VR coming in here. I'm 93K into this, and I'm seeing a lot of blur. I'm not a very happy user.
This is not the kind of QuickTime interactive experience that we really want to have. What we want to have is an experience in which the preview track comes in, and that's the reason it's blurry. It's not because of QuickTime. It's that in order to get a fast download, QuickTime supports the ability to have a preview track of your VR. Notice, I'm 190K into this thing, and I'm still not seeing any of those beautiful controls that Robert West did for us. Where are they? Well, that brings us to our second window. This window over here is our media map. It shows every block of media out there.
So I can come over here. I thought my machine crashed. I almost passed out. I see my movie resource up here. I see a whole lot of free space and some very fine QuickTime engineer is going to explain to me why that free space is there and how I can get rid of it totally someday.
But that day is probably not right now. I can see that I'm getting some VR samples out here and if I come all the way down here, why look, there are my controls. But they're at the very end of the file. Do I want them to be at the end of the file? No.
I want them to be coming in exactly when I want them to. Now Flash supports the ability to say, well, you can have it any way you want as long as it's either back to front or front to back. Which way do you want? Not so in QuickTime. In QuickTime I can decide exactly where I want that media to come in. I like to call it choreographing the media arrival. Now there are a few things more dull than watching Mike drag around blocks of media.
But I'm going to show you. How I can do it. Yes, there is a block of media moving, and now I'm going to drop it right down over here. And it wouldn't let me. It actually showed me on the little hand, but I was not paying attention. So the little hand's saying, yes, I can drop it there, and once I do it, it moves it for me.
Now, that piece of media will be loaded at that particular time, excuse me, at that particular position in the actual file. Rather than, everybody want to see my address book? I'm going to close that one out, and I'm going to show what I did in order to deploy this media.
Pop it back over to the Deliverator. Again, I have the media open. I'm going to, we'll leave it actually at a dual, no, I'll put it back down onto 33 to be fair. And now I'm going to simulate what that experience would be like having moved my media blocks around.
After just 3.9% or so, I get my preview track. I have now my skin. So I have my user only 8% into the movie already has full context as to what's going on, and those things already work. That's pretty hot. In terms of control over your deployment media, Deliverator is an awesome tool. So if you haven't checked into it and you have web-based delivery, I highly recommend it.
And one additional feature I want to mention, but I was too much of a coward to demo, is the ability to work with locked content across multiple people. So for instance, Guy and I have done projects together, and he's in Vancouver, and I'm in Los Angeles. Los Angeles. Los Angeles.
I'm in La Honda, and if he wants to pass me media that is copy-protected, ordinarily that couldn't be done because once it's copy-protected, it's pow. Deliverator allows you to do a challenge and response so that you can actually work with that copy-protected media across multiple people. Tremendous tool, doing a lot of things. If you use it, please give John Summers feedback on how to make it better. It is an onward and upward tool. Does anyone like that Deliverator tool? I'm pretty damn impressed.
Okay, so right down here I've got Apple Scripts structure. And what I want to show here is the fact that Live Stage Pro in version 4 internalized the need for all of you to be able to create automated projects. In the boom days, when all of us were making money, in the boom days, which will come back again someday, I did what I called boutique wear.
I could spend all the time I wanted working on something because it was supposed to be a one-of. Now, when I actually need to make some money, I need to be able to make something and use that template over and over again. And we have the ability to do that.
If you create... If you create a project in Live Stage Pro, you can record every step you do. You can then go back in and do any editing that you want to do. And then you can create, if you would like, and I'm sure you'll want to, you create a droplet that will give you the ability. First, I need to locate this droplet. I only really need to do this once. And go to my desktop. There is my template.
I choose that. And now what I'm going to do is I'm going to take some media I'm going to do this from media where I know where it is. I'm going to grab a couple of videos. I'll grab three videos. I'm going to drag it onto my droplet. It goes off very dutifully.
Notice it's doing all the adjustments for me. It's processing that. It's output it. It's doing the next piece. Cha-ching. Cha-ching. We like that. Less caffeine, more money. Okay, and where did those things go? Well, they're right over here. All in a folder, neatly output for me, and ready to go. ♪ ♪ That's cool.
Zoom in right along. One of perhaps-- what time am I over? I looked at that and said, "Uh-oh. If I have four minutes, I'm in deep guano." One of my favorite aspects of QuickTime is the fact that it supports third-party components. And don't get me wrong, the folks at Apple are some of the brightest and most enthusiastic that I've ever met. However, they don't have every idea out there and they don't have the ability to use every engineering dollar that Apple has. And that means that third parties need a way of being able to extend QuickTime in a nice, robust way.
Apple's done this. They've created a component download program, and this allows somebody to develop a component that does, let's say, 3D, and allows them to deploy this actually on Apple's servers so that when a user hits some of their content in a QuickTime environment, it will go out to the Apple server, grab onto that component, and download it. And then the media can be used.
Now, I'd like to say that that's a very easy thing to author. And I would like to say that. And it is pretty easy, but it's not super easy. And so I want to show actually how that can be done because I was scratching my head for a while, and I figured maybe you folks are too. The first thing that I do is I create what I call a gate movie.
[Transcript missing]
And now, since my QuickTime has not been launched, when I go back into it, it won't know anything about Axel 3D. And when I launched this gate movie, it says, hey, the component is missing. Should I download it? By all means, please do. It goes out there and after a moment or two, thank goodness for networks. Chugga chugga chugga. Dave Singer pointed out the value of watching progress bars in a meditative way.
Now, being legalistic, first they have to tell me about all the things that I must accept, and you must accept them too. And now, because they want to scare the pants off me, they put up a dialogue that says, "You have installed software that may not be available to currently open movies." Now, that would scare me, because if I'm a user, I want to go right on through to my media. I hate opening things up again. But I'm going to say okay. And notice my movie down here said, hey, don't worry. No need to close. It's all handled.
I click on this and in a moment I have my actual 3D content. I'll show how to do the gated movie in a moment, but I want to show off a little bit of Axel 3D because I don't know how many of you folks have seen this stuff, but it's way cool. So I can spray paint particles in my world.
I'm spray painting leaves, very into leaves, living in the woods myself. That's cool. I like that. I can also change those leaves on the fly. I spray paint some more in that rendering, change some more. I can even see them in wireframe. I'm going to grab this. I'm going to give it some wind.
So now those particles are being affected by forces in the environment, forces stronger than you or I, and being blown away. Now, imagine trying to create these with sprites. Even Matthew Peterson would quail at such a prospect. But wait, there's more. I can also dynamically change the color of things.
And it's only because I'm lazy that you can only change the background. We will, actually we've already posted, no, no, that's false. We will be posting in tomorrow, not only this project, but we will also be posting another project which gives even more degrees of freedom. You can control more things. And both the Axle project and the Live Stage project will both be available from Stage Door. And Stage Door is a fantastic resource on the Totally Hip website where you can get tech notes and sample projects and inspiration and mailing list, archives.
Glenn Bulycz, Mike Shaff So to show how nice that Axle looks when it's larger, notice that I've increased the size of my movie and everything still looks good. Now my bitmaps over here, they don't look quite so good anymore because I did that intentionally. But my Axle content, being vector-based, looks great.
I believe we have, yeah we do, Justin is in the audience. I would like you to give a hand if you would to Justin. Justin created the media handler for this and the OS X version of the authoring environment and it is hot, way hot. That's from Mind Avenue. Okay, now I promised that I would show how the Gate movie was done, and true to my word, I shall go into Live Stage Pro and pull out once again the script.
Notice all of my tracks are named. And so are my samples. So when I open this up, I've got one thing, and it is the cover, which is this track right here. All the rest of this is just graphics to grab your attention. And once I do that, I look at the script, and on frame loaded, what do I do? Well, the first thing I do is I go out and... That was Steve Israelson getting back at me.
It's true, there are no comments, but look how nicely formatted that code is. Anyways, what it's doing here is it's saying, "First, go out and check whether I've got an importer for Axle." Now, if you're wondering, "Well, how do I know these names?" Blood, Sweat, and Tears. No, actually, you can get this stuff out on Stage Door. I'd like to say there's a really easy way to find out this information, but I can't. Francesco's nodding his head, there is an easy way.
Oh, QScript, really? Stylin'. I can show something else. The QScript reference, which I use a lot, if I type in component, If I would spell component correctly. No silent R in there, thank you. And we have load component. Oh, I probably have to go up to the index. But if I come into here and I search down deep enough, hence it's not easy, I would be able to find it right in this handy-dandy window. I use this a lot, the ability to kind of look around. Let's see whether I can find Axel. No.
Let's see if I can find video. Oh, so indeed they are, no? Those are them? Them or those? Okay. If you're really interested in how to see this in the reference guide, hit me after and I'll show you. Don't actually hit me though. So after I've determined whether or not the component is there, I'm checking to see whether it has a version number that's greater than zero. If it does, then I flip the image that says, "Hey, image is ready. Axle loaded and ready. Quick to continue." If, on the other hand, I don't, then what I do is I flip the image to "Need to load." Indeed. Need to load. Component missing. Please download.
Okay, then I do this down here. Set idle delay to 60. Now, what I'm doing there is I'm saying to the environment, hey, I'm going to want to check something periodically to see whether that download really happened. So if I pop over to my idle handler, I can see the counterpoint to this. The idle handler, once a second, goes out there and says, hey, is that component there yet? And once it is, then it turns around, excuse me, if it's not there, it invokes it directly and says, load component, go get the importer for Axle.
If you were to ask me about these two numbers, I would have no really good answer, so please don't. It embarrasses me. Once I've done that, that's going to actually pull up that dialog that was doing the component download and then away it goes. Once I've actually found it, then it's--oops, I didn't actually show that part. Once it's actually found it, Then it is going to set the image to loaded.
And I've got my image. And away I would go into the movie itself. That way the user is able to use third-party components without having to reload anything into their environment. So all of that, the component download stuff and the actual stuff, will all be on Stage Door tomorrow.
Zoomify. Zoomify is another third-party component that we support directly in Live Stage Pro. You're able in Zoomify to have a VR environment, a cubic environment, much like Qt VR. But notice as I look around, things are a little blurry. Once I let go, things come into play. Now, if this was all it would do, well, I'd rather have Qt VR. However, what about if I wanted to zoom in to my controls This media is being dynamically loaded so that I get a higher resolution as the user actually does it. Muy cool.
[Transcript missing]
Including the ability to do some things that you couldn't actually do in QTVR, like roll the camera right and roll it left. This is for the roller coaster fans in all of you. And the reason it's able to do that is there is an actual OpenGL space behind it. So they're really knowing that there is a 3D space that they're working with. Very cool plugin. My hat's off to what they've been able to do there.
So is that really hard stuff to code inside of Live Stage Pro? Positively not. Those actions are very straightforward. I have a sprite check that has two kinds of sprites in there. It has a monitor sprite, which actually does all the updating of where things are in terms of pan and tilt and roll and whatnot. And then I have an operator that just pays attention to which control was pressed, and then it performs that action.
So here we can see the kind of actions The kind of actions that we have. It says, hey, if we're zooming in, Zoomify Zoom in. Pretty straightforward stuff. So if you've got VR that you want to get one of these kind of progressive environments, Zoomify is something to really take a look at.
And Live Stage Pro is the environment for integrating all of your QuickTime media. Yeah, I know, I miss my calling in marketing. Okay. Now, all those things were pretty cool, and we liked it, and we had fun, but you're saying, come on, Mike, that's not truly advanced. And I'll say, well, really? Seems pretty advanced to me. But there's more.
In some version of QuickTime, which is eluding my brain at the moment, five, thank you, QuickTime introduced the ability to work with XML. Well, actually, introduced the wired ability to work with XML, more correctly put. And I got to tell you, when I heard about this, well, I started drooling and other things, but I was pretty excited. He's telling me, "Get going." And what we're able to do with that is actually exchange to the server a lot of information in a structured way. So I've created a little skin here.
Over here you can see a QT list. Notice it's structured data. I've got a list. I can drill down into this. Over here I have the representation of that list. I'm going to put in a little chat program that basically got written over a weekend. I'm going to put in a name. I'm going to put in a little message.
And notice I put that little apostrophe in there. Now when I actually send that, I'm pressed Enter. You can see the XML that was sent up to the server. And right over here, you'll notice that we're putting in some... I guess it's not really a tag. I forgot what they call these things.
What he said. What was that again? Entity. Well, that's a nice generic word. So I can put in entities that represent some of the characters that would confuse HTML, excuse me, which would confuse HTTP GET, which is the underlying mechanism that is being used to pass information back and forth.
I'm going to close that window up, but there's more. One of the things that everyone who's ever worked with QuickTime in a serious way in a browser environment has wanted to do is, let me pass data into the movie. Please. You can do that now. First, let me show you what kind of stuff I'm talking about.
Let's say I had a playlist that I want-- playlist is kind of a bad example in some ways, but it's a good example for my purposes. I wanted to pass in something that looked like this. From the browser, maybe spit out from a database dynamically into a web page, and then passed into the movie.
Beginning in QuickTime 6, you have the ability to pass these in. So I've got a little text file out here, which is an example that I wanted to use. And I'm going to use a freeware application done in France called Peugeot. Did I mention it's free? Wonderful program. And it allows me to build up all of the information that I would want to embed in a page. So if I go over to QT list, I can say, yes, I want to pass a QT list in there. And I want to import a list.
There it is. Now it's in there. And now I can say show code. I'm missing that grow. And now I can see all of my object and embed tag. And you can see that I have a parameter called Movie QT List that actually allows me to pass structured data, volumes of it if you want, structured data into your QuickTime movie. Tremendously helpful. And the last thing I wanted to show. And then I'm done. Is a piece that myself, Janie Fitzgerald, and Robert West did. And it uses XML and QTless quite extensively.
It does a complete tour of the Los Angeles Metro's red line. You have a flash track down in here that I'm able to zoom in on and move things around. Right now I'm in North Hollywood. I'm going to drop that audio track down a bit. Over here I have a hotspot. As I can see, you can see up at the top right up here, it indicates what that hotspot is. That's a flash track actually. I click on that. If you listen closely, you can hear new audio being associated with this particular node.
Now there's, I think there's about 126 or 128 nodes in this piece. Now if I had to represent all that hand-coded, I'd be very old, very frustrated, and very bored. Three things that I don't want to be right now. Instead what we did was we created an external representation, simple XML file, and we read that in.
Not only that, so all the audio, all these images down here, even where on the map I am, is all represented in that XML file. This also gives me the ability, notice it says travel eastward. If I click on this, it reads in the other XML, and now it's doing it in Spanish.
Notice it's going to adjust the map. It loaded in new images down here and adjusted that map from reading, actually having already read and cached, the XML representation of where on the map I would be moving to. This is a very cool piece. I wish it was online and I could show it around.
It's not quite yet. As soon as we're able to get it online, we certainly will. But in case you're going to ask, it's not. Notice it moved over here. I can also click on the map and it will go, instead of going from platform to platform, it goes onto the street level.
So another thing that's represented in the XML is the street level and what is the platform level. Some of these stations have four nodes. Some of them have seven nodes. Some of them have nine nodes. Some of them have 13 nodes. So you can imagine I need a very flexible way of representing data. Structured data is well represented in XML. What a great match.
One last thing I would like to show about this is I've kind of moved around. I'm going to pop over to Hollywood and Western. I'm going to turn off my hot spots. I'm actually doing a few things behind the user's back. First off, I'm tracking everything you're doing. Every control you're pressing, every station you go to, every node you're going to, I'm tracking it all. And I'm putting it all into a QT list. And no, I'm not sending it to the CIA.
But I do have the ability to upload that and analyze it, and that is very helpful information for designers. But it also gives me the ability to say, go back. Uh-huh, it switched stations for me and put me at that node. Go back again. Yep, now I went to that other station. Go back again. It's back to Universal City now, and now it's going to go from node to node all the way back to where I started. So I'm going to make a definite go back because I'm representing it all as QTless internally. Thank you.