Pin Me

Use Flash to Make Your Portfolio Website Stand Out

written by: Rose Smith•edited by: Amy Carson•updated: 5/23/2011

Learn how to create a portfolio website in Flash CS4. Find out about the functionality of the program and learn the basics of importing and editing your photos. This versatile software allows you to add animations in 3D, rotate movie clips and even synchronize sounds to images.

  • slide 1 of 8

    Start With Design and Navigation in Mind

    You can create an eye-catching portfolio website using software such as Adobe Fireworks. This versatile multimedia creation tool allows you to create applications such as animations, graphics with special effects and captions for your portfolio. A portfolio site is a snazzy way to provide impact while showing off your photographs, writings, drawings--even cooking recipes. You can provide visitors with an easy way to look at your work in the comfort of their home or office. Before getting into the basics, envision the design for your site and think about how you want visitors to flip through your portfolio.

  • slide 2 of 8

    Switch Places With Your Web Client

    Picture 1 

    Change places with your customer and visualize browsing your site through their eyes. Designing a complicated and difficult to browse through portfolio will turn people off and often cause them to click off and leave your site.

  • slide 3 of 8

    Create Your Portfolio

    Open your Flash CS4 software and click the File button then click on New. You will see a large, white area called a Stage. Adjust the color and size of the Stage by clicking Modify on the main menu, then click the Document button. Choose the pixel size of your portfolio website and the background color utilizing the Document Properties menu.

  • slide 4 of 8

    Importing and Editing Images in Flash CS4

    Picture 2 

    To bring graphics or photos stored on your computer into Flash CS4, click on the File button. Next, click on Open, Import then Import to Stage. You can optimize your photos in Flash by setting items such as scaling and resolution. One tip when creating a portfolio site is to make your photos or graphics the same size, as it will be easier on the viewer's eye. Once you've successfully edited your image, click the OK button then the Save button. To add captions or information to your portfolio image, click on the Text button located on the main menu.

  • slide 5 of 8

    Turning the Graphic Into a Button

    Next, you need to turn your item into a button so it opens into a browser for viewers to easily view them. Press the F8 button to access the Convert to Symbol pop-up menu and type a file name for your image. Add mc on the end of the name so you'll recognize it as a movie clip. You can manipulate movie clips to animate your buttons to make them perform different functions. For example, you can create thumbnails that open the graphic in a larger size when the viewer clicks on the thumbnail. Name your thumbnails as numbered movie clips -- thumbnail1mc, thumbnail2mc. For each movie clip, you will create a layer that defines how you want to manipulate that particular movie clip.Picture 3 

  • slide 6 of 8

    Layering in Flash CS4

    To manipulate buttons in your portfolio, you'll need to layer functions. Layering is basically using one layer to manipulate your buttons in a different way. Say you want your thumbnails to open a larger image then reduce that image ten seconds later. You'll need to create two separate layers for each function. The more functions you want your buttons to perform, the more layers you'll need. The Layering Tool for CS4 is located in the Timeline area of the screen. The Timeline and Layers define which function is performed first, second and so on.

    Another Layer you can add using the Timeline is sound to sycnhronize with your images. For complete instructions on how to add sounds, feel free to download this Basic Flowsheet for Adding Sound With Flash CS4.

  • slide 7 of 8

    Conclusion

    To create a porfolio website in Flash CS4, find the software with all the applications you want and set up your first Stage with your first image. Keeping it simple will allow visitors to your website to easily navigate through your portfolio while you learn more about CS4 to add more functions later.

  • slide 8 of 8

    References

    Avaxhome.us, http://bestwebdesignz.com/tips/flash-cs4-tutorial/how-to-create-a-basic-layout-in-flash-cs4/

    Bestwebdesinz.com, http://avaxhome.ws/ebooks/eLearning/lynda_com_creating_a_portflio_web_site_using_flash_cs4_professional_dvd.html

    Screenshots provided by writer