HTML

Beauty of the Web

Saturday, April 30th, 2011 | Web Development | 1 Comment

Ok so I know this blog is primarily about as3 and flash and what you can do with it. But PLEASE vote for my HTML5 entry on Beauty of the Web! Thanks!

Sonata Music Demo

Some of the features used in the demo include:

  • Box2D for the numbers dropping with physics
  • @font-face for the random number font
  • EaselJS for displaying the numbers and band image
  • TweenJS for tweening the band image in and out
  • FlashAmp3 for extracting the amplitude data from the songs (since HTML5 can’t read it yet)
  • Adjusting the number size in relation to the volume
  • 4 different visualizers
  • IE9 pinned site
  • IE9 thumbnail toolbar
    • Tags: ,

Flash / HTML Comparison

Friday, June 18th, 2010 | Web Development | 2 Comments

This comparison is very similar to the Flash/Canvas comparison with a minor change. The first Flash demo utilizes BitmapData to render the particles. Much like Canvas renders directly to a bitmap array. But I wanted to compare the speed versus HTML (animating with elements) and a Bitmap demo isn’t a fair comparison. So I have a second Flash demo that animated with Sprites. As with the previous demos, the particles are 1x1px white boxes to keep the look the same.

Another small change in these demos is that they increment by 10s instead of 100s. This is because it’s much more intensive to animate a sprite over a single pixel that really only exists when it’s finally drawn on the bitmap.

Also in an effort to let you see what the you can do with each, I’ve added controls to manipulate the minimum FPS. This will affect when the demos actually begin to throttle back.

Browser Particles Particles Added Per Render
HTML – Firefox 3.6.4 400 20
HTML – Chrome 6.0.437.1 800 30
HTML – Opera 10.60 Beta 800 30
Flash 10.0.45.2 6,000 220
Flash 10.0.45.2 Debugger 5,000 180
Flash 10.1.53.64 7,500 270
Flash 10.1.53.64 Debugger 6,500 230

* All results tested with a minimum FPS of 29

HTML Particle Speed Test

Flash (Sprite) Particle Speed Test

Tags: , ,

Notes: CSS StyleSheets

Friday, January 16th, 2009 | Web Development | No Comments

Note: A text field with a style sheet is not editable. In other words, a text field with the type property set to TextFieldType.INPUT applies the StyleSheet to the default text for the text field, but the content will no longer be editable by the user. Consider using the TextFormat class to assign styles to input text fields.

Flash Player supports a subset of properties in the original CSS1 specification (www.w3.org/TR/REC-CSS1). The following table shows the supported Cascading Style Sheet (CSS) properties and values, as well as their corresponding ActionScript property names. (Each ActionScript property name is derived from the corresponding CSS property name; if the name contains a hyphen, the hyphen is omitted and the subsequent character is capitalized.)

› Continue reading

Tags: , , ,

Notes: HTMLText

Friday, January 16th, 2009 | Web Development | 6 Comments

This is the first of hopefully a series of posts of useful things I want accessible on my blog. Mostly for my own benefit but anyone else is free to use this as an easy reference for AS3.

Flash Player supports the following HTML tags:

Anchor tag

The <a> tag creates a hypertext link and supports the following attributes:

  • target: Specifies the name of the target window where you load the page. Options include _self, _blank, _parent, and _top. The _self option specifies the current frame in the current window, _blank specifies a new window, _parent specifies the parent of the current frame, and _top specifies the top-level frame in the current window.
  • href: Specifies a URL or an ActionScript link event.The URL can be either absolute or relative to the location of the SWF file that is loading the page. An example of an absolute reference to a URL is http://www.adobe.com; an example of a relative reference is /index.html. Absolute URLs must be prefixed with http://; otherwise, Flash treats them as relative URLs.

    You can use the link event to cause the link to execute an ActionScript function in a SWF file instead of opening a URL. To specify a link event, use the event scheme instead of the http scheme in your href attribute. An example is href="event:myText" instead of href="http://myURL"; when the user clicks a hypertext link that contains the event scheme, the text field dispatches a link TextEvent with its text property set to “myText“. You can then create an ActionScript function that executes whenever the link TextEvent is dispatched. You can also define a:link, a:hover, and a:active styles for anchor tags by using style sheets.

	var style:StyleSheet = new StyleSheet();
	
	var link:Object = new Object();
	link.fontWeight = "bold";
	link.color = "#FF0000";

	var hover:Object = new Object();
	hover.fontStyle = "italic";
	
	var active:Object = new Object();
	active.fontStyle = "italic";
	active.color = "#FFFF00";

	style.setStyle("a:link", link);
	style.setStyle("a:hover", hover);
	style.setStyle("a:active", active);
	
	var txt:TextField = new TextField();
	txt.width = 400;
	txt.styleSheet = style;
	txt.htmlText = "Visit: <a href='www.google.com' target='_blank'>Google.com</a> or call a <a href='event:link1'>function</a>";
	txt.addEventListener(TextEvent.LINK, linkHandler);
	addChild(txt);
	
	function linkHandler(event:TextEvent):void {
		if(event.text == "link1") {
			trace("hello!");
		}
	}
	

› Continue reading

Tags: , ,

Flash HTMLEntities Suck

Thursday, January 8th, 2009 | Web Development | 13 Comments

So I ran into this issue at work where the client was trying to pass in HTML entities and expecting Flash to just take it in stride. Apparently Flash only handles about 5 different kinds of entities of the 300 or so. So to get around this I made a function to convert all the HTML entities to number entities. So if anyone else runs into this issue they can take advantage of this useful tool. Enjoy!

public function convertHTMLEntities(str:String):String {
	var htmlEntities:Array = ["&nbsp;", "&iexcl;", "&cent;", "&pound;", "&curren;", "&yen;", "&brvbar;", "&sect;", "&uml;", "&copy;", "&ordf;", "&laquo;", "&not;", "&shy;", "&reg;", "&macr;", "&deg;", "&plusmn;", "&sup2;", "&sup3;", "&acute;", "&micro;", "&para;", "&middot;", "&cedil;", "&sup1;", "&ordm;", "&raquo;", "&frac14;", "&frac12;", "&frac34;", "&iquest;", "&Agrave;", "&Aacute;", "&Acirc;", "&Atilde;", "&Auml;", "&Aring;", "&AElig;", "&Ccedil;", "&Egrave;", "&Eacute;", "&Ecirc;", "&Euml;", "&Igrave;", "&Iacute;", "&Icirc;", "&Iuml;", "&ETH;", "&Ntilde;", "&Ograve;", "&Oacute;", "&Ocirc;", "&Otilde;", "&Ouml;", "&times;", "&Oslash;", "&Ugrave;", "&Uacute;", "&Ucirc;", "&Uuml;", "&Yacute;", "&THORN;", "&szlig;", "&agrave;", "&aacute;", "&acirc;", "&atilde;", "&auml;", "&aring;", "&aelig;", "&ccedil;", "&egrave;", "&eacute;", "&ecirc;", "&euml;", "&igrave;", "&iacute;", "&icirc;", "&iuml;", "&eth;", "&ntilde;", "&ograve;", "&oacute;", "&ocirc;", "&otilde;", "&ouml;", "&divide;", "&oslash;", "&ugrave;", "&uacute;", "&ucirc;", "&uuml;", "&yacute;", "&thorn;", "&yuml;", "&fnof;", "&Alpha;", "&Beta;", "&Gamma;", "&Delta;", "&Epsilon;", "&Zeta;", "&Eta;", "&Theta;", "&Iota;", "&Kappa;", "&Lambda;", "&Mu;", "&Nu;", "&Xi;", "&Omicron;", "&Pi;", "&Rho;", "&Sigma;", "&Tau;", "&Upsilon;", "&Phi;", "&Chi;", "&Psi;", "&Omega;", "&alpha;", "&beta;", "&gamma;", "&delta;", "&epsilon;", "&zeta;", "&eta;", "&theta;", "&iota;", "&kappa;", "&lambda;", "&mu;", "&nu;", "&xi;", "&omicron;", "&pi;", "&rho;", "&sigmaf;", "&sigma;", "&tau;", "&upsilon;", "&phi;", "&chi;", "&psi;", "&omega;", "&thetasym;", "&upsih;", "&piv;", "&bull;", "&hellip;", "&prime;", "&Prime;", "&oline;", "&frasl;", "&weierp;", "&image;", "&real;", "&trade;", "&alefsym;", "&larr;", "&uarr;", "&rarr;", "&darr;", "&harr;", "&crarr;", "&lArr;", "&uArr;", "&rArr;", "&dArr;", "&hArr;", "&forall;", "&part;", "&exist;", "&empty;", "&nabla;", "&isin;", "&notin;", "&ni;", "&prod;", "&sum;", "&minus;", "&lowast;", "&radic;", "&prop;", "&infin;", "&ang;", "&and;", "&or;", "&cap;", "&cup;", "&int;", "&there4;", "&sim;", "&cong;", "&asymp;", "&ne;", "&equiv;", "&le;", "&ge;", "&sub;", "&sup;", "&nsub;", "&sube;", "&supe;", "&oplus;", "&otimes;", "&perp;", "&sdot;", "&lceil;", "&rceil;", "&lfloor;", "&rfloor;", "&lang;", "&rang;", "&loz;", "&spades;", "&clubs;", "&hearts;", "&diams;", "\"", "&", "<", ">", "&OElig;", "&oelig;", "&Scaron;", "&scaron;", "&Yuml;", "&circ;", "&tilde;", "&ensp;", "&emsp;", "&thinsp;", "&zwnj;", "&zwj;", "&lrm;", "&rlm;", "&ndash;", "&mdash;", "&lsquo;", "&rsquo;", "&sbquo;", "&ldquo;", "&rdquo;", "&bdquo;", "&dagger;", "&Dagger;", "&permil;", "&lsaquo;", "&rsaquo;", "&euro;"];
	var numberEntities:Array = ["&#160;", "&#161;", "&#162;", "&#163;", "&#164;", "&#165;", "&#166;", "&#167;", "&#168;", "&#169;", "&#170;", "&#171;", "&#172;", "&#173;", "&#174;", "&#175;", "&#176;", "&#177;", "&#178;", "&#179;", "&#180;", "&#181;", "&#182;", "&#183;", "&#184;", "&#185;", "&#186;", "&#187;", "&#188;", "&#189;", "&#190;", "&#191;", "&#192;", "&#193;", "&#194;", "&#195;", "&#196;", "&#197;", "&#198;", "&#199;", "&#200;", "&#201;", "&#202;", "&#203;", "&#204;", "&#205;", "&#206;", "&#207;", "&#208;", "&#209;", "&#210;", "&#211;", "&#212;", "&#213;", "&#214;", "&#215;", "&#216;", "&#217;", "&#218;", "&#219;", "&#220;", "&#221;", "&#222;", "&#223;", "&#224;", "&#225;", "&#226;", "&#227;", "&#228;", "&#229;", "&#230;", "&#231;", "&#232;", "&#233;", "&#234;", "&#235;", "&#236;", "&#237;", "&#238;", "&#239;", "&#240;", "&#241;", "&#242;", "&#243;", "&#244;", "&#245;", "&#246;", "&#247;", "&#248;", "&#249;", "&#250;", "&#251;", "&#252;", "&#253;", "&#254;", "&#255;", "&#402;", "&#913;", "&#914;", "&#915;", "&#916;", "&#917;", "&#918;", "&#919;", "&#920;", "&#921;", "&#922;", "&#923;", "&#924;", "&#925;", "&#926;", "&#927;", "&#928;", "&#929;", "&#931;", "&#932;", "&#933;", "&#934;", "&#935;", "&#936;", "&#937;", "&#945;", "&#946;", "&#947;", "&#948;", "&#949;", "&#950;", "&#951;", "&#952;", "&#953;", "&#954;", "&#955;", "&#956;", "&#957;", "&#958;", "&#959;", "&#960;", "&#961;", "&#962;", "&#963;", "&#964;", "&#965;", "&#966;", "&#967;", "&#968;", "&#969;", "&#977;", "&#978;", "&#982;", "&#8226;", "&#8230;", "&#8242;", "&#8243;", "&#8254;", "&#8260;", "&#8472;", "&#8465;", "&#8476;", "&#8482;", "&#8501;", "&#8592;", "&#8593;", "&#8594;", "&#8595;", "&#8596;", "&#8629;", "&#8656;", "&#8657;", "&#8658;", "&#8659;", "&#8660;", "&#8704;", "&#8706;", "&#8707;", "&#8709;", "&#8711;", "&#8712;", "&#8713;", "&#8715;", "&#8719;", "&#8721;", "&#8722;", "&#8727;", "&#8730;", "&#8733;", "&#8734;", "&#8736;", "&#8743;", "&#8744;", "&#8745;", "&#8746;", "&#8747;", "&#8756;", "&#8764;", "&#8773;", "&#8776;", "&#8800;", "&#8801;", "&#8804;", "&#8805;", "&#8834;", "&#8835;", "&#8836;", "&#8838;", "&#8839;", "&#8853;", "&#8855;", "&#8869;", "&#8901;", "&#8968;", "&#8969;", "&#8970;", "&#8971;", "&#9001;", "&#9002;", "&#9674;", "&#9824;", "&#9827;", "&#9829;", "&#9830;", "&#34;", "&#38;", "&#60;", "&#62;", "&#338;", "&#339;", "&#352;", "&#353;", "&#376;", "&#710;", "&#732;", "&#8194;", "&#8195;", "&#8201;", "&#8204;", "&#8205;", "&#8206;", "&#8207;", "&#8211;", "&#8212;", "&#8216;", "&#8217;", "&#8218;", "&#8220;", "&#8221;", "&#8222;", "&#8224;", "&#8225;", "&#8240;", "&#8249;", "&#8250;", "&#8364;"];
	str = str.split("&").join("&#038;");
	var i:uint = htmlEntities.length;
	while (i--) {
		str = str.split(htmlEntities[i]).join(numberEntities[i]);
	}
	return new XMLDocument(str).firstChild.nodeValue;
}

Tags: , ,

Search

Ad