Hello everybody. I'm Rhonda Stratton. I'm the director of QuickTime Product Marketing. Welcome to this nice early session. Thank you all for coming. I think you probably all have started to attend enough of our sessions in the QuickTime content creation track to know that usually someone from Apple does the introduction, so that's me. And I'll come back for the Q&A to make sure that if there's any sort of QuickTime, you know, features and those kind of related questions that maybe I can help Alex with those. But just wanted to let you know that we invited Alex to come here and talk to you about interactivity just because of the great content that he's created that we've seen over the years. He's submitted content to the design awards that is, you know, done very well. And we thought it would be great to have him come and talk to you about the things that he creates and how he creates them and the things he's learned about working with QuickTime. So without any further discussion, I would like to introduce Alex Ogle from Tub Atomic Studios.

Thank you. Well, good morning. I want to thank you all for having me here. Before we do start, I do want to say that if you think of any questions during my speech and while I'm talking, just feel free to remember those and let's get some good Q&A towards the end about interactive QuickTime. I just don't want you to be hit at the end and there's the Q&A and you haven't thought about any questions. Definitely keep that in mind while I'm going through everything. My name is Alex Ogle. It's basically interactive design and I'm a partner in a business called Tub Atomic. Our company focuses on providing solutions to clients and very diverse basic clients like anybody from say a manufacturer of automobile tires to an independent music label.

While doing that, we've always used QuickTime in production. In 2001, we actually started using QuickTime for interactivity, which back then was pretty new and interesting. We were playing around doing skin designs and things like that that were kind of pushing the envelope and having a lot of fun with that. I'd just like to definitely thank everybody for having me here and glad to see the turnout. So let's go ahead and get started.

The first thing I'd like to do is just kind of go overview what I want to talk about, and that is what is interactive QuickTime and kind of why you should consider using interactive QuickTime, what tools are available for creating interactivity inside of QuickTime, and relevant ways to use interactive QuickTime on the web and other places, and then techniques for designing interactive Quick DOM.

ahead and get started on the first question, which is what is interactive QuickTime? And that's a very simple answer. It's not only the QuickTime file, which, you know, is, you Kind of well known. I mean, if you look at VR tracks and everything, those are natively interactive. So I'm not really going to talk about that so much.

I'm going to really focus on where you can use interactivity. And how you use it is displayed within QuickTime Player, inside the browser using plug-ins and then other compatible applications like Director and other things like that that use QuickTime. But each one of these has their own kind of possibilities for use. In QuickTime Player you have like skins and you can really brand things and it's interesting and you can jump right out of the browser window with it. The you can use wired sprites and wired movies that can talk to each other, and you can reuse, like, interactive controllers that can be branded, and then they can use all your media right away, and you can just kind of make them talk to each other. So that's kind of an advantage to using the plug-in over necessarily going to a player.

Let's go to the next one, which is why use QuickTime for interactivity? Well, it's cross-platforming goes from Mac to PC very easily. And QuickTime is really good about keeping up on having published the same version for both platforms. So you don't have to worry about if you make it for Mac, you know, the PC version is not out yet, don't worry about that. It usually comes out very seamlessly together.

It's also important to remember that, let's say you're doing viral content, like you have a movie that you want to share with your friends and then you want it to spread out and network and keep going. Well, you don't want it to go to a Mac user and then to go to a PC user and have it just kind of stop and not move on because that person didn't get to see it. With this, you get one file that can do both. Let's say you do a flash document or something like that and you export and publish it into an exe file and a Mac projector file and so you send that out well which one you go send you know it can only go out to a specific group and and that kind of thing so what this does is give you the advantage to keep bouncing going further and further with your viral content and the whole viral thing started like a couple years back and it's it's kind of a key you know phrase thing that everybody's been throwing around but it still is very interesting and and does does create a lot of awareness of your movies and your products and interesting things like that. And then Flash 5 support.

Flash 5 really broke ground when we were using Flash 4. I remember when it came out. It came out around 2001. We were very excited about that. We were like, "Wow, we can use all this. We can use a lot of variables, and we can do all these different things." It was a big advancement over 4. It had some different compression things, and audio, and stuff like that. It's very powerful. Some of the greatest sites are made in that. and you can see some very interactive things like database-driven Flash sites. So it's extremely powerful. It is an older version of Flash, but because it is older, you have more resources, so it's almost an advantage. A lot of times when we publish Flash content, we actually try to play back to plugins that people will typically have because maybe they haven't quite updated to the newest Flash plugin, things like that. We actually published in older versions and things like that. Being able to have Flash 5 content is like when Flash 5 came out, if we would have had somebody say, "Well, you can just do a custom skin around your Flash 5 content," we would have freaked out. We would have went, "That's the greatest thing ever."

of that looking back, I mean we have that ability now with QuickTime and it's kind of an exciting thing to do that. So using Flash 5 really isn't a hindrance necessarily. So you should definitely take advantage of that. There's so many people that know Flash and Action Scripting and all this, so it's a great ability to simply jump in to creating QuickTime and interactivity inside of QuickTime because you can just use resources and information and tutorials and things you find all over the place to get into creating an activity very easily. And a lot of people have Flash because they're-- I mean, we're talking about people that develop content for clients and things like that. So Flash is a very common thing. It's almost like Photoshop. You have Photoshop and Flash definitely in your studio, and you're using those every day. And of course, you have QuickTime on your machine. So just the marriage of everything together is just so seamless.

Then we have the same file can be used on a CD and a web. Now we've all gotten DVDs and CDs and things where somebody has tried to take their website and put it onto a DVD as extras or onto a CD because it's a band or something and they've just taken their content. Well, if that content's database driven, it's very difficult to move that over. And with using QuickTime, what you can do is if you make the whole website or something, inside of QuickTime, it's very easy to move that file and launch it directly from a CD or DVD and have that content be used the same on both platforms, the web or CD or whatever.

What that does is means you create one thing, and then it can be reused, which is great. And clients love that because we don't have to keep building and charting more and more. Now, the-- Seamless leap from a browser is just kind of an obvious thing. I mean, all players do that, right? You click on a media file, it launches into a player, you see it, and that's it. And you close the media file, and you go back. Well, a seamless leap is like-- is amazing in this case because you're talking about interactivity. So you could literally take and build an entire website inside of this and have a launch page in HTML that basically just has an embedded QuickTime file in it. That QuickTime file calls the other file and launches it right into the player. And then you have a whole site built right there. And so that's a completely interesting concept and with being able to move the files around everything to a CD, it really opens up some doorways that you can't really get with other media players.

And of course, then you have attached media skins, which is way different than other players also, in that we've seen MP3 players and different things like that where you can skin the program and have different interfaces. But it's always the same interface. I mean, you're basically a play button, a stop, a fast forward, that kind of thing. And so what this does is it allows you to mix in your own interactivity into an attached skin so that you basically have greater ability to make people understand where you're coming from and remember your brand and your logo and that kind of thing. That brings us to branding, which is like the key terminology when you're talking about QuickTime, in that you can really brand your content and make people remember and stand out from other people, and that it's -- it's In design, when you're talking to clients, they always want, well, we want our logo the same. We have this big, thick book of standards where if you don't use the logo the same exact way over and over and over, they won't use it or something. They'll keep making you force this manual. And so when you brand across all these different things like business cards and brochures and websites and CDs, having this one seamless thing that you can use and then having skins that you can cut and continue that branding across that place and not be locked into a square is quite a powerful thing.

And so let's talk about some of the tools. Of course, you have Live Stage Pro, which is like the, I don't know, the Photoshop of, say, interactivity inside QuickTime. It's the standard. Everybody that does any kind of professional interactivity uses that. And there's a good reason, because it is probably the most powerful tool for creating the interactivity and writing scripts and things like that, which we'll get into. But also we should cover a few others just to make sure we're being equal to everybody. And of course Live Stage Pro is also done by Totally Hip which does Live Stage Pro and Live Slideshow. And anyway, that's kind of a lower end program but it -- and not so professionally used but it still adds, you know, quite a few abilities and things so I wanted to show it up there. Then you have QTI and MovieWorks Deluxe, which are strong programs that can create great content.

Then you have Flash, which can export out MOV files. Like I said earlier, it's a tremendous resource because so many people already know Flash. Then you have shareware applications like Tattoo, which I think costs like $23 or something. So if you have Flash and it's in your studio and everybody's using it already, you can simply go and buy a small application like Tattoo and kind of get your feet wet and start playing around with that. I'll go through a short example of how to play with those simple things and kind of get a project going where we show how easy it is just to create something from what knowledge you probably already have by using Flash. And then there's Go Live, which-- It kind of shocked me when I first saw it, actually. And I don't actually use Go Live in my studio, but I use BBEdit for most of my HTML writing and things like that. But it's interesting that they put so much QuickTime interactivity inside of Go Live. But I wouldn't really recommend to go out and buy Go Live if you're just going to do interactivity.

It's something if you already have and you're doing a WYSIWYG editing inside of it, then you can jump right in and start embedding files. And it's a really great tool for that. Then there's a component download program called Axle, which-- You know, I haven't mentioned any other component, really, applications, but this program is amazing. I mean, when I first saw this thing, I was like, it was like when I saw Flash for the first time. It was like, wow, I can't believe that's inside QuickTime. And it really adds so many features. And there's some other 3D application software out there like Axel, but I think Axel's kind of leading the way right now. And... The possibilities for what we can really do with it are just kind of open-ended. I mean, I can't wait to see the content that really comes out from what we-- in the future from what we see with-- what the capabilities are for Axon.

So let's talk about a little bit of QScript, which is the standard language for writing in Live Stage Pro, which I'm sure if anybody here has ever created anything inside of QuickTime or activity sort of things, that they probably have written some QScript because it is kind of the standard and everybody likes it. So it's important to remember where QScript lives. And that's kind of what I'm trying to show here, is that It's too small. Anyway, you can see the highlighted key press there. And so if we type into the dialog box over here on the right, you can type in your cue script there, and it gets applied to the key press, which means that if that action happens, then it runs a script. So you can see some of the idle and all that kind of things, those track events that you can have happen that can execute your cue script. So that's kind of where it lives. It lives on different tracks and happens when events happen. So anybody that doesn't know anything about QScript, that's kind of a basic outline of how it's used.

And then you have-- I got to apologize, too. This is an older version of Live Stage. So if your version looks different, I'm sorry. And I wanted to show this because it kind of shows some of the track layouts from what you work with inside of QuickTime. You have a flash track, a sprite track, the movie tracks there, and then a skin track. All these different tracks have attributes and abilities. and so what you do is you basically layer them on top of each other. And they communicate, but in the compass variables and do all these different scripts and you can attach scripts to most of them and probably the sprite track is the most capable as far as attaching scripts. But Flash is great because you can actually pull in variables and sprite tracks can look at them and so on and so forth.

But you can kind of nose around on other people's files, which is kind of fun to do. If you open up somebody's QuickTime file, and it's a skin player or anything, you can kind of go down to-- if you have QuickTime Pro, you can go down to Edit and go to Enable Tracks and look at that. And you get a little dialog box that tells you the track names. So you can kind of look through and see if they changed the names or how many movie files are actually there track-wise. Kind of gives you a little insight into how other people make their files. So it's kind of fun to nose around.

So then we get to track types. And-- These are some of the track types. I don't know if I got every single one of them there, but in live stages, these are typical ones you'd make. Sprite track, picture track, text, flash, movie, VR, sound, color, skin, and then effects tracks.

And then you have the components, which actually add capability to the QuickTime. And these are the interactive ones-- well, what I would call the interactive ones. Obviously, there's codecs and things that are part of the component downloads, too, which add capabilities. But these add basically functionality and logic.

IPIX is kind of like VR. I don't think I've ever seen anything done in IPIX inside of QuickTime, but it's there. And then Zoomify is kind of an interesting product where you can zoom in and use big images and it kind of redraws them. and so it's a very interesting product, which I haven't gotten to use yet in anything commercial, but kind of looking forward to trying to figure out ways to use it. Pulse, which was kind of big several years ago, but I don't think they're really doing anything with QuickTime right now. I'm not sure what's going on in there. And then Axel, which is a 3D kind of rendering engine, and Pulse and FBX are kind of the same kind of deal. I mean, they're 3D rendering inside of QuickTime in real time. So Axel, I think, has probably, in my opinion, the best interface, the best ability for programming, and really, I don't know, it just seemed very intuitive. I just really liked it.

Okay, now we get to relevant ways. The relevant ways are-- and this is only four, but I think it's the big four-- full websites, which I think we're gonna see more of, because it's so nice to be able to have that ability to brand. And... Branded media players which are kind of the obvious thing to do to add functionality which which are great But I think that where our our scope is kind of limited there I think we could go beyond that into regular websites like I would love to just see like somebody doing like a like Like a Lawyer's office site or something like that inside of quick time because I think that would be really a breaking of a standard or Maybe to an ice cream shop that doesn't have any kind of media files But it's just interesting because you can brand it with the skin and show text. And so I think what that does is that opens up kind of a-- kind of a broader aspect of where we can use QuickTime and where we can kind of go with it. And I think if we do that, we're actually going to have more projects that we can keep rolling out. And we can kind of grow our user group. And it kind of opens up more flow for adding more work and more things. And it kind of gets more people using the software, which supports developers and so forth.

And that's always good. And it gives us the tools to use. So that's what we kind of want to do. We want to kind of create the awareness that QuickTime could be more than just a media playback device. I mean, loading movies in, multiple movies, that's great. It's a great way to display content, but it could be used for more. And that's kind of what I wanted to touch on there. And then games. I mean, I'm still kind of waiting for, like, a viral game to go out and somebody using, like, one of the 3D codecs components, like Axle or something like that where you can actually use gaming and do all these interesting things in a branded player. I mean that would be really interesting. And presentations, which you think presentations, you think, "Oh, I can just export out a keynote or something like that." But what you could do with presentations are online is really create presentations of products and things that are interactive and like you can spit it out on phones and and that kind of thing. It'd be really interesting. And so I think those are a great way to add more to them. Because we saw a surgence of VR, where you could spin around products on typical sites and stuff like that. But being able to actually move around a product, and alter it, and things like that can really get a feel for something that you're going to buy online. That's a tremendous potential there for using QuickTime.

Then you have options. And these are-- I say options, but I really mean ideas and thinking that you can really do inside your interactive QuickDOM. And that's like you can have database-driven information. One of the great things there is that people often used to, when we did Flash content and very expanded websites there, they were always like, oh, we'll never be able to update it though. And so we started doing interactive Flash with database-driven content, which I mean, we were doing that in Flash 5 too, so, I mean, we have that capability in QuickTime very easily. And you're not necessarily limited to pulling in, like, XML, which I'll show a little later, which I'm going to show some examples using load variables, which is just, like, a really standard way to pull in some text from text documents or a database or something. And then there's photo galleries, which we're seeing kind of already, which you could... Photo galleries technically could be, like, a slideshow pulling in a bunch of just images and showing those and being able to create it dynamically, things like that. Which I think we'll probably see more of those. Like I'd like to see like an artist do a website with their work and just make it real dynamic where they could upload some files and QuickTime could automatically spot them and that kind of thing. Which we see that kind of with the movie industry.

We see photos of like the sets and things like that, which is great but I still think it could be used a lot more. Contact form, which in Flash-- one of the greatest things about Flash is you can embed fonts and do color and things like that really easily inside of that. So you can see Connick forms-- are standard on websites. So you're not like have to put an email link that's going to do a mail to or something like that. You could easily do a contact form which hits a database or hits a server side script and fires off an email through the server, that kind of thing. Email friend works the same way.

You could email the player or email a link using a server, which was kind of an interesting idea. Multi-load progressive movies. Now this is something I did on-- and I thought it was kind of an advancement when I did it, but-- and it still could go a long ways. But what you can do is, like, say a user is viewing content, right?

they want to click on a movie trailer or a video for a band or something. And they click on it, and it starts to load. Well, if you're inside the player inside of QuickTime, or even if it's an embedded movie-- you could still do this-- you could-- you can have them be able to click out and still view content, which could be dynamically driven, like tour dates for a band and stuff like that. And so what you have there is the potential to, instead of going to a page where you see a little progress bar start and if they hit back to go view something, you know, while it's downloading, it can just load in the background. And so what you can do is with multiple movies, you could say, "I want to see these four videos," and you click on them all, and they all start downloading. They all have percents, and they're analyzing how much is going. You could sit there and go through a shopping cart or something, which is the next thing, which you could buy merchandise while you're sitting there watching or waiting for the downloads to happen. So those possibilities are there inside of interactivity, inside of QuickTime.

And for the shopping cart, at first, I think people were kind of resistant to this kind of theory, but I've always kind of thought, it's kind of an interesting concept, but if you move, if you collect information, like in, and we're only talking about Shopping Cart here, so we're collecting like, let's say a guy wants to order like four ball caps and two t-shirts, you know, and so he types it in and it basically keeps that number inside of QuickTime until he hits checkout, and then when he hits checkout, we go to a secure form on a web page, you know, so that it's, so But we're not really breaking any ground there. We're just collecting data inside of QuickTime and we're passing it on. And if anybody catches the data between QuickTime and the secure page, it doesn't really matter because it's just like somebody's blank order. He's not logging in or anything like that. So that's an option that I can see really catching on with people that are doing movies and things like that. And then we have chat, which is-- I've seen that before. And you can do that in Flash pretty easily. And you can use that same concept from Flash 5 inside of QuickTime.

Then we have the 3D gaming or interface design, which, I mean, being able to use Axle or one of the other 3D components is-- I mean, doing 3D gaming and doing 3D interfaces could really be the next leap for what we see in QuickTime. And I-- I'm kind of--I'm really kind of inspired and can't wait to see what happens with that. Uh, and then we have inter-- or ad--admin applications, which, When you think of updating a website, typically what you'll have is a front end and you'll go into it and it'll have all the information and then when, if you're the admin, you can log in and then you can alter that information. Well, usually the back end is different looking from the front end. I've kind of always thought that's kind of weird because if I want to see my text wrapping, I want to see the accurate font usage, I want to see everything that's exact to the front end with the back end. And you kind of get that with Contribute too.

You can go in, a client can log in, and then basically edit the information right there. And he sees the fonts, everything is accurate. But with QuickTime, you can do the same thing. You can create the same file with the capabilities of-- if you wanted to update text, you could have a flash track with editable text regions and that kind of thing where they could click on it and alter the text. and they'll see the font right there because it's embedded. And then you could add just a small button down there inside the QuickTime file that says update to the database, and it can shoot that information off and change the actual page. And all you'd have to do is put that file behind a secure area on a server or something like that to make it security issues.

So now we are to the examples, which is the fun stuff. Let's see. I'm going to start with the beginning project, which is basically using three applications besides paper and a pencil. You use Photoshop as the comp, then we're going to do a little We're going to do flash track. We're going to build it in there.

And we're going to pretty much do all our interactivity there, but slightly a little bit more in tattoo, which is the cheap application. So basically, this is kind of something you can just go back. I mean, if you're working in a studio, or you have flash in Photoshop, you can just do this. I mean, it's really easy to make a website. So let's start the project. And here's my little sketch.

And that perspective is just from the photo. It's not from what I'm going for with the look. And so basically what we're going to do there is up in the top right, we're going to do an exit button, which is pretty typical. And this is just going to be like a generic website look. And then we're going to do a logo, and then we're going to do like a horizontal menu there with like home and products and about us and that kind of thing. This is typically what you would just do and whip out for a client that wanted a small site. And then we're going to do copyright information and text blocks in the middle that have the text. So we take that sketch and we kind of mock it up in Photoshop. And so we got, like I said, the right exit button. We got the simple menu system and the logo's going to be up there and that kind of thing. And so our section title's going to be like Contact Us, About Us, Products, and Home. That's going to change. And then our content there would be provided by the client, so we just kind of type something.

And then at the same time, typically when we design a skin and a layout, we'll also, in that same file, do a simple mask. And the mask, everything where it's black is going to be shown through. And so we just create that little thing. And that's how it's going to be cut out.

And then we do the drag mask, which is obviously where the cursor can actually grab stuff. So you want to make sure your buttons aren't covered. I've had people that I've explained kind of how to do this real simple to do it and then not uncover the buttons in Flash. And they're clicking on it going, why is my buttons not working? It's because you didn't uncover it. So that's a good thing to keep in mind. Sometimes people spend days just clicking on something going, I can't figure it out. The scripts aren't working. And then, okay, the... The theory is, and normally I don't even sketch this up, but this is just for you guys so I can show you how the thought process is going. We're going to do a Flash movie. So we're going to create this in Flash, and we're going to export it out, and it's going to be the same canvas height and everything of our Photoshop comp, but without the top layer, because one thing inside of, like, a tattoo is that you can't, like, the Flash file is going to have to be on top. And so if we have a sprite that's going to be in there, this is the exit button.

it's going to not show up because it's underneath. And so if we put Flash in the background, it doesn't function correctly. So it's important to remember that you have to leave some space and then create a sprite for the exit button and then a sprite for the background that you're going to have not fill in with the Flash document because it's shorter. And then you're going to have the skin track. So basically, it's going to be four tracks.

And so here we're cutting out the Photoshop comp with the header, which is the background of where the exit button is. And while we're doing this, we're kind of measuring like in pixels how far we're going with everything. So we can recreate when we do our flash document, the exact height and everything of just the bottom portion of the comp.

And then we have the Exit button, which will cut that out. And we kind of leave a little room. We don't go right up to Exit, because we want the cursor to be able to have a little play there. You don't want to go real tight with your Exit button, because people will click around it and not quite hit it. Just kind of a courtesy thing.

And then we have-- we go to Flash, which means we take the Photoshop comp and we paste it into the-- the actual timeline, which we can export that out as PNG or JPEG or whatever and do that. And basically what we're going to do here is we're going to recreate the Photoshop comp. Because we don't want to use images. I mean, a lot of stuff is just gradients and things. We can just recreate it in vector form inside of Flash. And so we set our time canvas up, and we set our frame rate and that kind of thing. And we start recreating it.

And what we-- here's a real simple basic preloader because we're gonna-- say we're gonna put this on the web. Since QuickTime is progressive, you don't necessarily have to analyze the amount of information being downloaded and everything like that. What you can do is, is in the main timeline of Flash-- and in Flash, if you're familiar with it, you can have multiple movies and movies and movies, so it kind of goes down in a hierarchy. And what we're gonna do is we're gonna create two frames basically, a frame one and a frame five.

And those are where our action script on our main timeline is going to just work and live. And so on the first frame, we're going to have a play action, just in case they have auto play turned off or something inside of QuickTime, because that is a preference. And you've got to be careful about that, because we don't want them to sit there in a loading loop. And then we're going to have frame five, we're going to say stop. And in Flash, the actual QuickTime player will react to whatever scripts are in the main timeline of Flash. But you can't stop the playhead necessarily inside of a lower movie instance. So you can't really go-- if you put a stop inside a movie that's in a movie, it's not going to stop the main timeline. So this is where we need to keep the script. And then everything else, you'll notice in the frame 5 there, where the playhead is, is that the logo, the buttons, the text, everything, those key frames are in frame 5.

So before frame 5, what we have is just well, here's my play script. And what we have is a loading animation with just that little loading thing. It's just blinking. And that's a movie we just created, and it just sits there and runs in a loop. And so what will happen is, hopefully, is that when the user goes to the site, they're going to see this little loading loop that says loading until they get the site to come up. And so we try and keep our amount of memory that we're using and everything down low in the first loading loop so they can see that right away and wait for the process to complete. And that works because of the progressive download.

Because once QuickTime can play all the way to frame five and stop-- it's loaded because all our content begins in frame five. So basically the preloader's kind of set there in frame one because you know how when you view a QuickTime file online, you see the little progress bar go, and it'll play up to the point in the frames of where you can view. And so it's a very simple looping system that way. And here it is. I mean, here's the loading, right? And then... There it is once we get to the frame five. And so that's the kind of concept we're kind of going for is that we're gonna keep all our content. And you could throw photos and everything in there, and it would actually just kind of load in that loop form until it can actually make it. And this is before we put our skin applied to it so we can actually see the process of what's going on.

All right, so then we opened Tattoo, which, again, it's $23, so it's not much of an investment to play with. And so... I kind of like it because it's so simple. I can explain it quick to people and they get it and they can start doing it, especially if they're Flash designers and they have no background in doing QuickTime. So I can give it to them and say, "Here, do this or this." And they just immediately jump in and start building. So it's kind of useful in that, but it is limited. If you're going to do anything serious, definitely go get Live Stage. But if you want to play around with some interactivity, this is an easy way to go.

Now, the upper left-hand side, we have the setScan, the setMovie, and the addButton, right? Well... I kind of like this even because this is such a simple workflow because you can set the skin which means we--when we did our comp, we exported out say the background picture or the masking pictures with the drag mask and the regular mask in the background. And so we set the drag mask and the actual mask up inside of the skin info box and that's pretty easy because you can just sit there and view and then set image. So it's really simple and easy to add the whole like skin.

And then here we are. We're pasting in. We're hitting Set Button. And Set Button is kind of a deceiving thing, because we can set sprites and things that way. So we're actually setting a background thing. We're not actually going to-- the background header, because if we didn't, it would just show black or white or whatever the background color is. But we're actually setting that up without any actions on it. So it's a button, but it's not a button, because it has no action. So it's not going to have a rollover finger or anything like that or anything indicating that it's a button. And so we can use that as a background. And then we add the exit button, which the exit button basically just needs a simple action added to it. And why we're using Tattoo is because we want to add an exit button. That's really the only reason we're using it. And the skin. But you could still use that just with QuickTime Pro and using XML. And so that's, you know, freely done easily.

And it's listed out how to do it on Apple's website. But this makes it easy and quick and you can get that exit button in there because you don't want to not do an exit button. And I think everybody always says, people can just quit or they can just close the window. But users don't like that. They like to see the exit button. And we can't get past it. So using Tattoo in that way gives you that ability.

And you'll notice down there in the actions, we say close window, which is kind of funny because of the gradient that's going over it. But at the very bottom, you can see close window. And that's where you set the actions. And so it's really easy. I mean, you just click on a thing and say, actions, close window. And then we have the actual-- I'm going to show the project. So I'm going to move to a different computer.

Wee. It's very simple, and it's clean, and it's You could obviously see how you could brand that. You could have a custom cut thing, and then you could have print material that has a custom cut. You could just go across all the boundaries. You could have such branding all the way across all your material. It's just amazing what you can do with that. What we did was we set up a movie clip in there, a movie instance that basically moves a small playhead around We'll come back to that in a little bit.

All right, the next thing, it actually has two pieces to it, like this example. And, Basically, the first piece is that-- it's a little technique I kind of made. I don't know if anybody else is using this. It'd be interesting to find out. kind of conceptualized this when I was doing some stuff, because when I was first starting out in LiveStage, I was putting all these actions on the events, the event tracks, the track events. And so I kind of got overwhelmed by putting so many on and trying to do all this different stuff and keeping track of which buttons are which and that kind of thing. And back then, when I was using LiveStage 3.5, which is even more difficult to figure out which buttons-- I came up with this concept, which first off, we set the global variable.

I don't know if you can quite see that, but first what we're doing is we're setting the global variable we're actually pulling, we're setting the variable from Flash. So what we're going to do is we're going to analyze a variable from the Flash track, and then we're going to run an if statement on it just to say, does action set equal one? And if it does, we're going to do a close window. So this is kind of how you can create a close window inside of Flash, but not, and just reuse this sprite track in your project because it's running on idle. So it's just like this guy's watching the flash rack, and he's sitting there, and as soon as it says close, he goes, close, and it closes. And so in Flash, I can just paste this track in there, and I can create Flash interactivity and everything, and all I have to do is say, root variable equals action set, or action can equal one, and then it can close, and the other track automatically closes the QuickTime file. And basically I've done like a... I have like a master sprite track which has this idle script on there and just keeps running all the time and it has like 16 different actions. And so when I'm making a new project inside of Flash, all I have to do is say, you know, action equal three and I kind of got documented. And as soon as that happens, my sprite track automatically closes and I don't have to go into live stage and add functionality or anything.

And so this is the second part of this. What I'm adding here is a smoother way to close. And you saw earlier when I closed that other file, it just blinked, it was gone. And from the days of doing director and everything, when we exit out, the professional way to do it was to have some kind of animation, or say the address, or say thank you, or something like that, and allow the user to exit the material in a smooth manner instead of just blinking off. And so this is that same concept, but in an interactive QuickTime.

What we're going to do here is we're going to tell a movie to play when they click on the exit button. We're not going to actually set the action variable or have in live stage to close. So what we're going to do is we're just going to have an animation happen on the exit button. And so in the last frame of the animation, what's going to happen on the exit animation, when it animates all the way through. It's on the very last frame, we're going to say stop for one thing, just in case the action doesn't work. You don't want to keep it looping.

And then we're going to say the root variable action equals 1. And then-- What happens there is that's gonna execute that sprite track and it's gonna close the-- close the action at that point. So it doesn't have to be on a-- it's not really set on the button. It's set on the animation. And I'll show you that real quick.

So what we get there is just an opening animation. This is a very simple CD-ROM we did for Warner Bros. Jazz. had some rollovers, it was interesting. No sound, no video, no anything. It was just completely used as an interactive solution that-- I mean, you could have used Flash here, but we wanted to go quick time so we could actually brand it. And this was the cover of the CD. I basically took a photo and just clipped it out, and there's the CD. So it was a real simple project. And we did this like two days. It was easy. But on the close action, we wanted to do a little something extra, and we did do this in two days, so don't give me a hard time about this animation. It's real simple.

Wee! OK. So there we go. I mean, it clipped right off. So let's look at that again. Wee, there goes the animation open, which is just Flash. And then we close it. OK. So you see the difference between saying, OK, here's my website, and the close it. It just kind of goes away like any other application. You can actually do a little more, and it's fun, and it gives a little more feel to it. And that's just a kind of a professional polish kind of thing that you would do. I want to go back.

Now we're going to try and do a little dynamics inside of-- and this was Flash again. I apologize if no one wants to hear about Flash, because that's my background. And I think it's just so easy to jump into it, because so many people already know it. Let's see.

Loading variables. You don't necessarily have to pull in XML. I mean, that's kind of daunting to some people, because they necessarily don't have an XML system, or they're not really used to writing an XML document. But I mean, if you're a developer, you probably are. But a simpler user, you might need something simple. So you want just a simple text document.

So what load variables will do is it will pull in and assign variables, and these are just text, these variables like strings. They're going to just set in the variables inside of Flash. And then we're going to display them on our lower level hierarchy of our text. And I'll show you how we're going to try and do that. Now, you necessarily don't have to use text. You can actually use database. And I'm using PHP and MySQL here, but you can use anything. I mean, as long as QuickTime, the Flash track in QuickTime is returning with the proper string format and everything, you'll be fine. So it doesn't matter if you're using ASP or WebObjects or any of that stuff to do it. But here we're going to show how to do it with just a text document. And so we're going to call the text document, and then we're going to just pull in the variables. That's easy. And then we're going to do the same on approach two, which we're going to hit the document. And the document actually looks at the database and then feeds back to the QuickTime file the proper text information. So that's a simple concept.

And then this is what the text document's gonna look like. And this is what my little demo looks like right now. Text one, text two, text three, that kind of thing. And those are the basic text that's in that big block. So we can build all this, and then the client can come to us and say, well, here's our text finally the day before we need to publish it. And we can go, OK, paste it in the document, and we're done. We don't have to go back into each frame, is that a flash or inside of QuickTime, and add all that in.

Here is how we're doing the sub, the movie instance. We have--you see the headers there? That is actually the home-- Yeah, okay, there. You can actually see we're highlighting the header, first header frame. and you see how Home has a box around it. That's our little header. So in each frame, we've labeled what section we're in. And we're just gonna move the playhead around to move different sections.

Okay, and now here is a continual frame throughout all the sections, which is the text block. And what we're also doing here is we're using dynamic text and you can kind of make it out towards the bottom there. It says var text page. That's just what we're going to set. And that's what sets in the script, which is the up top frame layer. And here we are embedding the fonts into the flash document. And we're going to export out as QuickTime. And we get this. So let me go run over there and show you this.

First I'm going to open up the text document. And then I will open up-- And there's our text. And as we move through it, you can see how at the beginning of the document, it's opening and doing the load variables on the text document. It's pulling in the information. And then basically on the movie instance inside of the main timeline, it's moving and saying apply variable one, or text one, to the text block. And so you're just kind of adding in the text every time you move around. And all the text is just held in the root timeline. And if you were doing something like this, you could easily use Live Stage to pull the variables out and use them in some other form or alter them or do anything with them.

But for this example, this is just a simple way to do it. And so let's change the document slightly. Let's say in the home page, let's say say, my new page, and then we're going to do like, blah, blah, blah, blah. We'll just do a bunch of text. Save, OK. We close this. We open it back up, and there it is. And it's that fast and easy to use. So instead of doing this big XML formatting and worrying about all that, this is just the fast, easy, simple way to just get text in quick. And you could use this dynamically to control, say, what images you're going to load, or what movie in a movie you're going to use, or anything like that. And you can call that flash track inside a live stage, and it can actually pull in and tell the tracks what to be. And you can use it in your Q script. So it's a real simple way to get dynamic information in.

I hope that seems easy for everybody. OK, so that takes me to my links. Now, I put these links up on a little subsection of our website, but I don't know if that's OK. But it may still be there. It may not still be there by the time we get out here. But the Flash 5 tutorial and samples, basically those are three great sites to go to-- AxeScript.org and UltraShock and FlashKit. I mean, if you go to those sites, since we're using Flash 5, we're talking about it's had years and years of buildup for people putting.fla files up there that you can just look at and learn from. And so those are tremendous resources to use, which I'm hoping that as we go further with QuickTime interactivity, that we will gain larger amounts of tutorials and just sample coding files that are uploaded on the web and that we can go to to look at for like live stage and things like that. And not that there isn't those there already, but to have the magnitude of even those three sites, and then we're just covering three flashlights right there, is that you could go, we could have a ton more and really advance this. Thank you.

And then I have basically Hot Scripts, which most people already know from--if they're doing PHP and ASP and stuff and looking at other people's scripts and using open source PHP and things like that, which they actually have a Flash--I think they have Flash tutorial links and FLAs that you can download there too as well to learn from to see how you can hit a database and that kind of thing if you want to really make your quick time, do some And then we have the Quick Timing Tutorials, which QuickTiming.org has some great ones. Obviously, Stage Door at TullyHip, that's the place to go. There's the simple URL for the Apple Media Skins. And then EZDIA has some great tutorials on using QTI to do some interactivity with, too. So you should check that out if you're moving through and looking for different applications to use. But I can't stress enough, I think totally helps lead in the way as far as really producing professional tool to do the most advanced work. And then Inspiration, which a site that we did called MOBTV, which basically all it is was done for is to inspire people. And we did that back in 2001, so don't give me too much of a hard time for how it looks.

What I was trying to accomplish with that site was trying to inspire people to say, well, you know, I can skin something, but what can I do beyond that, or what can I do with that? And so that site is really built inside of QuickTime. Thank you. And basically it's in example files like a clock, and the clock necessarily doesn't work perfectly all the time, so... But I need to update it, but it's still a fun site to look at, and I still like some of the looks of some of the visuals and flash work done in it. And then Quicktimers.org, which is, like, tons of examples there for just interesting interactivity and everything. And then TotallyHip Showcase, which they have a great showcase that shows all the-- most of the best material that I've ever seen done in QuickTime Interactivity.

And then we have a couple design resources. I just want to throw these in because I really want to see the level brought beyond where we are now, and I think it really could go a long ways. And if you're surfing around looking at the best flash sites, you're going to be inspired to create the best QuickTime sites. And so I really think that looking at LinkedUp, which is a great resource, you see people throwing new stuff up there all the time.

And whenever any big design firm or anybody that's doing advanced work really updates the look of a site or something, they throw it on there. And then you have Designs Kinky which is necessarily not known as the best resource site but I really like it just because the people that choose the material that gets posted up in their news section, they update it every day. Talking about where people have updated a design site or something like that. You can really get some great inspiration there. And SurfStation, which is a larger design portal kind of site, which we've really seen a huge increase in design portal sites. So if--I've only chosen three. There's so many. If you go to like stereotypography, I think it is, you can choose and it can pull pulls in information from all these different sites so you can keep it in one place. And that is it for me. Oh, okay, great. Yeah, I can do that. Switch back to-- Thank you. Now, back then we were doing like jumbled imagery and stuff, which this was kind of trendy, so bear with me. And then we have the launch thing here, which we did our little Q logo, which was kind of fun.

So here's MOV TV, which I really like the same look. I'm probably going to do MOV TV 2 or something like that and just kind of play around and take this further. But you have indicators like drag. So this is the drag. And of course, I mean, it was really funny because when we got this up-- and it was on Designs Kinky and all these kind of sites, and it was linked. And people were like, wow, I can't believe this. And then all these Flash designers didn't jump in and start building, which I'm-- missed the point completely because that's what it was there for. And these are different examples. And some of them are kind of extreme. And here's my little about, which I'm going Basically, these buttons launch other QuickTime movies. And the About has a little content and a little thing there. And it's kind of twisted, because you can actually turn text and flash and everything, so you can do some really wacky stuff and really be creative with it. And then this was an ad to Favorites, which probably still works.

I don't know though, this was made way, way a while back, so I'm not sure if that's going to still work. Experiments, now what's so funny about this is that... I like to just play around and do some crazy stuff. And I thought, what is the craziest calculator I can make? And this is it.

And most of the time, I mean, this is way bigger than the 640x480, so most people never even see this stuff down here. Well, not that most people even use 640x480 anymore, but anyway, on some laptops and stuff, it's hard to see because you can't really, you know, it's not like a web page where you can scroll, so you can't go further than that. But this does some simple math and things. So, wee, broke. Okay, I didn't put very much error handling in there.

I wasn't really that concerned at the time. And then this is like a surf bar. This takes you to different sites and things. So--and then these are friends of ours that have sites that-- and this was just--this was a different concept. I was just like, "Well, what can we make useful?" And so I was thinking, "Ah, a surf bar. "It's just basically a links bar "that just kind of floats above everything." which, let's see, okay, here's, well, I don't necessarily wanna go there.

So you click there and it launches the web browser. And then it shows a web page in the background, which this is a design company and it's really great, if you haven't heard of them. And so that's an example there. And then we have a little glowing-- or a floating ball. And basically what this does is it used-- I wanted to show something around, so I needed an excuse to make it interactive, so I made it a clock. It looks like your system clock and just kind of feeds it back in. It shows the seconds and everything and then it has the year and everything in there.

And then no one knows this, but this is the close button. This is a perfect example. I've gotten several emails where people go, I can't close the ball. And it's like, just hit, you know, close, command W or something. But that's it right there for everybody in here. And that's a movie TV. And then-- might as well show you this too while I'm at it. We'll just go to my website real quick. Oops.

We actually have a QuickTime version of our site coming out soon, so it should be interesting. We're trying to move all the same content over and trying to keep the design active throughout everything. Let's see, let's go to the creative section. I'm sorry I have to go through this because I can't remember my exact URL for launching this, but here's the beautiful mistake player.

It loads up. Wee. Oops. All right. And so this is a custom cut player, and this was for a band, and this is all pulling in dynamically. Exactly. and tour dates and photos, which these are movies in a movie coming in. And this is a slide show. And basically that's just a movie with different-- just exported directly out of iPhoto.

You can move through there. And I took some of these photos at a concert, and it was kind of fun. And then music videos, which this is the kind of shotgun way of loading in multiple movies. I mean, you can click on both of these and you can see the progress bars coming down. And then I can still go back to like tour dates and check that.

So there it is. So I can sit there and read while it's downloading. I mean, it's a very simple concept, but it's just like tabs in Safari is how I explain it to people because if I want to load 10 pages up all at the same time so that I can review them after they're already loaded, which doesn't really matter much because we're all on high bandwidth anyway, but for the slower connection people, it's really great because you can load everything in and you can just read for a while or do whatever it takes to allow the time to go by because we're all set on slow bandwidth and we've watched movies just load and load and load. and you thought, can I click something else or can I open up another window? And this is just an inherent way to do that. Then we, of course, have a movie TV on our site and everything. But I think that's about it. Hope everybody enjoyed viewing that stuff. Thank you.