News • Examples • Documentation • Download • Buy • Forum • Contact
NOTE: This page is from an older version, see the latest version here.

Textfield Plugin textfield.swf / html5:intern Version 1.18

  • A plugin for displaying simple texts.
  • The position and size of the plugin can by adjusted with the standard layer/plugin attributes.
  • When no plugin size will be set, the size of the text itself will be used.
  • For formating the text, a few HTML-tags, simple CSS-styles or BBCode-like tags can be used. But please note that only a small subset of HTML and CSS is supported by the Flashplayer! Don't try to use real HTML / CSS code! CSS-classes are not supported!
  • In the krpano HTML5 Viewer, the textfield plugin is directly integrated into the viewer itself. The internal HTML5 textfield plugin will be automatically used when trying to load a textfield.swf file.

Topics

Syntax

<layer name="text"
       url="textfield.swf"
       align="lefttop" x="10" y="10"
       html="Text[br][b]Bold Text[/b]"
       css="font-family:Arial; font-size:16px; color:#000000;"
       autowidth="auto"
       autoheight="auto"
       vcenter="false"
       padding="2"
       wordwrap="true"
       selectable="false"
       embeddedfonts="false"
       background="true"
       backgroundcolor="0xFFFFFF"
       backgroundalpha="1.0"
       border="false"
       bordercolor="0x000000"
       borderalpha="1.0"
       borderwidth="1.0"
       roundedge="0"
       shadow="0.0"
       shadowrange="4.0"
       shadowangle="45"
       shadowcolor="0x000000"
       shadowalpha="1.0"
       textshadow="0.0"
       textshadowrange="4.0"
       textshadowangle="45"
       textshadowcolor="0x000000"
       textshadowalpha="1.0"
       onautosized=""
       />

Plugin Attributes

Attribute nameTypeDefault value
htmlString""
  • Set the HTML / CSS / BBCode formated text.
  • The HTML / CSS code will be rendered by the Flashplayer (Flash-viewer) or by the Browser (HTML5-viewer)! The Flashplayer itself supports only a very small subset of HTML4! For equal results in Flash and HTML5 only very simple html formating code should be used. Using images inside the html code is not recommended, the Flashplayer was very bad and buggy support here.
  • Here a link to the Flashplayer documentation about the HTML support: http://help.adobe.com/.../TextField.html#htmlText
  • When using the < and > characters is not possible (e.g. inside xml attributes), then the [ and ] characters can be used instead - krpano will convert them automatically. To escape that conversion to be able to get the [ and ] characters itself, use them twice as [[ and ]].
  • There are two possiblites to set the html text:
    1. Either directly in the html attribute: 
      html="[b]Bold Text[/b]"
    2. Or by referring to a <data> xml element and via data:name: 
      html="data:htmltext"
  • It is possible to create links in the html code that can call krpano actions, by using event:actions as link target: 
    <a href="event:showlog(); trace('link clicked');">link</a>
Attribute nameTypeDefault value
cssString""
  • Set the CSS styles for the HTML text.
  • The HTML / CSS code will be rendered by the Flashplayer (Flash-viewer) or by the Browser (HTML5-viewer)! The Flashplayer itself supports only a very small subset of CSS1! For equal results in Flash and HTML5 only very simple css styles code should be used. The usage of CSS classes is not supported
  • Here a link to the Flashplayer documentation about the CSS support: http://help.adobe.com/.../StyleSheet.html
  • There are two possiblites to set the css style:
    1. Either directly in the css attribute: 
      css="text-align:center; color:#FFFFFF; font-family:Arial;"
    2. Or by referring to a <data> xml element and via data:name: 
      css="data:cssstyles"
  • When setting font-sizes, it is important to use 'px' as entity to get the same results in Flash and HTML5.
Attribute nameTypeDefault value
autowidth
autoheight		String
String		"auto"
"auto"
Automatic plugin sizing - automatically resize the plugin to the same size as the text.

Possible settings:
  • auto - Automatic mode - when no plugin size will be set, use the text size as plugin size.
  • true - Always use use the text size, ignore the plugin size setting.
  • false - Don't do any automatic plugin size changing.

The onautosized event can be used to get informed about the automatic size changes.
Attribute nameTypeDefault value
vcenterBooleanfalse
  • Vertically center the text within the given plugin height.
  • Tip - for horizontal centering use the css style text-align:center;
Attribute nameTypeDefault value
paddingString"2"
Padding / space in pixels around the text. Can be individually for each side.

There are 4 different ways to set the paddings (same as in CSS):
  • padding="25"
    • all four paddings are 25px
  • padding="25 50"
    • top and bottom paddings are 25px
    • right and left paddings are 50px
  • padding="25 50 75"
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px
  • padding="25 50 75 100"
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px
Attribute nameTypeDefault value
wordwrapBooleantrue
  • Defines if the text should automatically wrap around to new lines when the plugin width will be reached. Only full words will be wrapped.
  • This setting will not have any effect when autowidth is enabled.
Attribute nameTypeDefault value
selectableBooleanfalse
  • Should the text be selectable / markable by the user.
Attribute name (Flash only)TypeDefault value
embeddedfontsBooleanfalse
  • Enables the usage of embedded Flash fonts.
  • When enabled and there is no embedded font with the given font-settings, the text that is using that font will not be shown.
  • For more details about embedded Flash fonts see here - Using Embedded Flash Fonts.
Attribute nameTypeDefault value
background
backgroundcolor
backgroundalpha
 Boolean
int
Number		 true
0xFFFFFF
1.0
  • Draw a background behind the textfield.
  • backgroundcolor - The color of the background (white by default).
  • backgroundalpha - The alpha transparency of the background.
Attribute nameTypeDefault value
border
bordercolor
borderalpha
borderwidth
 Boolean
int
Number
Number		false
0x000000
1.0
1.0
  • Draw a border around the textfield.
  • bordercolor - The color of the textfield border.
  • borderalpha - The alpha transparency of the textfield border.
  • borderwidth - The line-width of the textfield border (will be added outside of the textfield).
Attribute nameTypeDefault value
roundedgeString"0"
  • Make the textfield edges round.
  • The values defines the radius of the rounded edges in pixels.
  • Four values can be set, one for each edge (separated by space characters). They are given in the order: top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted, it is the same as top-right. If bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left.
Attribute nameTypeDefault value
shadow
shadowrange
shadowangle
shadowcolor
shadowalpha
 Number
Number
Number
int
Number		 0.0
4.0
45.0
0x000000
1.0
Put a box-shadow behind the textfield.
  • shadow - The shadow value defines the distance of the shadow. A value of 0.0 disables the shadow. For a 'centered shadow' or 'glowing effects' use very small values like 0.01.
  • shadowrange - The blurring range of the shadow.
  • shadowangle - The angle of the shadow in degrees.
  • shadowcolor - The color of the shadow
  • shadowalpha - The alpha transparency of the shadow
Attribute nameTypeDefault value
textshadow
textshadowrange
textshadowangle
textshadowcolor
textshadowalpha
 Number
Number
Number
int
Number		 0.0
4.0
45.0
0x000000
1.0
Put a shadow behind the text.
  • textshadow - The textshadow value defines the distance of the shadow. A value of 0.0 disables the shadow. For a 'centered shadow' or 'glowing effects' use very small values like 0.01.
  • textshadowrange - The blurring range of the shadow.
  • textshadowangle - The angle of the shadow in degrees.
  • textshadowcolor - The color of the shadow
  • textshadowalpha - The alpha transparency of the shadow

Plugin Events

Attribute nameTypeDefault value
onautosizedString""
  • This event will be called when automatic sizing (see autowidth and autoheight) will be used and the size of the plugin has changed.
  • Note - due the automatic word-breaking, there can be more than one onautosized event when the width or the html content will be changed. The number of events can differ between Flash and HTML5.

HTML5 Notes

Everytime when an a textfield setting will be changed, internally a whole new text element will be build. Once that building is done and the browser has returned the sizes for the new element, the new text element will replace the current one. This is done to avoid a moving and resizing text during any changes.

Basically there is no problem with that approach, but due the replacing of the elements, it can happen that the browser will lose some mouse events - e.g. when the text will be replaced during an mouse over event, it can be the mouse out event can become missing.

To avoid that problem, a few settings can be changed without the need for rebuilding. These settings wouldn't change the size of the resulting textfield and so it's safe to apply them directly.

These settings are:
Note - the border setting is not included here, because it changes the size of the textfield and requires a rebuilding a recalculation for a correct alignment. To change the border on over/out or down/up events anyway, just change only the borderalpha setting.

Using Embedded Flash Fonts

In Flash its possible to create swf files with embedded fonts. This makes it possible to use specific fonts, even when they are not installed on the users computers.

For building such swf files, it is necessary to compile a small and simple as3 source code file, where all fonts that should be embedded are listed. Here an example for such as3 source code file - embeddedfonts.as. The textfield plugin itself don't need to be recompiled for using embedded fonts. A whole full example, including a batch file for automatic compiling the as3 file to a swf file, is included in the Textfield Plugin Sourcecode package.

When the swf file with the embedded fonts is ready, it need to included in the xml as <plugin> with preload=true. The textfield itself need to select the font and set embeddedfonts=true.

Here an example: 
<!-- preload the embedded fonts swf -->
<plugin url="embeddedfonts.swf" preload="true" devices="flash" />
	
<!-- the test textfield with 'myFont' and embeddedfonts=true -->
<layer name="test"
       url="textfield.swf"
       align="center"
       css="font-family:myFont; font-size:16px;"
       html="Test text..."
       embeddedfonts="true"
       padding="10 20"
       />

Textfield Plugin Sourcecode

The whole Actionscript3/Flash source code of the krpano textfield plugin (textfield.as) is here available for free download. For learning krpano plugin development or for any kind of customization.

Batch files (Windows only) for automatically compiling the plugin source code to a swf file are included in the download package. Additionally there also sample files for building swf files with embedded fonts.

krpano Flash Textfield Plugin Sourcecode  (Source code and building scripts, ZIP, ~5 MB)