<html>
<head>
<title>Web Graphics with FrontPage: Parametrized Interactive Shapes</title>
<Style>
BODY, P, TD { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt }
H2,H3,H4,H5 { color: #ff9900; font-weight: bold; }
H2 { font-size: 13pt; }
H3 { font-size: 12pt; }
H4 { font-size: 10pt; color: black; }
PRE { BACKGROUND-COLOR: #FBEDBB; FONT-FAMILY: "Courier New", Courier, mono; WHITE-SPACE: pre; }
CODE { COLOR: #990000; FONT-FAMILY: "Courier New", Courier, mono; }
</style>
<link rel="stylesheet" type=text/css href="http://www.codeproject.com/styles/global.css">
</head>
<body bgcolor="#FFFFFF" color=#000000>
<pre>
Title: Interactive Web Graphics with VML: Parametrized Shapes in FrontPage
Author: Oleg Kobchenko
Email: olegyk@yahoo.com
Environment: Microsoft Office, Windows, Internet Explorer
Keywords: web, graphics, vml, frontpage, autoshapes, parametrized, interactive, shapes
Level: Intermediate
Description: Building custom autoshapes with Frontpage
Section Web
SubSection Graphics
</pre>
<h2>Introduction</h2>
<p>In Microsoft Office applications such as Word and Power Point there
has been a long-time useful feature of autoshapes: 2D arrows, callouts, etc.
Besides being able to resize and rotate with ordinary corner handles, some
of the autoshapes has special kind of handles, marked with yellow diamonds,
that allow changing specific properties of the shape, such as form of the arrow
or position of the callout pointer.</p>
<p>Although, convenient in their use, it would be yet more fun
to create your own autoshapes, both for some original illustration
and to model interesting geometric behavior. It turns out there is
such possibility using another member of Office family, FrontPage, which
take a more open source approach to editing its documents: HTML and
related web formats.</p>
<p>Microsoft took a universal approach with regard to vector graphics
in Office applications, so with FrontPage you will get the same kind of
autoshaped as in other Office products. However, unlike Word and PowerPoint,
editing HTML source will allow not only to watch the autoshapes "in the making",
but to create ones of your own.</p>
<p>To implement web graphics in Office and Internet Explorer they use
VML: Vector Markup Language.
Microsoft pioneered web graphics, which allowed its users to get there first.
Though, it had to stuck with a web format, which did not make into a standard.
VML is in the status of submission in W3C, though it is present in all Microsoft
Office and Internet Explorer covering most of the computer user base.
So it's not a disadvantge after all.
<h2>Background</h2>
<p>VML takes a traditional vector-based approach that you would find in other
graphics formats, such as SVG. There is a canvas, phisical coordinate space
of the web page and logical coordinates. Although there are predefined
shapes, such as line, rectangle, oval, etc., the basic building block as
in PostScript or PDF is a generic shape. It has very common geometric sublanguage: moveto (m), lineto (l), bizier (c), etc. In addition, there are styling tags
for stroked and fills. So regular, vector based programmer fill feel at ease with VML.</p>
<h2>Basic VML Example</h2>
<p>For documentation and examples, there are links at the Reference section.
Though, to give a feel of VML we will start with a small example, which also
contain the minimal glue code to make it work in Internet Explorer.</p>
<pre lang=html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style> v\:*{ behavior: url(#default#VML) } </style>
</head><body>
<v:group style='width:200pt;height:200pt' coordsize="1000,1000">
<v:rect style="width:300;height:200" fillcolor="red" />
<v:oval style="top:250;width:300;height:200" fillcolor="green" />
<v:shape style="left:350;" stroked="true" strokecolor="blue"
style="left:250;width:1000;height:1000"
path="m 0 0 l 200 100,300 400,200 300,300,0 e" />
</v:group>
</body></html>
</pre>
<p>The following steps are necessary:</p>
<ul>
<li>Namespace declaration as in the <html> tags above, or inline as<br>
<b><xml:namespace prefix='v'/></b></li>
<li>CSS definition binding all tags of v:* namespace to the VML behavior<br>
<b><style> v\:*{ behavior: url(#default#VML) } </style></b></li>
<li>Now any VML tags are part of regular HTML DOM, however a mapping between
the physical page coordinates (points, for example) and world coordinate of
the VML shape is convenient, on every top-level shape, such as <v:group>:<br>
<b><v:group style='width:200pt;height:200pt' coordsize="1000,1000"></b></li>
<li>Now local unit-less coordinates are good inside. They are give either
inside CSS attributes or specific VML ones, depending on shape type:<br>
<b><v:rect style="width:300;height:200" ... /></b> or<br>
<b><v:shape style="left:350;" ... style="left:250;width:1000;height:1000"
<br>
path="m 0 0 l 200 100 ... e" /></b></li>
</ul>
<p>Note: generic shape needs both CSS dimentions for the bounding box, as well
as path coordinates.</p>
<p>You can copy this example to and save it as an HTML page to view in Internet
Explorer. You can experiment with more of your own graphics.</p>
</p>
<h2>Autoshapes in FrontPage</h2>
<p>To get the idea how autoshapes look and feel in FrontPage, it's a good idea
to experiment with the build-in autoshapes. Create new web file in FrontPage. I
recommend using the Split mode, as found in FrontPage 2003, as it allows to make
changes in either source or design mode with instant switching and ability to
observe changes in one view as they are made in the other. The latest version of
FrontPage also has such cool and graphics useful features fore design mode as
rulers, grid and image tracing capability.</p>
<p>To begin using autoshapes, enable the Drawing toolbar, as seen in the above
image, select AutoShapes, and pick one from the menu, such as Block Arrows→Right
Arrow. You should see a cross hair cursor. Position it on the canvas and drag to
the opposite corner. Now observe the HTML source. You should see the VML code
similar to our basic example. You will notice additional markup, such for the <b>
o:*</b> namespace, which is necessary for Office-specific housekeeping. It will
have to stay while in FrontPage, though may be stripped for Internet Explorer,
it's a design-time code. One key part of the code is the <b><v:handles></b>
tags, which make the autoshape interactive.</p>
<p>To experience interactivity, select the shape in design mode. You should see
the corner handles: little white circles and a green one on the top, which allow
to resize and rotate the figure. But the most interesting one is of the yellow
diamond kind, those are the one that allow changing properties unique to shape;
and it's they which correspond to the <b><v:handles></b> tags. If you have block
arrow, the diamond changes the profile of the arrow head.</p>
<p>Notice, as you resize or rotate the shape, the common CSS properties change:
width and height, as well as less common: rotation. Now when you change the
position of the diamond handle, it does no reflect directly on a geometrical
attribute. Instead, the attribute called <b>adj</b> is changed, which stands for
"adjustment". Geometry is affected indirectly by means of the <v:formulas> tags,
which reference the #N parameters in the handles and define the @M entries in
the formulas to be used in geometric attributes proper, such as <b>path</b>.
Hewh!</p>
<p>So this explains the mechanism of interactive autoshapes in VML and
FrontPage. Next, we will use it to build such autoshapes of our own.</p>
<h2>Creating Custom Interactive Autoshapes</h2>
<p>By now you should have discovered how the autoshapes work in FrontPage. It is
really simple and elegant. So without further theory, we will look at a concrete
example and describe the critical points. </p>
<p>The shape is a Bezier curve with fixed
end points and control points associated with the diamond handles, as seen in
the above figure. In addition,
it has a two-line frame to define the boundaries and lines connecting the end
points with the control points, something you would find in vector editors.</p>
<pre lang=html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<style>
v\:* { behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
</style>
<link rel="File-List" href="ParamShapes_Sample01_files/filelist.xml">
<!--[if gte mso 9]><xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
</xml><![endif]-->
</head><body>
<p><v:shape id="biz01" o:spid="_x0000_s1025"
style='width:200.25pt;height:200.25pt' coordsize="" o:spt="100" adj="378,801,903,468"
path="m,l,1000r1000,em250,250l@0@1em250,250c@0@1@2@3,750,750em750,750l@2@3e">
<v:stroke joinstyle="round"/>
<v:formulas>
<v:f eqn="val #0"/>
<v:f eqn="val #1"/>
<v:f eqn="val #2"/>
<v:f eqn="val #3"/>
</v:formulas>
<v:path o:connecttype="segments"/>
<v:handles>
<v:h position="#0,#1" xrange="0,1000" yrange="0,1000"/>
<v:h position="#2,#3" xrange="0,1000" yrange="0,1000"/>
</v:handles>
</v:shape></p>
</body></html>
</pre>
<p>Here is the key aspects we need to keep in mind</p>
<ul>
<li>Start with a simple VML shape, such as in the basic example</li>
<li>Next you need to identify which geometric values you want to be
controlled by the diamond handles</li>
<li>Create a formula entry for each such controlled value and replace it
with a <b>@M</b> number corresponding to the formula index</li>
<li>Create a handle with <b>position="#N1,#N2"</b> for <b>X</b> and <b>Y</b>
and replace the corresponding formula entries with <b>#N1</b> and <b>#N2</b>
references</li>
<li>Finally, create the adj="..." attribute on the <v:shape> to hold the
dynamic values of the handles and populate the with the defaults</li>
</ul>
<p>This is it. Now you've created a custom interactive shape with diamond
handles, just as the Office autoshapes. You can create more complex and
interestings shapes of your own. While the interactive handles are available in
FrontPage, the resulting vector graphics is vieable with Internet Explorer.</p>
<h2>Points of Interest</h2>
<p>Similar interactive behavior can be achieved with other vector graphics
formats, such as web standard SVG or Macromedia Flash format SWF. Although,
there is no authoring built-in support would be available, which means you need
to code all the interactive logic yourself, it is possible to create some kind
of framework with JavaScript or ActionScript, which could make it possible to
have compact definitions of generic interactivity. The advantage of such
approach is that the ability to tweaking of the shapes will be present in the
runtime on the web, not only in the authoring time, as with FrontPage.<h2>References</h2>
<p><i>VML: Vector Markup Language</i>, Submission to W3C<br>
<a href="http://www.w3.org/TR/1998/NOTE-VML-19980513">
http://www.w3.org/TR/1998/NOTE-VML-19980513</a>
<p><i>VML Reference</i>, MSDN Library<br>
<a href="http://msdn.microsoft.com/workshop/author/vml/SHAPE/introduction.asp">
http://msdn.microsoft.com/workshop/author/vml/SHAPE/introduction.asp</a>
<h2>History</h2>
<p>08/24/2005 Oleg Kobchenko - Initial Writing.
</body></html>
Submit an article or tip