Home Contact RSS

Archive for May, 2008

Calling actionscript functions through HTML text | asfunction Tutorial

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:

  1. <a href="asfunction:doSomething, startFrame">link</a>

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

  1. Enable html in the text box.
  2. Have your function (ex: functionName) ready to be called from the html link.
  3. 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.
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Actionscript

  1. import TextField.StyleSheet;
  2.  
  3. myHTMLText = "Sample text in an html enabled text box. "+
  4. "Here's a normal link to <a href='http://blog.circlecube.com' target='_blank'>circlecube</a>! "+
  5. "And some more links that don't go anywhere, they call functions in actionscript. "+
  6. "<a href='asfunction:clickLink'>Click this one</a>, "+
  7. "to see the actionscript function called from the html text box. "+
  8. "<a href='asfunction:clickWithArg,Click this too'>Click this too</a>, "+
  9. "and see that the actionscript function you're calling can have an argument passed to it. And "+
  10. "<a href='asfunction:clickWithMultipleArgs, one,two,three args'>click me three and four</a> "+
  11. "to see a way to send multiple arguments from your htmlText. "+
  12. "Also, one last example of what not to do "+
  13. "<a href='asfunction: clickWithArg, arg with preceding space'>Click for nothing</a>";
  14.  
  15. //create and initialize css
  16. var myCSS:StyleSheet = new StyleSheet();
  17. myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'});
  18. myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'});
  19.  
  20. myHTML.html = true;
  21. myHTML.htmlText = myHTMLText;
  22. myHTML.styleSheet = myCSS;
  23.  
  24. //function to be called from html text
  25. function clickLink() {
  26.     giveFeedback("Hyperlink clicked!");
  27. }
  28.  
  29. //another function to be called from html text, recieves one argument
  30. function clickWithArg(arg) {
  31.     giveFeedback("Hyperlink clicked! Argument: "+arg);
  32. }
  33.  
  34. //a simple trick to allow passing of multiple arguments
  35. function clickWithMultipleArgs(args) {
  36.     giveFeedback("Hyperlink clicked! Multiple arguments passed: "+args);
  37.     argArray = new Array();
  38.     argArray = args.split(',');
  39.     for (i = 0; i < argArray.length; i++) {
  40.         giveFeedback("arg "+i+": "+argArray[i]);
  41.     }
  42. }
  43.  
  44. function giveFeedback(str) {
  45.     trace(str);
  46.     feedback.text += str +"\n";
  47.     feedback.scroll = feedback.maxscroll;
  48. }

HTML

  1. Sample text in an html enabled text box.
  2. Here's a normal link to <a href='http://blog.circlecube.com' target='_blank'>circlecube</a>!
  3. And some more links that don't go anywhere, they call functions in actionscript.
  4. <a href='asfunction:clickLink'>Click this one</a>,
  5. to see the actionscript function called from the html text box.
  6. <a href='asfunction:clickWithArg,Click this too'>Click this too</a>,
  7. and see that the actionscript function you're calling can have an argument passed to it. And
  8. <a href='asfunction:clickWithMultipleArgs, one,two,three args'>click me three and four</a>
  9. to see a way to send multiple arguments from your htmlText.
  10. Also, one last example of what not to do
  11. <a href='asfunction: clickWithArg, arg with preceding space'>Click for nothing</a>

Download Source

asfunction.zip

Tags: , , , , , , ,

Comments

Intro to Flashvars | Passing variables to actionscript from the html embed | Tutorial

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

  1. Include the flashvars property in your embed codes and voila! You have these variables to use in your swf.
  2. That’s the one step

Code

HTML Embed Codes

  1. Here's some sample embed codes, including object and embed tags:
  2. <object width="540" height="240" title="sample">
  3.   <param name="movie" value="flashvarsTutorial.swf" />
  4.   <param name="flashvars" value="var1=here&var2=are&var3=my&var4=flashvars" />
  5.   <embed src="flashvarsTutorial.swf" flashvars="var1=here&var2=are&var3=my&var4=flashvars" type="application/x-shockwave-flash" width="540" height="240" ></embed>
  6. </object>

Actionscript using flashvars

  1. //flashvars="var1=val1&var2=val2&var3=val3";
  2.  
  3. display("var1 = "+ var1);
  4.  
  5. display("var2 = "+ var2);
  6.  
  7. display("var3 = "+ var3);
  8.  
  9. display("var4 = "+ var4);
  10.  
  11. function display(todisplay:String){
  12.   feedback.text += todisplay+"\n";
  13.   trace(todisplay);
  14. }

Example

Page 1 (var1=val1&var2=val2&var3=val3)
Page 2 (var1=here&var2=are&var3=my&var4=flashvars)

Source

Download the html files and the fla and swf in this flashvars.zip

Tags: , , , , , ,

Comments

Using CSS Attribute Selectors to Stylize HTML | Style outbound links | Tutorial

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

  1. <div>Text</div>

CSS

  1. div {
  2. css-property: value;
  3. }

Any class selector <div class=”divClass”> like this:

HTML

  1. <div class="divClass">Text</div>

with this:

CSS

  1. div.divClass {
  2. css-property: value;
  3. }
  4. <!-- or simply -->
  5. .divClass {
  6. css-property: value;
  7. }

or any id selector, <div id=”divID”> like this:

HTML

  1. <div id="divID">Text</div>

with this:

CSS

  1. div#divID {
  2. css-property: value;
  3. }
  4. <!-- or simply -->
  5. #divID {
  6. css-property: value;
  7. }

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

  1. img [title] {
  2. border: 2px solid #000000;
  3. }

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.

HTML

  1. would style
  2. <img title="”MyImage”" src="http://blog.circlecube.com/wp-admin/”/images/sample.jpg”" alt="" />
  3. or even
  4. <img title="”&quot;" src="http://blog.circlecube.com/wp-admin/”/images/sample.jpg”" alt="" />
  5. but not
  6. <img src="http://blog.circlecube.com/wp-admin/”/images/sample.jpg”" alt="" />
  7. 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

  1. a[href="http://blog.circlecube.com"] {
  2. background-color: #EBEBEB;
  3. }

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.

HTML

  1. it would style
  2. <a href="”http://blog.circlecube.com”">This link</a>
  3. but not
  4. <a href="”http://blog.circlecube.com/2008/05/21/”">this one</a>
  5. because it is not an exact match, nor
  6. <a href="”http://www.google.com”">this one</a>
  7. 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.

HTML

  1. it would style
  2. <a href="”http://www.google.com”">This link</a>
  3. because it begins with ‘http://’ but not
  4. <a href="http://blog.circlecube.com/wp-admin/”/2008/05/21/”">this one</a>
  5. because it is does not begin with ‘http://’.
  6. But it would also style
  7. <a href="”https://paypal.com”">this</a>
  8. because it matches the selector after the comma ‘https://’,
  9. and even
  10. <a href="”http://blog.circlecube.com/2008/05/21/”">this</a>
  11. will be styled, because the link is absolute
  12. (even though it is local) so be careful with how you use it.

Summary

Hoping you will see the pattern and can use the rest of these somehow (I’m drawing blank on interesting examples),

1 is: [attribute] exists

target anchors with any titles attributes.

CSS

  1. a[title] {
  2. background-color:#0000FF; (blue)
  3. }

HTML

  1. <a title="some title" href="http://blog.circlecube.com/">Link</a>

2 equal: [attribute=x] equals x

target only anchors where the title attribute contains something exactly

CSS

  1. a[title="Only"] {
  2. background-color:#FF0000; (red)
  3. }

HTML

  1. <a title="Only" href="http://blog.circlecube.com/">Link</a>

3 hat: [attribute^=x] starts with x

target instances where something comes at the beginning of the attribute. This can prefix a word or even be the first word in a phrase or sentance.

CSS

  1. a[title^="Super"] {
  2. background-color:#00FF00; (green)
  3. }

HTML

  1. <a title="Supercalafragalisticexpialadosious" href="http://blog.circlecube.com/">Link</a>

4 dollar: [attribute$=x] ends with x

instances where something comes at the end of the attribute. This can be the suffix of the word or the last word in a phrase.

CSS

  1. a[title$="ious"] {
  2. background-color:#FFFF00; (yellow)
  3. }

HTML

  1. <a title="Supercalafragalisticexpialadosious" href="http://blog.circlecube.com/">Link</a>

5 asterisk: [attribute*=x] contains x

or even titles which contain a certain word somewhere/anywhere in the attribute. This wildcard be anywhere, in a word, as a word, whatever.

CSS

  1. a[title*="tic"] {
  2. background-color:#FF00FF; (magenta)
  3. }

HTML

  1. <a title="Supercalafragalisticexpialadosious" href="http://blog.circlecube.com/">Link</a>

6 tilde: [attribute~=x] one of which is exactly x.

a space-separated list of “words”, one of which is exactly x.

CSS

  1. a[title~="tic"] {
  2. background-color:#FF00FF; (magenta)
  3. }

HTML

  1. <a title="Super cala fragalis tic expi ala dosious" href="http://blog.circlecube.com/">Link</a>

7 pipe: [attribute|=x] which first word is exactly x.

a hyphen-separated list of “words”, first word is exactly x.

CSS

  1. a[title|="Super"] {
  2. background-color:#FF00FF; (magenta)
  3. }

HTML

  1. <a title="Super-cala-fragalis-tic-expi-ala-dosious" href="http://blog.circlecube.com/">Link</a>

view all examples on this page.
refer to w3 for more

Let me know what you come up with or if I’ve left out any essentials.

Tags: , , , , ,

Comments

Adobe Flash Player 10 | Astro | Beta Release

May 15, 2008 at 10:07 am · 239 views · Filed under other

As you may have heard today Adobe released Astro, Flash Player 10 Beta!

    Highlight Features:

  • Create Custom Filters and Effects (with Pixel Blender)
  • Performance Boosts (GPU blitting and compositing)
  • Drawing API Enhancements
  • Vector Data Types
  • New Highly Flexible Text Engine
  • 3D Support and Effects
  • Automatic Variable Bitrates for video streams
  • Larger Bitmap Support
  • Better File Reference (user uploading)
  • Context Menu Enhancements
  • UBUNTU

Press Release
Official Download at Adobe Labs of Flash Player 10 Beta code named Astro
Official Release Notes
Also released is Pixel Blender (Hydra) - which allows custom filter and effect creation!

Adobe is also reworking the Sound API as well, here’s an example from Keith and Tinic’s Posts (as always with much detail): Adobe is Making Some Noise Part 1, Part 2, and Part 3!

Dont forget to visit the official Demos at Adobe Labs - Flash 10 Demos at Adobe Labs

If you have other article to link to don’t hesitate to add them in the comments!

Tags: , ,

Comments

Going Natural 3.0 at StomperNet

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.

On signing in there are a couple BONUS videos for you as well. So go check them out as well!
Watch Going Natural 3 - Adwords Triangulation Method and more

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!

Tags: , , , , , , , , , , , ,

Comments