Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Animating a cross dissolve

From: Animation Tips and Tricks with Flash Professional

Video: Animating a cross dissolve

If you're going to do any kind of short film, or any complex sequence of scenes in Flash, it's best to do the work in Flash on an individual scene-by-scene basis, and then bring the scenes into After Effects, or another video editing program, and render them out as a PNG sequence, or an MOV or an AVI file, or whatever. But sometimes you might want to have a quick and dirty transition between two scenes in Flash, and quick cuts of course, are no problem at all.

Animating a cross dissolve

If you're going to do any kind of short film, or any complex sequence of scenes in Flash, it's best to do the work in Flash on an individual scene-by-scene basis, and then bring the scenes into After Effects, or another video editing program, and render them out as a PNG sequence, or an MOV or an AVI file, or whatever. But sometimes you might want to have a quick and dirty transition between two scenes in Flash, and quick cuts of course, are no problem at all.

You might have some issues, however when you do cross dissolves. And let me show you the big one, I guess. So in this case we have a background of the ship floating at sea. I want it to cross dissolve into the captain's cabin, and he's got his book, and his lamp, and clock on the table. So here's what happens normally when you have your scene, and you do the alpha transparency; the fade in. Flash shows you these intersections where the different symbols overlap, and you can see the table through the book, and the clock through the book; it's a real nuisance.

Now there is a workaround for this. It only applies to certain scens, and really it only applies to scenes that have very limited animation, but I will show you the solution. So we would take our symbol, and we have to mask everything. So essentially, we'd have our background, the table, which would be masked, so that the book that sits on the table exactly is aligned with that. And if we look at that in outline you can see that there is no overlap. And if we do the same thing with the lamp, and the clock; they are also masked, so that the areas that overlap the book are removed from the scene. And it's not fun doing this, but the end result is, when you have it done you can then dissolve it cleanly, and now you can see there is no overlapping areas where the clock, and the table, and the book overlap one another.

So very quickly, let me walk you through the process for doing that. And there might be times when you actually want to do this without overlapping scenes; you might want to dissolve without complex symbol or a shape, and when you go to -- the last thing you want to have happen is see this kind of mode, so let's see how that was cleaned up. So what I am going to do is just simply delete the mask layers, and so if you have the Exercise files, then just follow along and delete the masks. If you don't, then just make three or four symbols: a square, a triangle, a circle, and overlap them on different layers, and you will you get the idea. It'll be an identical process to this.

So okay, what's the problem here? Well we have the background, and we have our table, and now let's look at the book issue first. So what we need to do is to mask out the area that has the book shape on the table layer. So what I like to do here is just copy the book, Control+C, and that will be our mask now for the table. And we break this apart, Control+B, until we just -- and I am going to pick, like, a flat color for that. And the problem is if I make this a mask for the table, it masks out the wrong part, and I'd like it if there was an option that allowed us to invert the mask.

If there is one hidden somewhere, I don't know about it. I apologize if I'm unaware of it. So here's how I've been solving the problem. Use the -- let's pick a nice black color for your Line tool, and we'll pick the Ink Bottle, and paint that in. And then we will activate the background, and I want to see the book layer, so I want to select, now, the Line tool, and I'm going to paint in the area that I want to mask. And basically what we're doing is masking it in, And I am going to color it red; so a different color from the one that we have up here for the book. And we want to select the Paint Bucket tool for this, paint that.

We are getting a kind of an opacity on this, it doesn't really matter, but we're seeing through it, so don't be bothered if you see that. Delete that line, delete the green, and now when we activate the mask we have our table masked, and we can now see the book on top of it. There will now be no overlap between those. So as you can imagine, this can be pretty complex when you have a lot of different objects overlapping. I have done it with little piles of rocks, and it's not fun. So it depends on how badly you need to do this effect; how badly do you need to have one of your objects? I'll go to alpha and fade out.

Now you can also do it with runtime caching, but I found that that can create problems when you're rendering out symbols that have animation inside them. The last time I tried it, it did not render out the animation, so it's kind of like a pair of handcuffs. Sometimes you just have to know how to apply this technique. So I'll just do it one more time so you see it with the clock and the lamp. And the same process here, they need to be masked to the -- I believe to the book layer. Let's just get the book again; Alt+ Drag to copy that layer, and I am going to use this as the mask, so I'll drag that down there. And break it apart again, Control+B, and I am going to give it another phony color, so just that blue will do fine. And same process with the Line tool.

And what I want to do is to create the area, now, that we will be allowing to be displayed. And let's get a different color again; maybe orange, pop it in, and select and delete the blue. Double- click the lines just to clean them up. And, you know, maybe rename this layer mask so we don't get totally lost in here. Right-click, make it a mask, and then drag the lamp as well, because we have two layers under this one, so you have to drag them all in there. And you'll see that they've disappeared there.

If you go to Outline mode you will still see the overlaps. That's okay. But when you go to the outer layer, and you dissolve through, we're clean. You may need this, you may not, but it's been handy for me quite a few times over the last few months. So I am sure there is a lot of people out there who might find it of some use. So we'll move on to the next tool in creating transitions.

Show transcript

This video is part of

Image for Animation Tips and Tricks with Flash Professional
Animation Tips and Tricks with Flash Professional

46 video lessons · 13415 viewers

Dermot O' Connor
Author

 
Expand all | Collapse all
  1. 6m 35s
    1. Welcome
      1m 4s
    2. Using the exercise files
      51s
    3. Common keystrokes and shortcuts used in this course
      4m 40s
  2. 1h 24m
    1. Understanding video versus SWF
      2m 30s
    2. Overview of shortcuts, extensions, and setup
      6m 27s
    3. Understanding linear and radial gradients
      2m 39s
    4. Overlapping and animating the colors
      3m 53s
    5. Lighting a scene
      10m 24s
    6. Creating lens flares
      10m 40s
    7. Animating ripples
      7m 2s
    8. Creating a gradient globe
      11m 41s
    9. Creating a gradient bottle
      10m 26s
    10. Applying gradients to a character's eye
      10m 2s
    11. Applying gradients to a character's skull
      8m 49s
  3. 56m 53s
    1. Tweening a circle to a square
      10m 9s
    2. Using thumbnails
      4m 39s
    3. Animating a magic carpet jump
      10m 12s
    4. Setting up a magic carpet walk cycle
      7m 41s
    5. Animating a magic carpet walk cycle
      9m 33s
    6. Shape tweening hair
      3m 50s
    7. Intro to overlapping hair
      1m 57s
    8. Animating overlapping hair
      8m 52s
  4. 1h 8m
    1. Animating waves
      8m 7s
    2. Animating clouds
      7m 48s
    3. Animating a flame
      11m 38s
    4. Animating an explosion
      9m 1s
    5. Adding in-betweens to the explosion
      4m 36s
    6. Adding explosion clusters
      6m 43s
    7. Optimizing the explosion
      7m 30s
    8. Animating smoke with particles
      12m 45s
  5. 32m 18s
    1. Introduction to staggers
      1m 5s
    2. Animating a simple stagger
      5m 8s
    3. Animating a diving board
      6m 15s
    4. Animating a tremor
      5m 56s
    5. Animating a scream
      7m 12s
    6. Refining the scream
      6m 42s
  6. 47m 49s
    1. Introduction to Virtual Camera
      5m 4s
    2. Animating parallax
      6m 9s
    3. Animating a crane shot
      6m 26s
    4. Animating a zoom and rotate shot
      9m 30s
    5. Animating a track shot
      11m 0s
    6. Lighting a 3D shot
      9m 40s
  7. 19m 48s
    1. Animating a cross dissolve
      6m 10s
    2. Animating a wipe
      3m 34s
    3. Animating a fadeout
      10m 4s
  8. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Animation Tips and Tricks with Flash Professional.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.