Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
Fireworks has the ability to do some pretty advanced bitmap editing and vector editing, and Flash is the place to do major animation. So the integration between these two programs is kind of cool. You can do all your image creation inside of Fireworks, save your PNG file and actually import it into a Flash movie. Let me just show you how that process works. Now before we move over to Flash, let's just take a look at this file briefly. I'll go over to my Layers panel. You'll notice we have series of layers and sublayers. So we've got banners on main layer. We have a text layer that has our text in it.
And we have our logo layer. So there are multiple objects in here. I am just going to Save this file, and I am going to hop over to Flash. First thing I am going to do is create a brand-new movie. I am just going to make one modification to the Document size. Here we go, and I'll zoom out just a little bit. So we can see the whole window. All right. And we'll go to File > Import and choose Import to Library.
Inside of our folder there is our file down here, two_trees_banner. We are just going to choose to open that file up. Now, when we choose that, we get some options here on how the file gets imported into Fireworks. We can choose to import it as a single flattened bitmap, but that removes any chance for any editing whatsoever. So we are going to leave that option unchecked. We can also choose which page we are going to import. Now this particular design only has a single page, so that's our only choice. We can also choose how this file is going to be imported Into Flash, as a movie clip or as a New layer.
We are going to stick with movie clip. The last two options for Objects and Text basically give us control over whether the objects are going to remain editable or whether they are going to be flattened into bitmaps. The file we are bringing in is all of vector artworks. So I want to try and keep things as editable as possible. So I am going to make sure that my two options here are for maintaining editability. I am going to click OK, and within a few seconds, over in the Library panel, you'll see we have a folder called Fireworks Objects, and we have the actual PNG file as well. If I click on the Fireworks Objects, you can see I have got my two_trees_banner.png folder.
This is containing all the assets inside of our movie clip. So I can grab that movie clip, and I can drag it over to my design. You can see here it comes in quite nicely. I can also choose to edit this if I want to. If I want to make any changes, for example, this text here, I am going to double-click. You notice, as I am double-clicking, I am getting down into a breadcrumb trail here, withinside the movie clip. If I look down in my Timeline, you'll see all the different layers that were part of the original Fireworks document are available here as well.
So I am going to click inside Two Trees Olive Farm, and I am going to change that Two Trees Olive Oil Farm. Then I'll just click away from the canvas, click back to Scene 1. I am back to my original movie clip. So I've made an edit to that file. The text remains editable. All the different vector elements are also editable. If I go ahead and double-click again inside my design, I can keep double-clicking until I get to the individual objects inside of my design. So I've got quite a bit of flexibility here in how I work with this design.
All the vector artwork has been retained. I can scale things. I can change the design any way I like. Notice again, the breadcrumb trail, as I am drilling down further and further into the movie clip. So I'll go back to my original scene. So that's the basic skinny on bringing in Fireworks PNG files right into Flash. You can see you've got all your editability maintained. It's a great way to sort of do your advanced design work inside of Fireworks, and then bring over those finished pieces of art into Flash for additional programming or animation.
There are currently no FAQs about Fireworks CS5 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.