Posts Tagged “css”

07 01 2009

SomaText standalone

Posted by: Romuald in SomaUI, tags: , , ,

I recently built for my framework Soma a subclass of the TextField Flash built-in class to be able to easily use styles with a textfield: SomaText.

I've extracted SomaText from the framework to be able to use it without Soma. It has powerful features such as default values, default stylesheet and styles. SomaText is able to parse the stylesheet to apply TextField and TextFormat properties straight from the stylesheet. You can also get a full description of the properties and styles applied by tracing the SomaText instance.

SomaText can be used as a label or as a more complicated TextField with HTML tags.

You will be fine with SomaText as it is extending the TextField class and SomaText also shorten the syntax when you create instances.

You can download the SomaText sources and documentation in the SomaText page.

The SomaText standalone is slightly different than the one in the framework (the global stylesheet registration is different), but you can find some explanation in the SomaProtest stylesheet page.

See a full list of CSS properties you can use with SomaText.

As a quick example, here are some SomaText syntax:

Plain Text
Actionscript:
  1. SomaText.globalStyleSheet = _globalStylesheetLoaded;
  2. // text
  3. var s1:SomaText = new SomaText("simple text");
  4. addChild(s1);
  5. // text with style from the global stylesheet
  6. var s2:SomaText = new SomaText("text with style from the global stylesheet", "simpleStyle");
  7. addChild(s2);
  8. // text with style from another stylesheet
  9. var s3:SomaText = new SomaText("text with style from another stylesheet", "simpleStyle", _customStylesheet);
  10. addChild(s3);
  11. // multiline text with properties set in actionscript
  12. var s4:SomaText = new SomaText("multiline text with textfield properties modified in the actionscript: width, multiline, wordWrap, selectable, and so on.", "defaultText");
  13. s4.width = 220;
  14. s4.multiline = true;
  15. s4.wordWrap = true;
  16. s4.selectable = true;
  17. // can be set in the constructor or using the setProperties method:
  18. //s4.setProperties({width: 220, multiline: true, wordWrap: true, selectable: true});
  19. addChild(s4);
  20. // multiline text with properties set in the stylesheet
  21. var s5:SomaText = new SomaText("multiline text with textfield properties set in the stylesheet: width, multiline, word-wrap, selectable, and so on.", "defaultTextMultiline");
  22. addChild(s5);

And the global stylesheet used:

Plain Text
CSS:
  1. .defaultTextMultiline {
  2. font-family: "Arial";
  3. font-size: 11;
  4. color: #2C384E;
  5. width: 220;
  6. multiline: true;
  7. word-wrap: true;
  8. selectable: true;
  9. }
  10. a {
  11. color: #002F7D;
  12. }
  13. a:hover {
  14. color: #5C2E2E;
  15. text-decoration: underline;
  16. }
  17. .simpleStyle {
  18. font-family: "Arial";
  19. font-size: 16;
  20. color: #8DA0C0;
  21. }
  22. .defaultText {
  23. font-family: "Arial";
  24. font-size: 11;
  25. color: #2C384E;
  26. }
  27. .para {
  28. font-family: "Arial";
  29. font-size: 18;
  30. color: #004040;
  31. }
  32. .color1 {
  33. color: #C1540B;
  34. }

Vote in HexoSearch

Comments No Comments »

17 12 2008

SomaText and StyleManager

Posted by: Romuald in SomaUI, tags: , , , , , ,

A StyleManager and SomaText classes have been added to the Soma Framework.

You can handle your text fields with external extended stylesheets for a better style management without the need to recompile.

SomaText is a class that is extending the Flash built-in class TextField with many features to make you life easier with texts and styles.

A global default stylesheet can easily be loaded in Soma with a single line.

SomaProtest has been updated, all the texts and styles are managed with a CSS stylesheet. A page explaining how to use the new style and text features is available here.

SomaText makes you able to use TextField and TextFormat properties straight from the CSS file, properties such as: embed-fonts, anti-alias-type, auto-size, multiline, font-family, text-decoration, grid-fit-type, and many others.

A full list of properties you can use is available on the CSS properties page.

Soma, SomaUI, sources and the SVN have been updated on the SomaUI page.

Vote in HexoSearch

Comments No Comments »

13 05 2008

Background fitting the browser (html/css/javascript)

Posted by: Romuald in experiments, tags: , , , , ,

This has nothing to do with flash but I share this quick try as I saw a lot of people looking for a background that fit the browser in html.

I used the ratio out I explained in this previous post, obvously you don't have the flash smoothing.

It is not perfect, I had to remove the scrollbars as a part of the picture is not visible. See the demo and download the source.

I'm far from being a good html/css/javascript developer so If you know already a good version or if you have developed one, please comment.

Plain Text
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Soundstep | experiments (html/css background fitting the borwser)</title>
  7. html, body {
  8.     overflow: hidden;
  9. }
  10. </style>
  11. <script type="text/javascript" src="browser.js"></script>
  13. function fixedBackground(url) {
  14.     document.body.style.padding = '0';
  15.     document.body.style.margin = '0';
  16.     var overlay = document.createElement('DIV');
  17.     overlay.style.position = 'absolute';
  18.     overlay.style.top = '0';
  19.     overlay.style.left = '0';
  20.     overlay.style.height = '100%';
  21.     overlay.style.width = '100%';
  22.     overlay.innerHTML = document.body.innerHTML;
  23.     document.body.innerHTML = '<img id="bg" width="10" height="10" src="' + url + '" style="left: 0; top: 0; z-index: 0" />';
  24.     document.body.appendChild(overlay);
  25.     backgroundset = true;
  26.     updateBackground();
  27. }
  28.  
  29. function updateBackground() {
  30.     var bSize = getSize();
  31.     var sWidth = bSize.w;
  32.     var sHeight = bSize.h;
  33.     var ratio = 1024 / 768;
  34.     if (sWidth / ratio <sHeight) sWidth = sHeight * ratio;
  35.     else sHeight = sWidth / ratio;
  36.     var __bg = document.getElementById('bg');
  37.     __bg.top = 0;
  38.     __bg.left = 0;
  39.     __bg.width = sWidth;
  40.     __bg.height = sHeight;
  41. }
  42.  
  43. function getSize() {
  44.     var myWidth = 0, myHeight = 0;
  45.     if( typeof( window.innerWidth ) == 'number' ) {
  46.         //Non-IE
  47.         myWidth = window.innerWidth;
  48.         myHeight = window.innerHeight;
  49.     }
  50.     else if (document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight )) {
  51.         //IE 6+ in 'standards compliant mode'
  52.         myWidth = document.documentElement.clientWidth;
  53.         myHeight = document.documentElement.clientHeight;
  54.     }
  55.     else if (document.body && ( document.body.clientWidth || document.body.clientHeight )) {
  56.         //IE 4 compatible
  57.         myWidth = document.body.clientWidth;
  58.         myHeight = document.body.clientHeight;
  59.     }
  60.     var r = {w:myWidth, h:myHeight};
  61.     return r;
  62. }
  63. </script>
  64. </head>
  65.  
  66. <body onresize="updateBackground()" onload="fixedBackground('bg.jpg')">
  67.  
  68.  
  69.  
  70. </body>
  71. </html>

Vote in HexoSearch

Comments 3 Comments »