Adobe Presenter 7 is one of the great new applications that is included in Adobe Acrobat 9 Pro Extended. With just a few clicks in PowerPoint, you can transform drab presentations into engaging Adobe® Flash® multimedia experiences. You can easily add narration, animations, interactivity, quizzes and software simulations to your presentations and then export that to a PDF file. If you haven't seen it in action, I've got a great example here.

Continue reading "How to Add a Preview Page to PDF Files Created with Adobe Presenter 7" »

This article is Part 5 of 5. Please start with Part 1 if you have not done so already.

In Part 4 of this series, I discussed how we used a button to alert users if they needed to update their viewer to Adobe Acrobat 9 or Adobe Reader 9. In this final article on the topic of the "Ultimate Tourney Guide" project, I’ll move away from a strictly “developer” focus and talk about something the typical knowledge worker can do to make their documents stand out.

Acrobat Buttons, Button States and Button Icons:
A button can have a label, an icon, or both. You can change how the button appears in each mouse state (Up, Down, and Rollover). For example, you could create a button that has a “Home” label until the mouse is moved over the button, when it might have a “Click to return to Home page” label. You actually don’t need any developer skills to create roll over buttons, the Acrobat user interface is enough. You can read about how to go about making buttons change appearance in the Acrobat 9 online help.

For stylistic reasons, we chose to use bitmaps for our button icons in the Ultimate Tourney Guide but I like to use vector art for my own projects. Vectors tend to scale better when you can’t anticipate the zoom level that the PDF file will be viewed. Roll your mouse over the embedded PDF file below to see the buttons in action.

Simple But Cool:
The secret to making these buttons work well with the reflections and the background image is to create them in Adobe PhotoShop using a transparent background and save them as PDF files from there. Alternatively, you can use whatever image editing software you like, save the file as a .png and then drag the .png file onto the Acrobat icon to convert it to a PDF file to retain the transparency. In the example above, the button’s “Up” state is one bitmap and we used a different bitmap for both the “Down” and “Rollover” states. Then we added a “Go to a page view” action to the “Mouse Up” event. In the embedded PDF file below, I have used vector artwork (created in Adobe Illustrator) as my button faces and have 3 separate PDF files set for each of the individual button states. Roll over and click on the orb to see the state changes.

Conclusion:
That’s how we did it! Now it’s time to return to your regularly scheduled blogging.

Note: As I mentioned in the beginning of this article, this technique requires no developer skills, so - for all you JavaScript developers out there, if this post left you feeling like you want a little more, here’s another great article about using buttons in Acrobat by Thom Parker: Automatically Add Buttons to a PDF.

This article is Part 4 of 5. Please start with Part 1 if you have not done so already.

In Part 3 of this series, I discussed the new Acrobat 9 security model and its impact on the "Ultimate Tourney Guide" project. But, what if you hadn’t already installed Acrobat or Reader 9? Because we wanted to create an outstanding first-open experience, we wanted users of earlier versions to see something better than just the update dialog and a static file. So, we added an image to the first page that only Acrobat 9 or Reader 9 can hide. This made it so that the PDF file would be seen properly in the right version but degrade beautifully if not. We used Acrobat forms functionality and a little JavaScript to pull that off. In this article, I’ll tell you how we did it.

Hiding and Showing PDF Content:
What Were Our Options?
When we were examining how to create a file that displayed one way in Acrobat and Reader 9 and a totally different way in earlier versions as well as non-Adobe viewers, there were several options. We needed to determine which would work best for this particular project. Please note: any of the following options are a good way to do this. Determining which is the best for your project will be dictated by your specific needs.

There are two things that we needed to be able to do programmatically with the PDF file in order to achieve the effect that we wanted; detect the version of Acrobat being used and to cause some sort of object to display or not.

Detecting the Version:
This part is easy. The app object in the Acrobat JavaScript API can be used to detect the viewerVersion property of the application that the PDF file is being viewed in. We added this kind of code to the Document JavaScripts outside of any function so that it runs just as the document opens.

if (app.viewerVersion >= 9)
{
//do the version 9 or higher code
}
else
{
//do the lower version code
}

Note: As a best practice, you will also want to check the viewerType and viewerVariation. The viewerType and viewerVersion can be used to detect if your PDF file is being viewed in an Adobe product. Most non-Adobe viewers do not have a JavaScript interpreter for PDF files and the ones that do have an incomplete implementation.

Now that we can detect the version number, we can take action on an object that we want to hide or show depending on what the version number is. The question now is, “Which technique do we use?”

Hide and Show a Layer:
We added layers to the PDF file format in version 1.5 and a Layers panel to control their visibility in Acrobat 6. Additionally, Acrobat JavaScript can be used to hide or show a layer and all you need to know is the name of the layer. In the Acrobat JavaScript API, layers are referred to as OCGs or optional content groups and their visibility can be controlled by setting the state property.

Because we used Buttons on the first page and we wanted those buttons to not show in earlier versions of Acrobat or Reader, we decided not to use this technique for the Ultimate Tourney Guide first page. The Z-Order of buttons is on top of the page content and OCGs are part of the page content... they’re just optional.

Hide and Show a Template:
Templates are named pages within the PDF document. These pages may be hidden or visible and can be copied onto an existing page as an overlay or “spawned” as a new page using JavaScript. We are using this technique with some other version-dependent projects but in this particular case, we decided to use Buttons to achieve the effect we wanted in the Ultimate Tourney Guide.

Hide and Show a Button:
We decided to use a button that covered the first page of the PDF file entirely. Buttons in PDF files can display on the page with a label, as an icon, or both. You can create button icon from any PDF file and control its behavior; read how.  We created a PDF file (right) that was the exact same size as the first page, created a button on the first page and then imported that PDF file as the button icon for that button. By default, this button is visible which is what we want. With the following Acrobat JavaScript in the Document JavaScripts area we can hide the button if the viewerVersion is higher than 9. This takes care of the Adobe Acrobat and Reader versions 9 and those that are less than 9.

if (app.viewerVersion >= 9)
{
this.getField(“v8_button”).hidden = true;
}

Button icons in non-Adobe viewers:
Because of the way that the button icon appearance is stored in a PDF file, non-Adobe viewers will be able to display the default button icon even if that viewer doesn’t understand that it is a button. Additionally, the fact that the Z-Order of form fields and buttons is on top of the regular PDF page content, the button will also completely cover anything that sits below it. Now we have a solution for displaying the upgrade message in non-Adobe viewers.

Conclusion:
By using some very basic Acrobat JavaScripts, we were able to customize the experience for people who use Acrobat or Reader 9, lower versions of Adobe’s viewers as well as non-Adobe viewers far beyond what is generally available in the various products. In the final part of this series, I’ll revisit the use of buttons but this time I’ll discuss how we created that stunning first page using the simplest of techniques.

Read Part 5

This article is Part 3 of 5. Please read Part 1 if you have not done so already.

In Part 2 of this series, I left off with opening the "Ultimate Tourney Guide" from the desktop but mentioned that there were security implications. This article discusses the new Acrobat 9 security model and its impact on the "Ultimate Tourney Guide" project.

Accessing External Data when Opening PDF files from the Desktop:
If the PDF file requesting the data is in the same domain as the server that is supplying the data, everything just works as you would expect. When you first opened the Ultimate Tourney Guide through the browser, this was true. But, because we wanted people to have the PDF file as a resource that sits on their desktop, we had to consider what we needed to do on the server to accommodate this. To create the "Ultimate Tourney Guide", we used SWF applications to aggregate several RSS feeds and display the Team Videos, Headlines, Live Bracket and Polls. These applications were embedded in the PDF file using the new Rich Media Annotations.

Overview of the new Multimedia capabilities in Adobe Acrobat 9:
The new Rich Media Annotations (RMAs) in Acrobat 9 allow authors to embed video, audio, and SWF content for playback in a PDF document. Almost any multimedia format supported by the Flash Player runtime can be embedded and played back natively in a PDF document.

• Video - Using Acrobat Pro, FLV and H.264 files can be embedded or streamed for playback. Acrobat Pro Extended also provides capabilities for transcoding other video formats to FLV format.
• Audio - MP3 and AAC files can be embedded for direct playback
• Animations and Applications - SWF content can be embedded including all required resources and FlashVars

Multimedia and the new Security Model:
The Security Model for our version 9 viewers has been greatly improved to make your browsing experience more safe and secure. Embedding the Flash Player in Acrobat 9 and Reader 9 rather than relying on APIs to access the external desktop Flash Player helps us accomplish this because the PDF file and the multimedia content can be located in the same file and all the playback occurs within a single application. In this security model, the PDF file itself is considered a domain, any content that is accessed by the file that is within the file is allowed to happen without a security warning.

However, when a PDF file is opened from the desktop, any access to the web requires that a “*” crossdomain.xml policy file be on the server for Acrobat or Reader to be permitted access to the data. This is because any URL is considered an outside domain even if the PDF file was downloaded from that domain. We had to add a crossdomain.xml policy file to each URL that the PDF file needed to access.

Other Considerations:
The Technical White Paper “Security for Flash Player compatible content in Acrobat 9” describes quite a few additional security restrictions for SWFs hosted in Acrobat. For example, access to the local file system is not allowed and SharedObjects are not allowed for SWFs hosted inside Acrobat. Trying to create a shared object from a SWF in Acrobat would result in a runtime error. So, if you are a Flash or Flex developer, be sure to download and read that White Paper.

Conclusion:
As I mentioned earlier, we used SWF applications embedded in Acrobat using the new Rich Media Annotation (RMA) to display the Team Videos, Headlines, Live Bracket and Polls. Because this PDF file contains the new Rich Media Annotations we added in Acrobat and Reader 9, it will only work in those applications. Because we wanted to create an outstanding first-open experience, we wanted users of earlier versions to see something better than just the update dialog and a static file. So, we added an image to the first page that only Acrobat 9 or Reader 9 can hide. This made it so that the PDF file would be seen properly in the right version but degrade beautifully if not. We used Acrobat forms functionality and a little JavaScript to pull that off. Part 4 of this series will discuss exactly how we did it.

Read Part 4

This article is Part 2 of 5. Please read Part 1 if you have not done so already.

Note: As of March 19th 2009 the Ultimate Tourney Challenge on ESPN.com is no longer open for entries. However, you can still download the "Ultimate Tourney Guide" and track the progress of the tournament.

Part 2
As promised, this article discusses how we were able to use the Forms Data Format (FDF) to allow the "Ultimate Tourney Guide" to display your personalized fantasy bracket on ESPN.com.

As a reminder from part one, in order to display your fantasy bracket, the PDF file needs to request a personalized RSS feed from ESPN. Once you have the XML response, displaying the data is easy with a little Flex programming. To instrument the PDF file, we needed to find a way to get a unique identifier into the PDF file without the user being required to sign into ESPN.com every time. Well, for those of you who are familiar with Acrobat forms, the solution is probably obvious; FDF of course.

Note: The following discussion of Acrobat Forms and FDF does not apply to LiveCycle Designer Forms (XFA) .

If you are familiar with how FDF files work, skip to Accessing the Field from the Embedded SWF: [link]

FDF Files Demystified:
To better understand what and FDF file is and how it was useful in creating the Ultimate Tourney Guide, a short history lesson might be helpful. We added the ability to have form field widgets (Acrobat Forms) in version 3.0 of Adobe Acrobat and Adobe Reader.

Back then, it wasn’t very easy to get HTML to represent a form in a way that easily replicated the paper version; in many respects it still isn’t. In order to allow form developers to easily replace a basic HTML form with a highly formatted paper-like PDF form, we engineered the Acrobat Forms “submit” button in such a way that you could send data to a server script as a query string. In this way, the server had no idea that the data was being sent from a PDF. As long as you authored your PDF form so that the field names in the PDF matched the field names in the original HTML, everything just worked without changing anything on the server. That took care of sending data to the server.

Populating a PDF with Form Data from a Server:
At that time, if you wanted to pre-populate an HTML form with data, you served the HTML with the field values already set in the field tag. You couldn’t do this with Acrobat Forms because you couldn’t simply redraw the PDF with the field values already present like you can with HTML.

In order to allow developers to send field values to Acrobat Forms from a server, we created FDF. FDF has evolved through the years but it can still be just a simple text file that contains field-name, field-value pairs. When most people open an Acrobat Form from a server with personalized information already in it, based on what happens on the screen, they may think that the server added their information to the PDF file. If an FDF file was used to accomplish this, the opposite is actually true; the PDF file was added to the data.

“Excuse me?”

Yes - that’s correct. The PDF file was added to the data. FDF files, specifically the one we used for the Ultimate Tourney Guide, can contain a pointer to the PDF that the data belongs to. In the case of the Ultimate Tourney Guide, the users click on a link on an HTML page, a script then generates an FDF file and returns that back to the browser. The mime type of an FDF file is “application/vnd.fdf” and when you install Acrobat or Reader, the installer configures your browser to use these products to open FDF files. When one of our viewers reads the FDF file, it looks for something called the “/F” or “/UF” key to locate the PDF file that the data should be merged into. Below is an example of what the FDF file from this project looks like. I’ve modified the actual values but the structure is the same.

Example FDF with a unique ID field-name field-value pair

%FDF-1.2
1 0 obj
<
< <<
/T(uniqueID)/V(62FBDDE3-25BA0473CC8D)
>>
]
/UF(http://www.myhost.com/ultimateTourneyGuide2009.pdf)
>>
/Type/Catalog>>
endobj
trailer
<>

The FDF file above will insert the value “62FBDDE3-25BA0473CC8D” into the field named “uniqueID” in the PDF file located at “http://www.myhost.com/ultimateTourneyGuide2009.pdf”. Now, I am in no way suggesting that you use FDF files for your more typical electronic forms workflows; we have LiveCycle Designer and the LiveCycle Server products for that. The kind of FDF file that we needed for this project was simple enough that it works well and it was easy to generate using the existing server environment at ESPN.com.

Finally, because we added the ability for Ultimate Tourney Guide to save form data using the free Adobe Reader, when you save it to your desktop, the uniqueID field value is saved with the file. With the uniqueID saved into the PDF file, it will be able to access your RSS feed from ESPN.com without needing to log in each time.

You can read more about how data flows into a PDF file using FDF files in the “Forms System Implementation Notes” which is part of the FDF Toolkit documentation.

Note: There is no direct link to the "Forms System Implementation Notes", you’ll need to download the FDF Toolkit, unzip the files and locate “FormSys.pdf” in the “documentation” folder.

Accessing the Field from the embedded SWF:
The application that we use to display the bracket information was written using Flex Builder 3 and was placed into the PDF file using the new Multimedia Flash tool. Because the PDF file is the container for the SWF application, it is very easy to access properties of the PDF file or objects within it. As I have discussed in earlier posts, you can use the ExternalInterface class to query the PDF file for any string value that you can access through the Acrobat JavaScript API. The following ActionScript code will set the value of the “extCall” variable in the SWF application to the value of the uniqueID field in the PDF file.

var javaScript:String = "this.getField('uniqueID').value";
var extCall:String = ExternalInterface.call('eval', javaScript);

Now that we know what the uniqueID is, we can finally construct the URL, request the personalized RSS feed, process it and display the bracket... assuming, of course, that you are still viewing the PDF file in the browser.

Conclusion: Accessing the RSS Feed when Opening the PDF file from the Desktop:
If the PDF file requesting the data is in the same domain as the server that is supplying the data, everything just works as you would expect. When you first opened the Ultimate Tourney Guide this was true. However, if the PDF file is opened from the desktop, a “*” crossdomain.xml policy file is required on the server for Acrobat or Reader to be permitted access. The Security Model for our version 9 viewers has been greatly improved to make your browsing experience more safe and secure. Because security is such an important topic, I’m going to save this discussion for part 3. Until then, you can get details on how the security model affects SWF applications running inside a PDF file in the Technical White Paper “Security for Flash Player compatible content in Acrobat 9”.

Read Part 3

We've teamed up with ESPN to sponsor the "Ultimate Tourney Guide", an interactive PDF file you can use to track the results of your ESPN Tournament Challenge fantasy bracket for the NCAA men's college basketball tournament. Rather than describe it here, you can read more at ADWEEK.

If you're not a sports fan and you're still reading this, I'm guessing you are interested in how we pulled this off. Well, sit back and get comfortable because, while none of this is very hard, there are a lot of moving parts so I've decided to break this up over the course of a few postings.

Let's start with the requirements. We wanted people to have the PDF file as a resource that sits on their desktop that they can open from time to time during the tournament and...

• Instantly see how their bracket is doing
• Watch videos about the 65 teams in the tournament. By the way, these videos were sponsored by Adobe. I hope you enjoy them.
  
• See live news feeds
  
• See poll results
  
• And submit a form to enter into a contest to win a cool 52" flat screen HDTV
  

Lucky for us, the guys over at ESPN really know their stuff. All the data that we need to display the personalized bracket results, videos, polls and news headlines is served up as RSS from the ESPN servers.

In the next few posts I'll describe in detail exactly how we instrumented each of the aspects of this interactive PDF file. For now, here's an overview.

Displaying the personalized bracket:
In order to display your fantasy bracket, the PDF file needs to request a personalized RSS feed from ESPN. Once you have the XML response, displaying the data is easy with a little Flex programming. To instrument the PDF file, we needed to find a way to get a unique identifier into the PDF file without the user being required to sign into ESPN.com every time. Well, for those of you who are familiar with Acrobat forms, the solution is probably obvious; FDF of course. For those of you not familiar with how FDF works, stay tuned for the next posting (Part 2) to see how you can use form fields to do a lot more than just fill out Human Resources documents.

Pulling RSS into a PDF file that was opened from the desktop:
When you first opened the Ultimate Tourney Guide, you probably saw a number of security dialogs. These are actually there for your own protection. By selecting "remember my action for this site", that URL is added to your list of trusted locations and you will not see the dialog for that particular URL again. You can even add entire domains to your trusted locations though not through that dialog. In part 3, I'll discuss the new Acrobat 9 security model and its impact on this project.

The First Experience:
I'll just say it - The first page of that PDF file is beautiful. One of our goals was to create an outstanding first-open experience. If you are already using Acrobat or Reader 9 or higher you saw this the top image. However, if you have an earlier version or a non-Adobe viewer you had a different experience. Using an earlier version of an Adobe viewer, a dialog alerting you to upgrade would display and then the document would open - it just doesn't behave as expected. With a non-Adobe viewer, your results may vary but you should have seen something like the bottom image.

Because this PDF file contains the new Rich Media Annotations we added in Acrobat and Reader 9, it will only work in those applications. Again, because we wanted to create an outstanding first-open experience, we wanted users of earlier versions to see something better than just the update dialog and a static file. So, we added an image to the first page that only Acrobat 9 or Reader 9 can hide. This made it so that the PDF file would be seen properly in the right version but degrade beautifully if not. We used Acrobat forms functionality and a little JavaScript to pull that off. More about that in Part 4.

Basic Navigation:
While I'm on the topic of the first page, how about those navigation buttons? Using some simple Acrobat form buttons with roll-over states, we were able to create that striking home screen. This capability has actually been in Acrobat since version 3 but very few people have used it as elegantly as our designers have in this file. In Part 5, I'll cover how we created these graphics and turned them into buttons and hooked up the navigation into the rest of the PDF file.

Conclusion:
As I post the remainder of these articles, I'll create links down here so you can easily access them. Until then, open your Ultimate Tourney Guide, select Team Videos and learn about the teams from Joe Lundari or catch up on news about your team all inside a PDF file... How cool is that!

Read Part 2

Two of my presentations covering PDF Portfolios and the new Rich Media Annotations are now available on AdobeTV. Each one is about an hour long. These presentations were recorded live so if the "um"s and "ah"s start making you crazy, you can get the same information by going to my home page and watching "Developing with ActionScript for Adobe Acrobat 9" located in the "Recorded Presentations:" section in the left column.

Flash in Acrobat: Part 1
Customizing PDF Portfolio Layouts

Flash in Acrobat: Part 2
Rich Media Annotations

As I've mentioned in previous posts, the Flash Player that's embedded in Acrobat and Reader 9 has built in functions that take advantage of features available only in Acrobat and Reader. That's great, but what if I want to write my RIA once and have it be "aware" of it's container whether that's an HTML page or a PDF. How can I tell if my SWF is embedded in a PDF? Quoting from the Flex 3 Language Reference...

The ExternalInterface class is the External API, an application programming interface that enables straightforward communication between ActionScript and the Flash Player container - for example, an HTML page with JavaScript. Adobe recommends using ExternalInterface for all JavaScript-ActionScript communication.

Let's say we want to create a Flex application that can save it's state information when commented on in Acrobat but we want to use the same SWF in a browser. We'd need to detect the container and then branch our code based on the results.

ExternalInterface works exactly the same way when the container is a PDF as it does when the container is an HTML page. Additionally, the JavaScript "eval" function is available in most browsers as well as Acrobat and Reader. The return value of an ExternalInterface.call() method is the response received from the container. So, if we call "eval" and pass some more JavaScript as the parameter, the return value will be the result of the JavaScript we passed.

All we need now are the right JavaScript calls to identify an HTML page vs a PDF. Most browsers support "navigator.userAgent" which tells you a lot about the browser and, if you are running in a PDF, "app.viewerType" will tell you and if that PDF is in Acrobat or Reader.

Basically, if app.viewerType returns null, then we know we're in the browser. If it returns "Reader", "Exchange", or "Exchange-Pro", then you know you're in a PDF.

In the examples below, the same SWF file is playing in the browser's Flash Player and in also in a PDF embedded on this page.

The SWF above is playing in your browser.
The one below is playing inside a PDF document.

The Flex Project for this example is below.

Example Source Code

Previous Posts on this topic:
Saving the State of SWF Content in Acrobat 9
Enabling Commenting of SWF content in Acrobat 9

James Ward, Adobe Platform Evangelist and “RIA Cowboy”, has written an excellent example and tutorial on using PDF to create Portable RIAs. If you're not sure why you'd want to put a Flex app into a PDF, read this excerpt to see why Flash together with PDF redefines what a document can be.

The web began as a platform for browsing, finding, and exchanging documents. Over the past ten years the web has moved beyond this document-centric role, and is now a platform for exchanging data. We typically refer to web sites used for data exchange as web applications. The next major evolution of the web is underway as web applications become more interactive and useful. The industry now refers to these next generation web applications as rich Internet applications or RIAs.

Another popular means of document exchange is the Portable Document Format (PDF). Like the web, PDFs are also evolving into more than just a document exchange technology. When RIAs are inserted into PDFs, this familiar format for documents becomes a method for exchanging and interacting with data. The primary benefits of using PDFs for data exchange are that PDFs can easily be secured, emailed around, and accessed when offline.

Get the full article

Actually, this post can apply to any large PDF that has any objects in it that might prevent the normal "Fast Web View" feature in Acrobat or Reader from displaying the PDF in the browser quickly.

Background:
Saving a PDF with "Fast Web View" restructures a PDF document for page-at-a-time downloading (byte-serving) from web servers. With Fast Web View, the web server sends only the requested page, rather than the entire PDF. This option is especially important with large documents that can take a long time to download from a server. For PDFs with static content like text, line art, and images this works great. You can browse through a PDF that's thousands of pages very quickly without downloading the whole thing first.

"Fast Web View", while functioning correctly, may not be effective when loading PDF files containing large objects such as embedded videos or file attachments. To maintain backward compatibility, a PDF Portfolio is basically a PDF with a bunch of attachments and some extra stuff in the catalog object. When these kinds of files are encountered, Acrobat or Reader appears to hang when in reality it's just reading a really big chunk of data from the server.

So back to the original question...

How Do You Deal with Large PDF Portfolios?
There are a number of ways, but here's one that's ridiculously easy if you have administrator rights to an Apache web server or even just a directory on it. By the way, this solution has nothing to do with Acrobat, Reader or PDF, it's just basic server management.

Byte-Serving the PDF is fast. But... it's not nearly as fast as just forcing the whole PDF to download rather than opening it in the browser. To do this, set the Content-Disposition to "attachment" for that file. On any web server, you can do this by serving the PDF up via a script and setting Content-Disposition in the HTML headers but with Apache it's easier than all that. This may also work on other servers but I haven't tried it.

I created two separate directories on my server. One called "view" and one called "download". In the "download" directory, I added a file called ".htaccess" that allows me to customize the server response to any request for a file from that directory. It contains a single line of code.

Header set Content-Disposition "attachment"

This allows me to create links to PDF files in the "download" directory and the end user will be prompted to download the file rather than have it open inside the browser. The following two links will behave very differently even though the <a href=> tag is basically the same and the PDFs are identical except that they are being served up from different directories. If you hover over the link, you'll be able to see the destinations. The behavior is determined by the directory on the server, not any script or parameter in the <a href=> tag.

  This PDF Opens in the browser - It'll look like it hangs your browser but if you wait long enough it'll show up.

This PDF will download to your desktop - You can open it once it's finished. Personally, I think this is a better experience when "Fast Web View" won't do the trick.

The Flash Player and specifically, the one built into Acrobat and Reader 9, support various "scaleModes". The scaleMode property tells the Flash Player how to scale what's playing inside it.

The four possible modes are...

• StageScaleMode.SHOW_ALL—The entire Flash application is visible in the specified area without distortion while maintaining the original aspect ratio of the application. Borders can appear on two sides of the application.
• StageScaleMode.EXACT_FIT—The entire Flash application is visible in the specified area without trying to preserve the original aspect ratio. Distortion can occur.
  
• StageScaleMode.NO_BORDER—The entire Flash application fills the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the application.
  
• StageScaleMode.NO_SCALE—The entire Flash application is fixed, so that it remains unchanged even as the size of the player window changes. Cropping might occur if the player window is smaller than the content.
  

The default settings for SWF authored in Flash CS3 works perfectly when that SWF is placed on a PDF page using the Flash Rich Media Annotation.

However, if you are using Flex Builder 3 to create SWF files for use in Acrobat 9 and you want to have the SWF play on the PDF page, there's one important detail you need to know. In Flex Builder 3, the scaleMode must be set to "StageScaleMode.EXACT_FIT" in order for Acrobat 9 to scale the content when the page is zoomed in and out. More importantly, this setting allows Acrobat to print the PDF with your SWF scaled properly.

Setting the scaleMode is pretty simple in Flex but it must be done after the stage object exists otherwise you get  the "Cannot access a property or method of a null object reference" error. The way I do it is to add the following code to the "mx:Application" tag and then create my Flex application the way I normally would.

applicationComplete="stage.scaleMode = StageScaleMode.EXACT_FIT;"

The example PDF below will illustrate what a difference the scaleMode makes. In the PDF, the chart on the left uses the default scaleMode setting, the one on the right uses EXACT_FIT. Because the file is set to open at 100% zoom, both will look correct at first but then try zooming in and out of the document and you'll see what happens.

Example PDF

I got a question this morning that got me thinking about some other issues I've had with Rich Media Annotations as well. Here's the question...

I have a swf file created in Flex running in a PDF which opens in a floating window when clicked.

I can get the floating window to close by allowing "Disable Content" in the context window, but I'm trying to achieve the same effect when an "OK" button is clicked in the swf file. This button calls a function in the PDF and should ideally then close the floating window.

Any idea how to do this?

My first response was "No - no idea". Since the Rich Media Annotation will be listening for a response from Acrobat, Acrobat will crash if you try to close the window programmatically. The same thing happens when you try to programmatically change pages in a PDF. I tried working around this issue myself multiple times, filed bug reports and then finally gave up. After the above question came in from an earlier post, I decided to try again and I asked the engineer who actually wrote the code for some suggestions on how to work around the problem. Bingo! After a pretty short email thread we got it.

Closing a Floating Rich Media Flash Window:
The solution involves decoupling the two events, A) clicking the button and B) having Acrobat execute the JavaScript that normally would cause the crash. A combination of an ExternalInterface.call in the Flex application and the Acrobat JavaScript method app.setTimeOut will let you do this. Basically, you use ExternalInterface.call to send Acrobat the JavaScript that you need to execute but you send it inside the app.setTimeOut method with a slight delay; my example uses 250 milliseconds or 1/4 second. In Flex Builder 3 or Flash CS3, if you want to close the first Rich Media Flash Annotation on the first page, that ActionScript code might look like this...

ExternalInterface.call( "eval", "app.setTimeOut('rm = this.getAnnotsRichMedia(0)[0]; rm.activated=false;',250);");

There are four layers you need to punch through to get the code you actually want to run to work:

1. The code in red is the Acrobat JavaScript code required to close the first Rich Media Flash Annotation on the first page.
2. The code in blue is the Acrobat JavaScript code required to set the 1/4 second delay before executing the code in red.
   
3. The code in green is an Acrobat JavaScript function that will treat it's string parameter as code to execute.
   
4. Finally, the ExternalInterface allows us to pass all that to Acrobat.

  This example PDF demonstrates the ability to flip pages and close the floating Rich Media Flash Annotation using this work-around.

  The MXML Source - You'll need to supply your own bitmap for the embedded image before compiling.

So here's the thing... video files are big. Period. Even a minute of decent quality video encoded with H.264 is just too big to email.

Acrobat 9 Pro and Pro Extended will let you either embed or provide a URL to video files when you create a Rich Media Video Annotation. Neither of these options provides an ideal scenario. You either end up with a file that's just too big to move around through email but works well while off-line or a file that is small but only works correctly when you are connected to the web.

When you create a PDF Portfolio and add a video file, you only have the option of storing the video in the Portfolio; no URL option. Additionally, you don't see a thumbnail of the video in the Portfolio view. Again, not the best experience for displaying video in PDF.

ActionScript to the Rescue:
With very little effort, I was able to create this sample PDF that works well off-line and online, is small enough to email, yet provides full HD streaming video when you're online. If you're not online, an embedded low resolution version plays instead. The secret is in building your own video player in Flex or adding a little ActionScript around the FLVPlayback component in Flash. Then, rather than adding the video directly, you add your customized SWF player as a Rich Media Flash Annotation. The player that I created using Flex Builder 3 for the sample above will detect the network and, if present, stream a high resolution version of the FLV into the player. If the network, or more specifically, the URL, is unavailable, an embedded low resolution version of the same FLV will play. The low resolution version is stored as a resource in the Rich Media Flash Annotation. One side benefit is that, if you add a poster to the Rich Media Flash Annotation, you'll see that poster when the PDF is added to a PDF Portfolio.

The example is a very basic player and is just a proof of concept so I won't be providing the source code. Besides, it won't take long for even a novice ActionScripter to come up with a better player than what I'm showing here.

Update!
I've created another custom player using Flash CS3. This time, I've added a full controler and leveraged FlashVars so that I can aim the player at any online/embedded video pair. Open this sample PDF and use the "Select Object" tool in the "Advanced Editing" toolbar to examine the "Flash" and "Resources" panel of the Rich Media Flash Annotation to see how I used these Acrobat features to load the video and the controler. You can get the Flash CS3 project here.

Skip down to here if you read my last post

The Basics of SWF in PDF
One of the great new features of Adobe Acrobat 9 Pro and Pro Extended is the ability to add interactive SWF content developed in Flash or Flex. SWF files can be placed in a PDF using the new Flash Tool in Acrobat 9 and play using the built in Acrobat 9 Flash Player rather than the external one that your browser and desktop use. The built-in player provides greater security and consistency for SWF playback inside any PDF with that type of content. For those of you that attempted to use SWF in earlier versions of Acrobat, you remember that the user experience wasn’t all that great. Acrobat 9 provides tight integration between the PDF document and SWF as well as other content types that run in the Flash Player such as FLV and H.264 encoded video.

Read “Add multimedia files to a PDF” to learn how to add SWF content to PDF files using the new Rich Media Annotation rather than the legacy multimedia object.

Setting the Size of the Rich Media Floating Window
In addition to the built-in Flash player providing greater security and consistency for SWF playback, it also has built in functions that take advantage of features found only in Acrobat and Reader. The remainder of this article discusses how to control the size of the window when your SWF is not playing on the page.

The built in function "multimedia_setWidgetViewSize" can be used to respond to different states or layouts of your SWF application. The parameters are pretty simple; width and height. Unfortunately, you cannot control the initial location of the window. See the example PDF below and sample MXML file.

Example PDF

Sample Flex Application

Skip down to here if you read my last post

The Basics of SWF in PDF
One of the great new features of Adobe Acrobat 9 Pro and Pro Extended is the ability to add interactive SWF content developed in Flash or Flex. SWF files can be placed in a PDF using the new Flash Tool in Acrobat 9 and play using the built in Acrobat 9 Flash Player rather than the external one that your browser and desktop use. The built-in player provides greater security and consistency for SWF playback inside any PDF with that type of content. For those of you that attempted to use SWF in earlier versions of Acrobat, you remember that the user experience wasn’t all that great. Acrobat 9 provides tight integration between the PDF document and SWF as well as other content types that run in the Flash Player such as FLV and H.264 encoded video.

Read “Add multimedia files to a PDF” to learn how to add SWF content to PDF files using the new Rich Media Annotation rather than the legacy multimedia object.

Saving the State of SWF Content in Acrobat 9
In addition to the built-in Flash player providing greater security and consistency for SWF playback, it also has built in functions that take advantage of features found only in Acrobat and Reader. The remainder of this article discusses how to keep the state of your SWF content persistent in the PDF so that when the file is saved then reopened, your SWF content looks the same.

To store the state of your SWF content, use the built in "multimedia_saveSettingsString" function and pass in a string that contains all of the variables you need to recreate the state you are saving. In the example file below, I'm simply storing the value of the HSlider called "size". For more complex applications, I recommend using an XML object to store the variables and then casting it to a string before saving it. I also recommend saving the state every time a variable that you want to track gets changed. Acrobat will fire a "WillSave" event that you can attach JavaScript to that can be used to call the "multimedia_saveSettingsString" but the internal plumbing must be added to the PDF for that to work. By saving the settings on every change, all of the work can be done in ActionScript rather than a combination of ActionScript and JavaScript.

var result:Object = ExternalInterface.call("multimedia_saveSettingsString", size.value.toString());

Restoring the State of SWF Content in Acrobat 9
To resore the settings, add code that uses the built in function "multimedia_loadSettingsString" to the creationComplete function. In the example code below, if the widget was just placed and settings were never saved (result returns null), it uses the defaults programmed into the application. If the call returns an object, I use it to restore the state. Again, for more complex use cases, an XML object that is cast as a string can be used.

var result:Object = ExternalInterface.call("multimedia_loadSettingsString");
if (result)
{
size.value = int(result.toString());
}

Open the example PDF below and move the slider to adjust the size of the red square. Save the file. Close it, then reopen it. You'll see that the size of the red square is the same as it was when you saved the file.

  Example PDF

Sample Flex Application

The Basics of SWF in PDF
One of the great new features of Adobe Acrobat 9 Pro and Pro Extended is the ability to add interactive SWF content developed in Flash or Flex. SWF files can be placed in a PDF using the new Flash Tool in Acrobat 9 and play using the built in Acrobat 9 Flash Player rather than the external one that your browser and desktop use. The built-in player provides greater security and consistency for SWF playback inside any PDF with that type of content. For those of you that attempted to use SWF in earlier versions of Acrobat, you remember that the user experience wasn’t all that great. Acrobat 9 provides tight integration between the PDF document and SWF as well as other content types that run in the Flash Player such as FLV and H.264 encoded video.

Read “Add multimedia files to a PDF” to learn how to add SWF content to PDF files using the new Rich Media Annotation rather than the legacy multimedia object.

There are two ways to play the SWF widget or in Acrobat, on the page or in a floating window. The floating window has certain advantages when you need the SWF to be present regardless of what page you are on in the PDF. However, when the SWF is played on the page, you are able to use the Acrobat commenting features to review and markup the interactive content.

Review and Markup SWF content using Acrobat 9
By default and no additional coding in the SWF, you can add a comment to any SWF content placed on a PDF page. When another user wants to review your feedback by clicking on your comment in the “Comments” navigation panel, a bitmap of the state of the SFW content at the time the comment was made will be displayed with your markup sitting on top. This alone can help speed up designer/developer workflows even if the ultimate destination of the SWF is a web page and not a PDF.

But… with just a little coding, we can take things a huge step further.
In addition to the built-in Flash player providing greater security and consistency for SWF playback, it also has built in functions that take advantage of features found only in Acrobat and Reader. The remainder of this article discusses just two of those functions but there are more, stay tuned for future articles.

Storing the state of your SWF when a user adds a comment
Acrobat sends your SWF content a "multimedia_getState" callback when a user adds a comment. Your job is to collect up all the variables you need to get back to this state into a single string. When you return this string from the function called by the "multimedia_getState" callback, Acrobat will store the string in the annotation's properties.  In the attached code sample, I'm simply storing the content of the text field. For more complex applications, I recommend using an XML object to store the variables and then casting it to a string before returning it. You’d then cast it back to XML when you need to restore the state.

Restoring the state of your SWF when a user clicks on a comment in the “Comments” navigation panel
When a user selects a comment from the “Comments” navigation panel that belongs to your SWF content, Acrobat sends your SWF a "multimedia_setState" callback along with the string that was passed to Acrobat when the comment was made. Your job is to take the information in the string and use it to set the variables you need in order to restore the state that the SWF was in when the comment was created. By default, the initial representation is still the bitmap that I referred to above but when you click back into the SWF content, you’ll see that the variables are all restored to what they were (assuming you set them back correctly from the string).

Implementation
Take a look at the attached sample Flex application to see how this works. You’ll see that I’m adding callbacks for “multimedia_getState” and “multimedia_setState” in my creationComplete() function. The rest is basic Flex code.

The PDF example already has some comments in it and is Reader extended for commenting so if you just have Reader 9, you can still see how this works.

Example PDF

Sample Flex Application

One of the great new features in Adobe Acrobat 9 is the ability to add Flash Video or H.264 encoded video to any PDF page. If you have Acrobat Pro Extended, it will automatically convert virtually any video format into Flash video for you when you import the video. You can also reference URLs to video that will stream from the web.

Adobe Acrobat 9 automatically adds playback controls called a "skin", when you add a video to a PDF page similar to the one at the bottom of the the image above.

However, if you want to control playback via buttons, links or other navigational features of PDF, you can use JavaScript to control the video too and even set the skin style to "none". The reason we can do this is because the skin is actually a Flash (SWF) wrapper around the video. The Adobe supplied skins have built in ActionScript functions that can be accessed via Acrobat JavaScript. The list of those functions and a link to an example file is below. You don't actually need to have any experience with ActionScript to use the functions but a basic understanding of Acrobat JavaScript would be helpful.

Note: Because the skins are simply Flash files, you can further customize the skins and even create your own using Adobe Flash CS3. Read Modifying Skins to see how.

ActionScript Playback Control Functions:
multimedia_play
multimedia_pause
multimedia_rewind
multimedia_nextCuePoint
multimedia_prevCuePoint
multimedia_seek, time (measured in seconds)
multimedia_mute
multimedia_volume, num (0<= num <= 1)

Use:
You need to begin by creating an object that represents the specific Rich Media Annotation that contains the video. Use the new getAnnotsRichMedia method to do that. this.getAnnotsRichMedia( pageNum:Integer ) returns an array of AnnotRichMedia objects for a given page but you can get just the one you are interested in by also giving the method the index number of the annotation. So your code might look like this for a single video on the first page of the PDF.

var annot = this.getAnnotsRichMedia(0)[0];

Then you can simply use the callAS (Call ActionScript) method and pass in the name of the function you want the skin to perform. Of course, you might want to add a line of code that will activate that annotation before playing if it is not already activated. To begin playing a video, your code might look like this.

if (!annot.activated) annot.activated=true;
annot.callAS("multimedia_play");

To see the code in the example file, open the file in Acrobat and turn on the "Advanced Editing" toolbar then choose the "Select Object" tool (the big black arrow) and select one of the buttons below the video box. Review the JavaScript in the MouseUp action in the Actions tab.

Sample with Play, Pause and Rewind buttons.