QuickTime • 1:06:02
QuickTime is not just linear audio and video; it provides a robust architecture for interactive experiences. This session discusses all interactive media types in QuickTime and how to create them. We also present ideas on how to use them effectively in a relevant way.
Speakers: Rhonda Stratton, Alex Ogle
Unlisted on Apple Developer site
Transcript
This transcript was generated using Whisper, it has known transcription errors. We are working on an improved version.
Hello everybody. I'm Rhonda Strahton. 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 Tubb 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 QuickTime. and the next step is to do the same thing.
Let's go 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 know, Well known. If you look at VR tracks and everything, those are natively interactive. 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 plugins 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 actual browser plugin you can actually have like inside the windows 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 and goes from Mac to PC very easily. 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.
And 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 are you going to send? You know, it can only go out to a specific group and that kind of thing.
So what this does is give you the advantage to keep bouncing and 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 phrase, the thing that everybody's been throwing around, but it still is very interesting and 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. You can see some very interactive things like database-driven Flash sites. It's extremely powerful. It is an older version of Flash, but because it is older, you have more resources. It's almost an advantage. A lot of times when we publish Flash content, we actually try to play back to plug-ins that people will typically have because maybe they haven't quite updated to the newest Flash plug-in, things like that.
We actually publish 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 been like, "That's the greatest thing ever." We have that ability now with QuickTime and it's kind of an exciting thing to do that. Using Flash 5 really isn't a hindrance necessarily. You should definitely take advantage of that.
There are so many people that know Flash and Action Scripting and all this. It's a great ability to simply jump in to creating QuickTime and interactivity inside of QuickTime. You can use resources, information, tutorials and things you find all over the place to get into creating your activity very easily.
A lot of people have Flash because we're talking about people that develop content for clients and things like that. 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. Of course you have QuickTime on your machine. The marriage of everything together is just so seamless. 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's 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 like database-driven, it's very difficult to move that over.
And 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 a 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.
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 in to 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.
And 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... 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." 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.
Let's talk about some of the tools. Of course, you have Live Stage Pro, which is like the Photoshop of interactivity inside QuickTime. It's the standard. Everybody that does any kind of professional interactivity uses that. There's a good reason, because it is probably the most powerful tool for creating interactivity and writing scripts and things like that, which we'll get into. Also, we should cover a few others just to make sure we're being equal to everybody. Of course, Live Stage Pro is also done by Totally Hip, which does Live Stage Pro and Live Slideshow.
Anyway, that's kind of a lower-end program, and not so professionally used, but it still adds quite a few abilities and things, so I wanted to show it up there. Then you have QTI and MoviePlanet. 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. You can go to the studio and everybody's using it already. You can simply go and buy a small application like Tattoo and 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 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. Then there's Go Live.
It kind of shocked me when I first saw it actually. I don't actually use Go Live in my studio, but I use BBEdit for most of my HTML writing and things like that. 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 WYSIWYG editing inside of it, then you can jump right in and start embedding files. It's a really great tool for that. Then there's a component download program called Axle.
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 Axle, but I think Axle'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 kind of the standard language for writing in LiveStage Pro, which I'm sure if anybody here has ever created anything inside of QuickTime or interactivity sort of things, that they probably have written some QScript because it is kind of the standard and everybody kind of 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, like, 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 kind of like 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 cue script, that's kind of a basic outline of how it's used.
I want to show this because it shows some of the track layouts from what you work with inside of QuickTime. You have a flash track, a sprite track, a movie track, and then a skin track. All these different tracks have attributes and abilities. What you do is you layer them on top of each other.
They communicate, but can pass variables and do all these different scripts. You can attach scripts to most of them. Probably the sprite track is the most capable as far as attaching scripts. Flash is great because you can pull in variables and sprite tracks can look at them and so on and so forth.
But we also, 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 kind of 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 if, you know, how many movie files are actually there track-wise. It kind of gives you like a little insight into how other people make their files. So it's kind of fun to nose around.
So then we get to TrackTypes. 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. So it's a very interesting product which I haven't gotten used to yet in anything commercial, but I'm 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 in QuickTime right now. I'm not sure what's going on in there.
And then Axle, 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 Axle 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 going to see more of because it's so nice to be able to have that ability to brand. Branded media players, which are kind of the obvious thing to do, to add functionality, which are great, but I think our scope is kind of limited there.
I think we could go beyond that into regular websites. I would love to just see somebody doing a lawyer's office site or something like that inside of QuickTime, because I think that would be really a breaking of a standard, or maybe 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--
[Transcript missing]
Then you have options. I say options, but I really mean ideas and thinking that you can really do inside your interactive QuickTime. 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, "Ah, we'll never be able to update it though." We started doing interactive Flash with database-driven content, which We were doing that in Flash 5 too, so we have that capability in QuickTime very easily. You're not necessarily limited to pulling in XML, which I'll show a little later. I'm going to show some examples using load variables, which is a really standard way to pull in some text from text documents or a database or something.
There's photo galleries, which we're seeing already. Photo galleries technically could be a slideshow or maybe pulling in a bunch of images and showing those and being able to create it dynamically. I think we'll probably see more of those. I'd like to see 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. We see that a lot.
We see that kind of with the movie industry. We see photos of 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. You could see contact forms.
Our 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. Multiload progressive movies. Now this is something I did and I thought it was kind of an advancement when I did it, but it still could go a long ways. But what you can do is like say a user is viewing content, right? And they-- 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. 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 while it's downloading, It can just load in the background.
What you can do is with multiple movies, you can say, "I want to see these four videos," and you click on them all, and they all start downloading, and they all have percents, and they're analyzing how much is going. You can sit there and go through a shopping cart or something, which is the next thing, which you can buy merchandise while you're sitting there watching or waiting for the downloads to happen. 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, you know, 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, 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 we're not really breaking any ground there. I mean, we're just collecting data inside of QuickTime.
Then we're passing it on. And, I mean, 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. I mean, he's not logging in or anything like that. So that's an option that's, 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, where people, 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. Being able to use Axle or one of the other 3D components is... doing 3D gaming and doing 3D interfaces could really be the next leap for what we see in QuickTime. I'm really inspired and can't wait to see what happens with that. Then we have 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 if you're the admin, you can log in and 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 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 2. 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, like, if you wanted to update text, you could have a flash track with editable text.
You could have 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. 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 a something you can just go back. I mean, if you're working in a studio or you have Flash or 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 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 the, 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.
At the same time, typically when we design a skin and a layout, we'll also, in that same file, do a simple mask. The mask, everything where it's black is going to be shown through. 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 mean, 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 like 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 on in there, this is an exit button.
It's going to not show up because it's underneath. If we put Flash in the background, it doesn't function correctly. 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. Then you're going to have the skin track. 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-- And here's a real simple basic preloader because we're going-- say we're going to 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 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 going to do is we're going to 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 autoplay turned off or something inside of QuickTime because that is a preference. And you 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-- the actual QuickTime player will react to whatever scripts are in the main timeline of Flash. But they won't necessarily-- I mean, you can't stop the playhead necessarily inside of a lower Flash-- or 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 five there where the playhead is. Is that the logo, the buttons, the text, everything, those key frames are in frame five. So before frame five, 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 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. Basically, the preloader is set there in frame one because 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. It's a very simple looping system that way. Here it is. Here's the loading.
There it is once we get to frame five. That's the concept we're going for. We're going to keep all our content. You could throw photos and everything in there. It would actually load in that loop form until it can actually make it. This is before we put our skin applied to it so we can actually see the process of what's going on.
Alright, so then we open 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.
I can give it to them and say, "Here, do this and this and this," and they just immediately jump in and start building. 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 when we did our comp, we exported out say the background 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 set there in view and then set image. So it's really simple and easy to add the whole 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 kind of 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, "Wow, 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 having--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.
[Transcript missing]
I mean, you could obviously see how you could brand that with, I mean, you could have a custom cut thing and then you could have print material that has a custom cut and you could have, you could just kind of go across all the boundaries. I mean, you could have such branding all the way across all your materials.
So, it's just amazing what you can do with that. And what we did was we set up a movie clip in there that, a movie instance that basically moves a small playhead around with all the text, which we're going to come back to that a little, in a little bit.
Okay. All right, the next thing, it actually has two pieces to it, this example. And, you 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. I 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 are what, but the 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 and then we're 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 1? And if it does, we're going to do a closed window. So this is kind of how you can create a closed 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 track, 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 1, and then it can close, and the other track automatically closes the QuickTime file. And basically I've done like a... I have a master sprite track which has this idle script on there and just keeps running all the time.
It has 16 different actions. When I'm making a new project inside of Flash, all I have to do is say, "Action = 3," and I got documented. 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.
This is the second part of this. What I'm adding here is a smoother way to close. You saw earlier when I closed that other file, it just blinked, it was gone. 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 kind of allow the user to exit the material in a smooth manner instead of just blinking off. This is kind of 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 it 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, 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.
Then we're going to say the root variable action equals 1. Then What happens there is that's going to execute that sprite track and it's going to 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. I 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 QuickTime 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! Okay. So there we go. I mean, it clipped right off. So let's look at that again. Wee! There it goes. The animation is open, which is just Flash. And then we close it. Wee. Okay. So you see the difference between saying, "Okay, 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'm going 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 an 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 if a simpler user, I mean, 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, and 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. Because any--I mean, as long as Flash or 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 approach2, which we're going to hit the document in 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 is going to 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, "Okay, paste it in the document and we're done." We don't have to go back in to 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 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 going to move the playhead around to move different sections.
Here is a continual frame throughout all the sections, which is the text block. What we're also doing here is we're using dynamic text. You can make it out towards the bottom there. It says "var text page." That's just what we're going to set. That's what sets in the script, which is the up top frame layer. Here we are embedding the fonts into the Flash document. Then we're going to export out as QuickTime. We get this. Let me go run over there and show you this.
First, I'm going to open up the text document. 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, and 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 kinda 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 doc-- 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. Dink. 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 just to get texting quick. And you can 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 my--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--those are three great sites to go to, axcrypt.org and Ultrashok 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-- Yeah.
--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 there's not--not that there isn't those are--there already but to have the magnitude of even those three sites and then we're just coming three Flash sites right there is that you could go--we could have a ton more and really advance this.
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 QuickTime do some amazing things.
QuickTime.org has some great ones. Obviously, Stagedoor at TullyHip is the place to go. There's the simple URL for the Apple MediaSkins. EZedia 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.
I can't stress enough, I think TullyHip is leading the way as far as really producing professional tool to do the most advanced work. Then Inspiration, which is a site that we did called MOVTV, which basically all it was done for is to inspire people. 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. And basically some example files like a clock. A clock necessarily doesn't work perfectly all the time, so 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 of 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 Linked Up, 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 a 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 like kind of like-- pulls in information from all these different sites so you can keep it in one place. That is it for me. Oh, okay, great. Yeah, I can do that.
Switch back to... Back then we were doing jumbled imagery and stuff, which 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 like 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 kinds of sites, and it was linked. And people were like, wow, I can't believe this. And then all these flash designers, they were like, oh, my gosh. didn't jump in and start building, which I'm-- Missed the point completely because that's what it was there for. These are different examples. Some of them are kind of extreme. Here's my little about.
Basically these buttons launch other QuickTime movies. The about has a little content and a little thing there. 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. Then this was an ad to favorites, which probably still works.
I don't know though, this was made a while back, so I'm not sure if that's going to still work. Experiments. 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. So, 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 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. and Alex Ogle, Alex Ogle, Alex Ogle, Alex Ogle, Click on the web browser and it will show you a web page in the background. This is a design company and it's really great. That's an example there. Then we have a floating ball.
Basically what this does is it uses 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.
[Transcript missing]
That's a movie TV.
And then, I'll show you this too. One minute. I'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.
[Transcript missing]
You can move through there. 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, which 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 ten 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. 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 MOVTV on our site and everything. But I think that's about it. I hope everybody enjoyed viewing that stuff.