Macromedia’s Flash 8 Pro package is a multimedia authoring environment used to create dynamic applications that can be viewed using the Flash Player virtual machine. Flash provides support for vector and raster graphics, embedded scripting and streaming of audio and video content.
This project puts forward Flash as an alternative to other methodologies by creating an interactive remote access medical imaging application. Utilising client / server technology, the entire project encompasses  ActionScript 2.0, HTML, XML, PHP and JavaScript. Covering these areas unveil a straightforward application integrated into a website which can allow connection to an array of clients. Aimed at those in the medical profession, it allows for the creation of homework / examination / revision material, making this system unique. The application is not restricted to the medical profession as it is available to all with a PC, internet connection and Flash Player.
This is just one approach to Remote Access Medical Imaging.

Glossary of Acronyms

Flash : Macromedia’s Flash
FLASHMED : Flash Medical Imaging Application
GUI : Graphical User Interface
DCU : Dublin City University
WWW : World Wide Web
AVI : Audio Video Interleave
COM : Component Object Model
DCM : Dicom
HTML : Hyper Text Modeling Language
APACHE : Apache Web Server
PHP : Hyper text Pre Processor language
AS : Flash Actionscript 2.0
XML : eXtensible Markup Language
C : C programming language
C++ : C++ programming language
Java : Java programming language
JS : JavaScript programming language
HTTP : Hyper Text Transfer Protocol
CF : Macromedia’s ColdFusion
PlugIns : extensions that can be added on giving greater functionality
API : Application Program Interface
MAC : Apple’s Macintosh Operating System
OS : Operating System
Photoshop CS3 : Adobe Photoshop CS3 Extended
SQL : Structured Query Language
PX : Pixels
IHE : Integrating the Healthcare Enterprise
CT : Computed Tomography
MRI : Magnetic Resonance Imaging
MS : Microsoft
IE : Internet Explorer
RGB : Red Green Blue Colour Values

Chapter 1 – Introduction

This interactive Macromedia Flash animation which will be referred to as FLASHMED, can display large volumes of medical images, like those from CT or MRI scans worldwide. Modalities from Nuclear Medicine can also be presented but are not currently available. Users from different backgrounds including students of radiology or anatomy and doctors can experience the complexities of the human body sitting at their own computer. Teachers can give exams online rather than paper based ones which is akin to printing an email just to read it. The current crops of machines performing this task are expensive and are only available at all major hospitals and medical institutions.
Many tools are available to the user to allow them to manipulate the image in various ways. Zoom in or out, highlight and pan around to follow infected areas, flip through images, all at their leisure. Each image set contains a unique set of infected points which should be identified. These distinct areas can be clicked on. The results are compared to the correct results to see how many are identified correctly. Dynamic Thresholding and different
segments can be highlighted throughout each image. The threshold for Bone, Head, HeadCT, Lung and Tissue are set to their optimum levels.
The benefits of this system are countless. It can be viewed by many users simultaneously. As all viewing is performed online or locally, the physical film cannot be lost or stolen. Having been created in Flash, they are inherently easy to distribute, either over the web or by any other medium. File sizes are small and the compatibility is nearly universal. The application installs Flash immediately if it is not present on the client machine.

1.1 Project Brief :

The project brief as provided at the beginning of this project, October 2006:

RSa-1: An evaluation of Adobe (Macromedia) Flash 8.0 for remote access medical imaging Adobe Flash is a multimedia authoring environment used to create dynamic web content that can be viewed using the Flash Player virtual machine. Flash provides support for vector and raster graphics, embedded scripting and streaming of audio and video. The purpose of this project is to evaluate the use of Flash, as an alternative to Java Applets, for creating interactive, remote access medical imaging applications.

1.2 Scope of document :

The purpose of this document is to specify exactly what can be achieved by completing this project and the processes involved in order to achieve this. This document details all ideas and the schedule followed in order to implement those ideas successfully. It also provides a comprehensive description of all the intentions of this system and the system capabilities after being tested thoroughly.

After researching all implementation options, a final layout was finalised, which would allow the successful delivery of this project to a high standard. It is envisaged that this document could be used by a Flash novice to build an example application using this as a template.

1.3 Project Goals and Future Achievements :

It was certain that by completing this project, it would give a greater knowledge of the Flash environment and the Actionscript 2.0 language, aspects that are not covered in D.C.U. By undertaking this project, involvement with the more powerful aspects of the web, such as server-side scripting and web-based applications would increase. This would in turn give a greater understanding into the workings of web-applications and also their creation.

Taking on this project would give a deeper knowledge of and a greater respect for medical imaging. It would also give experience in the creation of Medical Imaging Applications. This would follow on from a course, “Image Processing and Analysis”, which involves the analysis of all forms of computer imaging. A major focus regarding the initial selection of this project was the opportunity to make a difference to the medical and educational system in Ireland. An easy to use interface would make this application accessible to all users of the internet. This application could also be the starting point of better media management. Currently DICOM images are large, while Flash applications are the opposite. This makes it easy to send to data back and forth while consuming a fraction of the bandwidth.
The following milestones were set to be completed by the end of this project:

  • Design an easy to use interface
  • Provide as much functionality as current Java applications
  • Design a server side application which would be ready to go live

There were many other higher level checkpoints which needed to be passed in order to create the appropriate application. Figure 1.1 shows an overview of the Network Topology of the system.

Figure 1.1 - Network Topology1.4 Project Planning and Organization :

Figure 1.2 shows the time scale of each milestone being developed and when they were completed.


Global demand for image- processing software is on a daily increase, driven by advancements in image analysis techniques in universities and companies worldwide. Existing software is often limited by cost, lack of flexibility, and/or specific hardware requirements.

The result of this project, upon completion would ideally be an application which is cheap, flexible and is easily transferable. The time allocated to this project would be split up into two sections. The first half of this
project would be mainly research and the second half would be design and implementation.

Chapter 2 – Background

Macromedia Flash 8 Professional, created by Adobe, San Jose, California, is a multimedia authoring software that is used to create dynamic presentations for the World Wide Web. Flash allows you to mix sounds, animations, and graphics in a single file. When using Flash, *.fla files are created. These can be exported as animated GIF, QuickTime, AVI, in bitmapped format, and more. Flash does not support DICOM.

ActiveX is a Microsoft technology consisting of “controls” that sit on top of a Windows system called COM. These controls are used to extend the abilities of Windows and Internet Explorer, adding features such as video playback, audio, and Flash playback. Other browsers use specialised technology for Flash which works in the same manner. The advantage of Active X controls is that, although they are generally downloaded and used in Internet Explorer, once they are on your system, any Windows application that understands COM can use the controls to extend its applications. [ 65 ] If the client does not have Flash installed, a general standard of all Flash coders is to configure their application to automatically download the latest Flash Player immediately. The images that shall be displayed are to be contained in a dataset. The application will have three different datasets containing up to three hundred images each. This could be in a Flash  compatible format or a converted format. The images are stacked one by one on top of each other and so while scrolling through, it appears as though you are travelling through the organ displayed in 3D.

The client and server application was created in Macromedia’s Flash 8 Professional. The client was exported to a HTML webpage which was then edited to create the page hosted on the server. Apache hosts the entire application on the server. A PHP script handles the interaction for the correct results. XML enables the dynamic functionality of the application. JavaScript gives the time.

2.1 Design Methodology :

At the beginning, the project guidelines had to be clearly examined. The project was split into two distinct areas of work. The first area of work on this project was to be solely research and the second half of this project was to be the development and coding of what would be the end product. Time would initially be spent on research to broaden knowledge of Flash and medical imaging while also researching into current applications. When a significant understanding of both areas was obtained, the planning to start examining what it would entail to develop an application would begin. A coding objective would then be developed. Initially, the GUI for the client would be created so that there was a basis for the rest of the project. The client needed to be capable of manipulating images and sending requests to the server and displaying them in a way that was convenient for the user. The server needed to be capable of completing all of the requests of the client.

Rough sketches of the client were drafted to determine the general aesthetic view of the application. A way of how the application would function and how the client, server and other scripts would interact with each other respectively was sought. Upon completion, it would then be tested, and a level of user-friendliness ensured. The following subsections outline how this was achieved.

2.2 Languages Used :

A range of methodologies would be covered to create this application.

2.2.1 Flash Actionscript 2.0 :

As the client and server was to be developed in Flash, Actionscript 2.0 was covered from scratch. AS is most comparable to the C language. The power and flexibility of AS ensured that it would be possible to create such an application. However, DICOM import is still an issue. Tutorials imbedded in the Flash package, from the Flash books, [ A – H ] and on the internet, [ 3 ], [ 4 ], [ 7 ], [ 8 ], [ 14 ] and [ 15 ] were completed. Covering these tutorials gave an excellent understanding of creating interactive applications and of the coding environment.


The Flash authoring environment is shown in Figure 2.1. The main areas of interest are noted.
[ F ]
A. Menu :
Most of the commands that are used are contained in the menu. There are shortcuts for the most frequent and unique shortcuts can be created.
B. Stage :
This is the area where all the content is placed. All contents can be edited with the tools available.
C. Tools Panel :
These features are used to create and edit graphics.
D. Layers Panel :
All the content on the stage can be separated into different layers. Different layers can have different sections of code.
E. Properties Panel :
This panel is used frequently. All elements of the application have properties which can be edited here.
F. Scripting Area :
All code is inputted in this area.
G. Library :
All elements are automatically added to the library after creation.

2.2.2 HTML :

The pages that reside on the server which the client will connect to will be created using HTML ( Hyper Text Modeling Language). This is the native language of all web-pages on the www today. HTML resembles old-fashioned typesetting code, where a block of text is surrounded by codes that indicate how it should appear. HTML allows text to be “linked” to another file on the Internet. [ 28 ] Other technologies are embedded in a webpage to make
them more interactive.

2.2.3 CSS :

Cascading Style Sheets is a language used to describe how a webpage is formatted. It can be either embedded in a webpage, like this application, or included as a separate document. It was easier to embed as each page uses different styles making a generic file inappropriate.

2.2.4 XML :

XML (eXtensible Markup Language) is a W3C initiative that allows information and services to be encoded with meaningful structure and semantics that computers and humans can understand. XML is great for information exchange, and can easily be extended to include user-specified and industry-specified tags. [ 20 ] Its main function in this project is to help maintain and control the information of each dataset and the limits of each window.

2.2.5 PHP :

PHP (Hyper text Pre Processor language) allows developers to create dynamic applications. It is a server side script used for making an application web based. [ 21 ] The syntax is similar to HTML and C. In this application, it is responsible for calculating and displaying the correct results.

2.2.6 JavaScript :

JavaScript is a scripting language developed by Netscape to enable web authors to design interactive sites. Although it shares many of the features and structures of the full Java language, it was developed independently. JavaScript can interact with HTML source code, enabling Web authors to spice up their sites with dynamic content. JavaScript is endorsed by a number of software companies and is an open source language. [ 21 ] JavaScript plays a minor part in this application adding a dynamic clock to the site.

2.2.7 Webpage Coding Structure :

All FlashMed webpages follow the structure:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<style type="text/css">
<script language="JavaScript">
<object : calls FlashMed>

Information is put inside of these fields.

2.3. HTTP Protocol :

The HTTP protocol [ 23 ] is a stateless protocol, meaning that it does not maintain a connection between the client and the server between transactions. A typical transaction would consist of a HTTP client, usually an internet browser, communicating with a HTTP server (eg: Apache). The application was developed in this environment. A diagram of this interaction is shown below.


The HTTP client makes a connection to the HTTP server and sends a request, in our case, choice of dataset. The server then processes this data and returns the relevant information, be it a file or content from a database. When the results from the selected areas are processed, the client sends a request with which checkpoints.php deals with.

2.4 Current Medical Image Viewers :

There are many open source viewers available that are based on C, C++, Java, Lisp, Pascal, Perl, PHP, Ruby, .NET and TCL programming languages. Only one could be found in Actionscript, Student Pacs. [ 1 ] Many non-medical viewers were tested to gain a better understanding of this type of application. The functionality varies from product to product. Most common features include conversion programs, image display and analysis, surface and volume rendering. Included are the following viewers that were researched.

2.4.1 ImageJ :

ImageJ is one of the most feature rich open source applications in the market today. It consists of 74,000 lines of code contained in 238 files. Some interesting features include : [ 25 ]
· Conversion to many formats. ie: DICOM to GIF, JPEG, TIFF etc. Plugins are available to convert or view to any format.
· World’s fastest pure Java image processing program.
· Over 200 macros are available to create custom tools and functions.
· Images can be zoomed or scrolled though.
· Draw, edit and select portions of an image.
· Image Enhancement : smoothing, sharpening, edge detection, median filtering and thresholding on both 8-bit grayscale and RGB color images.
· Interactively adjust brightness and contrast of 8, 16 and 32-bit images. It can perform many geometric operations ie: crop, scale, resize, flip etc.
· Histograms and profile plots can be generated.

· Generic editing functions like cut, copy, paste are available.

· Ability to split or merge a 32-bit color image into RGB or HSV components.

· Other datasets can be viewed simultaneously.

Macromedia’s ColdFusion can be configured to run ImageJ natively. An option would be to run this on the server and send images to the client. This program has many features that could be incorporated into the final application. There are too many elements to have included all in FlashMed due to time constraints.

FIGURE 2.3 – IMAGEJ ENVIRONMENT2.4.2 Student Pacs :

The only medical image viewer available utilising Flash, SPACS, available to download at [ 1 ], was created between a team of medical students and a computer engineer. Their application can zoom, flip through images and pan around to follow structures. Questions are posed and this is timed. It was not possible to test this aspect as the site currently does not work. An excellent feature is the ability to download the application, and while irksome is a plausible way to create applications. The configuration process is troublesome with a script constantly being called which causes Flash to run at slow speeds. In the manual, it details that
this script must run and so cannot be cancelled. This is a drawback due to the repetitive nature of the script. The creators have created an extension panel which allows the user to create their own modules. This application can only render generic formats and not .dcm. This module has many aspects that can be incorporated into FlashMed. Allowing any user to create their own modules is an interactive element not offered by many applications. Running the application from the website is convenient. The slow nature of the program is a trade-off and can prove frustrating. The application contains nearly 2000 lines of code and 20 layers allowing a knowledgeable user to edit the application. The size of the extension is only 474kb which is an impressive compression rate. Considering the size of FlashMed, 1.5MB, this application’s original size would have been approximately 3.5MB. Creating extensions is a feature available in Flash and is a possible path for further research. Figure 2.4 gives a screenshot of the StudentPacs interface.


IrfanView was the first Windows graphic viewer with animated GIF support. It is another feature rich open source application for home use. For commercial purposes, it only costs €12. Some of its features include: [ 26 ]

· Compatibility with many file formats including .dcm· Multi language support
· Email features
· Thumbnail/preview option
· Print image
· Slideshow
· Compatible with Adobe Photoshop
· Geometric operations: cut, crop, flip, rotate
· Extract icons from EXE/DLL/ICLs
· Easily navigate through directories with the fast view
· Many PlugIns
· Batch conversion
· Search for files
· Manipulate color depth
· IPTC editing – technical standard developed by the Newspaper Association of America for
the transmission of text and image [ 62 ]
· Image Effects
· Lossless JPG manipulation
· Command line features
This application offers many features which can be included in the final application. The command line options and plug ins offer an infinite amount of future possibilities.

ImageMagick, another open source product, is a robust and varied collection of tools and libraries to read, write, and manipulate an image in many formats. This robustness is due to it having an API in C, C++, Java, Lisp, Pascal, Perl, PHP, Ruby, and TCL. It runs on many platforms, is well supported and documented, and suitable for automated processing. It is more suited to graphics/photo processing, but can render DICOM images. [ 19 ] Features include the following: [ 27 ]
· Conversion to many formats,
· Geometric Operations: resize, rotate, crop, flip or trim an image,
· Ability to make sections of an image invisible,
· Edit: add shapes or text,
· Special effects: blur, sharpen, threshold, tint an image, decoration,
· Manipulate the image with mathematical expressions,
· Ability to insert text and comments,
· Ability to identify the format and attributes of an image,
· Create animations,
· Overlap images over each other,
· Create collages with image thumbnails,
· Support for large images – giga-pixel.

This is another impressive application containing many useful possibilities. The ability to manipulate from the command line in any of the associated API’s is a unique feature.

2.4.5 LeadTools Medical Imaging Suite :

This application retails at €6000. It is the one of the most comprehensive and feature rich applications available globally. It offers an exhaustive list of options in both image acquisition and image processing techniques. The programming interfaces include a low level API, C++ Class Library and .NET components. Some of the features and characteristics include: [ 29 ]
LeadTools offers support for 8-16 bit grayscale and 48-64 bit color.
· Image Processing,
· Color Conversion,
· Special Effects containing more than 200 possibilities,
· Compression,
· Image Format for import and export
· Printing,
· Internet Imaging aimed at web forms,
· Database Imaging,
· Create any DICOM Layer Actor in the IHE Framework – A standard for Integrating the Healthcare Enterprise ; [ 63 ]
· Support for any DICOM service;
· Geometric Operations: Display 1-64 bit images including automatic zoom, pan and scroll functionally; process 1-64 bit image data;
· Feed images or video data to a DICOM dataset over a network; load, save and convert DICOM to any of over 100 image formats;
· Add text to images including functionality to create montages; and convert DICOM datasets to AVI files;
· Another powerful feature in the toolkit is the Medical Image Viewer Control. This allows easy construction of medical display applications and high-end diagnostic workstations;
· Full Support for all Service Classes – Possible to implement all DICOM Service Classes for a client and/or server.

2.4.6 Rubo Medical Imaging :

This application costs €560 and has many useful features. Discounts are available for educational and volume licenses. It was created in conjunction with the Eramus University of Rotterdam This does not have greater functionality than ImageJ, Infranview or ImageMagick making this price seem excessive. There is an abundance of expensive viewers available on the www. Features include the following: [ 30 ]
· Renders all formats of DICOM images
· JPEG Lossless, JPEG lossy, RLE compression for single images or datasets,
· User-friendly interface,
· Biplane display,
· Multi-monitor compatibility,
· Conversion to AVI,
· CD and Network coverage,
· Import / Export images,
· Printing.

2.4.7 OsiriX :

Originally created for the MAC, this is a powerful open-source product. It is present on the
many expensive PACS workstations in major hospitals. The current features include: [ 31 ]
DICOM File Support :
· Read and display all DICOM Files
· Read and display the new MRI / CT multi frame format
· JPEG Lossy, JPEG Lossless, JPEG 2000, RLE
· Export DICOM Files to TIFF, JPEG, Quicktime, RAW, DICOM, PACS
It includes DICOM Network Support.
Format Support For :
· LSM files from Zeiss, BioRadPIC files (8, 16, 32 bits)
· TIFF, ANALYZE (8, 12, 16, 32 bits)
· PNG, JPEG, PDF, Quicktime, AVI, MPEG, MPEG4
2D Viewer :
· Customizable Toolbars
· Volume rendering
· Create different shapes: Polygons, Circles, Pencil, Rectangles, Point etc
· Keyboard shortcuts
· Custom Filters

· 4D Viewer for Cardiac-CT
· Image Fusion
· Image subtraction pixel by pixel
· Plugins
3D Processing :
· Volume / Surface Rendering
· Red/Blue tints
· Export all 3D images to Quicktime, Quicktime VR, TIFF, JPEG
Optimization :
· Compatible universally
· Multi-threaded for multi-processors and dual-core processors support
· Utilises OpenGL technology for 2D and 3D Viewers
· Graphic board accelerated, with 3D texture mapping support
Expansion & Scientific Research :
· Dynamic plugins structure
· Manipulate pixels directly in 32-bits float for B&W images or ARGB values for color
· Create and manage windows
· Create and manage OpenGL views
It is based on many Open-Source components.
This application is extremely feature rich giving an excellent indication to the features available to doctors in hospitals.

2.4.8 Adobe Photoshop CS3 Extended

While more suited to multimedia or photo processing, this powerful application is being released on April 20th 2007 and will retail for €750. This is the first version of Photoshop or any standalone Macromedia product capable of rendering DICOM images. As Adobe are addressing this shortcoming, it is possible that this may be incorporated into Flash 9 Professional and Actionscript 3.0. Including MatLab support makes this an even more robust application. The main features include: [ 32 ]
· 3D creation and texture editing,
· Integration with Adobe products,
· Video and animation design,
· Movie Paint,
· Supports a Broad range of video formats,
· 2D and 3D measurement tools,
· Geometric operations: count, scale
· Image Stacks,
· Easy to use interface,
· Raw-image processing,
· Printing,
· Renders a wide range of image formats,
· Zoomify support,
· Intelligent Filters,
· Correction enhancements,
· Black-and-white conversion,
· Improved Colour Channel Mixer,
· Enhanced 32-bit high dynamic range,
· Powerful cloning and editing tools,
Adobe applications are feature rich and extremely powerful. The new features of this program address failings from previous versions. This is more suited to the general user.

2.5 File Formats :

There are over 100 different used in medical imaging. The most common are listed below.
[18] Currently, Flash only supports GIF, JPEG, PNG and TIFF.

Name Summary

AFNI – AFNI Native Format
Analyze – Image file format from Mayo Foundation
BMP – Windows BMP File Format
Bruker – Bruker Paravision
ECAT 6 – CTI CT Format
ECAT 7 – CTI CT Format
GE MRI Genesis 5
GE MRI Signa 3, 4
GE Scanditronix – GE 4096 PET Format
Gif – Graphic Interchange Format
Interfile 3.3 – Nuclear medicine file format
JPEG – Joint Photographic Experts Group
Matlab – Mathworks .m file
Minc – Multimodality format from MNI
Papyrus – DICOM compatible file format
PNG – Portable Network Graphics
PPM – Portable Pixmap File Format
QuickTime – QuickTime
Siemens Somaton
SPM SPM (Analyze 7.5 variant)
TIFF Tagged Image File Format

2.6 Ethics and Responsibility :

The main benefactors from this project in its current state would be those in the medical profession, medical institutions and students. A major focus regarding the initial selection of this project was the opportunity to make a difference to the medical and educational system in Ireland. The easy to use interface makes this application accessible to all users of the internet. Anyone with a PC and an internet connection can utilise the application and experience diagnosis firsthand.

The images are of a personal nature and maybe considered intrusive by some. Only necessary information is collected, just the images, and the cases are fictional nullifying this issue. This ensures maximum confidentiality and privacy. The representation of the organs is extremely accurate reducing the risk of mistakes in diagnosis.

Many tutorials and books were referred to for each component in this application. These have been referenced accordingly. Regarding employment, the application would lessen the workload of those in the medical
industry. With the addition of more features, this application could become a market contender against other medical image viewers, thus creating employment. The number of employees would depend on the success of FlashMed.

FlashMed is reliable up to 1000 images and keeping well within this limit decreases the risk of the program crashing, ensuring that the application is not viewed as a liability. All results have been published and are in Chapter 6.
FlashMed does not discriminate against anyone based on their gender, race religion or age.

Flashmed.com is copyrighted. It belongs to an advertising site, a ‘link farm’. There are several other companies called Flashmed. This was only realized on the 12/04/2007.

Chapter 3 – Design

The client would be designed first and would form the basis for the server page. An issue that was not resolved was that of DICOM import. As Flash does not support this, a script would have to render the dataset. After much researching, a solution to this problem could not be derived. The following components were decided upon to be included in the final application. Once implemented, the remaining time would be spent on .dcm import.

· Left / Right Buttons to scroll through the images
· Slider bar to scroll through the images
· Zoom In / Out
· Timer
· Panning Functionality
· Marking capabilities
· Reset button
· Data-field to display information about the case study
· Feedback capabilities to enable the user to learn
· Threshold functions

The aesthetic view of most of the open source small scale viewers are bland and colour free. The appearance of FlashMed would appear colorful in comparison.

In designing the program, it was broken up into specific tasks. The following figures illustrate all the functions and methods used in FlashMed.





Chapter 4 – Implementation of the Client

4.1 Client Application :

In developing the application, it was split up into different sections. Many tutorials and books were referred to for each component.

The following layers were created in order to separate the different components on the stage :

actions : All the actionscript is located here.
serverResponse : Contains the movie clip serverRepsonse. This is displayed when the answers come from the server.
background : Contains backgroundBG movie Clip
loading : Contains the loading movie clip that displays the load progress.
logo : FlashMed logo
timer : Holds the text objects for time and mark position: x, y & z position of the mark
textbox : Holds the dynamic textbox for the case information
slider : Holds the slider which changes the images

ImageControls : This layer holds the ImageControl movie clip that displays TextInput when thresholding is selected.

buttons : Holds all the buttonsmask : This is mask that covers the loaded photos. It is needed so that the images will only be visible on that portion of the screen.
photo : Image holder

4.2 Client GUI :

The GUI was created on the stage.
The text area for the case information was created in the following way:

  • The text tool was selected from the tools panel,
  • In the properties panel, dynamic text was selected.
  • The textbox was drawn by clicking and dragging a rectangular shape,
  • A layer was created, textbox.

Textboxes in Flash have embedded scrollbars.

All buttons were sourced from the internet. The logo, the buttons for threshold and windowing were created in Flash using the available fonts. The underlying blue panel was created by dragging a rectangle and filling it with colour. By experimenting with the colours, the resulting effect was achieved. The final design of the application is shown in Figure 4.1.


4.3 Loading the Application :

The required libraries were imported.

import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.ColorTransform;
import flash.geom.Rectangle;
import flash.geom.Point;

All variables were declared and initialized.
The images are loaded using this object. They are loaded into the bmpImages array.

var imLoader:MovieClipLoader = new MovieClipLoader();

This is the index of the currently displayed image.

var sIndex=1;

The Event Handler that tracks load progress.

var imLoadMeter:Object = new Object();

All the images will be loaded into this BitmapData array.

var bmpImages= new Array();

The Bitmap representation of the image currently being displayed.

var bmpCurrent:BitmapData = new BitmapData();

This object will load and parse configuration file, config.xml.

var xml1:XML = new XML();

This sets which dataset Flash will be using. The value dataset is set from the Flash Parameter “FlashVars” in the html document, covered in section 5.2.

var datasetRoot = dataset+"/";

The extension for the image files currently being used. It is set to default. This is only needed if the <extension> tag cannot be read from the config.xml file. This was changed during testing to allow for other formats.

var extension=".jpg";

The description that is displayed at the right panel. This is read from the configuration file, config.xml.

var description;

The first image number is stored in startIndex and the last image number is stored in endIndex.

var startIndex;
var endIndex;

This is the slider displacement per image. It is used by the “slider” movie clip.

var picPer;

Which windowing function has been selected. It is a mixed variable. It will contain the strings “bone”, “head”, “headFP”, “tissue”, or “threshold”. When windowing is not used the value is either 0 or null.

var windowRegion=0;

This is an array. It stores the center and width of each window region. The values come from the configuration file. Many arrays are created in this application. [ B ] and [ M ] were referred to.

var windowing= new Array();

This is a parallel array for recording cancer spots. These are the marks selected by the user per each image. A parallel array indicates that the information is related.

var points = new Array();

This array contains the images that have marks recorded.

var imagePoints = new Array();

Flash can only load images from a movieclip. -1000 is the depth of the movie. This movieclip is removed once all the images are loaded. This value was changed during testing to allow for larger datasets.


Next the reading of the configuration file, config.xml, is initialized. Flash has a built-in XML parser meaning that it can send and receive XML data. Many tutorials and books were consulted to configure the XML – Flash interaction including [ B ], [ C ], [ D ], [ N ], [ 49 ], [ 50 ] and [ 48 ]. The XML document needs one “container” tag in which all other subordinate tags will be nested. Each opener and closer tag set is called a node.

function readConfiguration(){
xml1.onLoad = parse;

Once the xml is loaded by Flash, it invokes the parse method. Here the program navigates through the xml tree of config.xml and retrieves all the required information. This xml tree is illustrated in section 5.3.

function parse(s:Boolean){
var child:XMLNode = xml1.firstChild; // Dataset
for(var i=0;i<child.childNodes.length;i++){
var node:XMLNode = child.childNodes[i];

The description section contains the description to be set at the right text box. It is stored in description variable initially.

//case description
_root.description = node.firstChild.nodeValue;
} //image parameters
else if(node.nodeName=="imageFile"){
for(var j=0;j<node.childNodes.length;j++){
var node1:XMLNode =

Then the baseName is the root name of the image. Thus, if the images’ name is “slice 1”, basename would be ‘slice’.

//basename of images

The startIndex and endIndex variables store the first and last image numbers in the dataset.

//first image number
else if(node1.nodeName=="start"){
_root.startIndex =
//last image number
else if(node1.nodeName=="end"){
_root.endIndex = node1.firstChild.nodeValue;

extension is the file format of the images. The application can only render one type of

format at a particular instance.

//file format of the images
_root.extension =

windowing is an array that stores center and width values for each window region.

//if any of the window functions are chosen
else if(node.nodeName=="window"){
for(var j=0;j<node.childNodes.length;j++){
var node1:XMLNode = node.childNodes[j];
for(var k=0;k<node1.childNodes.length;k++){
var node2:XMLNode = node1.childNodes[k];
center = node2.firstChild.nodeValue;
else if(node2.nodeName == "width"){

w_width =
_root.windowing[node1.nodeName] =
new Array(center,w_width);

This section attaches and defines various image loading events. As the images are loaded, it is put in the bmpImages array. The loading screen is also updated.

imLoadMeter.onLoadProgress = function(im:MovieClip,l,t){

imLoadMeter is invoked when loading of one image is completed. The image loaded in the movieclip is transferred to bitmap object using the draw method. If the index of loaded image is less that endIndex, read from config.xml file, another loadImage() is initiated and sIndex is incremented by 1. Else loadComplete() is called. This is the first method called when all of the loading of configuration and images into memory is complete.

imLoadMeter.onLoadInit= function(im:MovieClip){
var bmp:BitmapData = new
bmp.draw(im,new Matrix());
imLoadMeter.onLoadComplete = function(im:MovieClip){

Senocular.com [ 36 ] provide an excellent tutorial on a creating a loading bar which was used as a reference. Student.pacs [ 1 ], Spoono.com [ 42 ] and Flashdevils [ 47 ] were also covered. Here the loading progress bar is updated. The movieClip “loading” is responsible for displaying the loading process. As each image is loaded, some percentage of the loading progress completes. It is the ratio of bytes loaded of the current image. The total is calculated as (number of images loaded * per image percentage) + load ratio* per image percentage. The final loading screen is shown in Figure 4.2.

function redrawLoading(loadRatio:Number){
//width set to 500px
numImages = this.endIndex - this.startIndex;
perImagePercent = 100.0/numImages;
_root.startIndex+loadRatio)*perImagePercent) + " %";
root.loading.percentBar._width = (_root.sIndex-

FIGURE 4.2 – FLASHMED LOADING SCREEN4.4 Loading the Image Files :

Once the parse is complete, it calls the loadImage() method.

function loadImage(){

This method asks the MovieClipLoader object imLoader to load an image to a movie clip data_image. imLoader has a listener imLoadMeter that tracks the loading of each image. On each onLoadProgress and onLoadInit event of imLoadMeter, the loading MovieClip’s percentText and percentBar are updated.

loading.percentText=Math.round((sIndex -
startIndex+loadRatio)*perImagePercent) + " %";
loading.percentBar._width = (_root.sIndex -

The onLoadInit event occurs when the image is loaded and initialized. At this moment, the BitmapData from the data_image movieclip is retrieved and stored in bmpImages array.

imLoadMeter keeps track of the number of images loaded in the sIndex variable, which is incremented each time. Once all the images are loaded, sIndex is equal to endIndex, then the loadComplete method is invoked, from where the application starts running. loadComplete initializes various variables and hides the inactive movieclips loading, backgroundBG, and serverResponse which are not needed.
This is the next method that is called after all the loading is complete. The purpose of this method is clean up objects used during the loading process and to initialize the main flash content that shall be viewed. MovieClips like data_image (used to load images), loading (the movie clip containing loading progressbar) are removed from the stage. It also initializes various variables and the properties used.

function loadComplete(){
//not needed
_root.textInstance.htmlText = _root.description;
_root.picPer = 100/(_root.bmpImages.length-2);
_root.bmpCurrent = bmpImages[_root.sIndex].clone();
var p:MovieClip = _root.photo.createEmptyMovieClip("holder", 11);

A utility function to convert 0-255 to its hex representation was created. The threshold function requires a number to be in the form 0xAARRGGBB form. Hexadecimal gives greater flexibility in color value representation. [ H ] [ 66 ]

function decToHex(n:Number){
var hex =
//least significant digit, right most
lsd = hex[n%16];
//most significant digit, left most
msd = hex[Math.floor(n/16)];
var r:String = msd.toString()+lsd.toString();
return r;

4.5 Windowing and Thresholding :

Highlighting a region of interest is done through the various Bitmap API’s provided by Flash 8. Many tutorials and books were consulted during design including [ Flash 8 Help ], [ B ], [ C ], [ H ], [ M ], [ 51 ], [ 52 ], [ 61 ].

function highlightRegion(w_center,w_width){

In the case of windowing, ImageControls will be visible. The text inputs will contain left and right thresholds rather than center and width. After the calculations are performed, they are set to their respective fields.

//calculate left window
_root.ImageControls.w_left.text = (int(w_center)-
//calculate right window
_root.ImageControls.w_right.text =

Convert the width and center values passed to us in the range of (-1024 to 2000) to (0 to 255).
The formula for center is :
V255 = (abs(min1024) + v1024)*255/(abs(min1024) + max1024).
V255 : value in 0-255 range,

v1024 : value in -1024-2000 range,
min1024 : min value in -1024-2000 range
max1024 : max value in -1024 to 2000 range
The formula for width is :
W255= W1024 *255/ (abs(min1024) + max1024)
w1024 : width in -1024-2000 range and
w255 : width in 0-255 range

c = (1024+int(w_center))*255/3024;
w = int(w_width)*255/3024;

Once the center and width is converted to the range of 0-255, the left is calculated as left = center-width/2 and right as right = center+width/2.

l = Math.round(c-w/2);
r = Math.round(c+w/2);
var hex_l:String=decToHex(l);
var hex_r:String=decToHex(r);
var threshold_left = int("0xFF"+hex_l+hex_l+hex_l);
var threshold_right = int("0xFF"+hex_r+hex_r+hex_r);
var bmpTemp:BitmapData = _root.bmpCurrent.clone();
var bmpThreshold:BitmapData = new

For example, for center of 400 and width of 1600, the ‘left’ value will become
Left = 400 – 1600/2

= 400 – 800
= – 400

Right = 400 + 1600/2
= 400 + 800
= 1200.

The windowing array contains the center and width of each highlight region. The threshold() method is used to remove all pixels outside the region of interest. The operations used for threshold are “<” (less than) and “>” (greater than). This method replaces all the pixels matching the operation by other pixels. First, the threshold_left and threshold_right value is computed from the center and width value. The input range of -1024 to 2000 is converted to 0-255. Then, it is determined what will be the replaced pixel value after thresholding, color1 or color2.

After performing the operation, the modified bitmap is attached to hightlight movieclip. There are various buttons to highlight the particular regions. These are all handle.onPress events. They set the windowRegion variable according to button and call the highlightRegion() method.

var color1:Number;
var color2:Number;
color2 = int("0xffffffff");
color1 = int("0xff000000");
/*apply threshold, first for left and then for right*/
var num:Number = bmpThreshold.threshold(bmpTemp,new

When Threshold button is selected, ImageControls movie clip becomes visible. It contains two TextInput controls w_left and w_right in which the values for left and right, black and white, are entered. These values  determine the threshold value. The controls w_left and w_right have a listener attached that listens to when the user hits enter, upon which, the new highlighted area is displayed. The new value is converted into center and
width and stored in the windowing array.

var uiListener:Object = new Object();
uiListener.enter = function(oEvent:Object):Void{
if(_root.windowRegion==null || _root.windowRegion==0)return;
var tLeft:Number;
var tRight:Number;
tLeft = int(_root.ImageControls.w_left.text);
tRight = int(_root.ImageControls.w_right.text);

For example, when the user enters black and white values, -400 and 1200 respectively,

w = int (tRight-tLeft) = 1600
c = int (tLeft+tRight)/2 = 400

oEvent.target.editable = false;
oEvent.target.editable = true;

These are all the buttons mentioned previously for the windowing. This sets the windowRegion variable to indicate that windowing of a particular portion is being done. It calls highlightRegion() with their corresponding center and width value. These values are read from config.xml file and stored in ‘windowing’ array.

else {
else {
else {
else {
else {
else {






4.6 Navigate through the Images :

There are three ways user can navigate through images :
a. Next / Back Button : When it is clicked the movieClip’s changePhoto() method is invoked with either 1 or -1 as parameter

b. Slider : The offset of slider handle from the beginning of the rail determines whether to show the next or previous image. It also invokes the changePhoto() method of MovieClip

c. Keyboard : The user can press left or right arrow keys to changePhoto().

MovieClip.prototype.changePhoto = function(d:Number) {
_root.sIndex = int(_root.sIndex)+d;
if (_root.sIndex<_root.startIndex) {
_root.sIndex = _root.endIndex;
if (_root.sIndex>_root.endIndex) {
_root.sIndex = _root.startIndex;

changePhoto() does the following : It first removes the bubble1 movie clip, if it exists, from the photo MovieClip. It then increments and adjusts the sIndex. sIndex points to the index of bmpImages array that contains the next image to be displayed. It then calls loadPhoto() and updates slider handle and texts.

MovieClip.prototype.loadPhoto = function(){
/*Find if spot was marked for the current image. If so,
display it and update appropriate properties*/
var p = points[i].split("a");
_root.photo['bubble1']._x = Math.round(p[0]);
_root.photo['bubble1']._y = Math.round(p[1]);
/* update the bmpCurrent BitmapData. Set the new image to
"holder" movie clip*/
_root.bmpCurrent = _root.bmpImages[_root.sIndex];
var p:MovieClip =
/*Apply hightlighting if windowing is used.*/
/*Update slider positions and text*/
/*left arrow, right arrow interaction. Used to change images*/
this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
} else if (Key.getCode() == Key.RIGHT) {


loadPhoto() method updates the bmpCurrent variable that holds the BitmapData representation of image to be displayed. This BitmapData is attached to holder movieclip of photo. It checks if there is any marks set by user for this image and if found, attaches the bubble1 movieclip to the photo at the x,y position stored in points array. Also, if windowing is in use, it adds highlight movieclip to photo through highlightRegion() method.

4.7 Marking Points :

When the Mark button is selected and the user clicks on the image, marks are set at that location, bubble1 acting as the display for mark. If one mark is already present for this image, it is moved to a new location. The selected point is set in the points array. The image number is saved in the imagePoints array. These two arrays work in parallel. The values of all the related fields are updated. The user can remove the point marked from the
image by holding SHIFT and clicking on the image. The selected point is saved as a string with ‘a’ acting as the separator for x and y values. This is done for making the call to check answers easier. The number of points  marked is displayed with “ points recorded.”

else if(_root.doMark){
//When Shift is pressed and mouse clicked, the spot
on the image is deleted
statusText.htmlText = points.length + "
point(s) recorded.";
//mark x coordinate
//mark y coordinate
//mark picture number
var i:Number;
i = points.length;
points[i] =
else {
points[j] =
else {
statusText.htmlText = points.length + "
point(s) recorded.";

This sets the _root.doMark to true or false depending on the button.

else {


4.8 Sending Points to the Server :

FIGURE 4.11 – SEND BUTTONWhen the user selects 10 answers, they can send them to the server to be checked. Again, there is the usage of an XML object, ansXML, to get the response from the server. There is no other way in flash to get any text from the server internally. [ 53 ] This caused many errors during design. The getURL( ) method in Flash was tried but this only opens up a new browser window. Many tutorials at Kirupa.com were studied including [ 54 ] and [ 55 ].

Similar to the loading configuration, load checkpoints.php. The parameters to this page are passed through the query strings, sting after ‘?’, as name=value pair. The parameters are dataset name, points selected by user, width of bubble1 and height of bubble1. When the data from the server comes, onData method of XML object is called by Flash. serverResponse movieclip is made visible and the result is displayed in a dynamic text-field serverText . It is handled by the displayAnswer method. The movieclip has a close button, which when clicked removes serverResponse.

var ansXML:XML = new XML();

When the send button is clicked the blockingBG, black tint, is made visible. The points are converted to query string variables, the “a” is added.

_root.sendAnswer.onRelease = function(){
var p=new Array();

var strPoints:String = p.join(",");
s="+strPoints+"&c="+new Date().getTime());
ansXML.onData = displayAnswer;
function displayAnswer(str:String){
_root.serverResponse.responseText.htmlText =str;
_root.serverResponse.btnClose.onRelease = function(){


4.9 Other Functions :

4.9.1 Slider :

The tutorial at the agavegroup.com [ 39 ] site was used as a reference to create this. The slider is made up of two components, handle and rail. First, the variable perc (percentage) is assigned and set to zero. Next the function to run when the slider is pressed is created, onPress. Within this function the handle is defined as draggable.

this.perc=0 ;

The next line has five parameters:

true: lock the movie clip to the center of the mouse.

0,0,rail._width,0: left, top, right, and bottom boundaries for the movement. It cannot move left of the start point (0). It can only go right the width of the rail element, and cannot go up or down.


When the handle is released, stop the slider.


This calculates what percentage of the length of the rail the slider has moved. So if the slider is all the way at the left it is zero. If it is all the way to the right, the result is the ceiling (100%). The ceil function was added here as the number of total images varies.

perc=Math.ceil(this.handle._x*100/rail._width) ;
//next image
//previous image
else if(perc<(_root.sIndex-1)*_root.picPer){

FIGURE 4.13 – SLIDER4.9.2 Back Button / Forward Button :

The scripts for the
Back Button :

on (release) {

Forward Button :

on (release) {

4.9.3 Zoom :
Sitepoint.com [ 40 ] and Student Pacs [ 1 ] were referred to in the design of this. The image
zooms 20% when clicked.

var xx=_root.photo._width*20/100
var yy=_root.photo._height*20/100



4.9.4 Zoom Out:

Once the zoom function was created successfully, this was simpler. Using the if statement, this executes if the width is greater than 512px, the size of the original image.

var xx=_root.photo._width*20/100
var yy=_root.photo._height*20/100
else reset();

4.9.5 Timer :

In creating this, Student Pacs [ 1 ] and Spoono.com [ 41 ] were referred to. A new layer, timer, and a dynamic textbox were created to display the timer. When the application begins, seconds, minutes, hours are set to 0. Once 60 seconds have passed, 1 minute is added to the clock. Once 60 minutes have passed, 1 hour is added to the clock. If seconds, minutes, hours are single figure digits, add 0 in front.

//add 0 to single digit numbers
else secTxt="0"+sec
//add 0 to single digit numbers
else minTxt="0"+min
//add 0 to single digit numbers
else hoursTxt="0"+hours


4.9.6 Drag :

Spoono.com [ 42 ], Actionscript.org [ 44 ] and Toxiclab.org [ 45 ] were all used as references to create the drag function. This is always set to false if mark is selected and vice vearsa.

else {

4.9.7 Displaying x, y coordinates :

A dynamic textbox was created to hold the coordinates. The timer layer holds this. Flashvault.net [ 46 ] was referred to while constructing the coordinate display.

_root.photo.onMouseMove = function(){
xx = Math.round(_root.photo._xmouse);
yy =Math.round(_root.photo._ymouse);
CursorStatus.text= "x: "+xx.toString() + " y: "+yy.toString();


4.9.8 Reset:

If the height or the width is greater than 512px, this function resets the image to its original size and position when pressed. Flashdevils.com [ 47 ] was referred to.


Chapter 5 – Implementation of the Server

Xampp, an application available from Apache Friends [ 34 ], is running on the server. It simultaneously installs

· Apache 2.2.4

· MySQL 5.0.33

· PHP 5.2.1 & PHP 4.4.5

· phpMyAdmin 2.9.2

· FileZilla FTP Server 0.9.22

· OpenSSL 0.9.8d

Only Apache, MySQL and PHP are needed. If a database were introduced to the application, it would utilise MySQL. Apache requires MySQL to run. The script to check the users marks is written in PHP, checkpoints.php. During the development phase, the scripts were placed in the root directory of the web server. The directory structure of the application cannot be altered in order for it to function correctly.

The directory structure of the application is shown below.

~ ||=======flashmed
            ||----------- flashmed.html
            ||----------- medcase1.html
            ||----------- medcase2.html
            ||----------- medcase3.html
            ||----------- download.html
            ||----------- support.html
            ||----------- flashmed.zip
            ||----------- skull.jpg ( logo )
                     || ||----------- config.xml
                     || ||----------- points.txt
                     || ||----------- images ( 1 - ... )
                     || ||----------- config.xml
                     || ||----------- points.txt
                     || ||----------- images ( 1 - ... )
                     || ||----------- config.xml
                     || ||----------- points.txt
                     || ||----------- images ( 1 - ... )

5.1 FlashMed Web-Site :

All the pages are scripted in HTML, CSS and JavaScript. The three case studies include FlashMed.

The homepage has been validated by the W3C Markup Validation Service. This checks Web documents in formats like HTML and XHTML for conformance to W3C Recommendations and other standards. [ 35 ]

FIGURE 5.1 – FLASHMED LOGO5.1.1 Sample HTML Code :

Sample HTML code from the homepage. The first line is identical on all pages. It declares that the document is HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>FlashMed - Case Study 1</title>
<a href="flashmed.html">>>>>Home>> </a>
<h1><img src="skull.jpg" alt="FlashMed Logo">FLASHMED</h1>
<ol> </ol>

5.1.2 Google Search Box :

Present on the homepage, this is created in HTML. [ G ]

function tweakValue()
if (document.searchbox.scope[0].checked)
document.searchbox.q.value += " +site:flashmed.com";
<h3>Google Search</h3>
<form action="http://www.google.com/search" name="searchbox"
<input type="hidden" name="hl" value="en">
<input type="hidden" name="ie" value="ISO-8859-1">
<input maxlength="256" size="55" name="q" value="">
<br><input type="radio" name="scope" value="me" checked> my
site only, or
<input type="radio" name="scope" value="all"> all
the web</br>
<input type="submit" value="SEARCH!" name="btnG"
style="font-size:75%;" onclick="tweakValue();">

The tweakValue function is placed between the <head> </head> tags, tests the value of the radio button and appends the special Google search constraint +site:domain to limit the search results to pages from the site specified.


5.1.3 Contact Us Form :

Present on the Support and Contact Us page, this is created in HTML. [ G ]

<form action="mailto:sameer.kumar3@mail.dcu.ie" "method="get">
<b>Your name:</b>
<input type="text" name="yourname"><br />
<b>Your e-mail address:</b>
<input type="text" name="e-mail"><br />
<b>Your Institution:<br />
<input type="text" name="institution"><br />
<b>Your Occupation:</b>
<input type="text" name="occupation"><br />
<b>Your comments:</b><br>
<textarea name="feedback" rows="8" cols="70"></textarea><br />
<input type="submit" value="SEND!">
<style type="text/css">


5.1.4 Sample CSS Code :

This segment of code has been taken from the homepage. It is similar to the CSS on the other pages.

font-family: "showcard gothic";
font-size: 800%;
color: rgb(0,0,255);
font-weight: bold;
font-family: "showcard gothic";
font-size: 200%;
color: rgb(0,0,255);
font-weight: bold;
font-family: "showcard gothic";
color: rgb(0,0,255);
font-weight: bold;
font-size: 200%;
text-align: center;
font-family: "showcard gothic";
color: rgb(0,0,255);
font-weight: bold;
font-size: 14pt;
font-family: "showcard gothic";
color: rgb(0,0,255);
font-weight: bold;
font-size: 200%;
font-family: "showcard gothic";
color: rgb(0,0,255);
font-weight: bold;
text-align: center;
font-family: "showcard gothic";
text-align: center;
font-size: 14pt;
color: rgb(0,0,255);
background-color: black;
text-align: center;

5.1.5 Dynamic Clock :

Present on all the pages, this was created in JavaScript. Creating Cool Websites in HTML, XHTML and CSS was used as a reference for this. [ G ]

<script type="text/javascript" language="JavaScript">
function clock() {
var now = new Date();
var hours = now.getHours();
var amPm = (hours > 11) ? "pm" : "am";
hours = (hours > 12) ? hours - 12 : hours;
var minutes = now.getMinutes();
minutes = (minutes < 10) ? "0" + minutes : minutes;
var seconds = now.getSeconds();
seconds = (seconds < 10) ? "0" + seconds : seconds;
dispTime = hours + ":" + minutes + ":" + seconds + " " + amPm;
if (document.getElementById) {
document.getElementById("clockspace").innerHTML = dispTime;
<body onload="clock()">
<p>The actual time right now is: <span


5.2 Loading Selected Case Study :

After the application was created, it was exported to a webpage. The HTML that is generated by Flash includes a link to the .swf file. This is present on the Case Study pages.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
swflash.cab#version=8,0,0,0" width="750" height="750" id="attempt
flashmed modified" align="center">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flashmed.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="dataset=dataset1">
<embed src="flashmed.swf" quality="high" bgcolor="#000000"
width="750" height="750" name="attempt flashmed modified"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />

Based on the dataset it is to work on, it fetches config.xml file from the server within the dataset folder. The dataset it will work on is set through the parameter FlashVars in the <object> or <embed> tag. [ 56 ] [ 57 ]
In the above, the FlashVars variable is assigned. Thus, in the FlashMovie, the variable dataset will have the value “dataset1” already defined. FlashMed will then load the xml file from “dataset1/config.xml” location.

5.3 config.xml :

[ B ], [ C ] and [ D ] were referred to. The file begins with this first line to indicate it is an XML document.

<?xml version="1.0" encoding="UTF-8"?>

The data contained between <dataset> </dataset> tags is all the information needed for the application. Contained in the <description> </description> tags is the case information of the application.

<description><![CDATA[<b>Case Information:</b>
]> </description>

The information required for each dataset, in this case the basename of all the images is slice and the first image is 1. There are a total of 249 images. All the images are of the .jpg format.

<baseName>slice </baseName>

These are the values for the windowing buttons. They are called when the application is started and stored in the windowing array.


The xml tree of this document is shown in Figure 5.5.


5.4 points.txt :

This is the file that contains the correct points. This is read by checkpoints.php and compared against the user’s points.

For example, where 11a216a132,
11 = image number
216 = x coordinate
132 = y coordinate

The values are separated by “a” to make it easily distinguishable between numbers. There are 10 points.

11a216a132,12a238a91,33a265a105,54a400a332,75a150a500, 86a170a550, 97a280a529, 118a309a490, 159a496a847, 200a202a283

The following line can contain any message.

Any Other Answers are Incorrect. Please make a note of the correct points in order to review.

5.5 checkPoints.php :

Many tutorials were consulted in writing this script. [ 38 ], [ 58 ], [ 59 ], [ I ], [ J ], [ K ] and kirupa.com. When the file checkPoints.php is called, the first thing this page does is retrieve the parameters to this page. The  parameters to this page come in the form of name=value pairs in query string. This is retrieved using the super global variable of PHP script, $_REQUEST . This is an array of all the parameters in the query string. All variables in PHP start with $. The values from the $_REQUEST array are retrieved as

$datasetBase = $_REQUEST['dataset'];

The correct answers are set in the first line of points.txt file of each dataset. The dataset to use is known and so the file points.txt can be read from the same folder.


The file is opened using the fopen() method for reading. Then the first line of the file is read using the fgets() method and stored in the $strPoints variable. Next this string is converted to an array using the explode() method. The explode() method can convert a string to an array using a separator, in our case ‘,’.


Again each individual value of the $points1 array is exploded using the separator ‘a’. This  gives a two dimensional array. Similarly, the points value of $_REQUEST can be converted to an array using the explode() method as above.

$points2 = explode(",",$_REQUEST['points']);

For each element in $points2, it is checked whether it is in the array of correct answers  $points1 using the method contains() in a for loop. If the element is found, it is appended to the array $marks. The string $yourAnswers is created which displays the points in $points2 in a more readable format i.e Image <num>: (<x>,<y>). If the current element is a correct value, $yourAnswers is italicized. Otherwise it is appended to $yourAnswers normally.

$res = contains($points2[$i],$width,$height);
$p = explode("a",$points2[$i]);
$yourAnswers = $yourAnswers."<i>Image:".$p[0]."
$yourAnswers = $yourAnswers."Image:".$p[0]."

$allAnswers is another string which contains all the correct answers read from the points.txt file. As in the case of $yourAnswers, the correct answers from the user are italicized. The $marks array is checked to see whether it is one of the correct answers. Finally, the various messages are displayed using the PHP method echo. The outputs are

<$marks> out of 10 correct.
Your Answers: <$yourAnswers>
Correct Answers:<$allAnswers>

The number of correct answers can be found by finding the size of $marks array using the count() method. $yourAnswers and $allAnswers are compared.

Next points.txt’s second line is read that contains the text to be displayed to the user and display it.

echo count($marks)." out of 10 correct answers.<br>";
echo "<font size='12'><b>Your Answers:</b>
echo "<font size='12'><b>Correct Answers:</b>
$mes = fgets($fp,4000); /*Read any custom message from
points.txt file.*/
echo "\n";
echo $mes;

This function first converts the string $p1, which is in the form of 5a44a400, to an array using the explode() method. Next it reads the $points1 array to find the image number represented by $p, i.e. $p[0]. Once found, it compares the x, y positions in $p with the x,y in $points1 with the limit of width and height of bubble1 movieclip. If it satisfies the condition, true is returned. If no matching points are found, false is returned.

function contains($p1,$w,$h){
global $points1;
if($p[1]>=($points1[$i][1]-$w/2) &&
$p[2]>=($points1[$i][2]-$h/2) && $p[1]<=($points1[$i][1]+$w/2)
&& $p[2]<=($points1[$i][2]+$h/2)){
return true;
return false;





Chapter 6 – Testing

3 datasets were used in the design and testing process :
· Dataset1 contains 249 images with a total disk space usage of 3.79MB.
· Dataset2 contains 293 images with a total disk space usage of 5.04MB.
· Dataset3 contains 220 images with a total disk space usage of 3.95MB.

6.1 Loading Times :

All datasets were loaded 5 times and the average time is recorded. The cache and history files were deleted after each reload.

6.1.1 Local Machine :

On the development machine the following times were recorded for the datasets. This would have the fastest loading times.
Dataset1 : 23.16 secs
Dataset2 : 27.44 secs
Dataset3 : 20.53 secs

6.1.2 Across Internal Network :

Dataset1 : 28.31 secs
Dataset2 : 37.22 secs
Dataset3 : 23.55 secs

6.2 Internet Browsers :

All pages displayed correctly in each browser.

6.2.1 MS Internet Explorer 7 :

All the relevant pages displayed and functioned correctly in IE7.

6.2.2 Safari :

All the relevant pages displayed and functioned correctly.

6.2.3 Firefox :

All the relevant pages displayed and functioned correctly.

6.3 Operating Systems :

FlashMed successfully ran on all of the operating systems. From these results, it would be safe to assume that FlashMed would execute on any system that could run Flash Player 8.

6.3.1 MS Windows Vista :

The application executed successfully on this platform.

6.3.2 MS Windows XP :

The application executed successfully on this platform.

6.3.3 Apple Macintosh :

The application executed successfully on this platform.

6.3.4 Suse Linux :

The application executed successfully on this platform. It would be safe to assume that FlashMed would execute on all updated versions of Linux.

6.4 Image Formats :

Coolutils.com [ 67 ] offer a free internet conversion service. This was chosen due to the convenience of not needing to install any products. All formats rendered successfully. Only 10 were converted in order to test the marking functionality. The format that was going to be displayed had to be added to config.xml and flashmed.fla.

6.4.1 .jpg :

This is the format of the current images that are displayed.

6.4.2 .gif :

This format displayed correctly.

6.4.3 .png :

This format displayed correctly.

6.5 Dataset Sizes :

An important consideration is the maximum number of images that this application can render. The depth of the movie was changed to 10000. The images were renamed using the application, NameWiz [ 68 ], which offers a free 30 day trial.

6.5.1 Local Machine :

After 9999, testing was discontinued. The loading times were extremely slow as the file size increased, as expected. Once the datasets were greater than 1000 images, all other running applications and browsers caused the loading to slow down even more.

Images Time MB
999 01 : 37 : 23 15.7
1582 02 : 34 : 41 25.1
1999 03 : 04 : 42 31.5
2999 04 : 19 : 27 47.2
3999 06 : 31 : 46 63
4999 08 : 55 : 74 78.8
5999 10 : 05 : 52 94.5
7999 14 : 40 : 65 126
9999 16 : 11 : 37 157

6.5.2 Across Internal Network :

2000 images were tried but failed loading after 75% and 83%. 1582 images was chosen at random for the third attempt.

Images Time MB
999 03 : 40 : 10 15.7

1582 06 : 43 : 77 25.1

6.6 Flash Players :

The application was developed in Flash Professional 8 and so the default player is Flash Player 8. As Flash Player 9 has been released, this is the current version on the internet today.  The application will run on any version from 8 onwards. In the event that the user does not have an updated version of flash player, the application will automatically update to the newer version if an internet connection is present.

Chapter 7 – Conclusions and Further Research

7.1 Conclusions :

With the exception of LeadTools Medical Imaging Suite and Photoshop CS3, the available open-source applications are much more viable options than the expensive viewers littered on the www.

Plans are in place to make FlashMed open-source by making the source file available for download. The many available tutorial sites on the www would be an ideal place to publish the explanatory parts of this document. Adding the ability to download the FlashMed .fla allows any coder to make alterations to its current state.

By completing all the targets set at the beginning of this project, Flash no longer seems daunting. This application also covers server side scripting and website development. By completing such in depth research, this project became clearer and much more manageable.  This application is capable of assisting teachers in the preparation of exams and homework material, therefore easing the teacher’s workload and helping to improve the educational system in Ireland.

7.2 Further Research and Improvements :

7.2.1 DICOM Support :

Flash currently does not support DICOM and so a script would have to be constructed which would render this format.

7.2.2 Addition of more features :

Many other features offered by other viewers could be incorporated into Flash. This list could
include :
· Convert images to other formats,
· Draw, edit and select different parts of an image,
· Interactively adjust the brightness and contrast,
· Generate Histograms,
· Add generic editing functions like cut, copy, paste.
· View other datasets simultaneously,
· Image Effects,
· Multi language support,
· Email features,
· Print options,
· Slideshow,
· IPTC editing, [ 62 ]
· Compression / Decompression,
· Create animations and videos,
· Overlap images over each other,
· Create collages with image thumbnails,
· Support for large images – giga-pixel.
· Multi-monitor compatibility,
· 3D Processing,
· Network Support,
· Complete DICOM Support,
· Ability to split an image into RGB / HSV components,
· Color conversions.

7.2.3 Loading directly from clients hard-disk :

From testing it can be seen that once the datasets were larger than 1000 images, the application’s loading time increased substantially. FlashMed could be changed to download directly to the clients’ hard-disk to decrease the loading times.

7.2.4 ImageJ and ColdFusion :

ColdFusion can be configured to work with ImageJ. It allows the user to manipulate images natively with CF. [ 24 ] This could run on the server and be configured to send .jpg images after reading .dcm, to FlashMed.
CF could also have been used to host the application instead of Apache. However, CF is not open source and it retails at €970 for the standard edition. [ 37 ] As Apache is just hosting the site, it is more than suitable for this purpose. CF has a much broader range of features which would not be utilized if it was hosting.

7.2.5 Creating a .mxp extension for Flash :

Flash allows the creation of extensions, .mxp files, allowing the user to create their own applications in a control panel which contains the essential functions in Flash without directly interfering with the scripts.
The size of the current FlashMed .fla file is approximately 1.5MB. Creating an extension panel for FlashMed would compress this substantially.

7.2.6 Addition of Sandboxes :

Sandboxes are folders that contain data. This would incorporate databases which are easy to manipulate in Flash. Each hospital or school could run one server hosting the FlashMed application and the relevant information and datasets.

For hospitals, each dataset would belong to individual patients, containing their images and their relevant information. Doctors would only need to connect to the server and search for the file to view all the relevant data.
For schools, these sandboxes could contain exams, answers and results for each student recording their progress. For example, in each classroom, the instructor could run FlashMed on his machine which would act as a server, and the students could connect as clients in the classroom simultaneously. Once the students have finished their exams / homework ( by connecting from home ), the results could be sent to a database, thus performing all the corrections for the instructor. These databases would utilize SQL technology.

7.2.7 Stream Datasets in Real-Time :

To reduce the loading time to approximately 15 seconds, images could be streamed over the network in real-time thus eliminating most of the loading process. ColdFusion or Flash Media Server would have to be installed on the server, instead of Apache. Apache does not have the capabilities to stream media.

7.2.8 Include Flash Player 9 :

The application requires Flash Player 8 to run. Flash Player 9 is the current version. Presently, the application automatically updates Flash Player to a newer version if the client is running an older version. In the event of the application being unable to download a newer version, including Flash Player 9 with this package would ensure that this does not hinder a user.


A. Learning Actionscript 2.0 for Macromedia Flash 8, Jen deHaan, Peter deHann, Macromedia, ISBN: 0-321-39415-1, October 13, 2005.
B. Macromedia Flash 8 Bible, Robert Reinhardt, Snow Dowd, John Wiley & Sons, ISBN:0-471-74676-2, 2006.
C. Macromedia® Flash® Professional 8 UNLEASHED, David Vogeleer, Eddie Wilson, Lou Barber, Sams, ISBN: 0-672-32761-9, October 12, 2005.
D. Flash 8: Projects for Learning Animation and Interactivity, Robert Hoekman, Jr., Rich Shupe, O’Reilly, ISBN: 0-596-10223-2, March 2006.
E. Sams Teach Yourself Macromedia Flash 8 in 24 Hours, Phillip Kerman, Sams, ISBN: 0-672-32754-6, October 10, 2005.
F. Macromedia® Studio 8 All-in-One Desk Reference For Dummies, Damon Dean, Andy Cowitt, Wiley Publishing, Inc., ISBN-13: 978-0-7645-9690-2, 2006.
G. Flash 8 Essentials, Paul Barnes-Hoggett et al., Friends of Ed, ISBN: 1-590-59532-7, 2006.
H. Macromedia® Flash® 8: A Tutorial Guide, Jay Armstrong, Jen Dehaan, Macromedia, ISBN: 0-321-39414-3, October 06, 2005.
I. Professional PHP Programming, Jesus Castagnetto, Harish Rawat, Sascha Schumann, Chris Scollo, Deepak Veliath, WROX Press Ltd, ISBN 1-861002-96-3, 1999.
J. PHP5 and MySQL® Bible, Tim Converse, Joyce Park, Clark Morgan, Wiley Publishing Inc., ISBN: 0-7645-5746-7, 2000.
K. PHP & MySQL® For Dummies 3rd Edition, Janet Valade, ISBN-13: 978-0-470-09600-0, 2007
L. Creating Cool Websites with HTML, XHTML and CSS, Dave Taylor, Wiley Publishing Inc, ISBN: 0-7645-5738-6, 2004.
M. Flash 8 ActionScript Bible, Robert Reinhardt, Joey Lott, Wiley Publishing Inc., ISBN-13: 978-0-471-77197-5, 2006.
N. Essential Actionscript 2.0, Colin Moock, O’Reilly Publishing, ISBN: 0-596-00652-7, 2004
O. Dont Make Me Think! A common sense approach to Web Usability, Steve Krug, New Riders Publishing, ISBN 0-321-34475-8, 2006.


[ 1 ] StudentPacs.com, www.studentpacs.com, 20/03/2007.
[ 2 ] OSFlash.org, http://osflash.org/jgenerator, 21/03/2007
[ 3 ] FlashComGuru Tutorial, http://www.flashcomguru.com/index.cfm/2005/11/2/Streaming-flv-video-via-PHPtake-two, 21/03/2007
[ 4 ] Kirupa Tutorial, http://www.kirupa.com/developer/mx/photogallery.htm, 21/03/2007
[ 5 ] DreamInCode Forum, http://www.dreamincode.net/home/, 21/03/2007
[ 6 ] Brajeshwar.com, http://brajeshwar.com/reference/as2/flash/display/BitmapData.html, 21/03/2007
[ 7 ] Flash-DB.com Tutorial, http://www.flash-db.com/Tutorials/snapshot/, 21/03/2007
[ 8 ] Flash-DB.com Tutorial, http://www.flashdb.com/Tutorials/transitions/transition.php?page=1, 21/03/2007
[ 9 ] Flash-DB.com Forum, http://www.flash-db.com/, 21/03/2007
[ 10 ] FlashKit Forum, http://board.flashkit.com/index.shtml, 21/03/2007
[ 11 ] Adobe.com Forum, http://www.adobe.com/cfusion/webforums/forum/index.cfm?forumid=15, 21/03/2007
[ 12 ] TutorialOutpost.com Forum, http://tutorialoutpost.com/, 21/03/2007
[ 13 ] Hotscripts.com, http://www.hotscripts.com/Detailed/64819.html, 21/03/2007
[ 14 ] SmartWebby.com Tutorial, http://www.smartwebby.com/Flash/digital_clock.asp, 21/03/2007
[ 15 ] TutorialOutpost.com Tutorial, http://tutorialoutpost.com/count/7177, 21/03/2007
[ 16 ] Flashscript.biz, http://www.flash8.flashscript.biz/store_image/store_image3.html, 21/03/2007
[ 17 ] DZone, http://snippets.dzone.com/posts/show/1663, 21/03/2007
[ 18 ] Idoimaging.com, http://www.idoimaging.com/index.shtml, 21/03/2007
[ 19 ] http://www.idoimaging.com/cgi-bin/imaging/program.pl?ident=132, 01/04/2007
[ 20 ] Google Search, http://www.google.ie/search?hl=en&client=firefoxa&rls=org.mozilla%3Aen-US%3Aofficial&hs=6Lv&q=define+xml&btnG=Search&meta=, 01/04/2007
[ 21 ] Google Search, http://www.google.ie/search?hl=en&client=firefoxa&rls=org.mozilla:enUS:official&defl=en&q=define:PHP&sa=X&oi=glossary_definition&ct=title, 01/04/2007
[ 22 ] Google Search, http://www.google.ie/search?hl=en&client=firefoxa&rls=org.mozilla%3AenUS%3Aofficial&q=define%3Ajavascript&btnG=Search&meta=, 01/04/2007
[ 23 ] WWW Programming using Computational Logic Systems, Daniel Cabeza, Manuel Hermenegildo, Sacha Varmaa, http://clip.dia.fi.upm.es/lpnet/lpinternet/pillow/lpnet3.html, 01/04/2007
[ 24 ] http://www.benorama.com/coldfusion/components/imaging.htm, 01/04/2007
[ 25 ] ImageJ, http://rsb.info.nih.gov/ij/features.html, 01/04/2007
[ 26 ] Irfanview, http://www.irfanview.com/, 01/04/2007
[ 27 ] ImageMagick, http://www.imagemagick.org/script/index.php, 01/04/2007
[ 28 ] Google Search, http://www.google.ie/search?hl=en&client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&hs=xKv&q=define+html&btnG=Search&meta=, 01/04/2007
[ 29 ] LeadTools, http://www.leadtools.com/SDK/Medical/Medical-Imaging-Suite.htm, 01/04/2007
[ 30 ] Rubo Medical, http://www.rubomedical.com/, 01/04/2007
[ 31 ] http://homepage.mac.com/rossetantoine/osirix/Index2.html, 01/04/2007
[ 32 ] Adobe Photoshop CS3 Extended, http://www.adobe.com/products/photoshop/photoshopextended/features/allfeatures/, 01/04/2007
[ 33 ] http://www.permadi.com/tutorial/flashVars/, 03/04/2007
[ 34 ] Xampp, http://www.apachefriends.org/en/xampp.html, 03/04/2007
[ 35 ] W3C, http://validator.w3.org/, 03/04/2007
[ 36 ] http://www.senocular.com/flash/tutorials/preloading/, 03/04/2007
[ 37 ] http://www.adobe.com/products/coldfusion/buy/, 03/04/2007
[ 38 ] http://www.freewebmasterhelp.com/tutorials/php, 03/04/2007
[ 39 ] http://www.agavegroup.com/?p=28, 03/04/2007
[ 40 ] http://www.sitepoint.com/article/actionscript-animation-flash, 03/04/2007
[ 41 ] http://www.spoono.com/flash/tutorials/tutorial.php?id=22, 03/04/2007
[ 42 ] http://www.spoono.com/flash/tutorials/tutorial.php?id=17, 03/04/2007
[ 43 ] http://www.spoono.com/flash/tutorials/tutorial.php?id=8, 03/04/2007
[ 44 ] http://www.actionscript.org/forums/showthread.php3?t=72499, 03/04/2007
[ 45 ] http://www.toxiclab.org/tutorial.asp?ID=70, 03/04/2007
[ 46 ] http://www.flashvault.net/tutorial.asp?ID=47, 03/04/2007
[ 47 ] http://flashforum.flashdevils.com/showthread.php?s=&threadid=193171/Formating%20imported%20images.html, 03/04/2007
[ 48 ] http://www.actionscript.org/resources/articles/9/3/XML-101/Page3.html, 03/04/2007
[ 49 ] http://www.tupps.com/flash/faq/xml.html#5-B, 06/04/2007
[ 50 ] http://www.tutorialized.com/tutorial/Flash-and-XML/7660, 06/04/2007
[ 51 ] http://www.sephiroth.it/tutorials/flashPHP/thresold/, 06/04/2007
[ 52 ] http://www.kirupa.com/motiongraphics/twotone.htm, 06/04/2007
[ 53 ] http://www.webmasterworld.com/forum104/397.htm, 06/04/2007
[ 54 ] http://www.kirupa.com/forum/showthread.php?t=71584, 06/04/2007
[ 55 ] http://www.actionscript.org/forums/showthread.php3?t=40745, 06/04/2007
[ 56 ] http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_4150, 06/04/2007
[ 57 ] http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701, 06/04/2007
[ 58 ] http://www.awprofessional.com/articles/article.asp?p=402221&seqNum=15&rl=1, 06/04/2007
[ 59 ] http://ie.php.net/, 06/04/2007
[ 60 ] http://www.sph.sc.edu/comd/rorden/dicom.html, 06/04/2007
[ 61 ] http://radiology.rsnajnls.org/cgi/content/full/236/2/677
[ 62 ] http://www.google.ie/search?hl=en&client=firefox-a&rls=org.mozilla:enUS:official&hs=Hpi&defl=en&q=define:IPTC&sa=X&oi=glossary_definition&ct=title
[ 63 ] IHE, http://www.ihe.net/Technical_Framework/upload/IHE_RADTF_Supp_NMI_TI_2006-05-19.pdf
[ 64 ] http://www.thesitewizard.com/
[ 65 ] http://www.google.ie/search?hl=en&client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&hs=zXW&q=define%3Aactivex&btnG=Search&meta=
[ 66 ] http://www.actionscript.org/actionscripts_library/Math_Object/more4.shtml
[ 67 ] http://www.coolutils.com/Online-Image-Converter.php
[ 68 ] NameWiz, http://softbytelabs.com/us/downloads.html


The following files are included in the accompanying cd :
flashmed.fla : Source flash file
flashmed.swf : FlashMed movie
checkpoints.php : Server script to check correct points.
flashmed.html : FlashMed homepage
medcase1.html : Case Study 1 webpage
medcase2.html : Case Study 2 webpage
medcase3.html : Case Study 3 webpage
download.html : Download FlashMed webpage
support.html : Support and Contact Us webpage
dataset1 : Images for Case Study 1
dataset2 : Images for Case Study 2
dataset3 : Images for Case Study 3
dataset : Contains 9999 images used for testing
points.txt (3) : One file in each dataset containing the correct cancer points
config.xml (3) : One file in each dataset containing the information about the dataset

The .pdf version of this report can be found below.

Macromedias Flash For Remote Access Medical Imaging

VN:F [1.8.8_1072]
Rating: 0.0/10 (0 votes cast)
VN:F [1.8.8_1072]
Rating: 0 (from 0 votes)

Related posts:

  1. MS SQL Server Vs MS Access
  2. NeatVision Counters
  3. Web Usability and Accessibility Evaluation
  4. Edge Detection And NeatVision Counter

Leave a Reply