A Scroll Able Flash Movie Loop

7/23/2019 A Scroll Able Flash Movie Loop

1/6

AJR:189, November 2007 W295

AJR2007; 189:W295W300

0361803X/07/1895W295

American Roentgen Ray Society

mollable Movie Loops

C om p ut e rs in Ra d io l og y C om p ut e rs

An Alternative for Presenting

Interactive Dynamic Data Setsin Electronic Presentations:A Scrollable Flash Movie Loop

Chun-Shan Yam1

Yam CS

Keywords: ActionScript, electronic presentation, Flash,

movie clip, PowerPoint, scrollable movie loop

DOI:10.2214/AJR.07.2197

Received February 10, 2007; accepted after revision

June 7, 2007.

1

Department of Radiology, Beth Israel Deaconess MedicalCenter and Harvard Medical School, WCC, Room 306,

330 Brookline Ave., Boston, MA 02215. Address

correspondence to C. S. Yam.

WEB

This is a Web exclusive article.

OBJECTIVE. The purpose of this article is to describe an alternative for creating scrollable

movie loops for electronic presentations including PowerPoint.

CONCLUSION. The alternative provided in this article enables academic radiologists to

present scrollable movie loops in PowerPoint. The scrolling capability is created using Flash

ActionScript. A Flash template with the required ActionScript code is provided. Users can sim-

ply download the template and follow the step-by-step demonstration to create scrollable movie

loops. No previous ActionScript programming knowledge is necessary.

ith recent advancements in

computing power and imaging

technology (e.g., submillimeter

MDCT scanners), many func-

tional and dynamic studies such as cardiac CT

angiography that could not be performed eas-

ily in the past are now routine protocols in

many radiology settings. As a result, more

and more dynamic data sets from these types

of studies are being presented in todays radi-

ology conferences. The traditional approach

for presenting dynamic data sets is the use of

a movie clip, such as QuickTime (Apple) andAVI (Microsoft) in Microsoft PowerPoint

presentations. Although movie clips are ade-

quate for showing an image sequence as a

continuous movie loop, they do not provide

user interactivity for controlling the image

display (i.e., the image scrolling function).

Previously, in 2002 and 2004, two differ-

ent methods were proposed for enabling im-

age scrolling in PowerPoint [1, 2]. However,

both these methods require the installation

of third-party software or PowerPoint com-

ponents (add-ins or plug-ins) on the presen-

tation computer and therefore may not be

compatible with the newly established elec-tronic presentation (e-presentation) format

in todays radiologic society meetings such

as the American Roentgen Ray Society

(ARRS) and the Radiological Society of

North America (RSNA). For instance, at the

RSNA 2005 and 2006 annual meetings,

PowerPoint transitions, animations, and

other plug-ins could not be supported by the

e-presentation system.

Instead, presenters can use Adobe Flash

(.swf) for animations in their e-presentations.

Besides the capability of creating animations,

Flash can also be used to create PowerPoint-

style presentations. For instance, since 2005,

presenters at the ARRS annual meetings have

had the ability to choose between PowerPoint

and Flash as their presentation format [3, 4].

Although Flash is a useful alternative for

creating interactive content for e-presenta-

tions, it is still unfamiliar to many academic ra-

diologists. To help radiologists explore the po-

tential of this new technology, basic conceptsand tutorials for Flash have been provided in

two recent articles [5, 6]. In the first article [5],

an introduction was provided including basic

terminologies, screen tools, and function pan-

els. Essential steps for creating simple Power-

Point-style presentations were also discussed.

In the second article [6], step-by-step tutorials

for converting common movie clips (e.g., AVI

and QuickTime) into Flash movies were

shown. Detailed information for embedding

Flash movies into PowerPoint was also pro-

vided. This current article provides the essen-

tial techniques for creating interactive content

using Flash ActionScript (i.e., a scrollablemovie loop for PowerPoint presentations).

ActionScript is a common programming

language used by many Flash developers to

create interactive Web-based applications.

Depending on the complexity of the applica-

tion, programming ActionScript can be com-

plicated and may require certain software de-

velopment skills and experience. However,

for a simple scrollable movie loop, the re-

W


2/6

Yam

W296 AJR:189, November 2007

quired coding is rather standard. An anno-

tated version of this code is provided in Ap-

pendix 1. For demonstration, a Flash template

containing this code has been prepared for

this article (Fig. S1 in the supplemental data).

Users can simply download the template and

follow the demonstration to create scrollable

movie loops (no coding is required).

Supplemental Data Download

To begin, users must download the supple-

mental data file from the supplemental data for

this article (Fig. S1). This is a self-extracting

zipped file created using WinZip 11.1 (Win-

Zip.com). Double-click the downloaded file,

click Browse and select a common location

(e.g., desktop) for unzipping the data, and then

click Unzip. A folder \desktop\Supplemental

Data will be created containing six files and one

subfolder: ScrollableCine.fla (Flash template for

Flash 8 or Flash 9), ScrollableCine_MX.fla

(Flash template for Flash 7), JPEGImages(folder of 50 JPEG images), CT.avi (sample

movie clip), CT_1.swf (Flash movie), CT_2.swf

(Flash movie), and SWF_Into_PPT.ppt (Power-

Point macro for inserting Flash).

Software Requirements

Although Flash Player is freeware required

for viewing Flash movies on Web pages or

PowerPoint (i.e., a preinstalled component in

many new operating systems for both Mac

[Apple] and PC), Flash Professional (or Flash

Pro) is a commercial product for creating

Flash movies. At the time of this writing, the

latest version of Flash Pro is 9 (or Adobe Cre-

ative Suite 3/CS3 ($699, $199 upgrade, and

$123 academic) [7]. To use the Flash template

provided in this article, users will need tohave Flash Pro installed on their computers. A

30-day trial of this application is available

at the Adobe Website (www.adobe.com/

products/flash/). Academic institutions may

purchase this application for educational use.

Although Flash 8 Pro and Microsoft Win-

dows XP Pro are used for this article, the es-

sential steps described in the following dem-

onstration can be used in other systems (e.g.,

Mac OS 10.3.9 and Windows 2000; Flash

7/MX2004 and Flash 9).

Demonstration

Launching the TemplateTo begin, in the supplemental folder

(Fig. S1), double-click on the file Scrolla-

bleCine.fla to launch the template (Fig. 1).

Depending on software settings, the screen

layout may be different from the one shown in

Figure 1. Closing all the panels except for

Properties can maximize the workspace.

Also, use the Fit in Window option to en-

sure the entire screen is visible (Fig. 1).

Fig. 1Screen captureof Adobe Flash showslayout of templateScrollableCine.fla (allfiles are in supplementalmaterial, Fig. S1) in Flash8 Pro (one screen Scene1 [top left circle]). Select

Fit in Window option tomaximize workspace.Adjust screendimensions and framerate at Properties panel(bottom left circle) (i.e.,Select WindowProperties from topmenu to open Propertiespanel). Double-click onActions panel title bar toview source code.(Adobe product screenshot reprinted withpermission from AdobeSystems Incorporated)

The template dimensions are preset at

550 600 pixels (width height) with a dis-

play rate of 10 frames per second (fps). This

setting is most appropriate for presenting

movie loops of CT, MR, and sonography im-

ages for PowerPoint and e-presentations.

However, users can modify this setting at theProperties panel as needed (Fig. 1).

The template contains one screen, two but-

tons (Play and Stop), and one text box. When

the Play button is clicked, the movie loop will

advance automatically at the preset frame rate

(in this case, 10 fps). If the Stop button is

clicked, the movie loop will pause, and users

can scroll the images manually (i.e., click and

drag the computer mouse in updown direc-

tions). The text box at the top of the screen in-

dicates the current frame (e.g., 1/20, 2/20,

etc.). As mentioned, this scrolling function is

preprogrammed using ActionScript. For ad-

vanced users, the source code can be viewedat the Actions panel (Fig. 1).

The next step is to import the source data.

For demonstration, the sample image se-

quence (i.e., the 50 JPEG images provided in

the supplemental data) will be used.

When preparing an image sequence, images

must be named sequentially (e.g., CT001.jpg,

CT002.jpg, and so on) and placed in a single

folder before importing the images. See

Table 1 for supported image formats.

Importing the Source Data

While the Flash template Scrollable-

Cine.fla is open, import the sample imagesequence with the following steps. Select In-

sert New Symbol from the top menu,

choose the Movie clip option (Fig. 2A), and

then click OK. Select File Import

Import to Stage from the top menu, navigate

the file location to the sample image folder

(\desktop\Supplemental Data\JPEGImages\),

click the first image (CT01.jpg), and then

click Open (Fig. 2B). Click Yes to accept

loading all the images (Fig. 2C). Immedi-

ately, click the Scene 1 icon to return to the

main screen (Fig. 2D), and then drag the

Symbol 1 icon from the Library onto the

Screen (Fig. 2D). (If the Library panel isclosed, select Window Library to open

it.). Enter cine (lowercase) for the Instance

Name at the Properties panel (Fig. 2E). As an

option, users can position and resize the im-

ages as needed (Fig. 2E). Select File Ex-

port Export Movie from the top menu,

navigate the file location to desktop and enter

the filename CT_1.swf, then click Save.

Select 80% for JPEG quality, and then click


3/6

Scrollable Movie Loops


TABLE 1: Image and Movie Formats Supported by Adobe Flash Professional,Version 8

File Format Manufacturer File Extensions

FreeHand Adobe .fh, .ft

PostScript Adobe .Al, .pdf, .eps

PNG Freeware .png

Illustrator Adobe .eps,.ai

AutoCAD DXF Autodesk .dxf)

Bitmap Freeware .bmp, .dib

Enhanced metafile Freeware .emf

Flash movie Adobe .swf, .spl

GIF image Freeware .gif

JPEG image Freeware .jpg

Microsoft Windows metafile Freeware .wmf

Macintosh PICT image Apple .pct

MacPaint image Apple .pntg

Photoshop image Adobe .psd

QuickTime image Apple .qtif

Silicon Graphics image SGI .sgi

TGA image Freeware .tga

TIFF image Freeware .tif, .tiff

WAV sound Freeware .wav

MP3 sound Winamp .mp3

AIFF sound Freeware .aif

Sun AU Sun Microsystems .au

QuickTime movie Apple .mov

Video for Windows Microsoft .avi

MPEG movie Motion Picture Experts Group .mpg, .mpeg

Digital video Freeware .dv, .dvi

NotePNG = portable network graphics; CAD = computer-aided design; DXF = drawing interchange format;GIF = graphics interchange format; JPEG = Joint Photographic Experts Group; PICT = PICTure;TGA = truevision graphics adaptor; TIFF = tagged image file format; MP3 = MPEG (Motion Picture ExpertsGroup) 1, audio layer 3; AIFF = audio interchange file format.

OK to finish (Fig. 3). Press the Ctrl + Enter

keys to play the movie, and then press

Ctrl + W keys to end. Select File Exit

from the top menu to quit. Click No to fin-

ish. This will keep the Flash template un-

changed for future use.

The size of this Flash movie loop (i.e.,

\desktop\CT_1.swf) is 1.62 MB. This Flash

movie is now ready for use in e-presentation

or PowerPoint format.

Inserting a Flash Movie into PowerPoint

Unlike movie clips that must be linked to

PowerPoint as external data, Flash movies can

be embedded into PowerPoint as part of the pre-

sentation file. Unfortunately, the standard

method for importing Flash into PowerPoint as

documented by Microsoft is complicated. To

simplify this cumbersome process, a Power-

Point macro SWF_Into_PPT.ppt has been de-

veloped [8] and is included in the supplemental

material. As mentioned, the macro security

must be set to Medium before running this Pow-

erPoint template (i.e., in PowerPoint, select

Tools Macro Security from the top

menu, choose Medium, and then click OK).

Use the following steps to insert the sample

Flash movie. Double-click the PowerPoint

template SWF_Into_PPT.ppt. Select En-able Macros. Press the Alt + F8 keys to-

gether. Choose Insert Flash and click

Run. Select a Flash movie (e.g., CT_1.swf)

and click Open. If the Enable Macros op-

tion does not show when launching the tem-

plate, change the security setting to Me-

dium as described and restart PowerPoint.

More detailed information for using this

macro is available in a previous article [8].

Besides using an image sequence, users

can also choose movie clips as the source data

(Table 1). The process for importing movie

clips into Flash has been discussed in a previ-

ous article [6]. However, for demonstration,

the essential steps for importing a sample

movie clip into the Flash template are pro-vided in Appendix 2.

Using Flash Movies in Electronic Presentations

There are two options for using Flash mov-

ies in an e-presentation. Flash movies can be

used as standalone presentations without the

need of PowerPoint, or they can be embedded

into PowerPoint. Nonetheless, because e-pre-

sentation is still in its emerging period, the

presenting mechanism among radiology soci-

eties varies, especially for file uploading. For

instance, for RSNA annual meetings, Flash

movies and PowerPoint presentations must be

uploaded to the presentation server sepa-rately, whereas the ARRS allows Flash to be

uploaded as either a standalone presentation

or within PowerPoint. Users should always

follow the submission guidelines.

Limitations

The alternative provided in this article re-

quires the software application Flash. Al-

though some academic radiologists can obtain

this application from their institution, many

may need to purchase it at their own expense.

Although users do not need to have pro-

gramming skills to use the Flash template to

create scrollable movie loops, coding in Ac-tionScript may not be an easy task for many ac-

ademic radiologists. For advanced users, an

annotated version of the source code is pro-

vided for the development of other Flash appli-

cations (Appendix 1). Practical examples and

basic programming tutorials on Flash and Ac-

tionScript are also available at the official

Adobe support Website (www.adobe.com/

support/flash/) and many other Internet resources

such as www.actionscripts.org/tutorials.shtml

and www.en.wikipedia.org/wiki/ActionScript.

Because this article focuses on the use of

the Flash template to create scrollable movie

loops, it does not provide detailed informa-tion for collecting teaching images from

PACS. Although some of todays new work-

stations or PACS viewers enable academic ra-

diologists to export teaching images directly

to external media such as a USB drive, some

clinical settings may not have this function.

However, general mechanisms for exporting

teaching images from PACS (either as DI-

COM files, JPEG images, or AVI movies)


4/6

Yam


Fig. 2Process for importing source data (all files arein supplemental material, Fig. S1).(Adobe productscreen shots reprinted with permission from AdobeSystems Incorporated)A, Screen capture of Create New Symbol windowshows parameters for creating new movie clip symbol(circle). By default, name is Symbol 1.B, Screen capture of Import window shows

parameters for selecting image sequence. In thisexample, first image (CT01.jpg) is selected at folderJPEGImages for loading sample images (n= 50). ClickOpen button to start loading images.C, Screen capture of Adobe Flash shows options forimporting entire image sequence. For this example,select Yes to continue.D, Screen capture of Adobe Flash shows drag-and-drop of the movie clip (Symbol 1) from Library ontoScreen. (Note: Select Window Library or pressCtrl + L keys to open Library panel.)E, Screen capture of Flash shows template with movieclip (Symbol 1) added. While Symbol is selected, entercine (in lowercase) as Instance Name parameter(circle). Click and drag symbol to location that best fitsscreen. Users can also resize and rotate movie clip asneeded (i.e., select Modify Transform FreeTransform from top menu, then drag corners).

A B

C

D E

have been discussed previously [9, 10]. Usersshould refer to these references for more de-

tailed information.

Discussion

The solution provided in the article enables

academic radiologists to create Flash movies

with image scrolling capability that can be

used in todays e-presentation systems, in-

cluding PowerPoint, at major radiology meet-

ings. Users without ActionScript program-ming experience can follow the step-by-step

instructions with the provided Flash template

to create scrollable movie loops.

Although this interactive feature is useful

for enhancing presentations and education

purposes, it may not be a necessary require-

ment for some academic radiologists. For pre-

senting simple movie loops in e-presentations

(i.e., without this image scrolling feature), the

animated GIF is already a compatible and ad-equate solution. A simple method for convert-

ing common movie clips, such as AVI, Quick-

Time, and MPEG (Motion Picture Experts

Group) movies, into animated GIFs using

Adobe Photoshop has been discussed in a

separate article [11].

In addition to e-presentation, Flash movies

can also be used in Web pages, especially for

Web-based digital teaching files. Flash has


5/6

Scrollable Movie Loops


built-in functions for generating HTML pages

specifically for this purpose. Select File

Publish Settings to open the Publish Settings

window. Under the Formats tab, select both

Flash and HTML as the output options.

Click on the Publish button to generate theWeb document. Note: Flash can also be em-

bedded into other types of digital documents

such as PDF (portable document format,

Adobe Acrobat).

References

1. Daffner RH. On improvement of scientific presen-

tations: using PowerPoint.AJR 2003; 181:4749

2. Gniadek TJ, Desjardins B. Interactive display of

stacks of images in scientific presentations with

PowerPoint.AJR 2004; 183:859861

3. American Roentgen Ray Society Web site.ARRS

2008 abstract submission instructions. ab-

stracts.arrs.org/instructions.cfm. Accessed August

1, 20074. American Roentgen Ray Society Web site.ARRS

2008 guidelines for preparing an electronic exhibit.

abstracts.arrs.org/pdfs/prelimExhGuidelines.pdf.

Accessed August 1, 2007

5. Yam C-S. Using Macromedia Flash for electronic

presentations: a new alternative. AJR 2006;

187:584; [web]W209W217

6. Yam C-S. A solution for using dynamic data sets in

electronic presentations. AJR 2006; 187:584;

[web]W218W226

7. Flash CS3 Pro EDU. www.adobe.com/

aboutadobe/openoptions/?promoid=BIPB.Ac-

cessed August 23, 2007

8. Yam C-S. A simple method for inserting Flash mov-

ies into PowerPoint. AJR 2007; 188:1151;

[web]W374W3789. Browne RFJ, Torreggiani WC. Capturing PACS im-

ages.AJR 2003; 180:285

10. Kamauu AW, DuVall SL, Robison RJ, Liimatta AP,

Wiggins RH 3rd, Avrin DE. Informatics in radiol-

ogy (infoRAD): vendor-neutral case input into a

server-based digital teaching file system. Radio-

Graphics 2006; 26:18771885

11. Yam C-S, Kruskal J, Larson M. Creating animated

GIF files for electronic presentations using Photo-

shop.AJR 2007; 188:1422; [web]W485W490

Appendixes appear on next page

A B

Fig. 3Screen capture of Export (Adobe) Flash Playerwindow shows parameters for exporting Flash movie.(Adobe product screen shot reprinted with permissionfrom Adobe Systems Incorporated)

Fig. 4Parameters for importing video (all files are in supplemental material, Fig. S1). (Adobe product screenshots reprinted with permission from Adobe Systems Incorporated)A, Screen capture of Import VideoEmbedding window shows parameters used for importing video file as movieclip symbol. (Note: It is important to select Movie clip option in this step.)B, Screen capture of Import VideoEncoding window shows parameters used for importing video file at best imagequality. (Note: It is important to set parameters as shown and, in particular, to select a high data rate of 7000 kbpsfor best image quality.)


6/6

Yam


APPENDIX 1: Annotated ActionScript (ActionScript, Inc.) for Image Scrolling

//Variable Definitions

var CurrentFrame, LastFrame, TotalFrames, Lastymouse, timeint;

//Variable Initializations

timeint=setInterval(timer,100);TotalFrames=_root.cine._totalframes; //name of Movie Clip

object = cine (all lowercase)

CurrentFrame=1; LastFrame=1;

//Updating the Image Number

function timer() {

ImageNo.text = _root.cine._currentframe + / + TotalFrames;

}

//(Mouse Action 1) When the mouse is pressed

onMouseDown = function() {

LastFrame=_root.cine._currentframe;

Lastymouse = _ymouse;

MouseDown = 1;}

//(Mouse Action 2) When the mouse is released

onMouseUp = function() {

MouseDown = 0;

LastFrame=CurrentFrame;

}

//(Mouse Action -3) When the mouse is scrolled

onMouseMove = function() {

var ymouse = _ymouse;

var dFrame = 0;

if(MouseDown>0) {dFrame=int((ymouse-Lastymouse)/5);//Calculate the increment of

changes

CurrentFrame=LastFrame + dFrame; //Update the current image po-

sition

if (CurrentFrameTotalFrames) {

CurrentFrame=1; Lastymouse = _ymouse; LastFrame=1;

}

_root.cine.gotoAndStop(CurrentFrame);//Update the image display

}

}//As default, image scrolling is in up-down mouse direction. For left-

right scrolling, change //the word ymouse to xmouse globally

(in 10 places) before exporting the Flash movie.

APPENDIX 2: Importing the Sample Movie Clip into the Adobe Flash Template

Unlike an image sequence, which must be imported via a Symbol,

movie clips such as Microsoft AVI (audiovideo interleaved) and AppleQuickTime can be imported directly onto the screen. To begin, double-

click the file ScrollableCine.fla (Fig. S1 in supplemental data) to

launch the Flash template. While the template is opened, use the fol-

lowing steps to import the sample movie clip (CT.avi), also provided

in the supplemental data.

Select File Import Import Video from the top menu.

ClickBrowse, select the movie (CT.avi), clickOpen, and then

clickNext.

Select Embed video in SWF and play in timeline, and then

clickNext.

Select Movie clip and accept the default options, and then click

Next (Fig. 4A).

Select Flash 8 High Quality. In the Advanced Settings tab,

select the On2 VP6 codec, Same as source frame rate, Cus-

tom quality, and 7000 kbps data rate. ClickNext, and then click

Finish. See Figure 4B for detailed settings.------The following steps are the same as the image sequence exam-

ple-----

Enter cine (lowercase) for the Instance Name at the Properties

panel (Fig. 2E). As an option, users can position and resize the images

as needed (Fig. 2E).

Select FileExportExport Movie from the top menu, nav-

igate the file location to desktop and enter the filename CT_2.swf,

and then clickSave.

Select 80 for JPEG quality, then clickOK to finish (Fig. 3).

Press the Ctrl + Enter keys to play the movie, and then Ctrl + W

keys to end.

Select FileExit from the top menu to quit. ClickNo to finish.

In this case, the size of this Flash movie loop (i.e., \desk-

top\CT_2.swf) is 2.31 MB.

F O R Y O U R I N F O R M A T I O N

The data supplement accompanying this Web exclusive article can be viewed from

the information box in the upper right corner of the article at: www.ajronline.org.

Documents

A Scroll Able Flash Movie Loop