Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding web design
- Creating buttons and web graphics in Photoshop
- Formatting text with the Text Layout Framework
- Using the Timeline
- Creating a custom looping animation
- Loading images in a gallery
- Creating invisible buttons
- Adding music and video to a site
- Customizing video playback controls
- Optimizing and publishing a web site
Skill Level Beginner
Flash can import all popular image formats, including Photoshop files, while maintaining layers and editability and it really is going to save a ton of time when I bring this into Flash. But notice that I can do all of my design work in Photoshop, such as how I have this homepage set up, then import this file. But let's take a look at it because in this home folder for instance. This just happens to be the content for this page. Notice it consists of just a text layer and then this panel there.
Same thing for the home background. It just has some text in there, as well as the background, so the goal is to bring this information in and keep this text as editable. And of course I'll maintain all the layers. So that's my Home page. I also want to import the About page. You can see that it also maintains sort of a layer in here in the about folder. Let's take a look at the Portfolio page. It just has some text right up here, and then the Contact page. So this is probably the most complex of all of them because it does have this contact form, which in general is just a bunch of text layers.
Okay, so I want to bring all of the stuff in as editable. But that's how everything is set up, and I'm going to start off with the Home page and notice that I also have that Jill logo. So, all I need to do is to save this file. I'm not doing anything tricky with it, just saving it out, and then I can jump into Flash. So here I am. I'm going to go to File > Import > Import to Stage, just like it's any other graphic, and I can locate sectionHome. Click Open and now I can define how to import these files.
Starting with this sort of a logo file layer right here. So I'm going to go ahead and make this a movie clip because with it selected, I can convert it to a movie clip, in case I want to animate it or add in our activity to it or anything else like that. The next folder is this Nav folder. Well, if you notice, I already have a navigation there, so let's not worry about that. It's going to that home folder, and the first thing I want to do is I actually want this to be a movie clip as well. So I'm going to control this sort of as one unit. This is my home content.
And inside of this movie clip, these layers are going to exist. And I'm going to make sure any time I see some text, I am going to make sure it's editable, just like that, and I'll leave the graphics as is. So again, it's just a matter of sort of finding most of those text layers and making sure they are editable, and making sure the folders or movie clips as well, so I can just control them as one object. And I'm not going to include that white background. And I'll click OK and it will import everything accordingly.
Looks great, positions, everything exactly where it should be. And if I take a look, say for instance, at the layers, you can see that they are all stacked right in here. All right, so first thing you'll notice is maybe some of this text. So again, since this text is editable I can change this, so I'll just double-click on this movie clip, and now I'm inside of home background. And from there, I can just select that text and since it's editable, I can change the color to white, just like that.
Click back on Scene 1 and then there I am. So everything looks good. Also note in my Library panel, I can see it makes this folder and organizes everything accordingly in here, very nice, very handy, and what I can do next is start to kind of clean up my Timeline because as you start to import these Photoshop files, your Timeline is going to get pretty lengthy. So what I'd like to do is create a new folder and I'm just going to call this folder nav and all of my nav items are going to go in there.
We're going to go throw the logo in there. We're going to put the button layer, the button text and the nav bar, all in that nav folder. Okay, so I've put them on here and we'll just go ahead and twirl that back up, and now it's much more neat. And this now is going to be my information that's sort of consistent from page-to-page. All right, with all of that set up, I can now move on to go to File > Import, and I can import the next file, which is going to be the sectionAbout.psd.
Again, it's the same process, determining what you want to import. In this case, just these two folders. I'm going to make sure these folders are always movie clips, the text is always editable, and I'll be good to go. So with that done, I will go ahead and click OK. It brings in that information. All right, so I have two sections in here now and it's getting kind of hard to read. Well you can always just turn off the layers you don't want to see to sort of isolate what you do want to see and then change it accordingly.
Because again notice how I brought this in as editable text. Sure enough, it's editable. That's the About section. I'll just hold down the Shift key to select both of those layers and then I'll move that down, just like that. All right, two sections down, two more to go. And again, it's nice that I'm sort of building a whole web site just by doing some imports right here and defining what I want to import. So again, the same process, defining these folders as movie clips, making sure everything looks good in these what soon would be movie clips, and that your text is editable, just like that. All right, there we are.
And each time you do an import, it does add those layers at the top. Well, you can always of course fix that by dragging them down into the position you want them and in editing what you need to edit. So I'll select that text there and change that color to white,. Again the same process. Go back to Scene 1. So there is my Portfolio page and notice in my Library panel you can see those folders start to stack up. I'll go to File > Import > Import to Stage, and there's the last one I need to do is this Contact.psd, and click Open.
These two folders has movie clips, and again this is the one that has lots of editable text, because it has that contact form. And again it's important for me to keep this as editable because some of these fields are actually going to be input text fields that the user controls. But again, I made it in Photoshop and it's set up and positioned just perfect. Again, my Contact background, I can select that text layer and click OK.
All right, again, that was the most complex one. I'll turn off that Portfolio layer, I'll just Shift+Select those two and drag them down, and now you can see my Contact section. So again, I'll just jump in here really fast and change this text to white, so this stands out more. So you're able to use Photoshop to do all your design work and then import that content seamlessly into Flash for further development.