Author: Evan Mullins | Filed under: personal, work
Serious internet businesses require serious internet tools.
Firefox 3 is a dramatic step forward! Help Mozilla.org set a Guiness Book record by downloading the new release on Tuesday the 17th of June 2008 (11 AM PST).
To celebrate, StomperNet and Appcelerator are hosting a release party in Atlanta at Park Tavern as a part of a world-wide network of celebration Tuesday, June 17th at 7pm. RSVP at upcoming.org.
Join us if you’re in town, otherwise, check the downloads for Firefox 3:
StomperTools with SN Ranker and Scrutinize this, and the recent Scrutinizer 1.0 release.
Park Tavern
www.parktavern.com
500 10th St Ne
Atlanta, GA 30309
(404) 249-0001
Tuesday, June 17th 2008
7pm-9pm
Get the Stomper Scrutinizer browser vision simulator. Plus get StomperTools … featuring Scrutinize This and the SN Ranker SEO tool.
Author: Evan Mullins | Filed under: portfolio, work
- New help documentation
- Keyboard Shortcut Functionality
- saving a screenshot
- bookmarking a page
- toggling the visualization
- toggle auto-zoom
- Aesthetic improvements
- Performance optimizations
- Improved auto-update.
What is it?
The Scrutinizer is a web browser, based upon the Adobe AIR toolkit and the WebKit browser, that offers a simulation of the human visual system. Specifically, it illustrates the distinction between foveal and peripheral vision in visual acuity and color perception. Using this simulation, you can get a better idea of how users interact with your site design. We explain this, and some of the succes we’ve had, in a 30 minute video called Click Fu. It’s also a great tool for observing users interacting with your pages. By slowing them down, the Scrutinizer makes it easier for you to figure out what information the user is consuming and what actions they are considering. Learn about other ways to use the tool at our Top Ten list.
How it Works
The Scrutinizer browser applies a visual filter to where the mouse is located, simulating foveal vision centered around the mouse. For parts of the screen far away from themouse, the display deteriorates into lower resolution, both in detail and color. You can use the browser to get a better understanding of the low level mechanics of how users interact with your site design. Attempting to accomplish a key task on your site using the Scrutinizer can be very enlightening. Watching a user unfamiliar with your site attempt a key task with the Scrutinizer is even better at revealing how your site design affects the way the user extracts meaning from your presentation. Learn more in the Click Fu video, covering practical examples of improved e-commerce, or the 52 second ” Your Vision is an Illusion“, presenting a dramatic illustration of foveal vision. Finally, check out using the Scrutinizer for a findability challenge on Amazon.com.
Top Ten Things You Can Do with the Scrutinizer
- Simulate eye tracking in a usability task
- Assess the ease of use of multi-step processes
- Give your designer a fresh pair of eyes
- Find out what “pops� in your design
- Conduct findability challenges
- Ask: does your visual grid work?
- Evaluate your site’s contrast levels
- Insure learnability in your template
- Avoid button gravity errors
- Tell the story of how your eyes work
Author: Evan Mullins | 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| import TextField.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"+
"<h1>Header h1</h1><h2>Header h2</h2>";
//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle("body", {fontSize:'15',color:'#000066'});
myCSS.setStyle("h1", {fontSize:'25',color:'#000000'});
myCSS.setStyle("h2", {fontSize:'19',color:'#000000'});
myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'});
myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'});
myCSS.setStyle("b", {fontWeight:'bold'});
myCSS.setStyle("em", {fontWeight:'bold'});
//ensure html support and apply css to it
myHTML.html = true;
myHTML.styleSheet = myCSS;
myHTML.htmlText = myHTMLText;
//resize the textbox to exact fit the text in it
//myHTML.autoSize = "left"; |
Download
open source flashhtmlcss.zip
Author: Evan Mullins | 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
- 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| import TextField.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>";
//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'});
myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'});
myHTML.html = true;
myHTML.htmlText = myHTMLText;
myHTML.styleSheet = myCSS;
//function to be called from html text
function clickLink() {
giveFeedback("Hyperlink clicked!");
}
//another function to be called from html text, recieves one argument
function clickWithArg(arg) {
giveFeedback("Hyperlink clicked! Argument: "+arg);
}
//a simple trick to allow passing of multiple arguments
function clickWithMultipleArgs(args) {
giveFeedback("Hyperlink clicked! Multiple arguments passed: "+args);
argArray = new Array();
argArray = args.split(',');
for (i = 0; i < argArray.length; i++) {
giveFeedback("arg "+i+": "+argArray[i]);
}
}
function giveFeedback(str) {
trace(str);
feedback.text += str +"\n";
feedback.scroll = feedback.maxscroll;
} |
HTML
1
2
3
4
5
6
7
8
9
10
11
| 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> |
Download Source
asfunction.zip
Author: Evan Mullins | 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
1
2
3
4
5
6
| Here's some sample embed codes, including object and embed tags:
<object width="540" height="240" title="sample">
<param name="movie" value="flashvarsTutorial.swf" />
<param name="flashvars" value="var1=here&var2=are&var3=my&var4=flashvars" />
<embed src="flashvarsTutorial.swf" flashvars="var1=here&var2=are&var3=my&var4=flashvars" type="application/x-shockwave-flash" width="540" height="240" ></embed>
</object> |
Actionscript using flashvars
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| //flashvars="var1=val1&var2=val2&var3=val3";
display("var1 = "+ var1);
display("var2 = "+ var2);
display("var3 = "+ var3);
display("var4 = "+ var4);
function display(todisplay:String){
feedback.text += todisplay+"\n";
trace(todisplay);
} |
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
Anyway, I also made Parallax Effect in AS3, it’s pure AS3 class. And I...
