Here’s the problem- when you set the video path for the FLV playback component in Flash on a Mac (only a Mac, not a PC), Flash does not create a relative URL. Instead, Flash tells the FLV Playback component to look for the file in Users/username/somefolder/someotherfolderthatholdsyourFLVfile/flvfile.flv. So, when you move the FLV, the code breaks because Flash is looking in that absolute location (kinda dopey, huh?). Try as you might, it is literally impossible in Flash on a Mac to set a relative path like flvfile.flv for the source of the FLV Playback component. If you type it in the component inspector manually, Flash finds the file and changes it to an absolute path. Quite annoying indeed.

Now the solution- you have to do it with code. It’s really simple code though, so it’s not a huge pain.

1. Give the FLV Playback component and instance name (first you have to select it, and then click in the instance name field in the Properties panel).
2. Add the code instanceName.source = “flvfile.flv”; (of course, you have to replace instanceName with the actual instance name of your FLV Playback component, and flvfile.flv with the actual name of your movie file).
3. Test the movie to create the SWF file that has the relative path.
4. Upload the files, and watch everything work in all its majestical majesty.

That’s it!

Most laptops out there will have little tiny numbers printed on the keys in addition to the “real” key. So, if you have a fairly recent Mac Book Pro, for example, your “M” key will have a teensy weensy zero (0) on it. This is telling you that this M key lives a double life as the zero on the numeric keypad. You’ll also notice a function key (fn on a Mac, but also usually on a PC laptop, too). The fn key is the catalyst that we use to bring out the alter ego of the keys. Thus, pressing fn+M will be like pressing zero on the numeric keypad on a full size keyboard (which does a RAM Preview in After Effects, etc.). On my MBP, fn+left arrow is Home, etc. So, while it’s not as easy as using a regular keyboard, using pro apps on a laptop is absolutely possible. Hopefully this blog put YOU in on good terms with the FUNCTION key, because that math equation looks like this: (U + fn = FUN!). Sorry. Couldn’t help myself.

Love,

Chad

PS On a Mac - even with a full size keyboard - that little fn key can also allow you to use the F1, F2, etc. keys as F keys AND as the cool little feature (such as volume/brightness control) that is printed on them. Just go to System Preferences>Keyboard & Mouse>Keyboard and check the “Use all F1, F2, etc. keys as standard function keys” option. Then if you want to use the volume/brightness/dashboard (etc.) function on the function keys, just press the fn key while you’re pressing the key. On a full size Mac keyboard, you’ll find the fn key to the immediate left of the Home key.

One of my original podcasts taught people how to make 3D objects using the Shatter effect in After Effects. I had intended this tutorial for more advanced users, but as it turns out, it seems like users of all experience levels are digging the tip. That’s awesome! But one question that keeps coming up is how to stop the 3D object from shattering. I kept posting responses on youtube for this, but there are so many comments on the video that my advice kept getting pushed back in the list and eventually deleted! So, it finally hit me to create  a blog explaining the dealio.

First, we have to understand the Shatter effect a little bit. When you first apply the effect, you see a wireframe version of the layer, or rather, the pattern that Shatter will be using to blow up your layer. The default pattern is bricks.

There are also a bunch of blue lines that are CRITICAL to understanding what is really happening with Shatter. To understand these, we need to see them a little better. Open up the Camera Position category of properties, and take the Y Rotation value to -87 (that’s negative 87).

Now we can see what’s going on. That big blue sphere is known as the FORCE (insert cliché Star Wars joke here). Here is the key rule with Shatter: ONLY THINGS THAT TOUCH THE FORCE GET SHATTERED! We can reduce the size of the force using the Radius value in the Force parameters, and the Radius value is visually represented by the little cyan ring around the force. So, if you wanted to make a baseball going through a window, the default force size would be way too big. So, you could reduce the value of Force 1>Radius to make it smaller.

The DEPTH value in the Force 1 area controls the Z depth of the force. In other words, the Depth property controls how close/far away from the layer the force is. If I took the Depth value (in the Force 1 set of controls) to 0.5, then the force would never come into contact with the layer, and it would therefore never Shatter. So, to make 3D objects created in Shatter NOT blow up, adjust the depth value so that the force never touches the layer. To make a layer blow up later in time, simply animate the Depth value. (for more information on basic animation concepts like creating keyframes, consult the VERY USEFUL After Effects help documentation. Unfortunately, it’s not built into the program anymore, and you have to try and find it on the web, but it’s worth searching for).

P.S. WordPress isn’t allowing me to upload and embed images right now, so I’ll have to get back to you on the screenshots. Sorry!

Then right click on the clip in the Timeline panel and choose Frame Hold. In the dialog box that pops up, check the Hold On box. This tells Premiere to hold on a frame. You select which frame to hold on in the drop down menu next to the Hold On option. Your choices are In Point, Out Point, and Marker 0. So just select whichever point you would like the clip to hold on, and then click OK. This clip will then become one long still frame. Note that if you were to apply this to the original clip (i.e. not the duplicate), then the original clip would be completely replaced by the hold frame.

Alternatively, you also might be able to apply the Time Warp effect (which is the “Timewarp” effect in After Effects - it’s only one word there; weird?), and take the Speed parameter to 0. This way, the frame hold can be animated by clicking the stopwatch, and then changing the Speed value over time.

Hope this helps!!

One issue in my Lynda title is that the examples worked in Safari and not FireFox (I fixed that by the way, and the new files/movies should be on the Lynda site now, or very soon). The problem actually had nothing to do with Flash- it was a FireFox issue regarding the way the browser handles CSS percentages. Because of the issue, FireFox was not rendering the Flash content or the alternate content I set up. Not cool.

Here’s the solution- FireFox needs to have percentages setup for every parent element of the element that is to use CSS percentages. So if <div id=”flashContent”> is inside of <div id=”someOtherDiv”>, and you want the flashContent div to take up 100% of the browser window, you have to set someOtherDiv to be 100% as well, along with the element(s) that div is in (maybe just the body tag, for example), and the html tag. Here’s an example of the CSS rule you’d need to use:

html,body,div#someOtherDiv,div#flashContent {
width:100%;
height:100%;
}

So remember, when you’re using percentages for an element in CSS, always also use percentages for each of that elements parents, all the way up through the html tag.

So, as expected, I ran into an annoying problem. When I tried to style the rollover buttons on our new site (see the navigation links at the top right of the redesigned site for an example) to have no background color until rolled over, they worked great in Safari and Firefox on Mac and PC, but didn’t work at all in IE. Nice! After trying many different solutions, and getting to a point of insanity searching for an answer, I finally found it on the Microsoft Developer Network site.

Here’s what I learned- in Internet Explorer, in order to have a CSS background change when you roll over a link (using the a:hover pseudo selector), you also need to set the background property of the link when you’re not rolling over. So, the a tag needs to have a background color or background image, if you want to have a background color or image for a:hover. That’s it! What I ended up doing is creating a 1 x 1 pixel transparent .png file, and one that was a white pixel. While that may not be the best solution, since you have to wait for the white pixel image to load the first time you roll over, it works for now, and I’m happy.

First, add a page title to your HTML file. When you publish HTML from Flash, you get an HTML page to house your SWF file, and the page title is generated for you. The problem is that many people don’t take the time to change it, and use file names like project_1_new.fla, so the title for the page ends up being project_1_new. Not very descriptive, seeing as a page’s title is your biggest chance for impact when your site shows up in a search. If you’re new to Search Engine Optimization (SEO), then you may think of page titles as those things at the top of your browser window that don’t matter too much:

But check out the significance of page titles in a web search:

To add a page title to your page, open up your HTML page (created from Flash, or whatever app you use) in a text editor (Dreamweaver, Notepad, TextEdit), and type a descriptive title for your page in the title tag. It looks like <title></title>. So your descriptive title tag should look something like <title>This is the new, improved, descriptive title tag</title>. Your page’s title should accurately describe the content of your page, and should contain keywords that are relative to that page in your site. In other words, your goal is to write a concise description of the page’s content that contains keywords people are likely to search for to find sites like yours.

Second, use SWFObject. The SWFObject site has many examples of how to use it, so I won’t go into all the code here, but this provides an extremely easy way to include searchable HTML as alternate content for people and search engines that can’t see Flash. I highly recommend using SWFObject’s Dynamic Publishing method for any Flash content that needs improved searchability.

Finally, in conjunction with SWFObject, provide searchable HTML alternate content. When you use SWFObject (I’m a huge fan of the SWFObject code generator by the way), you can control what people and search engines see if they don’t have a Flash version sufficient to see your Flash application. Here, provide an accurate representation of your Flash content using HTML. That means you can use HTML tags to add emphasis in your alternate content (i.e. headings, HTML links, etc.), which increases the searchability of your Flash based page dramatically, while at the same time actually providing a way for people to see a version of your site even if they don’t have the Flash Player! For examples of this, see the site http://www.dorothybrodsky.com/, and behold its Flashingly awesome glory.

Then, disable Flash in your web browser to see what the site looks like if you don’t have Flash, or visit the site on a non-Flash device like an iPhone.

Of course there are many more things you can do to improve the SEO in your site, but these three things will give you the most bang for your buck. By devoting very little development time employing these techniques, you can greatly enhance your site for both search engines and people.

What are the top 3 things you can do to your Flash file for search engine optimization (hey, if I don’t win the book, I’d like to get the answer from somewhere).

Congratulations to Brian, and thanks to everyone who participated in the contest. As promised, Brian will receive a copy of the book and the answer to his question via blog post within the next few days. And since there were so many high quality questions, we’ll use them as a basis for blog posts in the future, so even if you didn’t win, you might get your answer after all!

This weeks blog is about some great resources out there that I want you all to know about. Just like me, they’re all over the place in a variety of disciplines, but hopefully you’ll find something you dig.

DETONATION FILMS - Found at detonationfilms.com, Detonation Films sells (and often just GIVES AWAY FOR FREE!!) really cheap video clips of explosions, sparks, smoke, blood spatter, fireballs, and other things that really turn me on. They are a family owned company, and its policies are dictated by awesomeness. For all of you aspiring filmmakers and those playing with After Effects, this site is a MUST!

GREENLAYERS - If you have a little cash, greenlayers.com is a place you might consider spending it. Greenlayers.com sells video clips that are PRE-KEYED!! That means that they’ve already had the backgrounds removed for you, so you can just composite them in your shots. They have clips in a variety of genres, and a great search engine. It’s a great idea. You will be hearing a lot more about this site in time. I predict that it will be BIG.

*TUTS.COM - There’s a new family of tutorial websites that I’m digging quite a bit. PSDTUTS.COM is a Photoshop tutorial site, AUDIOTUTS.COM is an audio tutorial site (with a GREAT tutorial on using the ReWire protocol with Propellerhead’s Reason and Apple’s Logic Pro), and also AETUTS.COM, which has After Effects tutorials. The site is mostly free as far as I can see, and it’s mostly good stuff. I think they also have a vector design site as well, but I don’t remember what it’s called.

STU’S BLOG - If you’ve been playing around with After Effects for a while, you’ve probably heard of Stu Maschwitz. He’s a god in the AE world. Just amazing. He has a blog that is SO LEGIT. He always lets you know what cameras are coming out and what he thinks of them. The blog is at prolost.com. He also has a book that I HIGHLY recommend called The DV Rebel’s Guide - it’s about how to make pro looking movies at home (and that tends to be a reoccuring topic from Stu, who also created the visual effects studio The Orphanage).

GOOD TUTORIALS - One of my favorite Photoshop tutorial sites has always been good-tutorials.com. The tutorials there are easy to understand, clearly laid out, for all skill levels, and now they even have expanded to include other programs, such as 3DS Max.

AYATO - Some of the BEST AE tutorials I’ve seen are at http://www.ayatoweb.com/ae_tips_e.html. The tutorials there would be worth a fortune if the author sold them. But they are free! Go to this site to learn how to make some of the most common motion graphics tricks out there. Really well done tutorials that are still viable, even years later! Love this site.

OK, the next two sites, I’m a little intimidated to put up. These guys offer After Effects training on their sites, just like I offer After Effects training. The difference is, that these guys are WAY better than me at teaching, and they are WAY better than me at After Effects. Most of you will already know them well, but they will be new to some of you. I have this reoccurring nightmare that I tell people about these guys, and then everyone gets mad at me because I gave them inferior After Effects training. Oh well. Let the truth be out there, and come what may.

AHARON RABINOWITZ - This guy has an After Effects podcast, and has had it for years, over at Creative Cow (a great resource and community of video people). The link is http://podcasts.creativecow.net/after-effects-tutorials-podcast. Aharon is just amazing. He’s such a great teacher. To me, he’s kinda like this celebrity figure. Seriously. And that means a lot coming from me because I’m not impressed by celebrity. If Angelina Jolie were to show up at my house tomorrow, I couldn’t care less. But for some reason, this Aharon guy is the biggest celebrity ever. One time, at the NAB conference in Las Vegas, Aharon was presenting at the Particle Illusion booth, and I just stood there and stared at him. He probably thought I was a stalker. But I’ve always regretted that I was too chicken to introduce myself and say hello. This guy has been my hero for a lot of years, because of his After Effects skills and knowledge, his ability to teach, and the fact that his voice is like 3 octaves lower than mine.

VIDEO COPILOT - This amazing site, found at videocopilot.net, is run by Andrew Kramer who, like Aharon Rabinowitz, just blows my mind. Andrew is so funny and his art skills are so much better than mine, it’s just amazing. I’m part of this elite group of nerds that gets access to Adobe software before it’s announced to the public, and Andrew is part of that crew as well. When I make comments there, I’m like “After Effects good - [lame emoticon]“. And when Andrew makes comments, I can’t even understand what he’s talking about. It’s rare to find someone that is as artistically talented as Andrew and is such an amazing teacher. But he pulls it off, and I’m totally jealous of his mad skills.

So, that’s it for now. I’m sure I missed tons of other great crap out there, so I’ll probably end up making and appendix to this blog, but whatever. This week, I got a great question about cross platform compression - making video files on a Mac that play well on Windows and vice versa. Interesting question. So, I’m thinking about making next week’s blog about that. Let me know what you think!

Also, be sure and check out Todd’s contest below. Pretty sweet. I’m going to get back to recording After Effects CS4 Beyond the Basics for lynda.com. Those of you that are subscribers there are in for a treat! This title is going to be so legit! I’ve even made a new little project we’re going to be looking at, which you can look at here: http://www.youtube.com/watch?v=6K63TQa0hQA - this is the unfinished version, but you get the idea. That’s also Detonation Films fire exploding in the background!

As always, thanks for your support everybody!  -Chad

PS Since this is my blog and I can talk about whatever I want, I just wanted to point out that the season finale of Yo Gabba Gabba last week had Jack Black on it, and it was the most pants crappingly funny thing I’ve ever seen. Whether you’re a fan of the Aquabats, or kids shows, or Jack Black, or laughing, I HEARTILY recommend catching that puppy somehow!