Embedding SVG files with SPAS 3.0

Difficulty: Easy
Embedding SVG files with SPAS 3.0

Problem

You want to use Scalable Vector Graphics (SVG) images in your SPAS 3.0 based applications.

Solution

Use the free Flex SDK compiler to create your application and the [Embed] metadata tag in ActionScript to embed the SVG image.

Discussion

The Flex SDK compiler uses the [Embed] metada tag to include assets in a SWF file at compile time. This process is similar to the integration of symbols included into the SWF library of a Flash project. The embedding of assets ensures that symbols will be available at run time.

SVG images and GZip compressed SVG images in SVGZ files are supported by the [Embed] metadata tag.

Note that embedded files can considerably increase SWF file size and you cannot import SVG files at run time.

The following sample code shows how to embed and use a SVG file into a "SPAS 3.0 / Flex" compiler application. In this example, we declare the svg file as an Element instance. Element objects are useful to manipulate any kind of objects as if they were native SPAS 3.0 "uiobjects".

Note that the UIContainer class addElement() method always returns objects as instances of the Element class.

package {
	import org.flashapi.swing.*;
	import org.flashapi.swing.event.ScrollEvent;
	import org.flashapi.swing.layout.AbsoluteLayout;
	
	public class Main extends Application {
		
		[Embed(source = "../assets/pencil.svg")]
		public var SvgAsset:Class;
		
		public function Main():void { super(init); }
		
		private function init():void {
			this.bodyVisibility = this.gradientBackground = true;
			
			var panel:PanelContainer = new PanelContainer("Embedding SVG Example", 400, 350);
			panel.shadow = true;
			panel.layout = new AbsoluteLayout();
			
			var label:Label = new Label("Drag the slider to resize the SVG image.");
			label.fontColor = "blue";
			label.move(10, 10);
			
			var slider:Slider = new Slider();
			slider.drawHighlight();
			slider.move(25, 80);
			slider.labels = ["0%", "50%", "100%"];
			slider.value = 50;
			slider.addEventListener(ScrollEvent.SCROLL, scrollHandler);
			
			panel.addGraphicElements(label, slider);
			
			var svg:Element = panel.addElement(new SvgAsset());
			svg.x = svg.y = 80;
			svg.scaleX = svg.scaleY = .5;
			
			function scrollHandler(event:ScrollEvent):void {
				var v:Number = event.target.value;
				svg.scaleX = svg.scaleY = v / 100;
				slider.value = v;
			}
			this.addElement(panel);
		}
	}
}

Result

Get Adobe Flash player

Share this article:

Comments:

There are no comments yet for this article.

Leave a reply

Your email is required but will not be displayed.

To prevent abusive emails, please enter the numbers you see in the image below:

Security code