Now, let us save those changes into our Photoshop and that we can go back to Flash and import it. Let us go to File and Save. You can save right over the file that is in your lesson five folder and I am just going to switch back over to my Flash application. I will use ALT TAB here and that would be command TAB on the MAC and we are back in Flash so let us import our Photoshop file.
I will just go to file import and we will choose import to stage. In lesson five, there is the same layout file we were just looking at background layout.psd and once we open it we get a whole bunch of selection options for dealing with all the contents of that file.
First, I just want to scan through the layers. You will notice that the layers are actually switched on and off already representing the last state of the file. So, if we have layers that were hidden when we save the file, those are going to be switch off. We also have access directly to the entire layer comms menu. If I wanted to import the home section, I could just go to the home section layer comm and it will switch all of the layers selections to match all the layers needed for the home section.
Now, you notice that most of the layers, we also have access to all the layer folders that we created inside of our Photoshop file and that is going to help grouping our content together when we bring it into Flash. Now, as I click on each individual layer we have options for setting that layer up and those include flattening the bit map or keeping some of the Photoshop elements editable once they make it into the Flash file.
Now, these settings are really going to help us out particularly on the objects that we have included in our Photoshop file versus the bit maps. Remember, our white boxes were all bit map graphics but our black boxes here when we click on this, you will notice that this will allows me option of preserving the editable path that we are creating on Photoshop when we bring this onto Flash, this will be a vector object.
So, I am just going to choose editable paths for both my header layer and the company name layer and when we take a look at that after import we should see vector objects. We can also choose any of the other elements and automatically create a movie clip for them. I am going to do that for the robot right layer. We will just click on create movie clip for this layer check box.
Now, I am going to leave the convert layers to Flash letter set up that we will get access to all of these layers in Flash. I am also going to adjust the stage size so that it matches our Photoshop layout file.
Now, I think we are ready to import so we will click okay. Now, let us take around our panel. So, first thing I do is deselect every thing since it is all selected and you can see that our stage size was updated to 600 x 400 pixels that matches our Photoshop file and up in the layers at the top, you can see that we not only got each one of the layers of the imported items but we also got the layer folders so we got some built-in grouping for elements right from the start.
Let us check on some of those settings. If I click on the robot you can see that that was actually created as a movie clip and over on a library we have got assets folder which should contain all of the different elements that we imported and the robot movie clip should be included with the content backgrounds. There we can see our robot right movie clip that has been created.
Now, our left box and our right boxes with the right backgrounds, those have been included as bit maps. There we can see the left and right there and since these were flattened into bit maps you can see that they actually contain the background graphic as part of the elements. As I moved this around, we are not just seeing a white box we are seeing the composite of the white transparency on the blue background.
And let me just undo these movements to get it back. I will just use command C and get it back to where it was before and we can see that that is not going to be so helpful to us as a composite bit map so I probably would want to change those elements right away into a simple white square with transparency on it using a vector object.
Now, we can still make use of the layout information. I will leave the bit map where it is sitting, our views snap settings under the view menu and I can see that snap objects still is selected so we can use that bit map graphic as a sizing object and while we are here, I will just turn off rulers.
Now, let us just draw a new background. I mean I will create a layer for it under background content and I will set it right above the left box. We will go down and choose insert layer and we will rename this layer white background.
Now, we just zoom out a bit so we can see the old background and I will press CTRL minus and that is command minus on the MAC and we will set up our rectangle tool. I want a white color selected and with our snapping we should be able to snap right to the edges of that existing bit map graphic.
Now, we will get our transparency by making this into a movie clip in setting the alpha property. I will just go over to select. We will select that white background that we just created and I will press F8 and we call that something simple like white square and now that is a movie clip we should be able to go right down to alpha and we can now adjust that to whatever level we would like.
Now, I will just need to get rid of the old one and I can delete the entire layer and now we are seeing our white background and if we moved that around you can see that we are through transparency now. So, we have a lot more flexibility of modifying and editing this layout.
Let me use CTRL Z to undo those movements and we will have a right in the correct position. That was a few steps. We are still able to use the layout of the original Photoshop file but let us compare that to what we imported in our black backgrounds here at the top.
As I select this one, we do not have a bit map, we actually have a movie clip and that is because this was created with the rectangle tool inside the Photoshop and we preserve those settings when we did our import. Now, if I double click inside of this, we see something a little bit different but this actually matches the way Photoshop draws the rectangles.
What Photoshop does is it draws a large color area in the background and it uses a mask cut out of the shape of the object that we are looking for and that is what we can see here. We can see a mask which is our red shape and our background which is the black color. Now, I can leave this as is because we got a very small vector object being used here and we have access to both the mask shape and the color in the background. So, we can definitely see that taking advantages of the import settings is going to save us a lot of time in laying out our Flash movie.
Transcription by:
Scribe4you Transcription Services