Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > Importing a Photoshop File in Flash CS5   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

Importing a Photoshop File in Flash CS5

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).

This is part of a 6 part tutorial series on how to create a Flash website using Flash CS5. The tutorial covers the following :

  1. Creating a web template using Photoshop

  2. Importing a Photoshop file in Flash CS5

  3. Adding sounds and animation to buttons

  4. Adding Animation and Button interactivity

  5. Adding a Preloader

  6. Publishing the Flash content

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.

  1. 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.



  2. Select Actionscript 3.0 from the General tab and choose the OK button to open a new flash document.

  3. 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.

  4. Select the top most layer “Cutting Edge Earings”, the options related to the selected layer are displayed on the right, as shown in Figure.



  5. 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.

  6. 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.

  7. Next, choose the “Jewel Cuffed Bracelets” text layer, the properties of the respective layer are displayed on the right.

  8. 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.

  9. 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.

  10. 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


Now building a website is as easy as 1-2-3!

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.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Gorgeous Page Roll Image Transition Effect in Flash

Creating Page Curl Transition

Creating a Rotating 3D Planet in Flash

Creating Realistic 3D Planet

Best Flash Photo Gallery Website Templates

Best Flash Photo Gallery Website Templates

Burning Image Effect in Flash

maskmn_image055

Realistic Rippling Water Animation in Flash

r_water

Awesome 3D Flash Website Templates

Awesome 3D Flash Website Templates

 

Featured Template
Template # 55036
Type: PrestaShop
Price: $139

Flash Photo Galleries