Archive for April, 2011
How to Make a SWFLoader Scroll
By default, the SWFLoader doesn’t scroll so developers often wrap it in a scrolling mx container like a Canvas (since it does scroll and it’s scroll policies are set to auto). What I didn’t think about was that I’d have to know the actual size of the content I was loading in order for the scrollbars to appear. I tested this in both an MX Application and a Spark Application with Flex SDK 4.5 and achieved the same results.
To reiterate, my small test app below suggests that developers must know the size of the content they are loading in SWFLoader in order for the scrollbars to appear around that loaded content.
When I think about it, it makes sense…at the same time it caught me by surprise when I first implemented it in an app. Hoping this piece of info helps developers loading legacy or 3rd party SWFs they don’t have control over.
<?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"
minWidth="0"
minHeight="0"
creationComplete="init(event)"
backgroundColor="#FF0000"
>
<fx:Script>
<![CDATA[
import mx.containers.Canvas;
import mx.controls.SWFLoader;
import mx.events.FlexEvent;
protected function init(event:FlexEvent):void
{
var swfLoaderContainer:Canvas = new Canvas();
swfLoaderContainer.percentWidth = 100;
swfLoaderContainer.percentHeight = 100;
this.addElement(swfLoaderContainer);
var swfLoader:SWFLoader = new SWFLoader();
swfLoader.width = 1200; // does not add scroll bar
swfLoader.height = 800; // does not add scroll bar
// swfLoader.percentWidth = 100; // DOES NOT add scroll bar
// swfLoader.percentHeight = 100; // DOES NOT add scroll bar
swfLoader.scaleContent = false;
swfLoaderContainer.addElement(swfLoader);
var context:LoaderContext = new LoaderContext(false, new ApplicationDomain());
swfLoader.loaderContext = context;
swfLoader.load("SWFToLoad.swf");
}
]]>
</fx:Script>
</s:Application>
Getting Flex Spark & MX Components to Use Embedded Fonts :: Part 2
Posted by brianr in flex, flex builder on April 6th, 2011
In my last post about this I found an ugly workaround in order to get embedded fonts to work in both MX and Spark Components. Since then I’ve learned the best way to do this is simply to select the checkbox in the Project Properties -> Flex Compiler -> “Use Flash Text Engine in MX Components” checkbox = true.
NOTE: Using Flash Builder Burrito and Flex Hero 4.5 — haven’t tested to see if this was the previous issue or not but I wanted to make note of it.
This seems to make embedded fonts play nice in both MX and Spark components in almost every situation. The one I couldn’t seem to get around was mx:Legend.
When I embedded a font and used this compiler setting, I would randomly see only a couple of my legend labels show up. However, by using just a small piece of my old workaround I was soon back in business.
NOTE: There is one rather large drawback to this though…you have to embed your font twice — once for Spark and once for MX.
Your css should look something like this:
/********************************************************
/ Fonts
/*******************************************************/
@font-face
{
src: url("/resources/font/MyriadPro-Regular.otf");
font-family: SparkEmbeddedFont;
font-weight: normal;
embed-as-cff: true;
}
@font-face
{
src: url("/resources/font/MyriadPro-Bold.otf");
font-family: SparkEmbeddedFont;
font-weight: bold;
embed-as-cff: true;
}
/********************************************************
/ NOTE: Due to an issue with the legend and embedded
/ fonts we need to embed the font as non cff too.
/*******************************************************/
@font-face
{
src: url("/resources/font/MyriadPro-Regular.otf");
font-family: MXEmbeddedFont;
font-weight: normal;
embed-as-cff: false;
}
@font-face
{
src: url("/resources/font/MyriadPro-Bold.otf");
font-family: MXEmbeddedFont;
font-weight: bold;
embed-as-cff: false;
}
/************************************************************
/ Flex Class-Level Styles
/************************************************************/
s|Application
{
font-family: SparkEmbeddedFont;
color: #000000;
}
mx|LegendItem, mx|PieSeries
{
font-family: MXEmbeddedFont;
font-size: 12;
textFieldClass: ClassReference("mx.core.UITextField");
}