Click here to Skip to main content
13,147,044 members (64,290 online)
Click here to Skip to main content


16 bookmarked
Posted 24 Aug 2005

Interactive Web Graphics with VML: Parameterized Shapes in FrontPage

, 24 Aug 2005
Building custom autoshapes with Frontpage.
<title>Web Graphics with FrontPage: Parametrized Interactive Shapes</title>
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; }
<link rel="stylesheet" type=text/css href="">
<body bgcolor="#FFFFFF" color=#000000>

Title:       Interactive Web Graphics with VML: Parametrized Shapes in FrontPage
Author:      Oleg Kobchenko
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


<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.


<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>
&lt;html xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot;&gt;
    &lt;style&gt; v\:*{ behavior: url(#default#VML) } &lt;/style&gt;

&lt;v:group style='width:200pt;height:200pt' coordsize=&quot;1000,1000&quot;&gt;

    &lt;v:rect style=&quot;width:300;height:200&quot; fillcolor=&quot;red&quot; /&gt;

    &lt;v:oval style=&quot;top:250;width:300;height:200&quot; fillcolor=&quot;green&quot; /&gt;

    &lt;v:shape style=&quot;left:350;&quot; stroked=&quot;true&quot; strokecolor=&quot;blue&quot; 
        path=&quot;m 0 0 l 200 100,300 400,200 300,300,0 e&quot; /&gt;



<p>The following steps are necessary:</p>
	<li>Namespace declaration as in the &lt;html&gt; tags above, or inline as<br>
	<b>&lt;xml:namespace prefix='v'/&gt;</b></li>
	<li>CSS definition binding all tags of v:* namespace to the VML behavior<br>
	<b>&lt;style&gt; v\:*{ behavior: url(#default#VML) } &lt;/style&gt;</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 &lt;v:group&gt;:<br>
	<b>&lt;v:group style='width:200pt;height:200pt' coordsize=&quot;1000,1000&quot;&gt;</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>&lt;v:rect style=&quot;width:300;height:200&quot; ... /&gt;</b> or<br>
	<b>&lt;v:shape style=&quot;left:350;&quot; ... style=&quot;left:250;width:1000;height:1000&quot;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; path=&quot;m 0 0 l 200 100 ... e&quot; /&gt;</b></li>

<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>


<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&#8594;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>&lt;v:handles&gt;</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>&lt;v:handles&gt;</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 
&quot;adjustment&quot;. Geometry is affected indirectly by means of the &lt;v:formulas&gt; 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>. 

<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>
&lt;html xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot; xmlns:o=&quot;urn:schemas-microsoft-com:office:office&quot; 
    v\:* { behavior: url(#default#VML) }
    o\:* { behavior: url(#default#VML) }
    &lt;link rel=&quot;File-List&quot; href=&quot;ParamShapes_Sample01_files/filelist.xml&quot;&gt;
    &lt;!--[if gte mso 9]&gt;&lt;xml&gt;&lt;o:shapedefaults v:ext=&quot;edit&quot; spidmax=&quot;1027&quot;/&gt;

&lt;p&gt;&lt;v:shape id=&quot;biz01&quot; o:spid=&quot;_x0000_s1025&quot;
        style='width:200.25pt;height:200.25pt' coordsize=&quot;&quot; o:spt=&quot;100&quot; adj=&quot;378,801,903,468&quot;
     &lt;v:stroke joinstyle=&quot;round&quot;/&gt;
        &lt;v:f eqn=&quot;val #0&quot;/&gt;
        &lt;v:f eqn=&quot;val #1&quot;/&gt;
        &lt;v:f eqn=&quot;val #2&quot;/&gt;
        &lt;v:f eqn=&quot;val #3&quot;/&gt;
    &lt;v:path o:connecttype=&quot;segments&quot;/&gt;
        &lt;v:h position=&quot;#0,#1&quot; xrange=&quot;0,1000&quot; yrange=&quot;0,1000&quot;/&gt;
        &lt;v:h position=&quot;#2,#3&quot; xrange=&quot;0,1000&quot; yrange=&quot;0,1000&quot;/&gt;


<p>Here is the key aspects we need to keep in mind</p>
	<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=&quot;#N1,#N2&quot;</b> for <b>X</b> and <b>Y</b> 
	and replace the corresponding formula entries with <b>#N1</b> and <b>#N2</b> 
	<li>Finally, create the adj=&quot;...&quot; attribute on the &lt;v:shape&gt; to hold the 
	dynamic values of the handles and populate the with the defaults</li>

<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=""></a>

<p><i>VML Reference</i>, MSDN Library<br>
<a href=""></a>


<p>08/24/2005 Oleg Kobchenko - Initial Writing.


By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Oleg Kobchenko
Web Developer
United States United States
No Biography provided

You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170915.1 | Last Updated 24 Aug 2005
Article Copyright 2005 by Oleg Kobchenko
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid