FNV: Flash Network Viewer 
USER MANUAL   
Written by: Ruth Dannenfelser   
December 22, 2010   
Modified: May 5, 2011 
Installation   
FNV is available for download at: 
The download contains the FNV.swf file, a source code package for embedding, documentation, and some 
sample network XML files. Make sure that you extract all the files from the zipped archive before attempting 
to run FNV.   
http://www.maayanlab.net/FNV 
Running FNV   
FNV requires that you have flash player installed on your machine. You can get the latest version 
of flash player from Adobe: 
There are four ways to run FNV. You can run the flash movie locally, you can embed the viewer in a web 
document, you can embed the viewer in a pdf file, or you can run the viewer on our 
website: 
http://get.adobe.com/flashplayer/ 
To run the viewer locally, you must place the XML file you want to visualize in the same directory as 
http://www.maayanlab.net/FNV/useViewer.html 
Pdf remove metadata - add, remove, update PDF metadata in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Allow C# Developers to Read, Add, Edit, Update and Delete PDF Metadata
batch pdf metadata; read pdf metadata java
Pdf remove metadata - VB.NET PDF metadata library: add, remove, update PDF metadata in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Enable VB.NET Users to Read, Write, Edit, Delete and Update PDF Document Metadata
edit pdf metadata; acrobat pdf additional metadata
the FNV.swf file. The XML file must be named network.xml or the viewer will not display the network. 
To incorporate the flash viewer into a web page you can embed it using html as seen below. There are 
two ways to load the network into the viewer. Follow the same procedure as when using FNV locally 
(naming the network, network.xml and placing it in the same directory as FNV.swf file) or by feeding a 
network name into the viewer using flash vars (see code below lines highlighted in red). Simply replace 
the networkGENERATED.xml filename in the code below with the filename of the network you wish to 
visualize, to set the loadFile variable within the Flash viewer.  
<object height="548" width="796"> 
<param value="graphviewer_copy_for_web.swf" name="movie" /> 
<param value="true" name="allowFullScreen" /> 
<param value="always" name="allowScriptAccess" /> 
<param value="loadFile=networkGENERATED.xml" name="FlashVars" 
id="flashvar" /> 
<param value="transparent" name="vmode" /> 
<embed height="548" width="796" flashvars="loadFile=networkGENERATED.xml" 
allowfullscreen="true" allowscriptaccess="always" vmode="transparent" 
type="application/x-shockwave-flash" src="graphviewer_copy_for_web.swf" /> 
</object>
Note: The viewer has full screen functionality that won’t be enabled unless the 
allowfullscreen 
attribute is set to true.   
Embedding the viewer in a pdf file is a more advanced operation and requires that you have several 
programs installed on your machine.   
Requirements:   
1.
Adobe Acrobat 9 Professional or higher. Without this software you will not be able to insert a Flash 
movie into a pdf.   
2.
An ActionScript 3.0 compiler. We recommend using Adobe Flash CS4 Professional but a free Flex 4 
compiler is also available from Adobe.   
3.
A functional xml network that does not have any TRIANGLE nodes. A network with triangle nodes will 
not display when the viewer is embedded in a pdf.   
4.
Optional: Python 2.7 to utilize the automated embedding script.   
Embedding Using the Python Script   
If you have a functional network with no triangle nodes and all of the above software and want to continue, 
locate the “FNV for embedding” folder which was included in the downloaded archive. Those familiar with 
the source code for FNV will notice that one of the files 
GraphMain.as 
is missing from the folder. You will 
also notice that an extra file 
GraphMainIn.as 
has taken its place. 
GraphMainIn.as 
is the file in which the 
python script, 
embed.py
, will use to create 
GraphMain.as
. It is VERY important that you do not edit 
GraphMainIn.as 
if you intend to use the python script for embedding. (If you wish to manually insert a 
network into 
GraphMainIn.as 
then read the next section below.) Double click the python script to execute 
it. Once the python script is running you will be prompted to enter a file name.   
VB.NET PDF remove image library: remove, delete images from PDF in
Insert Image to PDF. Image: Remove Image from PDF Page. Image: Copy, Paste, Cut Image in Page. Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete
analyze pdf metadata; edit pdf metadata online
VB.NET PDF Page Delete Library: remove PDF pages in vb.net, ASP.
Able to remove a single page from adobe PDF document in VB.NET. Ability to remove consecutive pages from PDF file in VB.NET. Enable
adding metadata to pdf files; rename pdf files from metadata
Enter the filename where the 
network xml file is that you want 
to visualize and press enter. Once 
the script executes a new 
GraphMain.as 
file with an 
embedded network should be 
generated and is ready to be 
compiled.   
Embedding Without Using the Python Script   
If you wish to bypass the script use you can manually edit 
GraphMainIn.as
. First copy the contents of 
GraphMainIn.as 
into a new file and name it 
GraphMain.as
. Secondly find the line with the comment, 
"
//hardcoded network
" The next line should contain the text, "
var myXML:XML = new XML();
". Insert 
the network between the parentheses in the format of a string, do not forget to escape the quotation marks 
inside the string.   
Compiling the ActionScript files   
To compile using Flash CS4, open the FNV.fla file and select test movie. You should now see an FNV.swf file in 
the directory with your ActionScript files. Double click the FNV.swf file to make sure the network is displaying. 
If no network is visible make sure that the network xml file embedded has the correct syntax and try again. 
Once the embedded network is displaying, it is ready to be imported into the pdf.   
Inserting the Flash movie in a pdf   
Create a new Adobe Acrobat 9 file or open an existing one and navigate to tools‐>multimedia‐>flash tool. 
Draw an area on the pdf where you want to place the FNV. You will then be prompted to browse for the .swf 
file, find FNV.swf and select it. Select the arrow tool and press the play button to make sure the movie works. 
If the FNV controls display but no network, make sure that no triangle nodes are in the embedded network, 
and try again.   
XML File Syntax   
XML files read by the viewer have the following basic structure:  
<network>  
<node>  
<desc/> 
</node> 
<edge>  
<desc/> 
</edge> 
</network>  
C# PDF Page Delete Library: remove PDF pages in C#.net, ASP.NET
console application. Able to remove a single page from PDF document. Ability to remove a range of pages from PDF file. Free trial package
remove pdf metadata online; pdf keywords metadata
C# PDF Password Library: add, remove, edit PDF file password in C#
String outputFilePath = Program.RootPath + "\\" Remove.pdf"; // Remove password in the input file and output to a new file. int
get pdf metadata; metadata in pdf documents
Network Element  
The network element attributes’ control the aesthetics of the network and the underlying 
algorithm used to render the network.  
XML Example: 
<network name=“my network” backgroundcolor=“0xFFFFFF” 
nodeselectioncolor=“0xF76541" edgeselectioncolor="0x6698FF" fade=”true” 
description=”true” doubleclick="true" layoutmode="force"> 
Color Codes: The viewer requires that all colors be defined using hexadecimal values. Unlike color codes used 
in HTML these values must start with a “0x” instead of a “#”. The three pairs of two digit hex values represent 
red, green, and blue. More information about hexadecimal color codes including a color picker can be found 
at: http://www.w3schools.com/HTML/html_colors.asp 
Attributes: 
name
– Used to assign a name to the network.   
.   
backgroundcolor
– A hex color code which specifies the background for the network.  
nodeselectioncolor
– A hex color code which specifies the highlight color of the node when the node 
is hovered over.   
edgeselectioncolor
– A hex color code which specifies the highlight color of the edge when hovered over.   
fade
– A Boolean (true or false) value that turns subnetwork fading on mouseover on or off.   
description
– A Boolean (true or false) value that adds or removes the description box.   
doubleclick
– A Boolean (true or false) value used to enable full screen mode.  
layoutmode
– Allows for the selection of a graph drawing algorithm. All of the graph drawing algorithms 
render planar straight‐line drawings. Note: with the exception of the predefined graph algorithm all graphs 
with more than 70 nodes will be drawing using the default algorithm potentially producing undesired 
results.   
Options:   
predefined
–   
Allows the user to specify their own position, in pixels, for each node. 
Additional attributes 
xPos 
and 
yPos 
need to be added to the node 
representing the x position on the page and the y pixel position on the page. 
This mode is the preferred method for visualizing networks over 100 nodes.   
C# PDF bookmark Library: add, remove, update PDF bookmarks in C#.
Ability to remove and delete bookmark and outline from PDF document. Merge and split PDF file with bookmark. Save PDF file with bookmark open.
pdf metadata extract; preview edit pdf metadata
C# PDF remove image library: remove, delete images from PDF in C#.
Insert Image to PDF. Image: Remove Image from PDF Page. Image: Copy, Paste, Cut Image in Page. Link: Edit URL. Bookmark: Edit Bookmark. Metadata: Edit, Delete
batch pdf metadata; remove metadata from pdf online
force - 
Positions the nodes using attraction and repulsion forces so that all the edges are 
roughly equal in length while attempting to minimize edge overlap. When dragging 
and repositioning a node the force of repulsion may reposition some of the 
surrounding nodes.   
   Figure 1. An undirected graph drawn using the force algorithm. 
hierarchy - 
Arranges a directed graph into layers flowing from a source node to one or more sink 
nodes.   
Figure 2. A directed graph drawn using the hierarchy algorithm.  
radial - 
Arranges the network circularly around a root node. The additional attribute layer 
can be used to set the positions of the nodes in the circle. Layer 0 represents the 
center of the circle while larger layer values are placed at increasingly larger radii 
from the center.   
C# TIFF: TIFF Metadata Editor, How to Write & Read TIFF Metadata
You can also update, remove, and add metadata. List<EXIFField> exifMetadata = collection.ExifFields; You can also update, remove, and add metadata.
batch pdf metadata editor; edit multiple pdf metadata
VB.NET PDF delete text library: delete, remove text from PDF file
projects. Basically, you can use robust APIs to select a PDF page, define the text character position, and remove it from PDF document.
pdf metadata editor; c# read pdf metadata
Figure 3. An undirected graph with two layers, 0 and 1.   
spectral- 
Renders the network using eigenvectors of the adjacency matrix associated with the 
graph. Attempts to reduce edge overlap.   
Figure 4. A directed graph drawn using the spectral algorithm.   
spectral-hierarchy
‐ 
This option first arranges the nodes hierarchically then arranges each 
layer in the hierarchy using the eigenvectors of the adjacency matrix.   
Figure 5. A directed graph drawn using the spectral‐hierarchy algorithm.   
default - 
When no valid option is entered the viewer simply places all nodes in a stack on top 
of each other.   
Node Element   
The node element is used to create nodes for the graph. The attributes allow users to specify the 
aesthetics of the nodes (which can be used to distinguish classes of nodes), provide additional 
information to the chosen layout algorithm, and add a hyperlink to be displayed within the description 
box.  
Note: Since FNV was designed to visualize small to moderately sized networks it is not recommended that 
users create more than 70 nodes, unless the predefined graph drawing algorithm is used.   
XML Examples: 
<node id="1" name="SRI" bgcolor="0xbbbbff" 
url="http://www.uniprot.org/uniprot/?query=SRI&sort=score" shape="roundbox" 
textsize="12" textcolor="0x000000" level="0"> 
<node id="2" name="Dopamine" bgcolor="0xFF9999" 
url="http://stke.sciencemag.org/cgi/cm/stkecm;CMN_21164" shape="circle" 
textsize="20" textcolor="0x330000" nodesize=”3” xPos="750" yPos="0">
id 
–   
Unique number used to identify the node.   
(IMPORTANT: Node ids must be numeric, in order, start with 1, and increment by one with 
no skipping.) 
name 
–   
Name of the node which is displayed on the node.   
bgcolor 
–    A hex color code which specifies the background color of the node, useful for delineating 
node types.   
url 
–   
(optional) A link that will automatically open when the node description is clicked.   
shape 
–   
Used to specify node shape can be used to distinguish particular types of nodes. 
Options: 
box
circle
roundbox
triangle: 
Alternatively an image can be used by using the 
image 
option.
textsize 
–    Controls the font size of the name on the node.   
textcolor 
–   A hex color code value specifying the color of the text on the node.   
Node Specific Attributes:   
nodesize 
–    When circle nodes are created this option can be used to set the diameter.   
imageurl 
–    When image node is selected the option specifies the location of the image to be used.   
Layout Algorithm Specific Attributes:   
level 
– 
Used only when the radial layout mode is selected. Levels represent distance from the radius,   
therefore level 0 is in the center of the circle.   
xPos – 
Used only when the predefined option is selected. Specifies in pixels the x coordinate   
for the location of the node.   
yPos – 
Used only when the predefined option is selected. Specifies in pixels the y coordinate for the 
location of the node.   
A description can be placed in‐between the 
<node>
tags enclosed in 
<desc>
tags. This description can 
contain plain text and images. It is displayed in the description box whenever the node is moused over.   
Note: The description is limited to 400 pixels wide. Images wider will be cutoff.   
Edge Element   
The edge element is used to connect two nodes. The attributes are used to specify the type and look of the 
edges.   
XML Examples: 
<edge id="1" name="Binding" type="bidirect" thickness="3" url="" 
source="1"target="2" color="0x333333">  
<edge id="2" name="Regulation" type="arrow" 
thickness="4"url="http://stke.sciencemag.org/cgi/cm/stkecm;CMR_21000" 
source="56"target="4" color="0x333333">  
id 
–    Number used to identify the edge.   
name 
– (optional) Used to describe the type of edge.   
type 
– Specifies the type of edge to draw between the source and target nodes.   
Options:   
bidirectional
– A solid line attached to two nodes.   
Figure 6. A bidirectional line signifying a non‐covalent interaction between two proteins CRK and C3G.   
arrow 
– A line that points from the source node to the target node.   
Figure 7. An arrow signifying an interaction between a ligand and a protein.   
ortholine 
– A line that represents suppression of the target node.   
Figure 8. A protein‐protein interaction in which G_alpha_o suppresses Rap1GAP.   
thickness 
– A positive whole number used to specify the width of the edge.   
url 
– (optional) A link that can be displayed when clicking the edge.   
source 
– The source node’s id number (IMPORTANT: if this is omitted or incorrect a random source node is   
  selected).   
target 
– The target node’s id number (IMPORTANT: if omitted or incorrect edge will not appear).   
color 
– A hex code used to specify the edge color.   
A description can also be placed in between the <edge> tags enclosed in <desc> tags. This description, similar 
to the node description, can contain plain text and images. It is displayed in the description box when the 
edge is moused over.   
Using the Viewer   
As discussed in the running and installation instructions the viewer can be run by double clicking on the 
graphviewer.swf or embedded within a webpage. Once loaded the network described by the file 
network.xml should be displayed. (If nothing is displayed, make sure that the xml file is named 
network.xml and is in the same directory as graphviewer.swf. Be sure to also check the syntax of the xml 
file and make sure that all elements are closed properly and that all edges reference valid nodes.)   
Documents you may be interested
Documents you may be interested