Click on any phrase to play the video from that point.
[Adobe TV presents]
[Rufus Deuchler in..]
[CS Insider Design]
Hi there, my name is Rufus Deuchler,
worldwide design evangelist
for Adobe Systems.
In this episode of CS Insider, I want to take
a look at a feature of Muse, the application
that allows designers just like you and me
to create websites very, very easily and
that feature is called Trigger and Target, and
basically what we want to do here is
to create hot spots on our webpage so
that our users, our viewers of our webpage
can actually hover with their mouse
over some images or other information,
and have windows popping up on the page.
Just to show you an example, let's move
over here to Safari where I actually
created a page already, and you see
that as I move over the type tool here,
we have tool tip 2, tool tip 1,
and tool tip 3,
and this is something that is really,
really easy to do with Muse.
Let's go back to Muse here and go to
our work area, and what we have here
is our master page and
all the pages that I've created.
This is a site that I'm working on
to actually show what I do
as a worldwide design evangelist, and one of
those pages here, the last one, is my tools,
and on this blank page, which is obviously
based on that master page that
I've just shown you, I want to add the image,
and to do that it's just like an InDesign.
I do Command D to import the image.
Here is my jpeg, and this jpeg is
rather large as you can see it's
a 2.9 megabyte file, but the cool thing
about Muse is that Muse will take that big file
and export it in an optimized version
for the web so we can work with
our large files in our Muse projects
not worrying about band width later on.
So let's take this jpeg here, select it,
and put it on the page, and
exactly like InDesign, we have
the place gun, and I can simply click
and place the image at its 100% size
or I can start clicking and dragging
and placing this image inside of my layout
simply by putting it in like that,
and as you can notice all of the elements
such as the header and the footer at
the bottom of the page have
moved automatically to accommodate
for this large image.
The next thing we want to do is to use one
of those compositions that we have here
in our widgits library because Muse comes with
a lot of elements that are ready
to be used without you having to worry about
creating them, although you can of course
if you need to.
So inside of the compositions here, we see
that we have some compositions for featured
news, and let's click on it, and we can see
a little preview here in the widgets library,
a light box display for images or photographs,
presentation display; again, with an image
and little hot spots down here, but the one
we're using today is the tool tip,
and tool tip already creates 3 different kinds
of tool tips here with some triggers, okay?
So these little square areas are the triggers
our users will click on and these
are the tool tips, and to do that we are simply
going to take the tool tip and drag it
over onto our page.
So as you can see I have the ability to actually
add other tool tips simply by clicking on these
little plus buttons here, and if we go here
and on the upper right corner of
our composition we can see that
we can access the options of that composition,
and here we can decide
on the position of the elements
if the elements are scattered, which are
the way they are here in our page right now
or we can have them stacked on top
stacked on top of each other.
We can choose the event on rollover
or on click depending on what we want
our users to do with our tool tip.
Let's leave it on rollover because I want
my user simply to go with the mouse over
the tool tip and have the box come up.
I can hide everything on roll out,
stay on roll out so that once the user
hovers over the area the tool tip actually stays,
but let's hide it on roll out because I want
the user to be able to show and hide
those tool tips.
I can choose the transition.
I can choose the speed of the transition
from slow to fast, going through medium here,
and I can also choose Autoplay,
and Autoplay is kind of cool because
maybe my user doesn't even know that there
are tool tips on that page.
So there is actually 2 things I can do, I can
create hot spots that actually will
show the users that they can hover or
click on these hot spots or easier
in this case is simply to say "Autoplay"
so that these hot spots will
appear on the page over time.
So let's click Autoplay and
choose a medium speed for the Autoplay,
and I will have a look at how
that works in a second, and then we can
also position the triggers on top,
hide all initially for example,
and then we can also add the parts,
and the parts is kind of interesting because
the parts are other buttons that we can use,
and as you've seen in my compositions here,
I have light boxes and featured news,
and in those compositions we do actually
have a previous and next button
for our composition.
So let's go on and start working
with those tool tips.
Of course the first thing we need to do is
to see how these actually work, and we can
do that inside of preview.
Preview here, and we go right here, and
the animation starts, and as I hover
over these buttons, I see which tool tip
actually appears, okay, and now
we need to place those triggers on the page
and also position the tool tip.
So let's go back to our design mode here
and start placing those tool tips.
The first one I want to place is
this tool tip over here, and place it right here
over my lens tool, and then it's
going to take the trigger and place
the trigger right here over my lens tool,
and then I'm going to take my 2nd tool tip,
and move this one over here to my type tool,
take the trigger and move it up here,
and place it all over my type tool, and the last
one I'm going to place is actually tool tip 3,
and this is my selection tool.
So, again, I can select these objects and
make them as big as needed on my layout.
Of course these triggers
we don't want to see them.
Now they have this fill color applied to them,
but I can select them all for example
like this simply by shift clicking the objects,
and under fill what I will do is
simply say, "No fill at all," okay so that
they disappear, and then of course I can
go into my tool tips and change the text
that I have in here, and I can say,
"This is to watch closer," and then
I can go into the 2nd tool tip here, and this is
my type tool, and my last one here is
the selection, select.
These are my favorite tools right now.
All right, so now that I've inserted
my text on these call outs, I want to show you
also how easy it is to actually format those,
and you can simply go in here and select them
by clicking on them, and you can see that
I can change the fill color, the corners,
but more interestingly I can
create graphic styles, so for example
I can choose another fill color.
Let's make another fill color with some
cyan color here for example, and
actually that's a little bit too light so
let's take the blue color and maybe go here
over to stroke and say that we don't want
any stroke color at all, and then maybe the
corners should be slightly smaller so
we go here to our selections and move
that down to maybe 20 pixels, and you've
seen the corners are actually smaller now,
and in order to apply that new styling to
all of the other buttons, what I can do in Muse
is actually create a new style from
the attributes that I've applied to that object.
So simply by clicking on this button here,
I will create a new style.
I can name that style of course I'm going to
call it, "Call out 2," perfect, and then select
the other objects like this one and say,
"Call out 2," and select this last
object here, Callout 2, and I'm done.
Now...now that these objects have actually
a style applied to it, I can go back into one
in of any of those really and change the fill color
to maybe something like a red color which
matches my design a little bit more,
and then just like in InDesign or Illustrator,
when we change styles there is
a little plus sign appearing here, and basically
this tells me that the style has been modified,
but if I go down here,
inside of the graphic styles panel, I can actually
really find the style simply by clicking on
that button, and in one go I can really
find all of my tool tips.
So let's have a quick look at what
we actually did here: let's go to preview and
the animation will actually start on its own.
Watch closer, type and then
it goes over to the select, perfect,
and if I hover over the object, these
tool tips will actually appear automatically.
Well, this is basically Trigger & Target in Muse.
Muse is an application that allows designers
just like you and me to create websites
very, very easily. [Executive Producer Bob Donlon, Director Kush Amerasinghe]
[Producer/Offline Editor Karl Miller, DP/Online Editor Erik Espera]
[Adobe TV Productions tvadobe.com]
