Based on the popularity of my original adaption of Macc’s page flipping engine, I’ve gone back and made several major improvements to the dynamic page flip files:

• Huge performance enhancements - new “smart” loading means that performance won’t suffer when you add more pages
• Ability to specify which pages must be preloaded before the book starts (others will preload in the background)
• Ability to have audio on individual pages fade in when you turn to that page and fade out when you turn to another page
• Ability to specify a function to run after a page is torn out
• Ability to have a “spread” (i.e. a single page that spans two pages)
• Ability to place a “page” that precedes the book (ideal for instructions, tips, or help)
• Ability to have pages perform actions when they’re turned to
• Smarter preloading - less likely to stall or hang
• Addition of page navigation bar - flip to next, previous, or specific page

There’s a readme file included with the source files that explains in a bit more detail how these features are implemented.

Enjoy!

Download the source files:
Flash 8/MX2004 - with sample video FLA (5Mb)
Flash 8/MX2004 - without sample video FLA (1Mb)

Just about everybody knows that you can specify what media a CSS style sheet applies to - whether it’s for print, screen or both. When users want to print pages on your site, this allows you to deliver up a specially constructed style sheet that hides things that you’d rather not have print (ads, navigation, etc.) and adds things that you’d rather not have on screen (maybe some kind of letterhead or a page footer) so that it’s print-friendly. In this respect, CSS has done wonders for making content on the web that much more ubiquitous and practically sounded the death knoll for the old fashioned technique of having a “Printer Friendly” button that links to a pop-up or new window containing an unformatted version of the original page.

I’d like to share a technique that I’ve found useful when setting up sites to be print-friendly. First off, declare your respective stylesheets in the document head:

<link media="screen" href="default.css" type="text/css" rel="stylesheet" />
<link media="print" href="print.css" type="text/css" rel="stylesheet" />

As you can see, default.css is for the screen and print.css is for printing. Now, in the actual markup what I’ll do is add classes called “print” and “noprint” to various elements:

<h1 class="print">This is a Printed Headline</h1><p>This will show up on screen and when printed.</p>

In case it’s not evident at this point, what I’m doing here is indicating which elements will be for print only and which are for screen only. Everything else will be displayed on both.

Now in my screen stylesheet, default.css, I’ll add the following styles:

.print { display: none; }
.noprint { display: block; }

And in the print stylesheet, print.css, I’ll reverse it:

.print { display: block; }
.noprint { display: none; }

Now it’s easy for me to globally show (or hide) elements depending on the medium we’re in - screen or print. Nothing groundbreaking here, but this a lot cleaner than addressing each element one by one in your stylesheet.

Flash has long been the standard for creating rich and engaging multimedia content on the web. But as more and more creative folks are discovering, Flash can make the sometimes daunting jump from web to video a relatively simple and inexpensive task. And the results are pretty darn good…

In addition to the cost benefits, being able to take your web-ready Flash pieces and quickly create professional looking video from them allows you to cross-purpose work you’ve done once for two pretty distinct mediums. Now that’s value.

Sure, you’re probably saying “I can export to Quicktime right from inside Flash!”. Yes, Flash lets you export your movies to Quicktime natively but the problem is that when you watch the video you can just tell it’s Flash. It’s got that flat and synthetic look. If you saw it on a TV or DVD you’d think it was amateur. Plus, Flash doesn’t give you a lot of options when exporting video when you consider all the different aspect ratios, square pixels, yadda yadda yadda.

So what I’m going to do is offer up my list of “must have” tools for converting Flash to (or integrating it with) video. With this bag of tricks in your corner you’ll end up with professional looking broadcast-quality results.

1. Macromedia Flash
   This one’s pretty obvious. Can’t do much without it.
2. Flash MX Design for TV and Video
   This book covers a lot of material from both sides - Flash people looking to create for TV and traditional animators who might consider the possiblities of Flash. Topics include broadcast production basics to sound, animation techniques, video exporting, and postproduction. There are some excellent case studies and lots of good information for the traditional Flash user who’s looking to understand the differences between creating for web and TV.
3. Adobe Premiere Pro
   Premiere Pro is a pretty basic tool compared to some of Adobe’s other digital video products like Final Cut Pro and After Effects, but let’s not sell it short. It’s a great nonlinear video editing application that users familiar with Flash’s timeline and Photoshop’s GUI shouldn’t have too much difficulty jumping right into.
4. SWF2Video Plug-in for Adobe Premiere Pro
   Premiere doesn’t natively import SWF movies (though this might change in the next version of Premiere with the acquisition of Macromedia) so this little plug-in developed by FlashAnts comes to the rescue. Now you can import SWF movies and Premiere treats them just like any other video format. It also retains SWF alpha channels, so you can overlay your Flash on top of video clips. This is really useful for titling and on-screen graphics. The downside is that it can only import Flash 7 SWF files and lower - sorry no Flash 8. The double downside (which I discovered after pulling most of my hair out) is that you have to have the Flash 7 plugin installed in IE. If you upgrade to Flash Player 8, this plugin will no longer work and Premiere will crash uncontrollably. Don’t worry, you can have Flash Player 8 installed on Firefox (or any other non-IE browser, I assume).
5. ReelSmart Motion Blur
   Without this one, I’d say we’re about 90% of the way to getting something that really looks professional. So far, Premiere allowed us to import our SWF files (integrate them with video and audio if we wish) and export them as video in a multitude of different formats. But we’re still facing that inherent flatness of Flash. That’s where this last tool comes in and I must say it’s my personal favourite, because it’s that last 10% that makes such a huge difference. With this After Effects compatible plugin (works in AE, Final Cut Pro, Premiere Pro and a tonne of other digital video editors) you can apply motion blur to your SWF animations. Why would you want to do that? Well, when you move something from point A to point B in Flash, it moves in steps (frame by frame) until it reaches it’s destination. At each step, it looks the same as it does standing still. While this does create the illusion of motion when played back, this illusion can be enhanced greatly with a little motion blur. This plugin interprets the animation that’s happening in your video and creates composite blurred frames to replace your original ones. While my explanation might not get the point across, the results speak for themselves. See the “with and without” comparison.Notice how the one on the left looks much more fluid and life-like, like it was shot with film? The motion looks a lot more realistic.

   Now of course everything comes with drawbacks and this plug-in is no exception. Unfortunately, you can’t apply motion blur to movies with transparency. So drop that alpha channel and make sure your SWFs are 100% opaque throughout. Second, applying this plug-in greatly increases rendering time, so keep that in mind. Speaking of rendering, you’ll want to make sure that when you do export that you turn off interlacing (i.e. tell Premiere that the footage has no fields or is “progressive”). This is very important because otherwise you’ll end up with those mice teeth lines all over the place.

And that’s my personal Flash to video toolbox. It might sound like a complicated process, but once you have all the software set up it’s really quick and easy to go from SWF to video. As I mentioned above, the only thing that takes considerable time is the rendering.

For all of us who are familiar with Flash and it’s well-known web capabilities, this really opens the door to a whole new realm of creative possibilities.

We’re in the midst of building a website for a local golf course and the client asked if there was any way to display the current weather conditions and a short-range forecast on the homepage. Being a poor excuse for a golfer myself, I quickly saw the potential to build something a lot more useful to visitors than those tacky sponsored GIFs that tell you what the weather is like right now (no forecast unfortunately).

Here’s a quick tutorial that shows how to use a service like Yahoo! weather that offers RSS feeds to build a fancy little Flash widget to display current conditions and an upcoming forecast — and obviously style it so it fits with the look and feel of your own design.

In the end, you’ll end up with something like this. The default view loads the current conditions and the forecast can be viewed using two arrow buttons on the bottom. Try it out. First, let’s find the feed. Since the course is in Ottawa, we’ll browse to the city forecast page and grab the URL for the feed (see the RSS icon in the top right):http://xml.weather.yahoo.com/forecastrss?p=CAXX0343&u=c

If you click on that link you’ll probably see the raw data we’ll be working with. Beautiful, isn’t it?

Without getting into too much detail (that’s what the source files are for), we’ll scan through the XML using some FOR and IF loops to pull out the exact data we want (temperature, date, conditions and the “code” that we’ll use to show the proper icon) and then create a series of movie clips — one for the current conditions and one for each of the 3 days in the forecast.

Now, the “code” for the icon tells you what little picture describes what the current weather is like. Yahoo! uses an integer between 1 and 47 (see the list here - scroll down a bit) to identify what the conditions are. You just need to come up with some icons.

Admittedly, this isn’t exactly the most exciting use of Flash and XML under the sun, but hopefully some the basic principle used here will give you the fundamental knowledge to integrate Flash with other web services like Flickr and del.icio.us. Just think of the possibilities!

Source Files

UPDATE: With the change in Flash player’s security (at least that’s what I guess it is), it’s not possible to retrieve the RSS data directly from Yahoo!’s site. The workaround we came up with that I mentioned in my comment below is to use a local PHP file that basically grabs the RSS feed and prints the entire thing so as to trick the Flash player into thinking it’s on the same server. Here’s a ZIP file that contains our PHP Script.

Update: Version 2 of the dynamic page flip is now available!

I’m sure a lot of you have stumbled upon Macc at IpariGrafika’s incredible Flash page flipping engine and run into the same problem as I did - works great, but it’d be even better if pages could be set dynamically!

Well, I’ve taken Macc’s page flip source (v2.13) and set it up so that pages can be dynamically imported from external sources (i.e. JPG and SWF files) at run time. Basically, everything is set in an XML file:

• Page dimensions (width and height)
• Page file locations (absolute or relative URL)
• Whether the page can tear or not
• Whether the book has a hard cover or not
• Whether there are any transparent pages or not

If you’re not using transparent pages, it’s a good idea to specify that you’re not because there will be better performance without it.

The technique I’ve used requires that a lot of pages be loaded and “ready” on the stage at any given time, so I wouldn’t recommend using this with a lot of animated pages as there will be a significant drop in performance. However, for 20-30 static JPG or SWF files it works great.

Source Files (MX 2004)