FAQs

From Frontal Wiki

Jump to: navigation, search

Contents

Does Frontal work with other web languages & technologies?

Yes. Frontal works seamlessly with many technologies like JavaScript, AJAX, XML, HTML, and CSS.

See Two-Way Communicating between JavaScript and Frontal Scripts for details of how JavaScript may be integrated with Frontal. Also, Frontal scripting is very similar to JavaScript and so you may leverage your knowledge directly. You may also be able to evaluate certain JavaScript code as a Frontal script. See Frontal Markup for details.

Through the JavaScript integration, Frontal may access your AJAX web services or you may also call them directly via Frontal script as described in Networking in Frontal.

You may work with your XML data files using the standard Flash API classes like URLRequest, URLLoader, XML and XMLList all of which are available through Frontal scripting.

Frontal integrates into your HTML page via the SEO Converter in order to ensure your rich media content is visible to the search engines.

It's easy to integrate Frontal code with web analytics apps (see our Google Analytics integration here), multivariate testing apps, CMS's, etc.

How do I run Frontal on an external web domain?

If you already have your own domain name and hosting, and would like to publish the site you've created to this location, then you'll need to download a Frontal deployment package here.

Instructions for deployment can be found at the following location:

http://www.frontalcode.com/wiki/index.php/Deploying_Frontal

For more advanced customizations you may to download the source code to build your own Frontal Renderer here.

Instructions for building your own Frontal Renderer can be found at the following location:

http://code.google.com/p/frontal/wiki/Building_the_Frontal_Renderer

Why does Flash show me security warnings when I run Frontal locally?

The Flash Player's security settings are such that by default it will not allow SWFs running locally from the disk to access the Internet. This is what this error is about and getting it to go away and be a little cumbersome. We go through the steps here. Details

First, if you happen to read this before you double-click index.htm then you can jump down to "Setting the Flash Settings."

So you doubled clicked index.htm and got an error like this: 

   Adobe Flash Player has stopped a potentially unsafe operation. 

   The following local application on your computer or network: 

   c:\deployment_pkg\frontal_renderer.swf 

   is trying to communicate with this Internet-enabled location: 

   c:\deployment_pkg\index.htm 

   To let this application communicate with the Internet, click Settings. You 
   must restart the application after changing your settings.

If you're like me, you clicked settings, then said to allow the popup and then stared when nothing happened. So then like me, you went directly to the Flash Settings Manager here:

http://macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html

and saw that it was blank! What to do? Well, the fix I found was to temporarily turn off the Firefox popup blocker through Tools > Options > Content. Then I double-clicked index.htm and this time the Settings... button worked and showed me the Flash settings panel.

Other people have found this posting helpful:

http://sebleedelisle.com/2009/12/flash-player-settings-panel-nightmare/

Setting the Flash Settings In the settings manager, go to the "Global Security Settings" panel and click "Edit locations... > Add location..." and add the folder of the unzipped deployment package. If you trust yourself, you could also add the entire drive as being trusted.

And Clean Up! Okay, that should do it. You should now be able to double click index.htm and have it work no problem. Just remember to turn your pop up blocker back on.


Does Frontal support deep linking?

Yes. Take a look here to see how this is done.

Is Frontal SEO compliant? How does it work?

Yes, it is. Subscribers can either use the Frontal SEO Converter to manually convert their Frontal code into pure, formatted HTML, or you can purchase and install the Frontal SEO Module onto your web server -- it automatically translates your Frontal code and serves the resulting HTML to search engines. Go here for more information.

What version of the Frontal render do I have?

The script command "com.frontalcode.DocumentManager.version" returns the version. For example, add this to your Frontal document to see the version of the renderer: 

<script><![CDATA[
com.frontalcode.Debugger.msg ( com.frontalcode.DocumentManager.version );
]]></script>

Alternately, open the Frontal console (Ctrl-Ctrl-Ctrl-4-1-1) and paste "com.frontalcode.DocumentManager.version" in the command line.

Why isn't my text fading?

Certain text transformations can only be done when the text's font is embedded. This includes fading and rotation. See text#System and Embedded Fonts for details.

Why can't my font-size be greater than 127px?

This is a limitation of the Flash TextField class. Use a combination of the styles scale and font-size to achieve larger text.

Why don't italic and bold work?

These faces need to be explicitly embedded. See text#System and Embedded Fonts for details.

Also be sure that you are using CDATA tags to escape the contents of your text tag. See Frontal Markup for details.

How do I add a link to my Frontal definition?

The frLink style class in The Default Frontal Style Sheet makes it easy. When this style class is applied, use the attribute "href" and "target" just like you would on an HTML anchor tag. For example: 

<text class="frLink" href="http://www.frontalcode.com/" target="_blank">Go to Frontal</text>

How do I jump to a cuepoint in a video?

See video#Jumping to a Cue Point.

How do I access attributes with namespaces in an XML document?

Since Frontal script does not support all of the E4X syntaxes, it is necessary to use the Flash QName class.

For example, in an Atom feed, we might expect this to work: 

var results = new XML ( atomFeedData );
var contentResults = results.entry.content;

But it doesn't because the entry and content tags are in their own XML namespace. Because of that, we need to use a QName to access them. 

var results = new XML ( atomFeedData );
var entry = new QName ( results.namespace ( ).uri, "entry" );
var content = new QName ( results.namespace ( ).uri, "content" );
var contentResults = results [ entry ] [ content ]

How do I create some space between my text and the scrollbar?

The default scrollbar does not provide any margin between it and the contents it is scrolling. This can look bad in some cases. To add a margin, first set the scrollbar width to the width of the scrollbar and the width of the margin. For example, if we want a 10 pixel wide scrollbar and a 10 pixel margin, then we set the scrollbar-width style to "20px": 

scrollbar-width: 20px;

Then we set the scrollbar's track to be 50% of the total width. This will make it 10 pixels wide. And we pin the track of the vertical scrollbar to the right thus leaving 10 blank pixels to its left: 

    .frScrollbarVert [name=track]
    {
        // With these styles, we say that the scrollbar should take up half of
        // the available width set with the style scrollbar-width. This will
        // create a gutter between the text and the scrollbar.
        //
        width: 50%;
        right: 100%;
    }

Why are my scrollbars and progress indicators ignoring their styles?

It's likely not that they are ignoring their styles but simply that other styles are being applied to them. Remember how scrollbars are created - they are simply divs and other visual elements inserted into your Frontal document where the scrollbar should be rendered. As a consequence, they are influenced by all styles in your style sheet and not just those in The Default Frontal Style Sheet. So if in your style sheet, you specify that all 'div' tags should have green backgrounds and red borders, then this will likely affect your scrollbars to since they contain 'div' tags.

How do I delay an action?

Use Event Scheduler.

Why does my style tween just jump to the new style value?

There needs to be a valid start point for the style tween. See Tweening Styles#Caveats Regarding Style Initialization.

Why doesn't my video cue point interaction get called?

Be sure the capitalization is correct. That is, if the cue point is named "cuePoint1" then the interaction should be named "oncuePoint1" and not "onCuePoint1".

Why doesn't my network operation work?

It's possible that there is a broken URL or a security issue. See Debugging Frontal#Using Firebug to Monitor Network Traffic for some debugging ideas. If it's an issue of there being a crossdomain.xml policy file on the server but it's not being accessed, then try adding a script tag like this to your Frontal document to get Flash to load its permissions: 

System.loadPolicyFile ( put the URL of the policy file in quotes here );

Why does my movie work locally (through the FLash IDE) but not when running from a web browser?

Flash enforces different security policies when running locally versus when running through a web server. See the Flash documentation for details.

You may have separate Flash player versions in your browser versus your IDE that may affect the playback.

Why when I display the same video in multiple video tags does it not show up right away?

The Flash FLVPlayback component seems to require the first instance to play it to complete load the video prior to playing it in any other instances.

Why does my text align 2 pixels away from where I specify?

See Text#The 2-Pixel Text Gutters.

How do I stack interactive objects without breaking the behavior of lower elements?

For example, here we have a link over an image. When we roll over the image, its brightness changes but this is undone when we roll over the link. 

<style><![CDATA[
    img:hover
        {
            brightness: 200;
        }
    img
        {
            width: 320px;
            height: 240px;
        }
    text
        {
            color: orange;
        }
]]></style>
<text class="frLink" style="z-index: 10;" href="http://www.frontalcode.com/" target="_blank">Go to Frontal</text>
<img style="left: 0px; top: 0px;" src="http://frontalcode.com/assets/images/image_1.jpg" />

A possible solution is to use a custom pseudo-class. Here we maintain a custom pseudo-class named "over" that is true if the mouse is over the link or the image. 

<style><![CDATA[
    img:hover, img:over
        {
            brightness: 200;
        }
    img
        {
            width: 320px;
            height: 240px;
        }
    text
        {
            color: orange;
        }
    #myLink:hover
        {
            +onMatch
                {
                    gE("myImg").setPseudoClassState("over",true);
                }
            +onMismatch
                {
                    gE("myImg").setPseudoClassState("over",false);
                }
        }
]]></style>
<text id="myLink" class="frLink" style="z-index: 10;" href="http://www.frontalcode.com/" target="_blank">Go to Frontal</text>
<img id="myImg" style="left: 0px; top: 0px;" src="http://frontalcode.com/assets/images/image_1.jpg" />

How do I stack non-interactive objects on top of interactive objects without breaking the behavior of lower elements?

This is related to the previous FAQ but in this instance we simply want to place non-interactive elements on top of some interactive element and have the interactive element behave as if there were no non-interactive elements on top of it.

For example, here we create a blue div that when rolled over, has its brightness set. Note though that when we roll over the red div in the upper left hand corner, it's as if we rolled out of the blue div. What we'd like is to only have the brightness reset when we roll out of the area of the blue div. 

<style><![CDATA[
document 
	{ 
		layout: stack; 
	}
.interactive
	{
		width: 50%;
		height: 50%;
		background-color: blue;
		@onRollOver
			{
				sS ( "brightness", 100 );
			}
		@onRollOut
			{
				sS ( "brightness", 0 );
			}
	}
.noninteractive
	{
		width: 10%;
		height: 10%;
		background-color: red;
	}
]]></style>
<div class="interactive" />
<div class="noninteractive" />

The answer is to the use the mouse-enabled style on the red div and to set it to false. What this does is ultimately set the mouseEnabled property of the Flash Sprite being used to represent the red div to false. This in turn tells Flash to not consider the red div as a target for mouse events and to let them "seep" through to display objects behind it. Here then is the working example: 

<style><![CDATA[
document 
	{ 
		layout: stack; 
	}
.interactive
	{
		width: 50%;
		height: 50%;
		background-color: blue;
		@onRollOver
			{
				sS ( "brightness", 100 );
			}
		@onRollOut
			{
				sS ( "brightness", 0 );
			}
	}
.noninteractive
	{
		width: 10%;
		height: 10%;
		background-color: red;
		mouse-enabled: false;
	}
]]></style>
<div class="interactive" />
<div class="noninteractive" />

Can I add my own styles?

As long as a style starts with "custom-" then Frontal won't complain about it being unrecognized.

I don't like the form inputs. How do I change them?

The form inputs are completely customizable. See the 'input' tag for more details.

I don't like the scroll bars. How do I change them?

The scroll bars are completely customizable. See Scrollbars for more details.

I don't like the progress indicators. How do I change them?

The progress indicators are completely customizable. See the Progress Indicators for more details.

Why is there extra space before the last line of each of my paragraphs?

There is a known issue with the Flash TextField class that occurs sometimes when rendering <p></p> tags, it will add some extra space before the last line of text. The workaround is to remove the closing "</p>" tags or to simply not use these tags and just use <br /> tags instead.

Why do I get security errors when I try to make a call to JavaScript via the ExternalInterface class?

If you are calling a JavaScript function that came from a domain different from the domain that served the Frontal SWF, then you need to be sure that when the Frontal SWF is embedded in the HTML page, the "allowscriptaccess" parameter is set to "always."

How can I speed up fading transitions and other alpha tweens?

Alpha tweens are computationally intensive, especially when one of the layers being blended contains large images with smoothing enabled. To improve performance, try setting cache-as-bitmap to "true" on image elements that are fading or are revealed by fading elements.

This technique may cause rendering and performance problems if properties of the image in question other than the position change frequently.

Why doesn't "right: 0px;" right-align my element?

Unlike CSS, Frontal interprets values for the styles left, right, top and bottom all from the upper left corner. (CSS treats values for right and bottom as distances from the right and bottom edges.) So setting "right: 0px;" is causing the element to be right-aligned to the left edge of the containing element. If that's the stage then you won't be able to see it.

A question arises then, "How do I align my element exactly 100 pixels from the right edge of the containing element?" With CSS you would use "right: 100px;" but that wouldn't work with Frontal. With Frontal you employ margins to do this.

For example, let's create a div that is 100px to the left of and above the bottom, right corner of the stage. To do this, set both right and bottom to 100% and then apply a margin of 100px to move it 100px away from the corner. 

<style><![CDATA[
	div
		{
			width: 100px;
			height: 100px;
			right: 100%;
			bottom: 100%;
			margin: 100px;
			background-color: blueviolet;
		}
]]></style>
<div />

How are Frontal documents encoded?

All Frontal documents should be encoded in UTF-8 or UTF-16 to comply with the requirements of the Flash URLLoader class.

Why am I not able to access resources on external domains?

For example, why is it not possible to load an image from another server?

The Flash permission model is such that each web server must grant permission to the Flash player to show images, submit forms and load files. The permission-granting process is via things called "policy files" which by default are named "crossdomain.xml." See the Flash documentation for details. Also see Permissions and External Assets, Getting Permission for Submission and SecurityError #2142.

Why doesn't onDoubleClick work?

See the style double-click-enabled.

How do I unset a style?

You can either set the style to its default value or you can set it to the empty string or "undefined". For example, in The Default Frontal Style Sheet, the 'img' tag is given width and height styles of "auto". The following code shows two ways of removing these styles: 

<img src="http://www.frontalcode.com/assets/images/image_1.jpg" style="width:; height: undefined; resize-anchors: top left bottom right; resize-scale: showmost;" />

Why does my manager sometimes just jump to the next element and ignore the transitioners?

The problem might be that the next element is behind the current element and so the transitioner effects on it can't be seen. Then when the transitioners finish, the current element is being hidden and so it appears like it was jumped to after some delay.

Try adding this to your style sheet. It says that any element that is preceded by a 'manager' tag should have its z-index style set to 1 when it is selected and to 0 when it is deselected. 

manager ~ *
	{
		@onSelect { sS ( "z-index", 1 ); }
		@onDeselect { sS ( "z-index", 0 ); }
	}

Also, make sure that you have layout set to "stack" on the enclosing container if you are expecting each managed element to be always aligned to its top left corner. Without this style set, the changing layout during a transition can make it appear like the next section is popping in instead of transitioning in.

How do I add custom graphics?

Every visual element in Frontal is associated with a Flash DisplayObject through the property "movie." So for example, here we are drawing a green circle using the DisplayObject associated with a div and Flash's drawing APIs. 

<style><![CDATA[
	#test
		{
			@onRender
			{
				movie.graphics.beginFill(0x00FF00);
				movie.graphics.drawCircle(50, 50, 50);
				movie.graphics.endFill();
			}
		}
]]></style>
<div id="test" />

Also check out the interaction onRenderBackground here Adding_Interactions#Visual_Element_Interactions for a more integrated way to add custom graphics.

This forum thread may also be of interest: Image Repeat.

How do I submit a Frontal form as an HTML form?

The main issue here is that HTML forms typically respond with HTML. The question is, how to deal with that HTML response in Frontal?

One approach is to submit the Frontal form targeting a new browser window to display the results of the submission. Here's an example of how that is done: 

<include rel="assets" blocking="true" src="http://www.frontalcode.com/assets/swfs/input_components.swf" />
 
<form onAction="flash.net.navigateToURL(request,'_blank'); return false;" action="http://www.w3schools.com/html/html_form_submit.asp">
    Username:
    <input type="text" name="user" />
    <input type="submit" value="Submit">Submit</input>
</form>

Notice how in the example we use the request that Frontal has already built to represent the form submission and redirect to a new browser window.

Another approach to submitting to a server expecting an HTML-capable client would be to receive the HTML response as data, analyze it for pertinent data (like error messages), and then display the results in Frontal. In this example, we are using the form's onSuccess interaction to get the results of the submission and display them in the debugging console. 

<include rel="assets" blocking="true" src="http://www.frontalcode.com/assets/swfs/input_components.swf" />
 
<form onSuccess="var data = new flash.net.URLVariables ( event.target.data ); com.frontalcode.Debugger.msg ( data.result );" action="http://www.frontalcode.com/etc/form_test.cgi">
    Username:
    <input type="text" name="user" />
    <input type="submit" value="Submit">Submit</input>
</form>

Either of these examples could be used to email a form submission. That is, by setting the action attribute to target an installed script like FormMail.pl, the contents of the form submission could be emailed to some recipient.

Retrieved from "http://www.frontalcode.com/wiki/index.php/FAQs"
Personal tools
Get Adobe Flash player