Digital Portfolio

Phase 2

As promised, this tutorial will teach you how to make your digital portfolio flashier

1 – File > Save as (portfolio_02.fla) and make rollovers for your buttons. Double-Click to get inside of your button. And remember, naming conventions are critical because we are going to have a lot of MovieClips. Don't say I didn't warn you (again).

2 – Repeat the process for the other buttons on Frame 2 and Test Movie (Command-Return) to see the results. Notice how the second set of buttons was modified as well? When you Double-Click on a Symbol, you are editing every Instance of that Symbol.

3 – Double-Click to get inside of your button, Double-Click again to get inside of your MovieClip (within the button), and Modify > Convert to Symbol (F8) once again. This is the step lazy students constantly screw up. But you're paying attention, right? Watch carefully, follow along and your button will have animated Up, Over, and Down States.

Note:  Nested MovieClips can work wonders but never nest a Button within a Button (because it won't work anymore).

4 – Repeat the process for the other buttons on Frame 2 and Command-Return to Test Movie. Notice once again how the second set of buttons is modified by editing the first? As I said, when you Double-Click on a Symbol, you are editing every Instance of that Symbol.

5 – Time to focus 'cause this can be tricky (but it's a powerful trick so it's worth learning). We need to isolate and protect the buttons so we insert a second Keyframe and the buttons (and all their ActionScript) are safe. We want the buttons to animate as our movie loads but it's not a good idea to try and animate all those nested Symbols (because it will slow Flash to a crawl) so we Modify > Break Apart twice to get to the last nested MovieClip (if you go too far and they turn into Bitmaps just Edit > Undo). Then follow the bouncing cursor to set up the next step

6 – Click and Shift-Click to select the Keyframes as shown then Option-Drag copies to Frames 18, 20, 30, and 50. Alter the Brightness so our visibility animates once again.

7 – Oops! Forgot to change the Brightness on the Keyframes on Frame 50. Verify you have the correct settings now and shift the Frames around as shown (Click and Shift-Click or Click and Drag in one motion to select Frames) to create a more interesting animation.

8 – How's this for a great shortcut? (You must Duplicate the Symbol or it won't work because we'd be editing both animations rather than just the second. Remember? Edit inside a Symbol and you change all Instances of that Symbol.)

9 – Do you see the problem with the ActionScript? Here's how we fix it.

10 – For aesthetics sake, we need to delete 2 distracting Instances. Ah, that's more like it!

11 – Here's a trick to give your buttons more utility but be forewarned—don't do this until all the ActionScript on your buttons is complete. Keyboard shortcuts really speed up this process. Option-Drag copies of Keyframes rather than Right-Clicking and choosing Insert Keyframe or Clicking and F6ing. Rather than going to the menu 3 times to Modify > Break Apart, just Command-B 3 times. So much easier! Use this trick on other projects to give your users feedback. Breaking Apart the button is just one option here. You could also add a graphic element to enhance your presentation.

12 – Repeat the process for the second set of Keyframes. If this take you more than 30 to 60 seconds, you're not using the keyboard shortcuts.

13 – Our buttons fade in and animate nicely, but what about our content? Wouldn't it be nice to have it look less PowerPointy?

Note:  I'm using Brightness to fade in the content because I'm working on a black background. For other colors you have to use Alpha (which is more processor-intensive.)

14 – But now the animation doesn't loop seamlessly! No problem. Leave that to Labels and ActionScript (written by our best friend in Flash... the Behaviors Panel).

15 – Repeat for the remaining movies. Once you begin to understand the workflow (and keyboard shortcuts) this won't take longer than 5 to 10 minutes. Don't be concerned with using the same Label (loop) because they each reside in their own Timeline.

16 – We could do the same thing for our still images but how boring that would be! Here's a better way to show off your work.

17 – But this is one animation we don't want to loop so we'll add a stop action. The labels are for buttons we'll add in Phase 3 to take our portfolio to the next level.

18 – Repeat for remaining Keyframes but you might want to Import all the necessary images to the Library in one step to save time. Command-Click to select discontiguous items.

19 – Here's what it should look like. If your movie doesn't play back as intended, you probably have forgotten an Alpha setting (or Brightness if it doesn't fade in at the beginning) or—gasp—did you forget to Convert to Symbol before adding the second Keyframe and/or the Motion Tween? If you did, the evidence is in your Library. (See next step)

20 – Open your Library. Scroll down. Do you have a Symbol named Tween 1? Do you have a lot of Symbols named Tween? The worst case I've yet to encounter was Tween 129 by a student with the initials D.S. Don't believe me? See for yourself. I just saw it yesterday. Sheesh! This kid must have an absolutely terrible teacher! I'll ask D.S. when he comes into class today. Don't let this shameful fate befall your projects. Follow these 3 easy steps:

1 – Convert to Symbol (something on its own layer)
2 – Insert a second Keyframe (somewhere down the Timeline)
3 – Create a Motion Tween (anywhere between the Keyframes)

What's so hard about that?

BTW – If you've been following along, do you have 107 items in your Library? All correctly named? Not a Tween in sight? Please share this good news with me as I'm suffering the Tween 129 blues for D.S.'s pitiful excuse for a teacher.

21 – Save your file (so you have a completed Phase 2 to show me) then File > Save As (Shift-Command-S) portfolio_03.fla and strap on your thinking caps for Phase 3.

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.