PDF

Blog

AcroTEX.Net

AcroTEX PDF Blog

Custom Video Players

and

Re-scaling the Widget

D. P. Story

The source files for this AcroTEX PDF Blog are attached to this PDF.Click each of the links to save the files:

• blog4_1• blog4_2• blog4_3

Each of the files are in ZIP format, when you save the file, changethe extension from .zip.txt to .zip. (Acrobat does not allowattachments with a .zip extension, so we must fool Herr Acrobat.)

Copyright © 2008 dpstory@acrotex.net http://www.acrotex.netAcroTEX PDF Blog #4 Published: October 14, 2008

mailto:dpstory@acrotex.nethttp://www.acrotex.net

PDF

Blog

Table of Contents

1 Introduction 3

2 A Custom Video Player 4

3 A Custom Video Player with no UI Component Scaling 5

4 Custom Video Player with UI Component Scaling 5

5 Final Comments 7

PDF

Blog

3

1. Introduction

This article addresses two topics, the creation of a custom video player using Adobe FLEX 3, andrescaling the widget.

Discussion begins with a simple custom video player, Section 2, page 4, that has no controls.This type of video player is easy to create using Adobe FLEX 3 Builder (or SDK).

When UI components are added to the widget, as in Section 3, page 5, problems are createdwith resizing the page. Perhaps this is the reason most video players on the Internet are createdon an html page that does not resize so the video player is viewed with its optimal dimensions.With PDF, this cannot be done, the page can always change magnification, which can distortthe design of the player.

In Section 4, page 5, a custom video player created that uses a re-sizing technique suggested tome by Joel Geraci, Acrobat Technical Evangelist at Adobe Systems, in a personal communication.This technique solves the problem demonstrated in Section 3.

PDF

Blog

4

2. A Custom Video Player

When using FLEX 3, the easiest way to create a video player is to use the VideoDisplay tag.Ideas and example files can be obtained from the web site Flex Examples.1 Sample files fromthis most excellent site will be downloaded and modified for use in this AcroTEX PDF Blog.

Below is a rich media annotation that plays the SWF file vidDisplay.swf, the source of whichis contained in the zip file blog4_1. This SWF file plays the Flash video DPS_Demo.flv on thewww.math.uakron.edu web server.

When you click on the above annotation, a Security Warning dialog box may open to announcethat Acrobat is trying to access the video on the Internet. If you trust the site, please do, click onAllow, and if you want to avoid these messages in the rest of the document, you should select“Remember my action for this site” from the dialog box, before clicking Allow.2

The relevant lines in vidDisplay.mxml is

The source is indirectly referenced, see the MXML source, and the autoPlay property is set to"true". The video will play when it is activated.

Try decreasing and increasing the magnification of the page, the video resizes correctly.1http://blog.flexexamples.com/2If you haven’t done so already, the Trust Manager (Edit > Preferences (Ctrl+K)) controls access to ex-

ternal files. If you selected “Remember my action for this site,” you’ll see www.math.uakron.edu listed thereunder My Web Sites (click Change Settings to get to the Manage Internet Access dialog box). You can removewww.math.uakron.edu from the trusted list, later, after you finish this article.

http://blog.flexexamples.com/http://blog.flexexamples.com/

PDF

Blog

5

3. A Custom Video Player with no UI Component Scaling

The video player in this section is essentially the same as the one in Section 2, but UI compo-nents, in the form of play, pause, and stop buttons are added. The source files for this exampleare contained in the ZIP file blog4_2.

This example does not rescale well when the magnification of the page is changed. Try reducingthe magnification, making the page smaller, and observe what happens. The buttons do notre-scale, but the video display does. Eventually, the annotation is too small to display thebuttons and the scroll bars appear. Bad stuff that.

Normally, when setting up a video display, one sets the height and width of the application andthe video display to 100%. When the application is set to a relative size (100%), the UI compo-nents do not resize. Contrast this behavior with the widget described in AcroTEX PDF Blog #3.There the UI components do re-size when the page magnification is changed. In that example,the size of the widget had a fixed width and height.

4. Custom Video Player with UI Component Scaling

The example of this section is a modification of the previous example. The modification is to fixthe re-sizing problem exhibited in Section 3. The source files for the widget of this section canbe obtained from the ZIP file blog4_3.

The solution to the problem is based on a technique communicated to me by Joel Geraci,Acrobat Technical Evangelist at Adobe Systems. The trick is to re-scale the Flash application onthe Flash size whenever the widget is re-sized.

The Application tag of the MXML file vidDisp_controls_z.mxml has the following lines:

PDF

Blog

Custom Video Player with UI Component Scaling 6

The relevant code is shown in red. When the widget is resized, the resized() function isexecuted. Below is the verbatim listing of resized():

1 public function resized():void {2 var zoom:Number = ExternalInterface.call( "eval", "this.zoom" );3 if (!isNaN(zoom)) {4 this.scaleX = this.scaleY = Number(zoom)/100;5 }6 }

In line 2, we use ExternalInterface.call, as explained in AcroTEX PDF Blog #3, to call theeval function back on the Acrobat JavaScript side, the eval function executes its argument,which is this.zoom. The this.zoomproperty gets the current zoom factor, returned as a per-cent and saved as a variable zoom. In line 4, we set the this.scaleX and this.scaleYprop-erties of Flash ActionScript 3.0 to Number(zoom)/100. this.scaleX and this.scaleYwillrescale the Flash application according to the value returned, and corresponds to the currentmagnification factor of the PDF page.

The result of this dynamic re-sizing can be seen from the following video dislay.

Again, try changing the magnification of the page: de-magnify and magnify. You’ll note thatthe UI components—the buttons—are themselves re-scaled with the page. Very cool!

A problem that arises from this technique is that when the document is closed and the widget

PDF

Blog

7

is not de-activated, the widget will try to re-size itself as the document is closed. As a result,an exception is thrown, a message is written to the JavaScript Debugger Console window. Butdon’t look, there is no message because of the following fix.

I’ve added the following script to the Document Will Close Event. This code is

for (var n=0; n Set Document Actions. This script is ex-ecuted as the document is closed. It goes through each page, gets the array of rich mediaannotations on that page, and de-activates each rich media annotation.

5. Final Comments

A problem associated with playing Flash video steamed from the Internet is the presence ofthis Security Warning dialog boxes, like the one you encountered earlier. In theory, a documentauthor who places a Flash video on the web can access it without the Security warnings ifthere is a cross domain policy file (crossdomain.xml) at the root level of the server. Thedocument author can also place such a policy file elsewhere on the server and the documentcan access this file using the app.loadPolicyFile() method. I have such a policy file,named mypf.xml, and have executed this method, but what is advertised to work does not!

Use the user interface to view the open page action for the first page of this document. You’llsee

app.loadPolicyFile("http://www.math.uakron.edu/~dpstory/mypf.xml")

More research on this topic is needed. See Enhanced Security for Adobe Acrobat 9 and AdobeReader 9 for details. The app.loadPolicyFile() method is documented in the JavaScriptfor Acrobat API Reference.

Note: If you are viewing this document from within a browser, as served from www.math.uakron.edu, you don’t get a security warning because the Flash video has the same-originas the PDF file. However, if you save this file to your local drive and open it up with theAcrobat/Adobe Reader application, you will get the security warnings.

That’s all for now, I simply must get back to my retirement. DPS

http://www.adobe.com/devnet/reader/articles/reader_compatibility/readercomp_enhancedsecurity.pdfhttp://livedocs.adobe.com/acrobat_sdk/9/Acrobat9_HTMLHelp/index.html

Table of Contents1 Introduction2 A Custom Video Player3 A Custom Video Player with no UI Component Scaling4 Custom Video Player with UI Component Scaling5 Final Comments

vidDisplay.mxml

// Declare bindable properties in Application scope. [Bindable] public var source:String = "http://www.math.uakron.edu/~dpstory/DPS_Demo.flv";

private function initApp():void { stage.scaleMode = StageScaleMode.SHOW_ALL; myVid.load(); }

vidDisplay.swf

vidDisp_controls.swf

vidDisp_controls.mxml

// Declare bindable properties in Application scope. [Bindable] public var source:String = "http://www.math.uakron.edu/~dpstory/DPS_Demo.flv";

private function initApp():void { stage.scaleMode = StageScaleMode.SHOW_ALL; myVid.load(); }

vidDisp_controls_z.mxml

// Declare bindable properties in Application scope. [Bindable] public var source:String = "http://www.math.uakron.edu/~dpstory/DPS_Demo.flv"; private function initApp():void { stage.scaleMode = StageScaleMode.SHOW_ALL; myVid.load();

} /* When the widget is resized, this function is called, new scaleX and scaleY values are calculated based on the zoom factor reported by Acrobat/Reader */ public function resized():void { var zoom:Number = ExternalInterface.call( "eval", "this.zoom" ); if (!isNaN(zoom)) { this.scaleX = this.scaleY = Number(zoom)/100; } }

vidDisp_controls_z.swf