Now that Navigation has been sparkified, it'd be best to just use a custom skin to add your buttons. The source files for the skins are in the skins folder in the API zip file.Here's an example where I copied the NavigationSkin to a skins folder in my project and modified it.
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (c) 2010 ESRI
All rights reserved under the copyright laws of the United States
and applicable international laws, treaties, and conventions.
You may freely redistribute and use this sample code, with or
without modification, provided you include the original copyright
notice and use restrictions.
See use restrictions in use_restrictions.txt.
-->
<!---
The default skin class for the Navigation component.
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:esri="http://www.esri.com/2008/ags">
<fx:Metadata>
/**
* A strongly typed property that references the component to which this skin is applied.
*/
[HostComponent("com.esri.ags.components.Navigation")]
</fx:Metadata>
<fx:Declarations>
<!--- @private -->
<mx:NumberFormatter id="numberFormatter" rounding="nearest"/>
<esri:NavigationTool id="navTool" map="{hostComponent.map}"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.esri.ags.layers.supportClasses.LOD;
private function formatSliderDataTip(value:Number):String
{
const lod:LOD = hostComponent.map.lods[value];
return lod ? "1:" + numberFormatter.format(lod.scale) : "Error";
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
<s:State name="normalWithSlider"/>
<s:State name="disabledWithSlider"/>
</s:states>
<s:Rect bottom="0"
left="0"
radiusX="10"
radiusY="10"
right="0"
top="0">
<s:fill>
<s:SolidColor alpha="0.5" color="0x000000"/>
</s:fill>
</s:Rect>
<s:VGroup gap="2"
horizontalAlign="center"
minHeight="34"
paddingBottom="5"
paddingLeft="3"
paddingRight="3"
paddingTop="4">
<s:Button id="zoomInButton"
enabled.disabled="false"
enabled.disabledWithSlider="false"
skinClass="com.esri.ags.skins.NavigationZoomInButtonSkin"
toolTip="{resourceManager.getString('ESRIMessages', 'zoomInTooltip')}"/>
<mx:VSlider id="slider"
dataTipFormatFunction="formatSliderDataTip"
dataTipPlacement="right"
enabled.disabled="false"
enabled.disabledWithSlider="false"
enabled.normalWithSlider="true"
height="160"
includeIn="normalWithSlider,disabledWithSlider"
liveDragging="false"
maximum="{hostComponent.map.lods.length - 1}"
showDataTip="true"
snapInterval="1"
tickColor="#000000"
tickInterval="1"
tickLength="3"
tickOffset="-3"
tickThickness="1"
value="{hostComponent.map.level}"/>
<s:Button id="zoomOutButton"
enabled.disabled="false"
enabled.disabledWithSlider="false"
skinClass="com.esri.ags.skins.NavigationZoomOutButtonSkin"
toolTip="{resourceManager.getString('ESRIMessages', 'zoomOutTooltip')}"/>
<s:Button click="navTool.zoomToFullExtent()" label="Full"/>
</s:VGroup>
</s:Skin>
Here's how you can then use it in your app.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:esri="http://www.esri.com/2008/ags">
<fx:Style>
@namespace esri "http://www.esri.com/2008/ags";
esri|Navigation
{
skin-class: ClassReference("skins.NavigationSkin");
}
</fx:Style>
<esri:Map>
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
</esri:Map>
</s:Application>