Digital Portfolio

Phase 3

This tutorial will teach you add controls, comments, and titles to your digital portfolio. When finished you'll have reached this point in the process.

Note: I'm working on this and uploading as the steps are completed.

1 – We need more room for additional content (titles and comments about our work). Our initial sketch didn't anticipate everything (it seldom does) so we need to not only need a larger Stage, we need to move all the existing content... on every single Keyframe! Now this would be a serious problem if Flash didn't have an Edit Multiple Frames feature. Pay attention to details and this'll work just fine.

2 – Before saving, test your movie to see if everything works as intended. Yes? Continue. No? File > Revert and try again.

3 – Before we add our text and links, how 'bout we learn how to add a mask for our graphics to get that chopped-off corner look that's used absolutely everywhere. (But we'll jazz it up a bit in a few steps to make it our own.) First we need to make a basic mask. Pay attention to what's selected (or deselected) and where to place your cursor to get the results you want.

3.5 – Oops! here's the missing link I forgot to upload.

4 – We also need to see the small buttons (even though we'll be replacing them in a few steps) so we'll make a temporary mask.

5 – Now lets stroke the images with the cut off corners (just like the ones you see practically everywhere). Note: We're using a new layer above the mask layer.

6 – To use Filters we must convert the stroke to a symbol (MovieClip). Please experiment to get your own custom results on future projects.

7 – Delete the remaining thumbnail strokes and Option-Drag copies of the custom stroke into position. Take care to get this right.

8 – Repeat the process for the large version of the stroke.

9 – Time to delete every instance of those temporary buttons (and mask) we made earlier. (I only show the first few steps in this movie.)

10 – Yes, I want you to use Mini 7 with the settings shown. Since this is a bitmap font, it's absolutely critical that we place the font at whole pixels for the X and Y coordinates.

11 – Convert the message to Symbol (button) and script it to move the Playhead to our still images. Oops! The script should have targeted the label named "images." Change your script as shown.

12 – Notice that it's kind of hard to click our button. Text buttons ALWAYS need a Hit State (NO STROKE!). Yes, 14 pixels is a good height and Zero-out the X and Y so the Hit State is centered around the text.

13 – Here's a couple of time-saving tips you might want to try but you best pay attention to details if you want this to work.

14 – And here's a different way to handle a potential registration problem when making multiple text buttons separated by a pipe (the | character). First, position the text. (And make it the same color as the other text > not shown in movie > sorry 'bout that!)

15 – Modify > Break Apart twice and make two buttons with Hit States as shown.

Note:  The following tutorials depend on using the Behaviors Panel to assign Instance Names for MovieClips, Movies, and Flash Video files. You may find it easier to assign Instance Names manually because the Behaviors Panel window is very small and constraining. To help, I'll show you the final Instance Names you'll end up needing for the following steps. Assign them now or refer back to the movie if you have any questions. (Hint, hint: It's probably much easier to assign Instance Names in advance.)

16 – Script the Buttons using a new Behavior to control video. (You must have Instance Names for the ActionScript to work and naming conventions are critical > as we've discussed.)

17 –Insert Keyframe, delete Behaviors, and rescript the Behaviors to control the remaining movies.

Note: That was the hard part. But not as hard as writing this ActionScript by hand. All hail the Behavior Panel!

18 – Insert Blank Keyframes (for still image controls and to make movie controls disappear) and make new buttons as shown. Not shown: Color the pipes (|) gray and add hit states to the text as you did in Step 15.

19 – Script the Original, Enhanced, and Animated buttons to reach into the MovieClip's Timeline via the Behaviors Panel. (We're leaving the Large button alone for now.

20 – Repeat for remaining images (very simple). Here's what your SWF should look like.

21 – Here's how to add comments about your work. (Position over whole pixels, remember?)

22 – And how to add additional comments. When you're finished, don't forget the Blank Keyframe so the comments clear when moving from movies to images.

23 – Add titles (and ditto on the Blank Keyframe tip from Step 22). Feel free to title your project to suit your needs.

24 – Now lets add those large images (640 x 480 in this example), a label to navigate to, and script the button to that label.

25 – Here's one way to fix the problem of our buttons peeking out from behind our large image. Then we have the problem of our large image blocking all the others and here's how to fix that. (Extra Labels already added)

26 – Add Blank Keyframes (Option-Drag copies), duplicate the Temp Backgrounds (Option-Drag copies), Import the remaining images and script the remaining buttons. (Only the first image/button scripting is shown. If you can need help scripting the others, watch this movie.)

27 – Now, to fix the problem of that large image blocking our entire project... Invisible Buttons to the rescue! (Option-Drag a copy of the Temp Background to save time.) And here's what your Timeline should look like (go ahead and move that wandering Blank Keyframe if you have it too).

28 – Save your project then Save as portfolio_04.fla and move on to Phase 4.

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.