Flash Portfolios


So you want to make a portfolio in Flash. You will have a single .swf file in which you can email, upload to many websites, put it on a dvd, or play on any computer.

 

Create your portfolio folder first.

You will need to create a final portfolio folder to save the images and files that you are going to include in your Final Portfolio. This folder should only contain the photos, animations, videos, sounds and other work that you have selected to be part of your final portfolio. To create the folder do the following:

  1. Right click on the desktop and select New > Folder from the drop down menu
  2. Name the folder - Final Portfolio

Using Images in your Flash Portfolio

  • The best images and designs you have created this year should be included in your portfolio.
  • We started off with pencil drawn designs such as your nametag, logo, store sign, product, store, etc. If you scanned them in they are in the Z:drive.
  • Photographs directly from cameras are very large, usually between 3 to 5 megabytes which is too large to easily display on the Web.
  • If you want to include photographs in your portfolio you will need to downsize them first in Photoshop.
  • You need to resize your images so that they will easily fit inside your Flash Portfolio window with an appropriate resolution for the web (72).
  • Follow the steps below to save your images for your Flash Portfolio:

 

RESIZE YOUR IMAGES

  1. Open Photoshop and your photographs.
  2. Click on Image > Image Size
    • The image Size dialog box will appear.
    • We are going to create a Final Portfolio that will be 800 pixels in width by 600 pixels in height.
    • This portfolio needs to fit your frame, photos, text, buttons, and any other graphic information you may want to display.

  3. We are going to resize your images to fit this Portfolio design.
    • You will need to adjust each photograph so that it will fit correctly.
    • .Make sure that your image width is no larger than 600 and your image height is no larger that 450.
    • Adjust only one factor, height or width, until you have them both within the limits for the portfolio.
    • For a landscape image you'll want to set most of your photographs to approximately 600 pixels in width by 450 pixels in high.
    • For a portrait image you will need to set most of your images to approximately 450 pixels in width by 300 pixels in height

     

  4. Click the OK button when you are done.

3

5. Make sure your resolution for all your images is set to 72 dpi.

 

SAVE THE NEW RESIZED IMAGE

  1. Click on File > Save As
  2. Save the new image inside your Final Portfolio Folder
  3. Save the file format as a jpeg image
  4. Click on the Save button to save your file.

4

 

Continue resizing and saving all of your images for your final portfolio until you have saved all of the images in the new file size and file format.

CREATE A BACKGROUND FOR YOUR PORTFOLIO

The final portfolio should have a dazzling background to match your effort for the year. This background can be created inside Flash, inside Photoshop and then imported into Flash, or you may find a graphic images on the Web that you would like to use as your background image for your final portfolio. In this section we will look at the tools you would use in Photoshop to create your background.

PHOTOSHOP FINAL PORTFOLIO BACKGROUND IMAGE

  1. Create a new file inside Photoshop using the following options:

    • Name: fnal portfolio background
    • Preset: Custom
    • Width:800 pixels
    • Height: 600
    • Resolution: 72 pixels/inch
    • Color Mode: RGB Colo
    • Background Contents: Transparent

      2

  2. Design a background image that you can use for your portfolio. This background should be flashy and creative, unique and original in design. Use some of the following Photoshop tools to create this background. Click on the Photoshop tool to view a short movie on how to use the tool:

    1. Gradients
    2. Filters
    3. Patterns
    4. Paintbrushes
    5. Sample Background 1

 

CREATING THE FLASH PORTFOLIO

In this section we will create the Flash file for your portfolio.

Select the Create the Flash Portfolio to view a movie on how to create your file.

IMPORTING IMAGES INTO THE LIBRARY

Once you have the file created you need to import the images, backgrounds, and any other graphics you will be using into the file library.

Select Import Files to the Library to view a movie on how to import files.

CREATING SCENES

Flash scenes allow you to group related images, sounds, and movies together.

Select Creating Scenes to view a movie on how to create different scenes for your movie.

CREATING AN INTRODUCTION PAGE FOR A SCENE

Once you have loaded your images you will want to create an introduction page for each scene. This frame will have the title of the scene section and the buttons, along with any other graphics you want to add.

Select Introduction Page to a Scene to view a movie.

LOADING IMAGES INTO FRAMES

Now that the images are loaded into the library and the scenes are created I can begin placing images into the Flash movie. Select Loading Images to view a movie on how to load your images into the correct locations.

You can add an Introduction page to your scene. Select Introduction Page to view a movie on how to add a new frame for your introduction page.

CREATING BUTTONS

    1. Flash Library Buttons
    2. Design Your Own Button
    3. Locate a button on the Web - You can visit Websites that have free Flash buttons that you can download, import into Flash and then use as part of your portfolio. Here are a few good sites to explore

 

 

BUTTON NAVIGATION

When you have created your buttons and added your graphics, text, and images for your portfolio then you are ready to create the navigation for your portfolio Web site. In this section I will show yu how to go to the previous and next frame, go to a specific location in your movie, go to a scene, and go to a different movie file or internet location.

CREATING ANIMATIONS

So far we have just taken your images and placed them on a keyframe inside a scene. However, we could also animate how the images appeared byt fading them in and out, scaling or rotating them, or moving them from one place to another. In this section I will show you several animation techniques that you can use for your images, text, graphics, buttons, and any other object that is part of your Flash file.

ADDING MUSIC AND SOUND

Directions are listed below on how to add sound and music fiels to your Flash movie. You can also select Adding Sound and Music to view a movie on how to add sound files.

To import a sound:

1 Choose File > Import to Library.

2 In the Import dialog box, locate and open the desired sound file.

3 Choose Insert > Layer to create a layer for the sound.

4 With the new sound layer selected, drag the sound from the Library panel onto the Stage. The sound is added to the current layer.

You can place multiple sounds on one layer, or on layers containing other objects. However, it is recommended that each sound be placed on a separate layer. Each layer acts like a separate sound channel. The sounds on all layers are combined when you play back the movie.

5 In the Timeline, select the first frame that contains the sound file.

6 Choose Window > Properties and click the arrow in the lower right corner to expand the Property inspector.

7 In the Property inspector, choose the sound file from the Sound pop-up menu.

8 Choose an effect option from the Effects pop-up menu:

None applies no effects to the sound file. Choose this option to remove previously applied effects.

Left Channel/Right Channel plays sound in the left or right channel only.

Fade Left to Right/Fade Right to Left shifts the sound from one channel to the other.

Fade In gradually increases the amplitude of a sound over its duration.

Fade Out gradually decreases the amplitude of a sound over its duration.

Custom lets you create your own In and Out points of sound using the Edit Envelope. See Using the sound-editing controls.

9 Choose a synchronization option from the Sync pop-up menu:

Event synchronizes the sound to the occurrence of an event. An event sound plays when its starting keyframe is first displayed and plays in its entirety, independently of the Timeline, even if the movie stops. Event sounds are mixed when you play your published movie.

An example of an event sound is a sound that plays when a user clicks a button. If an event sound is playing and the sound is instantiated again (for example, by the user clicking the button again) the first instance of the sound continues to play and another instance begins to play simultaneously.

Start is the same as Event, except that if the sound is already playing, no new instance of the sound is played.

Stop silences the specified sound.

Stream synchronizes the sound for playing on a Web site. Flash forces animation to keep pace with stream sounds. If Flash can't draw animation frames quickly enough, it skips frames. Unlike event sounds, stream sounds stop if the movie stops. Also, a stream sound can never play longer than the length of the frames it occupies. Stream sounds are mixed when you publish your movie.

An example of a stream sound is the voice of a character in an animation that plays in multiple frames.

Note: If you use an MP3 sound as a stream sound, you must recompress the sound for export. You can choose to export the sound as an MP3 file, with the same compression settings that it had on import.

10 Enter a value for Loop to specify the number of times the sound should loop.

For continuous play, enter a number large enough to play the sound for an extended duration. For example, to loop a 15-second sound for 15 minutes, enter 60.

Note: Looping stream sounds is not recommended. If a stream sound is set to loop, frames are added to the movie and the file size is increased by the number of times the sound is looped.

Here are some Websites that you can use to find free music:

  1. http://www.freeplaymusic.com

 

 

  • Video Demo Reel - Use Premiere and/or After Effects to create a slide show of your images, animations, and videos.
  • Flash - use this webpage to follow the steps in Adobe Flash.

Here's a couple of examples of website portfolios: Alex Symonds & Rob Morris.

When finished with your portfolio submit it as a grade.
If it's a Flash portfolio turn in a .swf file.
If it's a video portfolio turn a Quicktime H.264 file.
If it's a website then email me the link of the homepage.