New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Creating a First Web Site with Flash Professional CS5
Illustration by

Importing Photoshop files


From:

Creating a First Web Site with Flash Professional CS5

with Paul Trani

Video: Importing Photoshop files

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Creating a First Web Site with Flash Professional CS5
2h 45m Beginner Jul 27, 2010

Viewers: in countries Watching now:

Creating a First Web Site with Flash Professional CS5 shows how to make a fully functional, dynamic web site in Flash Professional CS5. This course covers the fundamentals of creating and importing content, adding smooth 2D and 3D transitions, and adding button functionality that goes beyond links. This course will also show how to integrate and control video and audio as well as how to implement a gallery and a contact form. Exercise files are included with the course.

Topics include:
  • 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
Subjects:
Web Interaction Design Projects
Software:
Flash Professional Illustrator
Author:
Paul Trani

Importing Photoshop files

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.

Find answers to the most frequently asked questions about Creating a First Web Site with Flash Professional CS5.


Expand all | Collapse all
please wait ...
Q: I followed all the steps and suggestions in the "Adding a progress bar" video, but when I add the progress bar to my web site, I can’t remove it once the index.swf file loads up. The progress bar remains on the homepage and the rest of the pages. How do I make it disappear once the site loads?
A: To make it disappear, just make sure the progress bar is only in frame 1. If it’s on its own layer, then right-click on the 2nd frame in that same layer and select "Insert Blank Keyframe." That will make it disappear.
Q: Despite following the steps in the "Adding a progress bar" video, I cannot figure out how to keep the progress bar from appearing on a movie that has finished loading. How can I make the progress bar disappear?
A: Just add the red line below to the preloader.fla file. This will make the progress bar invisible: 
"function contentLoaded(evt:Event):void { //Optionally change to a clip holder and set progressbar visibility. addChild(contentLoader); progressbar.visible = false; }"
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Flash Professional CS5.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.