Digital Portfolio

Phase 1

These digital portfolio tutorials will teach you how to make a project like this one (in slow, easy-to-follow steps). Because this tutorial is being written for 3D students with little or no Flash experience, more experienced students may encounter steps we've previously covered. Feel free to adapt this tutorial for your own uses but do not work at 30 fps (frames per second) unless your project contains video. If you need files to test the waters here you go (75MB)

Phase 1 (this page) will take you this far in the process. In Phase 2 we'll begin to make our project "flashier."

Note:  Render 640 x 480 PSDs in Cinema. Render 480 x 360 QuickTime movies (set the Format to "QuickTime Movie Big")

1 – It always starts with a sketch. Is this sketch the best solution? Absolutely not! It's just a starting point.

2 – Organize your files in a single folder. For this example, I have 6 movies and 6 still images. Render your PSDs at 640 x 480 and enhance them (as shown in the texture tutorial) but don't Save for the Web yet (and don't worry that I used Curves rather than Levels in my example).

3 – We're going to end up with dozens of files so naming conventions are critical if you want to have any chance of following along. Go back to Step 1 and look at how I named my files. You might want to mimic this strategy. Yes? No? Don't say I didn't warn you! Open one of your 640 x 480 PSDs then Save for Web, resize, and rename as shown. the 480 x 360 version will match the size of our movies. The 640 x 480 version will be our "large" option.

4 – Generate a series of 4 JPGs by Saving for Web and renaming as shown (we'll be using these later) then If you use Shift-Option-Command-S to Save for Web it goes much quicker.

5 – Crop and save a thumbnail as shown (try to make your selection interesting in itself) but please, please follow the instructions so you don't end up making a 100 in x 50 in thumbnail (bigger than a sheet of plywood!)

6 – Here's what your folder should look like. Repeat those steps for your other images and we're all done with our initial set of images. It really doesn't take that long. When you finish your folder should look like this. (Yes, we're really going to use all those JPGs) Now we're ready to jump into Flash. Quit Photoshop (to free up memory) and launch your new best friend—Flash 8.

7 – Follow the steps to set up your document but after Fit in Window don't set the size to 100% unless Fit to Window changed the percentage to over 100% (as in my example which was 103%)

8 – Save your file to the same folder with all your other media (not shown) then add and rename layers as shown.

9 – Select the Keyframe on the Background Layer, create a physical Background Layer (with no stroke), and lock it (if you choose to use an image as your Background, resize it in Photoshop, not in Flash)

10 – Select the Keyframe on the Buttons Layer, import your thumbnails (Command-Click to select discontiguous JPGs) and position them on the stage as per your layout

11 – Select each thumbnail in turn and Modify > Convert to Symbol. Be sure to select Button and name each in a logical manner (ending with _btn)

12 – Click then Shift-Click to select a range of Frames on Frame 70, Right-Click and Insert Frame to make each Layer visible for 70 Frames. Insert Keyframes, a Label, and File > Import > Import Video. Be sure to follow the importing steps carefully.

13 – Because Flash movies play by default, we need to add ActionScript to stop the playhead on Frame 1. To script the Buttons, we'll use the Behaviors Panel to write the ActionScript for us. Labels and the Behaviors Panel make this process painless.

14 – Follow these steps to import your next video but make sure to Insert Blank Keyframe on the Content Layer (a Blank Keyframe is an empty place for new content)

15 – Use those steps to import your remaining videos and script your buttons via the Behaviors Panel (not shown) and Control > Test Movie (Command-Return) to see your results

16 – We need room to add our still images so follow the bouncing cursor. The magic duplicating of Keyframes you'll see is accomplished by Option-Dragging the Keyframes (a terrific shortcut!). Label names must be unique (that's why I added a 2 after each name)

Note:  Phase 2 will make use of the extra JPGs we generated. The following is a quick and dirty solution so you can get a better feel for the basic steps we're going to be using to build our interactive multimedia portfolios.

17 – Import the _480d JPGs to their respective Keyframes on the Content Layer and position as per your layout

18 – Modify the ActionScript on the Buttons (on Frame 70) to target the new labels by selecting a button then Double-Clicking on the "Goto and S..." in the Behaviors Panel to modify the target label's name as shown.

19 – We need to be able to get from the movies to the images. If you've been paying attention, you'll know that we will need a label and a button (that's all it ever takes). The button we'll use is temporary. Later we'll learn how to make custom buttons that will enhance our portfolio. But for now, just settle for this solution.

20 – Now we need to be able to get back to the movies (never leave your users at a dead end!). We already have the symbol we need so follow along (and be sure to name that first label "start" because... oh, just do it and you'll see.

21 – Click to download this file, open it, and see how easy it is to add a preloader to your project. Control > Test Movie and check your preloader as shown in my movie

22 – Create an archive of your FLA and move it and your SWF into your Sites folder

23 – Now mosey on over to this page and follow the instructions for Phase 1 of your 1st Semester Final then start Phase 2.


Flash 8 Player Required – 1024 x 768 Minimum Resolution
Get Flash PlayerGet QuickTimeGet Adobe Reader

Mac Lab | Digital Art | 3D Design & Animation | Multimedia Production | Tutorials | Students | FAQ | Blog

Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open.