June 5, 2008 at 8:03 pm · 2,120 views · Filed under tutorial
Overview
In flash you can have text areas that are rendered as html. You can also apply formatting styles to this html. This will show a simple example on how to apply css to html text in flash. I’ll do a simple anchor tag style to show you the ropes. We’ll style a link to be underlined and then when you hover or mouse over it, we’ll change the color. It’s a design style that is widely used online in html, but flash doesn’t natively do it. As a matter of fact, flash doesn’t even natively underline links.
Steps
Import TextField.StyleSheet
create a style sheet object: var myCSS:StyleSheet = new StyleSheet();
Specify your styles: myCSS.setStyle(”a:link”, {color:’#0000CC’,textDecoration:’underline’});
Ensure that the text box is html enabled: myHTML.htmlText = myHTMLText;
Apply the style sheet object to your html text box: myHTML.styleSheet = myCSS;
Example
Actionscript
importTextField.StyleSheet;
myHTMLText = "
<h1>HTML Text (sample header)</h1>
Here is some <em>sample</em> <strong>html text</strong> "+
"filling a text box <a href="http://blog.circlecube.com">this link to circlecube</a> and example headers"+
May 30, 2008 at 7:56 pm · 1,924 views · Filed under tutorial
Add this to the list of things I should have already known!
Story
I’ve got an html enabled text box and was trying to devise a way that I could have a hyperlink anchor tag not link to a webpage but actually do something flash. It didn’t seem possible, and I looked through all the different html css combinations I could think of. I finally resorted to trying to use some component like Deng or FlashML. FlashML had a smaller footprint and seemed to do more what I wanted, so I started investigating it. To my dismay, the support for it was few and far between. I found an older version that came with an example file and then a newer one with some documentation but no example and I found no examples any where else. So Lee, if you ever read this, some new examples could be nice. In the documentation I was reading about a functino called AddASFunction and the example html line was very interesting:
I started looking through the rest of the documentation to find this asfunction use. But all it had was:
The href attribute can include the asfunction string which allows the link provided by the anchor to call a function in Flash. More of this can be found within the addASFunction definition in this help document.
I knew I was on to something, asfunction. So a quick google search and I found the official doc! I was shocked that I had the tool to do this the whole time! Well, shocked and feeling like an idiot for never having heard of it before. I knew it could be done somehow, but had no idea that it was already a feature of htmlText in flash! So now that you know my embarrassing story, I’ll let you in on the secret.
Overview
In flash, you can allow html text within a text area. You either set the text html property as true with actionscript (my_txt.html = true;) or click the ‘Render text as HTML’ button in the properties window of the text area. You cannot enable html text on static text areas however. You can have links and various html elements (but not full html). Usually links have a url in the href attribut of the anchor tag, but flash will read a special value of ‘asfunction’ which specifies that an actionscript function is to be called rather than a url. The correct syntax is asfunction followed by a colon and then the name of the actionscript function to be called, optionally followed by a comma and a possible single argument to be passed to the specified function (href=”asfunction:functionName,argument”).
Steps
Enable html in the text box.
Have your function (ex: functionName) ready to be called from the html link.
Give the href attribute of the anchor tag a property “asfunction:functionName,argument” Notice that the official documentation calls for spaces after punctuation, but any space you put after the colon (:) or comma (,) will be sent to the function in the argument, or will expect a space in the function name and give you a headache.
Example
In this example I’ve got an html enabled text box with 4 links. The first is a standard link (I hope you know what that does). The next link calls an actionscript function with asfunction. The third link sends a single argument to another function. And the last link sends multiple arguments to yet another function. Wait! Multiple arguments? I thought I said only one was supported, well this example shows how to send multiple arguments disguised as a single param and parse them. It’s pretty simple actually.
Actionscript
importTextField.StyleSheet;
myHTMLText = "Sample text in an html enabled text box. "+
"Here's a normal link to <a href='http://blog.circlecube.com' target='_blank'>circlecube</a>! "+
"And some more links that don't go anywhere, they call functions in actionscript. "+
"<a href='asfunction:clickLink'>Click this one</a>, "+
"to see the actionscript function called from the html text box. "+
"<a href='asfunction:clickWithArg,Click this too'>Click this too</a>, "+
"and see that the actionscript function you're calling can have an argument passed to it. And "+
"<a href='asfunction:clickWithMultipleArgs, one,two,three args'>click me three and four</a> "+
"to see a way to send multiple arguments from your htmlText. "+
"Also, one last example of what not to do "+
"<a href='asfunction: clickWithArg, arg with preceding space'>Click for nothing</a>";
May 22, 2008 at 9:36 pm · 2,550 views · Filed under tutorial
I’ve had a couple special requests to explain flashvars and how to use it and show it in action.
Overview
The property “FlashVars” can be used to import root level variables to the flash movie or swf. The flashvars propery is used in codes for embedding flash in the html page. The string of variables passed in as flashvars, will be imported into the top level of the movie when it is first instantiated. Variables are created before the first frame of the SWF is played. The format of the string is a set of name=value combinations separated by ampersand (&) symbols.
Steps
Include the flashvars property in your embed codes and voila! You have these variables to use in your swf.
That’s the one step
Code
HTML Embed Codes
Here's some sample embed codes, including object and embed tags:
May 21, 2008 at 8:45 pm · 576 views · Filed under tutorial
Intro to CSS
We use css to apply styles to certain elements on the page, we can target any div like this:
HTML
<div>Text</div>
CSS
div {
css-property: value;
}
Any class selector <div class=”divClass”> like this:
HTML
<divclass="divClass">Text</div>
with this:
CSS
div.divClass{
css-property: value;
}
<!-- or simply -->
.divClass{
css-property: value;
}
or any id selector, <div id=”divID”> like this:
HTML
<divid="divID">Text</div>
with this:
CSS
div#divID{
css-property: value;
}
<!-- or simply -->
#divID{
css-property: value;
}
These are the basics of css. Use an element tag name to target it, use a dot to access class names and a hash (#) to represent id names. A lot can be done with just that, but sometimes you may want to access something differently, an option is to use attribute selection.
Overview
More advanced we can apply styles to elements based on their attributes. Attribute selectors use the attributes of the tag.
We can use attribute selection to specify certain elements to stylize. For example if we have a page with many images but only certain ones have title attributes, which we want to stand out more, this css rule would do the trick:
CSS
img [title]{
border: 2pxsolid#000000;
}
It would cause any image with a title tag (no matter what the value of the title tag is) to have a 2px wide solid black border, such as <img title=”MyImage” src=”/images/sample.jpg” /> or <img title=”" src=”/images/sample.jpg” /> but not <img src=”/images/sample.jpg” /> because it has no title attribute.
Further we can specify which values of the title attribute we want to target. If we want to stylizee links to a certain site we can do this: a[href="http://blog.circlecube.com"] { }
CSS
a[href="http://blog.circlecube.com"]{
background-color: #EBEBEB;
}
it would style <a href=”http://blog.circlecube.com”>This link</a> but not <a href=”http://blog.circlecube.com/2008/05/21/”>this one</a> because it is not an exact match, nor <a href=”http://www.google.com”>this one</a> because it isn’t a match either, or at all.
For another example, if we want to stylize local links differently than absolute links, we’d want to look at the beginning of the attribute’s value only so we’d use ‘^=’. We could have something like this:
a[href^="http://"], a[href^="https://"] {
background: url(/images/external.gif) no-repeat right center;
padding-right:20px;
}
it would style <a href=”http://www.google.com”>This link</a> because it begins with ‘http://’ but not <a href=”/2008/05/21/”>this one</a> because it is does not begin with ‘http://’. But it would also style <a href=”https://paypal.com”>this</a> because it matches the selector after the comma ‘https://’, and even <a href=”http://blog.circlecube.com/2008/05/21/”>this</a> will be styled, because the link is absolute (even though it is local) so be careful with how you use it.
May 9, 2008 at 7:05 pm · 255 views · Filed under portfolio
Here’s a new site and series from StomperNet called Going Natural 3!
It’s a bit of free videos made and released to showcase the talents and business of what StomperNet is about and what they do for their clients. They’re ‘moving the freeline’ so to speak…
The first video series begins with Dan Thies talking about his ‘Crazy Theory’ for AdWords.
This site contains the latest flash video player built by yours truly. I also did the design of the site: involving html, css, php, javascript and dealing with drupal too!
March 20, 2008 at 10:54 pm · 7,257 views · Filed under tutorial
Overview
This tutorial / how to / example will show how to get the current url from the browser to flash, and even how to get the query string parameters from the url into actionscript using ExternalInterface.
It has been a dilemma for many people to get this information into flash across browsers and without having to rely on flashvars or javascript, but to just have it work.
I wrote a post on it earlier, although it seemed it wouldn’t play nice with Internet Explorer IE, I later realized that it was only because of the way my blog is configured to embed flash. The call ExternalInterface.call(”window.location.href.toString”); or even ExternalInterface.call(’eval’, ‘window.location.href’); which basically do the same thing.
This can be taken even further and we can read the query string, which, if you don’t know what that is, is the data contained in the url. The data is sent as paired strings, the key and the value. So, for example I could have a url http://example.com/index.html?var1=one&var2=two&var3=three. The question mark separates the actual url path from the query string. So following the ‘?’ we see three variables: var1, var2 and var3, and their corresponding values: one, two and three. They are seperated as pairs with an ampersand (&) and then the key and value are seperated by an equals sign (=). So it goes url?key=value&key=value&key=value…
Once we pass the complete url into our swf, it’s pretty easy to parse the keys and corresponding values.
Steps
Rather than use url with ExternalInterface.call(”window.location.href.toString”); implement the QueryString class make a new QueryString This will do most of the work for you: var myPath:QueryString = new QueryString();
Upon creation of the QueryString object the class reads the parameters automatically by parsing the parameters after the ‘?’ and delimiting on the ‘&’. So you get var1=one and var2=two
Set up each parameter (key) as a variable in the parameter object of the QueryString class assigning it’s value to that variable.
Access your values as myPath.parameters.var1 and myPath.parameters.var2
unescape() your values to make the usable, unless you need them to be encoded or course. Unescape decodes the string from URL-encoded format (converting all hexadecimal sequences to ASCII characters). If your parameter had been some funky encoded string like var4=this+stuff%3E%22%28%29%3F, after you unescape(myPath.parameters.var4) you get: this stuff>”()?.
Example
Here’s a working example. This link has the parameters appended to it following the question mark ‘?’ and separated with an ampersand ‘&’ like all query string parameters. I have one for myName (Circlecube) another for myText (Jo Jo is a monkey) which are both pulled out and put into their own text box after they are unescaped, and then there are a couple more parameters just to show, the aNum (3013), anotherParam (more), and ref (http://blog.circlecube.com/…)
Special thanks to Abdul Qabiz example. I rewrote it for as2 so it would work with some flash projects I’m working on.
I use the new swf object 2 to embed the swf. Go get it here:
Actionscript:
The actionscript layer of the swf
import flash.external.*; //so we can use externalInterface
import QueryString.as; //so we can use the QueryString Class//make a new QueryString named myPath
var myPath:QueryString = new QueryString();
assignVariables();
//custom function to handle all the query string parameters
function assignVariables(){
//if myName parameter exists
if(myPath.parameters.myName){
//assign it to the text of the myName text box
//unescape() will translate/unencode the url characters
myName.text = unescape(myPath.parameters.myName);
}
if(myPath.parameters.myText){
myText.text = unescape(myPath.parameters.myText);
}
if(myPath.url){
//get the complete url (including any parameters)
thisUrl.text = myPath.url;
}
recurseTrace(myPath.parameters, " ");
}
//function to recursivly print objects in heirarchy as string
//so we get all parameters no matter what the key traced into
//the allParams text box.
function recurseTrace(info:Object, indent:String){
February 11, 2008 at 7:03 pm · 1,550 views · Filed under portfolio
Overview:
Using what I learned with the Actionscript Javascript Communication Tutorial, and pushing it a little further I’ve set up this example of how flash renders html and css. This is basically a wysiwyg (What you see is what you get) html editor! Natively flash only handles some html and css. Many people have enhanced it’s capabilities with projects and Classes, but I made this to show what is accepted by default as far as html and css is concerned. I know there are specs and many lists about what will work, but to me the best way to know if my code will work is to try and see…
I’ve made this app so if I have a question, I just paste in my html/css and send it to the swf to see it rendered live. This saved me a few headaches, so I thought other might enjoy it as well… So here it is.
Example:
Render your own html and or css in flash. htmlToFlash.html
Here is the flash rendering of some dummy text as html with css applied
Here’s the html interface where I paste in the html and css.
Each supported css property has a corresponding actionscript property, but the naming convention is a little different for css in actionscript. Each actionscript property name is derived from the corresponding CSS property name; the hyphen is omitted and the subsequent character is capitalized. So for example: ‘font-weight’ becomes ‘fontWeight’.
Download:
Here’s the open source files if you want to get your hands dirty. Let me know if you improve this or even have any questions about it!
February 1, 2008 at 6:59 pm · 8,416 views · Filed under tutorial
Overview:
Using ExternalInterface.addCallback() we can expose an actionscript function and make it available to javascript. This would be helpful to have your webpage with embedded flash communicate to your flash swf file and even control it with javascript! Say we wanted to have buttons in the html page that would control an object in the flash. Communication is a two-way road so wouldn’t it be great to be able to go the other way as well, you can! That is the main function of ExternalInterface! In this example/tutorial I will explain both directions of communication with flash and javascript! Communication between flash and javascript isn’t just a myth or mystery!
Steps:
Be sure to import flash.external.*;
Set up the javascript to actionscript lane of your communication road. (ExternalInterface.addCallback(methodName, instance, method);)
Write your javascript function.
Set up the actionscript to javascript lane. (ExternalInterface.call(functionNameInJavascript);)
We will follow the text’s journey on our road of communication…
The One way: I type in ‘Johnny Appleseed’ in the html text box and press the Send Text To Flash button. The onclick javascript event finds the flash element and calls it’s function (sendTextFromHtml) and then clears the text in the html box. This function has been set up and is exposed to javascript (in actionscript lines 4-7) with the methodName ’sendTextFromHtml’ while the method it calls is recieveTextFromHtml() in the actionscript. So ‘Johnny Appleseed’ is received as the parameter of the recieveTextFromHtml() function and is assigned to the text of the theText text box.
And back: Now I delete ‘Johnny Appleseed’ since he’s only a fable and enter ‘Paul Bunyan’ in the swf text box and press the Send From Flash to Javascript button. This calls the onRelease function associated with this button. ExternalInterface.call calls the ‘recieveTextFromFlash’ function in the javascript of the page and passes ‘Paul Bunyan’ as the parameter. The javascript function finds the html text box using getElementById() and assigns the parameter to the value of that text box!
This technique will even work if you’re not sending folklore character down the road.
Loading ...