Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Creating Video Portfolios with Flash Catalyst

0 (0 Likes / 0 Dislikes)
[whirring] [ADOBE® TV PRESENTS] [SHORT AND SUITE] [mechanical clunking] [JASON LEVINE] [clunking continues] [KARL SOULE] [clunking continues] [whirring] [SHORT AND SUITE - ON THE ROAD WITH JASON AND KARL] Hi. I'm Karl Soule, product evangelist for Adobe Systems. Today we're going to kind of change gears a little bit, and I'm going to work probably a little bit outside of your comfort zone. What I want to go in and cover is a new tool inside of Production Premium. If you ever had the interest of putting together a Web portfolio of your work, if you've ever wanted to do something that's maybe a little bit more interactive than just sticking a Flash file up on a website, there's a new tool in Production Premium called Flash Catalyst which is designed for people like you and me, people who don't know and don't want to get into coding but still want to create some kind of interactive design. I'm going to show you some specific features that are geared around video. So to get started, I'm over here in Premiere Pro, and I've got a Timeline sequence here. This is some behind-the-scenes footage for the TV show, "Paladin," which you've probably seen in some of our other videos here. What I want to do is I want to put this together in a video portfolio that we're going to build over in Catalyst. In addition to this, I also have some artwork here inside of Adobe Illustrator. These are going to be some playback buttons that I've created. I've got some other artwork that we've created in Photoshop. And so the basic idea when we're working with and we're getting ready to create something in Catalyst, we can do all the artwork design using the standard tools inside of Production Premium. So we're going to use Premiere Pro and After Effects to create video files, we're going to use Photoshop to create graphics, we're going to use Illustrator to create graphics, and Catalyst is the place where we can bring them all together and we can add interactivity. So if I want to take this Timeline and output this using Premiere Pro CS5, I'm going to go ahead and go to File, Export, Media, and this brings up the Export Settings. A few changes here. I'm not going to go too much in detail with some of the new changes in CS5, but we do have the option of using a direct export. If we have a really short piece of video that we just want to use and export directly from Premiere, we can go ahead and do that. Or we can throw this into the Render Queue and use Adobe Media Encoder, which is also 64-bit multicore optimized and does a great job of exporting files. So we have some choices as far as export is concerned. Now, since we're working in Flash Catalyst, like the name implies, we need to encode our video for Flash. So I've got my format set for FLV/F4V, and I can choose a preset here. If I want to absolutely match my Source Attributes, keep the frame rate, keep the size of my video the same as what's in my Timeline, I can choose these Match Source Attributes presets. In this case, since I'm working in a 1920x1080 Timeline, I want to kind of down res the video just a little bit here, so we're going to go ahead and come down here and choose the Web Large NTSC Source F4V preset here, and I can go ahead and choose to export this particular file. If I choose the Queue, this will go ahead and drop the file in the Adobe Media Encoder-- there we go--and you'll notice that now, by default, the Queue will actually start automatically and start rendering this file in about two minutes' time. So if I want to, I can go back over to Premiere Pro, choose a different Timeline that we're working with here-- let's take this DVC Pro Sequence Final Mix. Maybe we want to use this in our project. Again, I can select this, go to File, Export, Media, and the Media Encoder will keep the same preset that I used on my first Timeline. I can go ahead and hit Queue on this, and once again, this will drop this over into the Media Encoder and this will start encoding now in about two minutes. So this is a really nice way of just if you're going through an entire project and you have a bunch of different videos, you can use the Media Encoder to do this. Okay. I'm going to go ahead and cancel out of that because I've actually already gone through and encoded a few files here. If I go in and show you them here, if I go into Video and Audio, you'll see that I've got a series of different files. I've got some of these encoded in F4V format. I'm also using just a few in the older FLV format just for some variety just to show you we can use both in Catalyst. If you want to use the best possible quality video, F4V is an H.264-based codec. It works great. If you need backwards compatibility for some reason, FLV is the older On2 VP6 codec. For backwards compatibility, you may want to use that. Now, when I go inside of Catalyst, the way Catalyst works is I can import all of this different artwork into a project. I'm going to get started here with one particular project. This is a video player part of my project here. What I'm going to do with this, you can see that I've already brought in and I've got some background artwork here that's already been created, but we need to put in and drop a video clip into this player here. So what we're going to do is go to File, Import, and choose Video/Sound File. And from here, let me go ahead and go to my project. And I can choose any of these different videos. We'll go ahead and take this "behindTheScenes" video, and I'll select that one. And when I bring in a video into Catalyst, you'll see that this has already brought in the video and it's got some playback components here. If I wanted to, I could go ahead and just use the standardized playback components within the project here. But we want to actually use our own artwork, and I want to show you how you can create buttons out of your own artwork inside of Catalyst. So what I'm going to do is go over to my Video Player controls here, and there's a little property here called Video controls. We're going to set that to None, and you'll see that those video controls that came in by default are now gone. I could come in here and I can start to scale this, I can get this sized to fit my artwork here. Now what we want to do is we want to import some buttons. If you saw, over in Illustrator I have some wonderful artwork which I slaved over for hours to put together here in Illustrator. Here are the buttons that we're going to be using. I'm going to go back to Catalyst and import that Illustrator file here. So we'll go to Import, Adobe Illustrator File, and I'll just go into my Source Design files here, and here are my video player controls. We'll go ahead and import that. When we import artwork from Illustrator or Photoshop, we're going to get some different choices here. And what this is doing is this is getting this artwork ready for the Web. So it's making some choices and putting things together to make sure that this is all ready for the Web. So now that I've got this artwork, I can kind of pick this up and move this around here. We'll put this down here near the bottom of the screen. Right now I've got everything selected, so let me just click off of that so you can see. Right now these look like buttons. They're not buttons. They're just art at this point. I haven't told Catalyst what I want to do with them, if I want them to just be part of the background or if I want them to actually do anything. So what I'm going to do is let's start by selecting this Play button, and you'll see that we have this little pop-up kind of a heads up display here. This is telling me, it's like here I've got my button selected, and it's saying, "You want to convert the artwork to something?" We want to convert it to a button. And when we convert it to a button, if I come over here to this little Interactions panel, I can say I want this button to do something. When the button is clicked, I want it to play the video. Now, it asks me to choose the video. I only have one video in this particular project that I'm working on, but I can have multiple videos, so we want to make sure that we have the right video selected. There is my "behindTheScenes" video. Click OK. Now I want to create another button, and in this case you'll notice that these two toothpicks here, they're not connected in any way. I'm going to use the Shift key to select both of these at the same time. We need to convert those two items into one single button. I'll go ahead and I've got them selected, use my heads up display, convert them to a button-- you'll see that the graphic here has now changed to show that this is one item-- and we'll add an Interaction, On Click, Pause Video, and we'll choose the video in question there. And then finally, we'll do the same thing with the stop button here. I'll convert this to a button, add the Interaction if it's clicked, stop the video, and again choose the video in question here. All right. In theory, I'm pretty much done with this. I can take and I can use these controls to start playing back the video. But I want to add one more thing with these particular buttons. When I click on this particular button, I want to show people, give them some sort of a tactile sensation that they're actually clicking the button. So to do this, I'm going to select a button here, and you'll see with the button selected I have this little heads up display showing the different button appearance states. For those of you who have never done interactive design with buttons before-- and this was something that was kind of new to me-- think back to creating links and selections over in something like Adobe Encore for DVD. When you select a button, it has to be highlighted in some fashion. And inside of Catalyst when you create a button, you can have the button just sitting there. That's the Up state. The Over state is when you roll your mouse over it. The Down state is when you actually click on it. And then finally, there's the Disabled state for those occasions where you don't want a button to be active. So when someone clicks on this button, I want the button to move a bit. What I'm going to do is I'm going to say Edit Button Appearance when someone clicks on it. That's the Down state. And then I'm going to come down here and click the button again, and I'm going to use my arrow keys on my keyboard here to move this down a little bit and over a little bit just like that. So now if I go back and forth between here's the Up state of the button, here's the Down state of the button, so when someone clicks this button, it's just going to move down a little bit. You see I'm in a special viewing mode right now where I'm inside of this button and I can check for my breadcrumbs here that I'm inside of Button1 here, so I'm going to go ahead and go back to the main player here. Now if I want to preview this and see how my new player is coming together, I can go ahead and hit the Control, Enter keys on the keyboard. What that will do is that will actually build this out and let me see how this is going to work. It'll open up inside of a Web browser. So now I've got my player control here, and if I come over here and I click this button, you can see that my video starts playing back. If I come over and I click on the Pause button, it's going to pause the video. If I hit the Play button again, it plays the video. If I hit the Stop button, it'll take me back to the beginning of the video again. So by putting this together, Catalyst-- You need to check some of the other videos here. For the sake of time today, I'm not going to go into all the details with what you can do inside of Catalyst. But the whole concept of Catalyst is something I think a lot of people who do video for a living, this is something that when you go to publish this out, you can create a SWF component that can be part of a website, or you can even do something that's actually a desktop application which runs using Adobe AIR. I'm going to go ahead and click on one that I have here. I've kind of gone through and created some additional pages here, got a little animation here. I can click on this. You can see that I have rollover effects on each of these different pieces of artwork. This is the artwork from Photoshop. I've got a scroll bar here. All of this was put together in Flash Catalyst. If I click on some of these things here, here's my Behind the Scenes, and I can start the video playing back by clicking on the different buttons down here and see this actually play back. This X button will take me back to the list of videos, and there's a nice little animation applied to it there. So this is the type of thing that you can create using Flash Catalyst either for a website or something you can have as a desktop icon that you could just double click on and have all these different videos available to you as sort of either an online or an offline portfolio, which I think is kind of a cool thing. All of the interactivity, even this--you'll notice that there's a Rollover state on this particular graphic. That's just something that's brought over from Photoshop. There's even a whole function of being able to round trip graphics in different states between Flash Catalyst and applications like Illustrator and Photoshop. So if you know how to create an outer glow effect, you can create that rollover effect inside of your Flash Catalyst project. So once again, if you'd like to see more of this, I have a personal blog [] [Twitter: karlsoule] at and I'm also available on Twitter if you just look for my Twitter handle of karlsoule. Thanks again for watching. Hope to see you soon. [Executive Producer - Bob Donlon] [Producer - Karl Miller] [Director/VFX - Kush Amerasinghe] [DP/Post Production - Erik Espera] [ADOBE® TV PRODUCTIONS -]

Video Details

Duration: 14 minutes and 7 seconds
Language: English
License: All rights reserved
Genre: None
Views: 203
Posted by: adobetv on Oct 7, 2010

Join Karl Soule as he demonstrates Adobe Flash Catalyst, a new tool in CS5 Production Premium that allows you to create interactive designs for the web… without coding!

Caption and Translate

    Sign In/Register for Dotsub to translate this video.