Animating a Butterfly

Movie link

Project sit

Project zip

---Creating the Butterfly in Photoshop--- At this season in Paris there are no butterflies and I wanted my butterfly in red so I needed to ask the permission to use an existing picture. It comes from Liang-Wu Cai , he took this wonderful butterfly picture at Great Meadows National Wildlife Refuge, Concord, MA. in August 2, 1997" . The link to his page is here :http://web.mit.edu/cai/www/jpg/closeup/butterfly.html In Photoshop I used a rulers guide, (blue vertical line) that will make up the axis of symmetry (left-right) and will serve later as reference to spread out a little bit the wings of butterfly as I had separate them from the body. After erasing the background, I've created 3 layers which holds separately: body, left wing, right wing. As you see on screen shots on the right, wings were spread out with rubber stamp to "stick" to the blue line of symmetry. ---Importing the Butterfly into After Effects--- In After Effects, import "butterfy.psd" file as "Composition" (see right screen shot) After the import, we end up in Project window (see screen shot above), with a folder with 3 stills related to 3 layers in Photoshop file and new After Effects composition that holds already these 3 layers in time line (see screen shot below.) ---Setting Up the Butterfly Comp--- Go to the composition settings (see screen shot to the right) and make more room for the butterfly , let's say: 600 x 400 pixels (for flying butterfly needs more space ) and make the duration of composition to 1 second (we will see after how to expand the "life" of butterfly to ANY duration we need) In timeline (see screen shot below) make all 3 layers "3D" clicking in 3D box column, also check high quality display. shutter angle = 0 = no motion blur at all Go again to the composition settings and choose "Advanced" tab (see screen shot below) . In rendering Plug-in choose "Advanced 3D" and specify 360 for "shutter angle" as we want high motion blur shutter angle = 360 = highest motion blur ---Setting Up the Butterfly Wings Anchor Point--- As we are going to rotate wings in space to make them fly, we need to shift their anchor points toward the axis of symmetry. In After Effects we can use "rulers guides" (thanks Adobe). Select left wing layer in time line. Using "Pan behind Y" tool (see screen shot), move it with mouse towards "center of gravity". Redo the same for right wing. Now we are ready to animate the butterfly Before After ---Animating the Butterfly Wings--- We are going to rotate butterfly wings in 3D space along Y (green arrow) axis so the better view to work with is Top view. Enable Y-axis key-frames in timeline for wings. We need only 3 key frames during 1 second. See screen shots below. WINGS KEY FRAMES for Y-rotation at time code 00:00 and 00:24 WINGS KEY FRAMES for Y-rotation at time code 00:12 As wings overlap the body, we need to shift body position in Z direction about 10 pixels (see blue highlights on screen shot below).Enable motion blur and make preview in custom view. Butterfly flies already, sure in place, we are going to let it fly using trajectories and the camera in the next step. We could also animate the body by rotating it in X or Z axis. ---Looping the Butterfly in Time--- Now we have a flying butterfly during 1 second and we will use it in the new composition during let's say 15 seconds. There is a trick to loop a composition (thanks to Dan Ebberts here at COW forum) : Pre-comp the comp you want to loop into a new comp that is long enough to hold all the loops you want. Enable time remapping for the new comp. Type "rr" to reveal the keyframes. Set a keyframe at the last frame of the loop. Delete the keyframe at the end of the comp. You should now have keyframes at the start of the loop and the end of the loop. Enter this expression in the time-remapping property: loop_out("cycle",0) That should do it. If you use the method I described, you'll lose the first frame of your loop after it plays through once. If that's important, you need to add one more keyframe after the one at the end of the loop and set its value to zero. loop_out("cycle",0) behaves better if the last keyframe is identical to the first one. I've found a work around to this solution: (see the screen shot below), I don't have 100% of speed but I'm close to it and I manage with 2 key frames. From now, I've created a new composition with duration of 15 seconds and thanks to expressions I could layout the 1 second butterfly animation to any length, simply by dragging its right handle in timeline. Explanation: loop_out("cycle",0) In order to understand what really does loop_out("cycle",0) I'll try to explain it here: If we convert an expression to key frames we will see periodical "use" of frames from 1 second composition within "outlasting" composition. ---Animate the Butterfly in 3D Space and in Time--- From now there are 100,000 possibilities to animate the butterfly comp within After Effects 3D space. Here, I've just added a camera without animating it, instead I've animated position and rotations of butterfly. Butterfly flies with the constant speed defined in its composition of 1 second. For more fun, I've duplicated previous "comp1" of duration 15 seconds into "comp1*" for which I've extended duration to 25 seconds, so I was able to do some time remapping. In "comp1*" I could speed up or slow down the butterfly in order to achieve another result.

MAKING TEXT FLY

Path Text Movie

Particle Playground Movie

Project file: .zip

Project file: .sit

---Making Text Fly with Path Text--- 1. Create a comp-size solid and add the Path Text effect (Effects > Text > Path Text.) 2. In the dialogue box that opens, type some text, and choose a font. Then click OK. 3. In the Effect Controls palette, twirl down Path Options and set Shape Type to Line. 4. Twirl down Paragraph and set Align to Center. 5. Twirl down Advanced. Then twirl down Jitter Settings. Click the stopwatch next to Baseline Jitter Max to set a keyframe at frame zero. If you scrub the value for Baseline Jitter, you'll see that the letters move above and below their original locations (on the baseline). Baseline Jitter Max -- and all the Jitter setting -- animate automatically, without any need for keyframes. In fact, if you give Baseline Jitter a value above zero and then play your comp, you'll see your letters bobbing up and down. After you're done experimenting, return the time marker to frame zero. 6. Set Baseline Jitter to 2000, which is the highest allowable value. The letters will be widely scattered, but some of them will probably still be visible. 7. Click the stopwatch by Tracking to set a keyframe at frame zero. 9. Scrub the Tracking value to make it gradually larger and larger until you see all the remaining letters move off the screen. 10. Move the time marker to one second. 12. Return Tracking and Baseline Jitter to zero. That's it. If you run the movie now, you'll see the letters zoom in from off-screen and form a word. The downside -- if it is a downside -- is that the letters bob around as they're zooming in. That's the automatic animation of the Baseline Jitter Max setting. If you don't like this "feature," you'll have to switch to the next technique: ---Making Text Fly with Particle Playground--- 1. Create a comp-size solid and apply the Particle Playground effect (Effect > Simulation > Particle Playground.) The Particle Playground gives you four different ways to create particles: cannon, grid, layer exploder and particle exploder. We're going to use the grid, but the cannon is on by default. If you play your comp, you'll notice little red squares shooting out of a spot in the center of the layer. That's the cannon, and we need to turn it off. But there's no "turn the cannon off button," so we have to trick the cannon into stopping by setting one of its vital properties to zero: 2. Twirl down Cannon and set Particles Per Second to zero. 3. Twirl down Grid. Before you use the grid, make sure that your time marker is on frame zero. The grid can create an alarming number of particles. And as you move forward in time, it adds new particles to the ones that already there. Each frame will add more and more particles, and it's not odd to suddenly find that you've got thousands of particles after moving only a few frames into the comp. This can make AE hang or crash. Normally, the grid places particles in a rectangular grid pattern (surprise, surprise) and then gravity pulls them down, but we're not going to use the grid in a standard way. Instead... 4. Click the word Options at the top of the Effects Controls palette. 5. In the dialogue that opens, click the Edit Grid Text button (not the Edit Cannon Text button.) 6. Type your word, uncheck loop text (if checked, your word will appear over and over again; we only want to see it once), and click Center under Alignment. Then click OK and OK again to exit the Options dialogue. If you look really closely at the screen, you'll see a tiny red line in the center. That's your text. By default, Particle Playground makes its font-size two, so it's too small to read. 7. In the Grid settings, raise Font Size to a reasonable value. Where's the grid? When you enter Grid Text and choose Center Alignment (step 6, above), you obliterate the grid (if you skip the step of choosing Center, your text will be set on a grid -- each letter in a different grid cell.) Notice that many of the grid options are grayed out. If you very slowly and carefully scrub the time marker forward a few frames, you'll notice that the text falls and leaves trails behind itself. It falls, because gravity pulls it down. The trails are more text particles. Remember, the grid creates new particles on each frame. We need to stop this from happening. If you've moved it, return the time marker to frame zero. 8. Click the stopwatch by Font Size to set a keyframe in frame zero. 9. Move to the next frame (frame one) by pressing the Page Down key on your keyboard. 10. Set Font Size to zero. ...which effectively turns off the grid. You can now safely play your comp. You'll one copy of your text fall until it exits the screen. After watching this, return the time marker to frame zero. NOTE: if you're going to field render, select the keyframe in frame zero and then select Animation > Toggle Hold Keyframes from the menu. This will ensure that no interpolation occurs between the two keyframes. 11. Twirl down gravity. You'll see three properties: Force, Force Random Spread and Direction. Force and Direction control the strength of gravity and the direction of gravity's pull. If you're animating helium balloons, you might want to set the Direction to zero, so that the balloons are pulled up instead of down. Force controls the strength of gravity. You might want to decrease this if you're simulating life on the moon. (Decreasing Force to zero turns gravity off.) We're most interested in Force Random Spread. As you experiment with this property, you'll see that the letters move up or down (similar to the Baseline Jitter Max setting in the Path Text technique). This property allows you to create the illusion that some particles are heavier than others (and are therefore more or less affected by gravity.) 12. Click the stopwatch by Force Random Spread to set a keyframe on frame zero. 13. Set Force Random Spread to zero. 14. Move the time marker to one second and increase Force Random Spread to 60. If you play your comp now, you'll notice that the letters fall at different rates. This is an interesting effect, but not quite what we're looking for. 15. Twirl down Repel. Like teenagers at a prom, particles can be repelled or attracted to each other (negative repel values cause attraction.) The more particles are attracted, the more they clump together. The more they're repelled, the more they move apart. We can use repulsion to add more spacing between the letters (which will create a similar effect to Tracking, as in the previous technique.) While Force controls the amount of attraction/repulsion, Force Radius controls how close particles must be to each other before attraction or repulsion occurs (similar to a person's zone of personal space.) 16. Move the time marker to frame zero if necessary, and click the stopwatches by Force and Force Radius (under Repel.) 17. Set both Force and Force Radius to zero. 18. Move the time marker to one second. Set Force to 50 and Force Radius to 500. Play your comp to see the letters fly off the screen in many directions. If you don't like the result, try playing with the Force and Force Radius values. The effect is now complete, except it's running in reverse. We want the letters to start off screen and fly in to form a word. So... 23. Click the double-headed arrow button  at the bottom of the timeline to reveal the In, Out, Duration and Stretch panels. 24. Set stretch to -100% (negative 100%). 100% means "play at normal speed." -100% means "play at normal speed, but backwards." (50% would play faster; 200% would play slower; -200% would play slower and backwards.) The clip now runs backwards but its positioned oddly on the timeline. To fix this... 25. Move the time marker to the end of the comp by pressing the END key on the keyboard. 26. Press the left-bracket key ( [ ) on the keyboard. This shortcut moves the in-point of a layer to the time marker. I know it looks like it moved the out-point, but remember that the layer is reversed. The in-point is at the end (right side) of the layer. (The right-bracket key (]) moves the out-point of a layer to the time marker.) NOTE: If you want to move a layer (or layers) to the beginning of the timeline, select it (shift click to select multiple layers), then press the HOME key followed by the left-bracket key. Home moves the time marker to the beginning. Left-bracket moves the selected layers to the time marker. The stripes on the layer indicate that it's been stretched backwards. I hope these text techniques work well for you. If you still feel that you don't have enough control over text, tryBoris Graffiti, which can be installed as a plug-in to After Effects or as a standalone application. Or try Swish. Swish is a standalone application that generates swf files (better known as Flash files). It can quickly generate all sorts of groovy text effects. And it only costs $49.95. After Effects 5.5 can import SwF files. ---Marcus Geduld After Effects 5.5, Adobe Certified Expert Feel free to discuss these techniques in the Adobe After Effects forum at Creativecow.net.

Animating Text Reflections with Expressions (Terjemahan dari Google translate)

Ada yang cukup sekarang bir komersial dengan beberapa dengan beberapa sangat dingin refleksi animasi teks. Saya ingin tahu tentang bagaimana saya bisa tarik yang di AE tanpa ada pihak ke-3 plug-in. Jadi saya beralih ke yang sangat sederhana dan ekspresi got a pretty keren hasilnya. Klik gambar dibawah untuk main film.

Langkah 1: 
Buat Comp disebut "Reflections". It doesn't really matter seberapa besar ini adalah Comp. Hanya hal-hal yang bisa Anda dapatkan baik untuk merasakan apa yang terjadi di dalamnya. I'm going with 1280x720.

. 

Langkah 2 
Buat baru sekitar 1280x1000 putih solid. Kita akan menggunakan rectangular Mask Tool untuk memotong menjadi tinggi dan hanya memerlukan keping cukup untuk pad bulu yang masker di X Axis. 

Setelah Anda menciptakan panjang, tinggi masker, memukul "f" pada keyboard akan berputar di bawah Mask Feather properti. Menyesuaikan X bulu atau menjadi sekitar 130 sampai terlihat mirip dengan gambar 2.

Langkah 3: 
• Buat Kamera dengan preset dari 35 mm dan mengatur Z Posisi ke 0.

• Buka otomatis Orient Panel dan menetapkan Auto-Orient ke OFF. Ini dapat ditemukan di bawah Menu Layer> Transform> Otomatis-Orient atau dengan "opt + cmd + O" (Mac) atau "ctl + alt + O" ( Windows).

• Putar di 3D beralih untuk Solid dan kerugian yang Anchor Point di Z Axis menjadi sekitar -800. Kemudian duplikat ini solid sekitar 10 kali sambil memutar setiap solid sedikit di Y Axis. Tujuannya agar solids semua diputar secara acak di dalam sebuah silinder kasar. 

Jika Anda bisa melihat ke atas dan ujung bawah dari lapisan, ia hanya stretch tinggi di Y Axis sampai ujung-ujungnya adalah di layar.

Apa yang telah kita hanya dilakukan adalah menciptakan lingkungan yang akan membawa kita reflections kami.

Langkah 4: 
Sekarang, membuat yang baru Comp (setting sama seperti sebelumnya jika Anda suka). Nama itu "Teks dengan Reflections". Menggunakan Teks Tool membuat beberapa nice, lemak tinggi dan teks. I'm going to use "CREATIVE COW." 

Perhatikan hal berikut:

• Arial Black - Ukuran 130 px 
• Tinggi diskalakan ke 115% dan skala Lebar ke bawah 75%. 
• Hitam Putih Teks dengan Stroke 
• Stroke set ke 8px 
• Isi Over Stroke 
• Teks Centered

Langkah 5: 
Mengatur Teks Layer ke 3D dan duplikat teks lapisan sekali. Kemudian gunakan Pick Whip ke induk "CREATIVE COW 2" ke "CREATIVE COW."

Langkah 6: 
Membawa "Reflections" Comp menjadi "Teks dengan Reflections" dan pastikan setidaknya meluas ke seluruh batas dari Komposisi Lihat. Selain itu, menempatkan "Reflections" lapisan antara dua lapisan teks.

Selanjutnya, mengatur Track Matte dari lapisan 2, "Reflections", untuk Alpha Matte dari "Kreasi Sapi 2."

Dan Anda akan melihat sesuatu yang tampak seperti gambar 8.

Langkah 7: 
Sekarang keajaiban terjadi. Masukkan ekspresi!

Buka the "Reflections" Comp, putaran bawah pada kamera rotasi, dan memilih atau klik + alt + klik pada rotasi Y Axis' berhenti menonton mengungkapkan ekspresi jendela.

Dengan asumsi Anda memiliki nama comps lapisan dan dengan benar, Anda dapat memasukkan hal-hal berikut ke dalam ekspresi ekspresi lapangan dan tekan "masuk" pada nomor mouse pad atau klik di luar lapangan.

Expression:

-comp ( "Teks dengan Reflections"). lapisan ( "CREATIVE COW"). rotationY

Ekspresi ini mengambil negatif dari perputaran nilai dari "CREATIVE COW" lapisan teks. Menggunakan nomor ini untuk benar-benar spin 3D kamera dalam reverse Pan di dalamnya dari lingkungan 3D.

Kembali ke atas Comp "Teks dengan Reflections" dan spin yang "CREATIVE COW" lapisan pada Y Axis untuk melihat dalam tindakan ini.

The Track Matte, menggunakan alfa dari Layer 1, menyatakan hanya bagian dari "Reflections" Comp yang di dalam tubuh yang menyebabkan teks pada kamera rotasi untuk mensimulasikan reflections sebenarnya pada teks.

Anda kini dapat memutar "CREATIVE COW" teks untuk mendapatkan beberapa nice menunjukkan dari teks dan kamera menyediakan reflections!

Check out proyek download untuk produk selesai dan sedikit ekstra "selesai".

Animating Text Reflections with Expressions

There is a fairly current beer commercial with some with some very cool text reflection animation.  I was curious as to how I could pull that off in AE without any 3rd party plug-ins.  So I turned to a very simple expression and got a pretty cool result. Click the image below to play the movie.

 

Step 1:
Create a Comp called "Reflections".  It doesn't really matter how big this Comp is.  It only matters that you can get a good feel for what's going on in it.  I'm going with 1280x720.

.

 

Step 2
Create a new white solid approximately 1280x1000.  We are going to use the Rectangular Mask Tool to cut it into a tall sliver and just need enough pad to feather the mask on the X Axis. 

Once you've created the long, tall mask, hitting "f" on the keyboard will twirl down the Mask Feather property.  Adjust the X feather to about 130 or until it looks similar to Image 2.

 

Step 3:
•  Create a Camera with a Preset of 35 mm and set its Z Position to 0.

•  Open the Auto-Orient Panel and set Auto-Orient to OFF.  This can be found under Layer Menu> Transform> Auto-Orient or with the "opt+cmd+O" (Mac) or "alt+ctl+O" (Windows).

 •  Turn on the 3D switch for the Solid and offset the Anchor Point on the Z Axis to about -800.  Then duplicate this solid about 10 times while rotating each new solid a little bit on the Y Axis.  The goal is to have the solids all randomly rotated around in a rough cylinder.

 

If you are able to see the top and bottom edge of the layer, just stretch it tall on the Y Axis until the edges are off screen.

What we have just done is create the environment from which we will take our reflections.

Step 4:
Now, create a new Comp (same settings as before if you like).  Name it "Text with Reflections".  Using the Text Tool create some nice, fat and tall text.  I'm going to use "CREATIVE COW."

Note the following settings:

•  Arial Black - Size 130 px
•  Height scaled to 115% and Width scaled down to 75%.
•  Black Text with a White Stroke
•  Stroke set to 8px
•  Fill Over Stroke
•  Text Centered

Step 5:
Set the Text Layer to 3D and duplicate the text layer once.  Then use the Pick Whip to parent "CREATIVE COW 2" to "CREATIVE COW."

Step 6:
Bring the "Reflections" Comp into "Text with Reflections" and make sure it extends at least to the full bounds of the Composition View.  Also, put the "Reflections" layer between the the two text layers.

 

Next, set the Track Matte of layer 2, "Reflections", to Alpha Matte of "Creative Cow 2."

 

And you should see something that looks like Image 8.

 

Step 7:
Now the magic happens.  Enter expressions!

Open up the "Reflections" Comp, twirl down the camera's rotation, and opt+click or alt+click on the rotation Y Axis' stop watch to reveal the expression window.

Assuming you have named the comps and layers correctly, you can enter the following expression into the expression field and hit "enter" on the number pad or just mouse click outside the field.

EXPRESSION:

-comp("Text with Reflections").layer("CREATIVE COW").rotationY

This expression takes the negative of the rotation value from the "CREATIVE COW" text layer.  It uses this number to actually spin the 3D camera in a reverse Pan inside it's 3D environment.

Head back over to the Comp "Text with Reflections" and spin the "CREATIVE COW" layer on its Y Axis to see this in action.

The Track Matte, using the alpha from Layer 1, reveals only the part of the "Reflections" Comp that is inside the body of the text causing the camera's rotation to simulate actual reflections on the text.

You can now rotate the "CREATIVE COW" text to get some nice reveals of the text and the camera provides the reflections!

 Check out the project download for the finished product and a little extra "finish".