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]