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]
