This is a tutorial on how to import a photoshop file in Flash CS5 and what are the important measures that we need to take care while doing so. In this tutorial, we will use the photoshop file that we created in our earlier tutorial on Creating a web template using Photoshop (click here to download the photoshop file).
Note: If you have added any effects on either the text or the images in the photoshop file then undo them. The link given above for the photoshop file does not have any effects.
- Start Adobe Flash CS5 on your system and choose File > New from the main menubar; the New Document window is displayed, as shown in Figure.
- Select Actionscript 3.0 from the General tab and choose the OK button to open a new flash document.
- Choose File > Import > Import to Stage from the main menubar or press CTRL + r from the keyboard; the Import window is displayed, as shown in Figure.
Navigate to the place where you saved the downloaded photoshop file. Select the file and choose the Open button from the Import window; the Import entheos_jewel.psd to stage window is displayed, as shown in Figure.
The left panel of this window displays the layers that were there in photoshop and the area on the right side displays the options related to the selected layer.
- Select the top most layer Cutting Edge Earings, the options related to the selected layer are displayed on the right, as shown in Figure.
- Check the Create movie clip for this layer check box option. Use this option to change the bitmap image into a movie clip in flash.
Adding the instance name is not required at that very moment. You can add the instance name to a movie clip even at the later stages.
- In the Publish Settings area, choose Losseless option from the Compression drop-down list.
The loseless option avoids the image from getting distorted from any loss of data.
- Next, choose the Jewel Cuffed Bracelets text layer, the properties of the respective layer are displayed on the right.
- Select the Editable Text radio button from the Import this text layer as: option area. This will help you to edit the text even in flash. Also, choose Losseless option from the Compression drop-down list.
Repeat these steps for all other layers, taking into consideration that whether they are the image layers or the text layers.
- Next, make sure that Flash Layers is selected in the Convert layers to: drop-down list and select the Place layers at original position check box. Also, select the Set stage size to same size as Photoshop canvas (1280 x 768) check box.
This option will resize the flash documents with the size of the photoshop document. After doing all these changes, choose the OK button.
- Choose Control > Test Scene from the main menubar to publish the flash file; a separate window is displayed displaying the static website layout, as shown in Figure. You can also press CTRL + ENTER key from the keyboard to do so.
Click here to download the .fla file.
Proceed to Step 3 >> Adding sounds and animation to buttons
Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.
Travelling is my life
ConversionConversion EmoticonEmoticon