WWDC2004 Session 717

Transcript

Kind: captions Language: en 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 had started to attend enough of our sessions in the the QuickTime content creation track to know that usually someone from Apple does the introduction so that's me and I'll come back to the QA to make sure that if there's any sort of QuickTime you know futures and cook those kind of related questions that maybe I can help Alex with those but just want 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 submitted content to the Design Awards that has 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 Taub atomic studios [Applause] 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 my speech and while I'm talking just to feel free to remember those and let's get some good Q&A towards the end about interactive QuickTime because I just want you to be hit at the end and you know there's the QA and you haven't thought about any questions so definitely keep that in mind while I'm going through everything but my name is Alex ogle I do basically a interactive design and I'm a partner in a business called tub atomic and our company focuses on providing solutions to clients and very diverse basic clients like anybody from say manufacturer of automobile tires to like an independent music label and so while doing that we've always used QuickTime in production and in 2001 we actually started using a QuickTime for interactivity which back then it was pretty new and interesting and 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 so I just like to definitely thank everybody for having me here and glad to see the turnout so let's go ahead get started the first thing I'd like to do is kind go over view what I want to talk about and that is what is interactive click on and kind of a why you should consider using interactive QuickTime what tools are available for creating interactivity inside QuickTime and the relevant ways to to use interactive QuickTime on the web and other places and then techniques for designing interactive click done and 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 a nonlinear QuickTime file which you know is kind of well-known I mean if you if you look at like VR tracks and everything those are natively interactive so I'm not really going to talk about that so much I'm going really kind of focus on where you can use interactivity and how you use it is displayed within like click on player inside the browser and using plugins and then other compatible applications like director and other things like that that use click on but each one of these has their own kind of possibilities for use and in quick on player you have like skins and you can really brand things and it's interesting and you can jump right out of as a browser window with it the actual browser plug-in you can actually have like inside the inside the windows you can use a wired sprites which required movies that can talk to each other you can use re you reuse like interactive controllers that can be branded and then they can use with 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 and let's go to the next one which is why use a QuickTime brain activity well it's a cross-platform and goes from from Mac to PC very easily and it's QuickTime is really good about keeping up them on having published the same version for both platforms so you don't have to worry about if you make it from Mac you know the PC versions not yet and don't worry about that it usually comes out very seamlessly together and it's also important to remember that let's say you're doing like viral content like you have a movie that you want to share with your friends and then you want to spread out and network and keep going well you don't want it to 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 was 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 max projector file and so you send that out well which one you'll 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 kind of keep you know phrase the thing that everybody's been throwing around but it still is very interesting and and does create a lot of awareness of your of your movies and your products and interesting things like that and then flash five support now flash five really broke ground when when we were using flash four I remember when it came out and came out around 2001 and we're very excited about that we were like wow we can use all this we can use look variables and we can do all these different things and it was it was a lot of a big advancement over for had such of compression things on audio stuff like that and so very powerful some of the greatest sites were made in that and you can you can see some very interactive things like database-driven flash sites and so it's extremely powerful so it is an older version flash but because it is older I mean you have more resources so it's almost an advantage and a lot of times when we publish Flash content we actually try to play back to plugins that people will typically have because maybe I haven't quite up updated to the newest flash plug and things like that so we actually publish them and older versions and things like that and so being able to have flash 5 content is like it's like if when flash pop came out if we would have had somebody say well you can just you know do a custom skin and your Flash 5 content we would have freaked out we women like that's the greatest thing ever and because of that looking back I mean we had that ability now with with QuickTime and it's 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 nope no flash and action scripting and 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 some flashes are very common things almost like Photoshop like 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 it's just a marriage of everything together it's just so seamless then we have a same file can be used on a CD and 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 is like extras or onto a CD because you know it's a band or something and they've just taken their content well fat contents like database-driven it's very difficult to move that over and with with a using QuickTime what you can do is if you make a 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 you know the web or CD or whatever and so what that does is means you create one one thing and it's you can be reused which is great and clients love that because you know we don't have to keep building and didn't charging more and more now the seamless leap from a browser is it's just kind of obvious thing I mean we all players do that right you click on a media file it launches into a player you see it and that's it 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 clicked on file calls the 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 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 weighted from that other players also in that we've seen mp3 players and different things like that where you can scan the program and have different interfaces but it's always the same interface I mean you you're basically a play button a stop but that's for the kind of thing and so what this does is 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 xfa and that brings us to branding which is like the key terminology when you're talking about QuickTime and that that you can really brand your content and make people remember and stand out from other people and that it's InDesign and then when you're talking to clients they always want well we want our logo the same we have a big thick book of standards where if you don't use your you know the logo the same exact way over and over and over you know if they won't use it or something they'll keep making you Forces manual and so when you any 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 will not be locked into a square it's quite a powerful thing and so let's talk about some of the tools of course you have life stage Pro which is like the the kind of Photoshop puts a 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 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 in equal to everybody and of course live stage pro is also done by totally hip which does a live stage pro and live slideshow anyway via that that's kind of a lower-end program but it not so professionally used but it still adds you know quite a few abilities and things I wanted to show it up there and then you have like qti and movie works deluxe which are strong file or strong programs that can create great content then you have flash which can export out MOV files which that's like I said earlier it's a tremendous resource because so many people already know flash and then you have us you have shareware applications like tattoo which is which I think costs like 23 dollars or something so if you have flash and and it's in your studio and everybody is using it already you can simply go and buy a small application like tattoo and can get your feet wet and and start playing around with that and well I'll go through a short example of how to play with those simple those simple things and kind of 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 a go live which kind of shocks me when I first saw it actually but and I don't actually use girl lives 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 Bill life but I wouldn't really recommend to go out buy go up if you're just going to be doing an activity it's something if you already have and you're doing a WYSIWYG editing you know inside of it then you know you can jump right in and start embedding files and it's a really great tool for that then there's then there's a component download program called axel which you know I haven't mentioned any other component really applications but this this program is amazing I mean I 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 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 from what we and in the future from what we see with that what the capabilities are for action so let's talk about a little bit cue script which is the kind of standard language for writing live stage Pro which you know I'm I'm sure if anybody here has ever created anything inside of QuickTime learning activity sort of things that they probably have written from the cue script because it is kind of a standard and everybody everybody kind of likes it so it's important to remember where cue script lives and that's kind of what I'm trying to show here is that I can see this that's too small anyway the you can see the highlighted key press there and that and so if we type into the like a dialog box over here on the right you can type in your to script there and it gets applied with the key pressed which means that if that actually happens and runs the script so you can see kind of like some of the idle and and all that kind of things there's a check event so you can have happen that can execute your key strip 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 you script that's kind of basically guideline of how it's used and then you have I gotta apologize to this is an older version of live stage so if your version looks different I'm sorry and the this kind of I want to show this because it kind of shows some of the track layouts from what you work with inside inside of QuickTime you have a flash track a sprite track the movie tracks there and then the 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 compassing variables and do all these different scripts and you can attach scripts to most of them and probably the right track is the most capable as far as attaching scripts but flash is great because you can actually pull in variables and sprite backs and look at them so long to the fourth but we 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 quick on file on the skin player or anything you can kind of go down to a QuickTime Pro you can go down to edit and go to enable tracks and and look at that you get a little eyeball dialog box that tells you the track names seem kind of look through and see if they change the names or if you know how many movie files are actually their track wise can't gives you like a little insight into how other people make their make the files so it's kind of fun to nose around alright so then we get to track types and these are some of the direct types I don't know if I got every single one I'm there but in live stages these are typical ones you'd make sprite drag picture track tags flash movie VR sound color skin and then effects tracks and then you have the components which actually add capability to QuickTime and these are the interactive ones well what I would call the interactive ones obviously there's there's codecs and things are part of the component downloads to which which add capabilities but these these add basically functionality and in logic I pics is kind of like VR I don't think I've ever seen anything done and I picks inside of QuickTime but it's there and then zoomify is it's kind of an interesting product where you can zoom in use big images and kind of re redraws them so it's it's a very interesting product which I haven't gotten use yet in anything commercial but how 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 it's they're really doing anything click on right now I'm not sure what what's going on in there and then axial which is a 3d kind of rendering engine and pulse pulse and not FBX are kind of the same kind ideal I mean they're 3d rendering inside of QuickTime in real time so actually I think has probably in my opinion the best interface the best ability for programming and and really I don't know interesting very intuitive I just really liked it ok now we get to relevant leave Neverland tways are 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 some nice to be able to have that ability to brand and brand and media players which are kind of the obvious thing to do to add functionality which which are great but I think where our scope is kind of limited there I think we could go beyond that into regular websites like I would love to see like somebody doing like a like a like 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 or maybe do 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 then show text and so I think what that does is that opens up kind of a kind of a broader aspect of where we 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 cut opens up more flow for adding more work and more more things and it kind of gets more people using the software which supports developers and 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 quick kind of create the awareness that quick tank would be more than just a media playback device I mean loading loading movies in Ultima movies that's great it's a great way to display content but but it can be used for more and that's kind of one 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 with error codex components like axel or something like that where you can actually use gaming and do all these interesting things and 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 spearing outs phones and that kind of thing we really interesting and so I think those are like a great way to add more to them because we saw kind of like a surgence of VR where you can 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 on buy online I mean that's like that's a tremendous potential there for using Quicktime then you have like options I mean just and these are I say options but I'm really mean like ideas and thinking that you can really do inside your interactive clicked on and that's like you can have database driven information and one of the great things there is that people people often use to when we do Flash content and very expanded websites there they were like I will never be able to update it though and so we started doing interactive flash with database driven content which I mean we're doing that in flash 5 - so I mean we have that capability in quick got very easily and you're not necessarily limited to point 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 the galleries which we're seeing kind of already which you could photo galleries technically could technically could be like a slideshow or maybe pulling in a bunch of just images and and showing those and be able to create it dynamically things like that which I think we'll pressing more those like I like to see like an artist do a website with their with their work and just make it real dynamic where they could upload some files and QuickTime could automatically spot on the coming which we see that kind of with the movie industry we see photos would like to set something like that which is great but I still think it can be used a lot more contact form which in flash all the greatest things about flashes you can embed fonts and do color and things like that really easily inside of that so you can see connect 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 can easily do a contact form which hit the database name or hits a server-side script and fires up an email to the server that cathing email friend works the same way you could email the player email a link using a server which is a kind of an interesting idea multi loaded progressive movies now this this is something I did on and I thought was kind of a kind of 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 and they 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 a 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 is could be dynamically driven like two or days 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 the progress bar starting if they hit back to go view something you know while it's downloading it can it can just load and in the background and so what you can do is with multiple movies you could say I want to see these four videos and click on them all and they also download you know high percents and as I analyze and how much is going you could sit there go through a shopping cart or something which is the next thing which you can buy a merchandise while you're sitting or watching or waiting for the downloads to happen so those possibilities are there inside of interactivity static QuickTime and and for the shopping cart at first I think people were kind of resistant to this kind of theory but 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 guy wants to order like four ball caps and and two t-shirts you know until he types it in and it basically keeps that number inside of quick calm until he hits checkout and then when I hit 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 that inside quick comment passing it on and I mean if anybody catches the data between QuickTime and and the secure page it doesn't really matter because it's just like somebody's blank order even he's not logging in or anything like that so that's a that's a option that's that I can see really catching on with people that are doing movies and things like that then we have chat which is I've seen that before where people and you could do that in flash pretty easily and you can use that same concept from flash five inside of inside of clicked on then yeah we have the 3d gaming or interface design which I mean being able use axial 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 click on and I'm kind of I'm really kind of inspired and can't wait to see what happens with that and then we have intermediate min applications which when you think of a up dating website typically what you'll have is a front-end and you'll go into it and it'll have all information and then when if you're the admin you can log in then you can all do that information well usually the backend 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 so and you kind of get that with like contribute to you know you can go in a client can log in and then basically edit the information right there and you see the fonts everything is accurate but with quick time you can do the same thing you can create the same file with the capabilities of like if if you want 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 quick on file that says update that to the database and it can shoot that information often and change the to a page and all you'd have to do is put that file behind a security on a server something like that to make it secure security issues all right so now we are to the examples which is the fun stuff let's see oh I'm going to start with the beginning project which is basically using three applications besides paper and pencil you use Photoshop is the comp then we're going to do we're going to do flash track we're not 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 was kind of a something you just go back I mean if you're if you're working at studio or you have flash or you can 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 and that perspective is just from the photo it's not from what I'm going forward 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 we're going to logo and we're going to do like a horizontal menu there with with like home and products and about us and that kind of thing this is typically what you could just do and whip out for a client that wanted a small site and then we're going to do copyright information and and text blocks in the middle that 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 logos gonna be up there I think and so our section title is going to be like contact us about us products at home it's going to change and then our content there's would be provided by the client so we just kind of types of them and then at the same time typically when we design a skin kind of layout but also in that same file do like a simple mask and the mask everything where it's black is going to be shelter and so we just kind of create that little thing that's kind of how it can be cut out and then we do a drag mask which is obviously the where the cursor can actually grab stuff so you want to make sure your buttons aren't covered that's it I mean I've had people that I've explained how to do this real simple to do it and then not uncover the buttons and flash and I click it on it go and why is my buttons not working because you didn't like uncover it so that's a good thing to keep in mind sometimes people spend days click on something go 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 was just for you guys so I can show you how how the thought process is going we're gonna do a flash movie so we're going to create this in flash we're going to export it out and it's going to the same canvas Heights and everything of our Photoshop comp but without the look out the top layer because one thing inside of like tattoos that you can't like the flash file is gonna have to be on top and so if we we have a sprite that's going to be on in there this is the exit button it's going to not show up because done Durney and so and if we put flash in the background it uh it doesn't function quickly so it's important to remember that you have to leave some space and then create like a sprite for the exit button and then a sprite for the background that you're going to have not fill in and then with the black chocolate to the shorter and then you have the skin track so it's basically it's going to be four tracks so here we're cutting out the 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 did our flash document the exact height and everything of just the the bottom portion of the comp and then we have the X button which will cut that out and we can't 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 just kind of a courtesy thing and then we have a good of flesh which means we take the Photoshop comp and we paste it into the actual timeline which we can export that out as PNG or JPEG or whatever and do that and basically what I want to do here is we're going to recreate the Photoshop comp so we don't use images that means blood of stuff is just gradient so they we can just recreate it in vector form inside of flash and so we set our x kansas up and we we set a frame rate that guy thing and we start recreating it and what we here's a real simple basic preloader because we're going to say we're going to put this on the web since quicktime is progressive you don't necessarily after you analyze the amount of information being downloaded and everything like that what you can do is is in the main timeline in a 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 at frame 1 and a frame 5 and this is where our ActionScript on the 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 turn to offer something inside of inside of QuickTime because that is a preference and yeah be careful about that because we don't want to they're on a loading loop and then we're going to have frame 5 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 flesh and but they won't necessarily head necessarily inside of a lower flash or inside of a lower movie instance so can't really go if you put stop and say a movie that's in a movie it's not going to stop with a 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 buttons text we think those keyframes are in frame five so before frame five what we have is just well here's my play script and then what we have is a loading animation with just that little loading thing is just blinking it and that's a movie we just created and it just sits there runs a loop and so what will happen is hopefully was is that the when the user goes to the site they're going to see this whole 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 everything down low in the first loading loop so they can see that right away and wait for the width for the process to complete and that works because of the progressive download because once one splash or once a sorry futon can play all the way to flat or to frame five and stop it it's loaded because all our content begins in flat and frame five so basically the the pre loaders have to sit there in frame one because you know how when you view a quick type file online tool progress bar go and flat and it'll play up to the point in the frames of where you can view it so it's a very simple looping system that way and and here it is I mean here's the the loading right and then there it is and once we get to the frame five and so that's the kind concept we're kind of going for is that we're going to keep all our content when you can throw photos and everything in there and it would 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 alright so then we open tattoo which again it's 22 dollars so it's not much of an investment for to play with and so I kind of like it because it's so simple and I can explain it quick to people and they get it and they can start doing it especially if they're flash designers and and they have no background in doing quick time and so I can I can give it to them and say here do this or this anis and they just Emile's you up and start building and so it's it's kind of useful in that but it is limited I mean 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 set scan the the set movie and the add button right well I kind of like this even because this was such a simple workflow because you can set the skin which means we when we did our comp we exported outs a background picture that masking pictures with the drag mask and the regular mask in the background and so we set the the drag mask and the the actual mask up inside of the skin and fill box and that's pretty easy because you can just set there in view and in set image so it's really simple and easy to add the math to add the whole like skin and then here we are we're pasting in wares hit and set button and we're and set button is kind of a deceiving thing because we're we can set sprites and things that way so we're actually setting a a background thing that we're not actually going to look back on header because if we didn't it would just show black or white or whatever the background colors 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 gonna 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 head to it and why we're using tattoo is because we want to add a exit button that's really the only reason we're using it and scan but you can still use that just for quick compro and using XML and so that's you know freely done easily under 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 and I think that everybody always says well people can just quit or they can just close the window but these users don't like that they'd like to see the exit button and we can't get past it so having using Tatooine that way gives you that ability and in your most down there in the actions we say close window which is kind of funny because of the gradient it's going over but 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 thing and say actions close window ok and then we have the actual I'm going to show the product so I'm going to move to a different computer see all right there it is we it's very simple and it's clean and 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 it could just kind of go across all the boundaries I mean you can have such branding all the way across all your material 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 we instance that basically moves a small playhead around with all the texts which we're going to come back to that a little and then hold it let me move it okay all right the next thing it actually has two pieces to it this example and basically the first piece is that it's a little technique I kind of cannot made I don't know if anybody else is using this I'd be interesting to find out but I conceptualized this when I was doing some stuff because my wife's first starting out in live stage I was putting all the exactions on on cook on the events may amid tracks here the track events you know and so I kind of got overwhelmed by putting somebody on dry and do all those different stuff and keep a track on which buttons are which and that kind of thing and back then when I was using like live stage 3.5 which is which is even more difficult to figure out which buttons 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 work analyze a variable I'm the flash track and then we're going to run an if statement on just to say does action set equal one and if it does we're going to do a closed mundo 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 idle so it's an Allah it's just like this guys watching the flash track and he's up there and as soon as it says clothes he goes close and it closes and so in flash I can I can just paste this track in there and I can create flash interactivity and everything and I don't have to do is say root variable equals action set or action can equal 1 and and then it can close the other track automatically closes the QuickTime file and basically I've done like I have like a master-sprite track which has this idle script on there it 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 in action equal three and I kind of got documented and soon as that happens my sprite track automatically closes I don't have to go in the live stage and add functionality or anything and so this is the second part of this what I'm adding here is a is a smoother way to close and you saw earlier my close data that other file it just blink it's gone and from the days of doing like director and everything we when we when we exit out it's like the professional way to do it was to have some that animation or say say the address or say thank you or something like that and kind of allow the user to exit the the material and smooth manner and said just blinking off and so this kind of same concept but in but in the interactive quick huh what we're going to do here is we're going to tell a movie to play when they close click on the exit button we're not going to actually set the action variable or perps are having live stage to close so what we're going to do is we're just gonna 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 animates all the way through it 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 route variable action equals 1 and then it what happens there is that's going to execute that sprite track and it's going to 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 like opening animation this is a very simple cd-rom we did for a Warner Brothers Jazz had some roll overs it's interesting no sound no video no anything is just completely used as an interactive solution that I mean you could use flash here but we wanted to go quick on so we could actually brand it and this was the cover the CD I basically took a photo and just clipped it out and there's a see those real simple project and we did this like two days of the 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 that's real simple we okay so there we go I mean it clip start off so let's we go again either goes animation open which is just flash and then we close it we okay so you see the difference between saying okay here's my website and they close it and just kind goes away like any other application you can actually do a little more 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 now go back okay now we're going to try and do 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 I think it's just so easy to jump into it so many people already know it let's see okay loading variables you don't necessarily have to pull an XML I mean that's 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 developing probably hard but if it simpler users I mean you might need it something simple so you want just a simple text document so a look variables will do is it will pull in and assign variables and these are just text these variables like strings and they're going this to to just set in the variables and inside a flash and then we're going to display them on our lower level hierarchy of our tip of our text and I'll see how we're going to try and do that now you necessarily don't have to use text you can actually use data base and I'm using PHP and MySQL here but you can use anything because the ain't I mean as long as flash or QuickTime the flash track in QuickTime is returning with the proper string formatting everything you could be fine so it doesn't matter if you use an ASP or wet objects 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 on a document then we're just pulling the variables that's easy and then we're going to do the same on approach to which we're going to hit the document and the document actually looks at the add baseman feeds back the to the to the click on file the proper text information so that's that's a simple concept and then this is what the text document is going to look like this is my little demo it looks like right now text one and takes two takes three I kind of think and those are the basic text that's in that big block so we can build all this and then the I can come to us and say well here's a text finally the day before we need to publish it and we can go okay paste it in the document and we got we don't have to go back in the heat screams out a flash or inside a QuickTime and add all that in and here is how we're doing like the sub the movie instance we have you see the headers there that is actually with this the home let's see yeah okay there you can actually see we're highlighting the header first header frame and you see how home has a box around let's hard a little header so in each frame we've labeled what section we're in and we're just going to move the play head 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 to his bottom there it says a bar text page that's just what we're going to set and that's what sets in the script which is the atop frame layer and here we are embedding the fonts into the into the flash document and then we're going to export out as quick on and we get this so let me go run over there and show you this see for someone I opened up the text document we and then I will open up this and there's our text and as we move through it you can see how at the beginning of the of the document its opening and Calton gonna 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 to text one to the text block so you just kind of add an into text every time we move around and all the text is just held in the root timeline and if you're doing something like this you could easily use a 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 some way to it and so let's a change the doctor change the document slightly let's say in the home page and say say any page and we're going to do like balada we'll just do one today so you think okay 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 you use this is just a fast easy simple way just get text and 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 they can actually pull in until the tracks what to be and you can use it in your cue script so it's a real simple way to get dynamic information in laughs I'll go back I hope that seems easy for everybody okay so that takes me to my links now I put these links up on my little sub section of our website but I don't know if that's okay but it may still be there I mean absolutely there what time we get out here but the flash 5 tutorial and samples basically those are those are three great sites to go to extra org and ultra shock and flash kit I'm if you go to those sites since life since reason +5 we're talking about it's had years and years of buildup for people putting dot Fla files up there that you can just look at and learn from and and so those are tremendous resources to use which I'm hoping that as we go further with quick comment activity 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 they're 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 come in three flashlights 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 ASP and stuff and looking other people's scripts and using open source PHP and things like that which they actually have a flash I think that flash tutorial links and at the leads that you can download there too as well to learn from to see how you can hit a database my god thing if you want to really make your quick on do some amazing things and then we have the QuickTime materials which quick timing dollar org has some great ones obviously staged or a totally hip that's the place to go there's the simple URL for the Apple media skins and then easy video has some great tutorials on using that pi2 do some interactivity with - 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 hips leading the way as far as really producing professional tool to do the most advanced work and they're not inspiration which the site that we did called MOV TV which basically all is was done for us 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 but 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 it's in example files like a clock and clock necessarily doesn't work perfectly elves on system but I need to update it but it's a it's still a fun site to look at I still like some of the looks of some of the visuals and flash work Dinah and in QuickTime restore which is like tons of examples there for just interesting interactivity and everything and in until the up showcase which they they have a great showcase that shows all the most of the best material that I've ever seen done and click on the interactivity and then we have a couple design resources I just want to throw these in because I I really want to see a little level brought beyond where we are now and I think it really could go a long ways and if you look at if you're surfing around looking at the best flash sites you're going to be inspired to create the best quick concise and so I really think that looking at a linked up which is a great resource you see people like throwing new stuff up there all the time and and whenever adding any big design firm or any but it's doing advanced work really updates will look of a site or something they throw it on there and then you have a science Kinki which is necessarily not known as the best resource site but I really like it just because the people to choose the material that gets posted up in their news section they updated every day I'm talking about where people updated a design site or something like that you can really get some great inspiration there and surf station which is a larger design portal kind of site which we've really seen a huge increase in design pull sites so if I've only chosen three there's so many if you go to like stereotype ography I think it is you can you can choose and it can pull like kind of like pulls in information from all these different sites you can keep it in one place and that is it for me okay great yeah I can do that switch back to all right now back then we were doing like jumbled imagery and stuff which is kind of trendy so bear with me and then we have the launch thing here which we did our little cue logo which is have fun okay so here's MOV TV which I really like the same look I'm probably going to do like MOV tv2 or something like that and just kind of play around and and take this further but you have indicators like the drag so this is the drag and of course I mean it was really fun as when we get this up and it's it was on design King G and all these kind of sites and it was linked and people people are like wow I can't believe this and then all these flash designers didn't jump in and start building which I've missed the point completely because that's what it was there for and these are different examples and some of them are kind extreme and here's my little about which basically these buttons launch other QuickTime movies and the about has like a little content and a little thing there it's kind of all twisted because you can actually turn a text and flash and everything so you can do some really wacky stuff and really be creative with it and then this was a add to favorites which probably still works I'm guessing maybe I don't know those made way wait a while back so not sure if that's going to work experiments now what's so funny about this is that I like to just just play around and do some crazy stuff and and I thought what is the craziest calculator I can make and this was it and in most of the time I mean this is way bigger than the 640 before 80 so most people never even see this stuff down here so well not that most people usually exported before 80 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 webpage where you scroll so you can't go further than that but this does some simple math and things so we broke okay I didn't put very air plus air handling in there wasn't really that concerned the time and then this is like a surf bar this takes you to sites and things so and then these are friends of ours that have sites that and this was just this is a different concept I was like well what can we make useful and so I was thinking not surf bar it's also basically links bar that just subscribe floats above everything which will see okay here's my I don't see I'm good there let's go let's go one time so you click there and it also is with the web browser and then it shows a web page in background which this is a design company it's really great Gebhard them and so that's example there and then have a little glowing or a floating ball and basically what this did was that used up and I wanted to show something around so I need an excuse to make it interactive sighs I made it a clock and so it looks like your system clock and just feeds it back in and it says the seconds and everything and then has the year and everything so and then no note no one knows this but this is the close button this is a perfect example I've gotten several emails with Google I can't close the ball it's like just just just hit you know close to an W or something but I'd say right there for everybody in here that's that's a movie TV and then as I'll show you this - I'm at I'll just go to my website quick oops yeah it's a flash site we actually have a quick conversation with 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 I'll see it's going to create objection 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 which it loads up we loops alright and so this is a custom cut player and this was for a band and this was all pulling in dynamically and got to or dates and photos which these are movies and movie coming in and this is a slideshow and basically that's just a movie with different just exported directly out of a photo you can move through there and I took some of these photos at a concert it was kind of fun and then uh music videos which this is the 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 two dates and and check that so darkness 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 and so far as how I explain people because if if I want to load ten pages up all at the same time so that I can review them after there loaded which still no matter much because we're all high-bandwidth anyway but it for the slower connection people it's really great because you can load everything in you can just if you can just read for a while I do whatever it takes to allow the time to go by because I want to we're all set on slow bandwidth and we've watched movies with load load load you thought can I click something else or can I open up another window and and this is just a inherit way to do that so then we of course have a movie TV on our site and everything but I think that's better hope everybody enjoyed viewing that stuff [Applause]