Toxiclab.org

Video Loops

30.12.2005, 15:7
Submited in: Flash | Total Views: 76812

Basically, today's modern Flash websites mostly have some video looping involved. There are also dozens of websites that offer Flash video loops for you to purchase. But today you won't be purchasing anything. You'll make your own video loop which you will be able to use in many different ways and shapes in your next or current Flash project.

The following is how your animation should loop after following this tutorial:



This tutorial is part Macromedia Flash and part Adobe After Effects. Let's create the video loop first, so start up After Effects and get started!

Making a new Composition

Step 1

As you open After Effects, open up a new Composition Window (Ctrl+N):



In the Composition Setting window, many of the functions are important so you should plan ahead before going any further. Let's look at that step by step.



Step 2


The only thing here that's not necessary is the name of the composition. But for the sake of organizing things, it's easier to have everything named properly.

Since we'll be doing some bubble effects, you can write Bubbles or Bubbles Video Loop. Whatever suits you.



Step 3

The window size determines how big your video loop will be. It's important to know that because the bigger the video size, the bigger the file size. Which, again, means longer loading times.

Plan ahead and check where will you place the video loop inside your Flash project, go back to After Effects and type in the window size.



Step 4

Frame Rate should be the same of your Flash project's frame rate. Videos work the best in 24fps or above. Let's say that I'm working on a project in 30 frames per second. The frame rate is also important when it comes to file size. We'll go onto that in the next step.



Step 5

Lets' specify the duration of our loop. 3 seconds will be just enough for our current video loop.

Tip:

Duration of the frame is THE setting when it comes to file size. Let's face it. You HAVE to think about your file size. You don't want visitors to quit your website before it even loads, don't you? Except you're working on a CD/DVD presentation. In that case, just pull out any duration of your choice.

Let me finally explain what I'm talking about. If you're doing a video loop in 30 frames per second. The 3 seconds would make exactly 90 images. One extra second would make an extra 30 images. In this case, replace frame rates with images and it'll be easier to understand.


Step 6

When you press OK, the composition is made and automatically open. The window and the timeline are shown.

Adding Effects to a Solid

Step 1

Create a new solid by going to Layer | New | Solid (Ctrl+Y). Accept the default settings and click OK. The solid is automatically inserted in your composition.



Step 2


Open up the Effects & Presets palette by going to Window | Effects & Presets (Ctrl+5).

Step 3

In the Effects & Presets panel, go to Render | Cell Pattern (You can also just type the name of the effect in the 'Contains' input box).



Step 5

Drag and drop the effect onto your solid in the composition. The effect controls for the solid should automatically open.



Now that our shape is drawn, let me explain how to go about modifying the effects.


Controlling the Effects

The following ALL depends on your own personal taste. But for the sake of the tutorial, follow my steps and after finishing the tutorial you will be completely free and on your own.

Step 1

Cell Pattern: Bubbles - we want our pattern to be bubbles. After all, we're making bubbles. So we want the bubbles!



Step 2


Check the Invert to invert the colors. Looks better if you ask me, but it'll look even better later on.

Step 3

Raise the contrast to about 150%.

Step 4

Leave the Overflow as it is (Clip).

Step 5

Raise the Disperse to the maximum of 1,50%. To get the randomness look better.

Step 6

Pull the size down to about 50-40% or whichever size suits you.

Step 7

Leave everything else untouched but pull down the Evolution and Evolution Options.

Step 8

Make sure that you are at the beginning of the timeline and click on the little stopwatch by Evolution. The Evolution should turn to some bluish color.

Step 9

Under Evolution Options check the Cycle Evolution checkbox.

Step 10

Go to the end of the timeline by going to Window>Timeline Controls (Ctrl+3) and clicking the Last Frame button or by pressing the END button on your keyboard.

Step 11

In the Evolution above the circle where it says 0 x + 0,0 change the first zero to 1 so it would say 1 x + 0,0.


Explanation:

In Step 11, 1 x + 0,0 means that it will make one circle of evolution from the beginning to the end. You can also make it faster by typing in a higher number. If you wish to change the number, be sure to be on the last frame of the animation! After Effects automatically makes a keyframe wherever you change the setting. We don't want to have it wherever. We want it at the end.

But hey, who says that you HAVE to? Why not doing one circle from the beginning to the half of the animation and then a hundred more to the end? Just kidding. But then again, let your imagination go wild. ;) Now stop playing around and delete all the keyframes you accidentally made and make sure you have only one at the beginning and one at the end.


If you're new to After Effects you should be asking: "...but luksy, how do I delete the keyframes I made when I was letting my imagination go wild?" Let me show you young padawan.

But first, let me show you what your Effect Controls window should look by now (at the end of the timeline).





Deleting Unnecessary Frames

If you're aware of how to do this in After Effects, you can step away, ignore this part, and go to the next one.

Step 1

See the timeline at the bottom? Yes? Ok. You should also see your solid which is the only layer in the timeline. At the right of the layer name, you should see a little box. This shows your solid color.

But let's go further left and you should see a number 1. Let's go even further left and you should see another colored box. That's your label color. But let's finally go a bit further left and you should see an arrow pointing right. Click on that:





Step 2


Effects and Transform should appear. Open up Effects by clicking on the little arrow pointing right. The name Cell Pattern should appear.

Step 3

Open up Cell Pattern by clicking on the arrow thingy.

Step 4

A lot of options should appear. These all options show you what can be animated by adding keyframes and such. At this point, only Evolution interests us.

The little clock should be turned on and by looking right on the timeline you should see two keyframes. One at the beginning and one at the end. Oh yeah, maybe more if you did some of your own Evolution tweaking.

Step 5

To delete a keyframe, just click on it to select it and then simply press Delete button on your keyboard to delete it.

If you have only two keyframes of Evolution at the beginning and the end, don't delete anything, but if you do have more keyframes, just delete them all except the first and the last one.

You are almost done. We just have to do finish up some loose ends with our video and get the video into Flash!


Testing (RAM Preview)

Step 1

Go to the beginning of the animation by pressing the Home button on your keyboard.



Step 2


Set the preview quality to Half.



Step 3

You should see two markers at the top of the timeline. In my case, one is at the beginning and the other one is at the end. Just like it should be. If yours isn't, drag the left marker to the beginning (far left) and the right slider to the end (far right).



Step 4

This should be enough for previewing animation. Last check that you're on the beginning (press home), right click on the timeline Preview | RAM Preview (Num 0).

Your animation should eventually start playing and looping. Leave it playing for some while and try to see if it pops/clicks/jumps when it starts playing from the beginning. If it's not...congratulations! You have a perfect loop! Now to put it properly in Flash...

Exporting the Whole Thing

Step 1

Go to File | Export | Macromedia Flash (SWF).



Step 2


Choose your destination path and the filename.

Step 3

For the quality, you will have to decide that for yourself. Export in different qualities, check the file sizes of the swiffs and choose what suits you best. For the sake of the tutorial, leave it to 5.

Step 4

Choose Rasterize (where it says Ignore / if it says Ignore).

Step 5

In the Options, check the Loop Continuously in the checkbox.

Step 6

Wait for the whole thing to get rendered and open up your all time favourite program - Flash


Preparing the Loop in Flash

Step 1


Create a new document, set it's properties (Ctrl + J) to 30fps, go to Insert | New Symbol (CTRL + F8), name it a 'Bubble Video Loop' or something, check the option for Movie Clip and press OK!





Step 2


You will be automatically inserted into this new symbol. Now go to File>Import>Import to Stage...

Step 3

Import the swiff (swf) file of the loop you exported from After Effects.

Step 4

90 new frames will be inserted into your symbol. Each frame contains an image file (check library for more info). Exit the symbol by click on the Scene 1 button at the top left corner.

Step 5

Open up the Library by going to Window>Library (Ctrl+l or F11) and drag the symbol onto the stage.

Step 6

Test your movie by going to Control>Test Movie (Ctrl+Enter). Now you have your own video loop! BUT - if you have a good eye, you'll notice that the loop stops for 0.1 second at one point. That point is between the end and the beginning.

Step 7

Go into the symbol again (double click it) and click on frame 1. Now click on frame 90. Notice anything? It's the same thing that plays twice in a row!

Step 8

Right click on the last frame (90) and click Remove Frames.


Now, you have a perfect loop! Play with it! Go out with it! Insert it into a new empty movie clip and tween its tint color to make it colorful (which you can also do in After Effects but maybe more on that some other time)! Mask it into different shapes! The only limit is your imagination! But don't forget to keep an eye for the file size. These things can get big. And I mean BIG.

Download AEP (22 KB)

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials