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

Improved Creative Suite Integration

0 (0 Likes / 0 Dislikes)
[♪upbeat music♪] [ADOBE TV Presents...] [♪♪] [Paul Trani in...] [♪♪] [Adobe® Flash® Professional CS5 - Training with Trani] [♪♪] [♪♪] Hello and welcome to Training with Trani. My name is Paul Trani, and I'm going to be taking you through all the ins and outs of Flash Professional CS5. I'm going to really start with the integration of Flash with other programs and specifically InDesign. So that's where I'm going to start right now. I have InDesign open, and as you can see, this is a fairly typical layout. I'll just click through some of these pages. Again, there's probably about 11 pages in here. So my goal is to take all of this content and bring it into Flash. But there's a little more going on here than meets the eye. So I'm actually going to select this Move graphic right here. You know what? That's actually a button. This is really cool that InDesign can actually make buttons. I'm not going to talk about how to make these buttons, I'm just making you aware of them. As I scroll over, another unique item I have is this cloud and some other animated elements. As I roll over this line, this is my Motion Path. So again, animation is in there as well as buttons. Really cool. Quite frankly, I want to make sure this work gets transferred into Flash. Those are the only two tricks up my sleeve because all I'm going to do now is go down to File, Export. From there I'm going to go ahead and save it out to the desktop and, you guessed it, I'm going to be saving out an FLA file, Flash file. So this is our Flash source file. Select that, click Save, and if there's one already on the desktop, you can go ahead and replace that one. But as you can see, I do have this Export dialog box. Everything in here is pretty standard and honestly makes a lot of sense, so I'm really only going to point out the fact that text is going to go from InDesign text to Flash's Text Layout Framework text. So that's what I'm going to go with. I'm going to select that, select OK, and there it goes through the process of saving out this FLA file from InDesign. Very cool. In fact, let's just go to my desktop. There's Flash, of course. And on my desktop you can see I have this FLA file. So all I need to do from this point is just double click on this file and open it up in Flash Professional CS5. Here we are in Flash. I just want to point out a couple panels to you. We have the Properties panel, then we have the Timeline panel down here, and of course our Content. I think it's beautiful how everything came in exactly as expected, Everything looks really good. You're probably wondering where the other spreads are. Well, if I go to my Timeline panel, I can go ahead and select that second frame, and there's my second layout, third layout, so on and so forth. The great thing is is this text, as I click into this movie clip, look at this. This is threaded text, so these two text boxes are linked together. Very powerful because you might end up coming into Flash and then deciding maybe you don't need that top paragraph and adjust accordingly. All right. That's a story for another day. Let's go ahead and take a look at our unique elements. I'm going to go ahead and select the Selection tool, and I'm going to double click on this movie clip because each spread that comes into Flash is going to be its own movie clip. So here we are, Spread 1 and 2. I'll select this item here. Sure enough, this tells me it's a button. Perfect. Exactly what I expect. What about that animation with the cloud? We'll go over there. Let's take a look at this. There's my cloud. I'll just double click on it. And, exactly as expected, here's my Motion Path. Since I'm in Flash, I can do all that manipulation. Maybe I don't want it to travel in a straight line. I can go ahead and have it curve down something like that. Very cool being able to do this. Very powerful. So quite frankly, this is what will happen. You'll bring in a file into Flash, and you're going to probably want to edit it further, aside from repositioning things. You might want to edit the actual graphics. I'm actually right down here with cityscape_source. That's this background image, and I want to give it more vibrance, okay? I want to use Photoshop to do that because that's where it originally came from. Again, it's just a matter of right clicking on that and going to Edit with Adobe Photoshop CS5. And of course it does exactly what you think it's going to do. It opens up that file, and now I can go ahead and make any adjustments to it that I want to. So I'll just kind of do some vibrance here. Let's kick it up, let's amp it up a couple notches, increase the saturation and the vibrance just to match the richness of the other graphics in there. But again, all I did is just made a quick edit, and I'm just going to go ahead and save this file. This came right from Flash, and if I go back to Flash, we can see that it updates that image. Great. I don't have to do any other sort of workarounds. There's that direct connection. I can jump in there, jump in that Photoshop, change my graphics, come back to Flash, and that's where I'm at now. Quite frankly, the next step is potentially importing other graphics. And there's a huge laundry list of items that you can import into Flash. Just every file format that's worth knowing about can be imported into Flash. It's pretty darn impressive. I do want to point out potentially a new file format. That's this FXG file format. This is a really powerful graphic. It's a Flash XML graphic, so it's XML-based graphic, actually MXML, so it sort of deals with the Flex Framework. But the cool thing about it is it's really flexible to use and work with when you're working with files from other programs like Photoshop, like Illustrator, like Flash Catalyst, like Flash Builder. Again, it's really flexible and it's almost sort of platform independent as opposed to, say, like this InDesign file. I can talk about all the different file formats in here. I will say that you can also import some other files such as FLV files, and you can even have some files generated from After Effects and bring them in. But again, let's focus on our FXG file format. All I'll do is just open it up in Illustrator really fast just so you can see what it contains. I'm keeping this simple for our purposes today, but we can see that there's just some gradient and some various graphics. All right. Pretty straightforward so far. You probably know the next step, which is going to be to go into this movie clip. And for this very top layer--and I'll expand this out right here--this Icons layer, sure enough, I want to Import to Stage that graphic. So here I go. I'm going to go ahead and grab that FXG file format. It's really flexible. It's XML based. And let's just go to my Desktop, Source, and I'll just grab this quick file, click Open, and here we are. A shortcut key for you guys is just if I hit Q, I'm able to resize any graphic that I have selected. So that's what I'm doing here is just kind of resizing that and moving it into place. That seems to work out great. There's my graphics. FXG file format. Really powerful, really flexible. All right. Let's take another step because once we've imported all of these files, our next step is to really work on our programming. So we want to write some ActionScript, and maybe I'm more comfortable in, say for instance, using Flash Builder and that's what I would want to use for writing all of my code. I'm just going to go to the Properties panel, and I'm going to make sure I'm on Scene 1, and I'm just going to click on the background here to make sure my stage is selected because I want to add a class, a document class to be specific. I'll just call this "Main." This document class would really contain all of the various maybe button code, any other functionality, any animation that I might want to include in this file. But in this case, all I'm going to do is just add something simple, and when I click on that Edit Class definition button, it does say that a document class could not be found. Not to worry. It just says, "Hey, you know what?" It's automatically going to create this document class for me. So I'll select that, and now I get the opportunity to go ahead and edit this document class, not in Flash Professional but in Flash Builder. Really cool. I can just select that, click OK, and it will launch Flash Builder. So here I am in Flash Builder. It will say, "Here's your targeted file that this document class is going to be linked to." I'll click Finish, and it makes this--and let me just expand this out so you can see it-- it makes this package, okay? Not only that, I get a chance to name it. In general, I don't want this screen to frighten you in any way. It really is helpful because it writes a lot of this code for me. So right in here I can see it's created this package and created all of this code that I didn't have to. So Flash Builder is a really strong program for developing rich Internet applications for the Flex Framework. But all I'm going to do--and please don't laugh at this one little word of code that I'm adding, but in general, I'm just going to add a stop action. So again, editing my ActionScript in Flash Builder, and what I can do is come over here, right up here at the top, Test Movie in Flash Professional. So click right there. It's going to ask me to save it. And sure enough, it jumps over to Flash Professional and generates the file. Again, nothing too complex, and I wanted to keep this really simple for you guys, but for the most part, I can see here's my animation from InDesign, here's my graphic that's edited from Photoshop, of course my buttons came through, and let's not forget about my FXG file that I imported as well. So as you've seen, Flash works really well with other programs in the Creative Suite. That's it for this episode. Join me next time. [♪upbeat music♪] [Executive Producer - Bob Donlon] [Producer - Karl Miller] [Director/VFX - Kush Amerasinghe] [DP/Post Production - Erik Espera] [♪♪] [ADOBE TV Productions -] [♪♪]

Video Details

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

Moving your content from one application to another has never been easier. Join Paul Trani as he walks you through the seamless integration of InDesign CS5 files with Flash CS5. He'll also cover seamlessly editing your ActionScript code in Flash Builder directly from Flash CS5.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.