Create a Photoshop Portfolio in Flash

Step 1 - Create the Website folder for your portfolio

  1. Navigate to your class folder on the server.
  2. Open your documents folder by double clicking on it
  3. Open your graphic arts folder by double clicking on it
  4. Create a new folder called website-lastname-firstname.
  5. Open the new website folder by double clicking on it
  6. Create a new folder called photoshop inside your website-lastname-firstname.

Step 2 - Resize your Photoshop project files inside Photoshop and save them out as a jpeg file format

  1. Open the project file inside Photoshop
  2. Crop the image as needed. If you have too much extra space around the outside of your design, then you should crop the image so that the focus is your design only.
    1. Select the Crop tool
    2. Drag your mouse from the top left corner of the image to the bottom right corner of the file and release it.
    3. Cllick on the control or anchor points at the corners of the crop box and resize the crop area as needed.
    4. Double click on the image or press the return key on your keyboard to accept the cropped image.
    5. If you make a mistake then select Edit > Undo Crop or press to start over
  3. Resize the image by selecting Image > Image Size
    1. We want the image to be 800 pixels or less in width and 600 pixels or less in height so that it will fit in oour portfolio movie that we will be making in Flash.
    2. Make sure the the Scale Styles, Constrain Proportions, and Resample Image boxes are checked in the Image Size window
    3. Change the image width to 800 pixels. The height will automatically change proportionally. If the height changes to 600 pixels or less than you have resized the image correctly.
    4. If the width is greater than 600 pixels, then change it to 600 pixels. If after changing it the width is 800 pixels or less, then the image is changed correctly.
    5. Select the OK button to resize the image once you have the width to 800 pixels or less and the height to 600 pixels or less
  4. Save the image to your photoshop folder inside your website-lastname-firstname folder as follows:
    1. Select File > Save As
    2. Navigate to you photoshop folder
    3. Change the Format option in the drop down list to jpeg
    4. Rename the file lastname-firstname-projectname.jpg (change out the project name as needed to show which project you are working on)
    5. Click on the Save button to save out your file
  5. Continue this process until you have saved all of your project files with the new sizes and with the new name and format to your photoshop folder inside your website folder

Step 3 - Create the Flash Photoshop Portfolio File

  1. Create and save the Flash file for your Photoshop portfolio movie
  2. Resize the Flash document/movie window so that it is 800pixels by 600 pixels
  3. Import the resized images from your photoshop folder into the Flash library
  4. Insert blank keyframes in the timeline so that you can place your images
  5. Place your images from the library into the blank keyframes in the timeline
  6. Create the button layer for your navigation buttons
  7. Find buttons in the button library and place them inside your button layer in the timeline
  8. Reposition the buttons in the document window
  9. Add button actions to go to next, previous and home page in the timeline
  10. Add a stop action to the first keyframe to control the movie when it plays
  11. Test the movie with the new buttons to see if they work
  12. Create a home page layer
  13. Create the home page text
  14. Test the final movie with all of the navigation, images, and buttons added
  15. Publish and export the movie so that it creates a wbepage and flash movie for the web
  16. Test the movie inside your folder to see if it works. To do this locate the .html file inside your folder and double click it to open it on the web. You can also drag the file to the Internet icon in the applications bar and release it.