Rubio Sphere aka nano Dyson Sphere

I had a dream the other day that we had created super small nano sized Dyson like sphere. In the dream they were called Rubio Spheres (after Mark Rubio for some reason) and they were powered by man made suns.

What is a Dyson Sphere?

A Dyson sphere is a hypothetical mega structure that completely encompasses a star and captures most or all of its power output. The concept was first described by Olaf Stapledon in his science fiction novel, Star Maker (1937), and later popularized by Freeman Dyson in his 1960 paper, “Search for Artificial Stellar Sources of Infrared Radiation“.[1]

The original idea was that an advanced civilization that theoretically needed more room would build a shell around a sun and live off the power it produced.

In the dream there was a torus shaped space station with an artificial sun inside of it. I made some mock-ups below of what it would look like:

In the second image the sun is shown in white. The Earth’s atmosphere gives it the yellow tint but light actually changes color at different temperatures and frequencies.

If you can make a sun in a lab then it may be possible to make it any size.

In my search I found an interesting image of an torus with a light source and a project called Standford Torus.

What is the Standford Torus?

The Stanford torus is a proposed design[1] for a space habitat capable of housing 10,000 to 140,000 permanent residents.[2]

The Stanford torus was proposed during the 1975 NASA Summer Study, conducted at Stanford University, with the purpose of speculating on designs for future space colonies[3] (Gerard O’Neill later proposed his Island One or Bernal sphere as an alternative to the torus[4]). “Stanford torus” refers only to this particular version of the design, as the concept of a ring-shaped rotating space station was previously proposed by Wernher von Braun[5] and Herman Potočnik.[6]

I included the image of the torus because the physics inside of a vacuum still contain many mysteries. The magnetic field around the earth, the shape and effects of a tornado, the production of electricity generated by spinning magnets, the unexpected behavior of objects attraction to each other in the vacuum of space and so on. I mention it because I think there’s something there.

I’m writing about this subject matter because it may be a subconscious fear. It may be a way for my mind to work out a solution so I have less stress or it may be a way to give my life some meaning or hope. I don’t know.

Almost a year ago, I was on the beach looking out at the ocean and had a vision of people living on the ocean. At that moment I knew it was going to happen. I know it is going to happen. But really I don’t know. At the time I was struggling to find a place to live, to find meaning. I still am. That experience may be a coping mechanism. A creative part of me thinks a benevolent being outside of time showed me those things to put me at peace.

The Earth may run out of room one day. The sun may go super nova one day. Even though I’ll be dead, for some reason it still bugs me. The possibility of humans going extinct bugs me.

 

Rubio Sphere aka nano Dyson Sphere

Is Euthanasia a solution to suffering?

17m7bll7tgbzxjpg

What is Euthanasia? From Merriam-Webster:

the painless killing of a patient suffering from an incurable and painful disease or in an irreversible coma.

The topic brings up many heated debates with pros and cons to both sides. Some strongly support it while some are against it.

One thing that is often ignored in the debates is that while people argue over whether it is acceptable, the people who it’s argued about are suffering. Sometimes in terrible pain. Pain is not something that can wait. Pain makes you aware of every moment. Days don’t drift by in peace. Instead it’s a struggle to survive moment by moment. There are 60 seconds in a minute, 60 minutes in an hour and 24 hours in a day. Not counting sleep, that’s 57,000 moments a day.

Some arguments for not supporting euthanasia is that someday a cure might be available. But that provides a vague timeline and the suffering is still moment by moment. You can look at the news and see new advancements in cancer research, solar energy, poverty and other similar announcements almost weekly. But looking back through news articles, the same announcements were made almost word for word over hundred years ago and repeated yearly, monthly and even weekly at times. Pick up any past Popular Science or Popular Mechanics magazine or pick up a current issue and read the Looking Back section or search for “solar power” or “cancer cure” at any top news site.

Now, we come to the main point. You may say life is precious and I agree but the truth is that by keeping people alive that are suffering you are actually supporting a form of torture.

Many people were outraged at the awful torture of the prisoners in Abu-Grahib and rightfully so. Many people were outraged by the torture and human rights violations in Guantanmo Bay. But ask these same people if they support Euthanasia that would stop the daily pain (torture in the body) and you get a debate. And these aren’t terrorists, they’re friends and relatives. YET, you allow them to be tortured by keeping them alive.

By keeping people alive that are suffering and choose to end life earlier than later (we all die), you are supporting torture. Those people would rather die than continue to live as they. But, while euthanasia is illegal, you cannot those same people from attempting to and sometimes succeeding at committing suicide. You leave them an undignified, and sometimes in a worse condition after a suicide attempt than if you helped them

Recently 11 people attempted to commit suicide in one day leading Canadian leaders to declare a state of emergency. What was so horrible to lead to that? Has anyone asked them? Sometimes physical torture isn’t the only thing to lead someone to that state.

JK Rowling, author of the Harry Potter series has made comments in her book stating that if someone is going to die it is permissible to let them go. Without ruining the story, euthanasia was a valid option, in her case, it was valid to help the greater good.

latest

Futurama, one of the most popular spin offs from the Simpsons suggested assisted suicide should not be ruled out. In the first episode they present a suicide booth. Was this a prediction that life would be so unbearable by all the rules and regulations that it was preferable to choose death?

x1oPwba

In one scene in a relatively recent episode, Hermes is yells to Bender as he heads toward a suicide booth saying, “Bender, no. Suicide is not necessarily the answer.” …meaning sometimes, it is.

In fact, according to the stories in the Bible, Jesus alluded to his thoughts on this topic. He was one of the most world changing men in history and showed people a way to love and peace in the world. But he also said,

They tie up heavy, cumbersome loads and put them on other people’s shoulders, but they themselves are not willing to lift a finger to move them.

This life he described was not how men were supposed to live. He said this way of life was “crush them” (NVT).

They crush people with unbearable religious demands and never lift a finger to ease the burden.

When someone is being crushed, death is a release. I won’t say he supported Euthanasia but he hated torture. He was so upset by those who were suffering by the life of undo burden that he related it to a form of torture (crushing).

His actions prove his thoughts. In one case he released a tortured and tormented man possessed by demons, he then was so merciful that he gave the demons a choice to enter the pigs to prevent the demons themselves from themselves suffering in a worse place (Matt8)

healing-jesus-250

Religious or not, you can see in the faces the people the burden of life. Whether it’s life or man made, it can be too much to bear.

I’ve met numerous people who, through no fault of their own, lost their health or job (often related), which caused them to lose the roof over their head and pretty much everything else.

I recently met a teacher living on the street. She still had her job. She was beautiful, intelligent and all there but her husband left, she couldn’t afford the bills on her own and could not find or afford a place to live in time that she had.

I’ve seen this multiple times. These are people who couldn’t afford this life. Not bad, not irresponsible, but poor, minorities, old, weak, fragile, some in walkers, some in wheel chairs, placed in situations they didn’t know how to handle.

The burden to live in today’s society can cause so much stress and trauma. I and others, including vets, have experience a level of PTSD that prevents making a living which means they are homeless and starving in the US. I and others have also experienced a mental illness that has not responded to anti-depression medication, chronic migraines and other ailments.

Look at the definition of Euthanasia in context of mental illness.

the painless killing of a patient suffering from an incurable and painful mental illness or in an irreversible mental illness.

It maybe time to call it what it is. Compassion and mercy.

compassion or forgiveness shown toward someone whom it is within one’s power to punish or harm.

Euthanasia is illegal in most countries. So someone who is not getting help such as going through cancer, going through unresponsive mental illness, living on streets homeless (many living on the street have untreated mental illness), and so on are suffering silently and this can sometimes lead to suicide.

All of a sudden a problem that may have had a solution, a point in time to help, now is lost forever. And those left behind suffer as well.

What if we allowed it? In a way we already do. In society we’ve come to accept euthanasia without a second thought towards animals. If a horse has a broken leg or an animal or personal pet we encounter has been injured we know instinctively to put it out of it’s misery. While we are different in many ways to animals, the suffering is no different. To the suffering a solution is necessary and if not soon, and if it’s ignored it’s torture.

Personally, if suffering is temporary, I wouldn’t recommend it. Some say, wait years, but we must provide solutions much sooner. A child prodigy in Florida killed himself at 11 years old.

One solution is to setup a site or office that people can go to that are thinking about it. This allows the world to prevent an unnecessary death. If there is an official site then those who have thought of it or are thinking of it can share the possible reasons. Once  tracked, causes and patterns may appear. This will let us know what leads people to this place.

Let’s say everyone that visits the clinic is on a certain medication. Within a few visits, the pattern emerges and the cause is clear. We can now help prevent future pain and suffering.

Also if you were able to visit an office, and let’s say it is incurable cancer, you would be able to have doctors and be able to look up and offer the latest alternative solution. The office would be able to give you an opportunity to choose to live. But if not you have a way to end the suffering.

One last story, I saw an old lady in a walker. Just misery on her face. No way to pay her bills, denied by society / social services for help because she didn’t qualify for something on the multitude of forms. She looked 70 or 80. No way she could get a job. It’s hit me right in the gut. It was depressing. Her life, was misery, pain and suffering. Something people with money, better health and better mental chemistry cannot easily relate to. But not her. She’s still out there. Maybe dead, maybe beaten, homeless, life stole everything from her. She and others like her should be allowed the choice to move on.

NOTE: One thing that has bothered me is that television news stations and newspapers do not publish the number of suicides, killings and deaths and what caused them. I think it should be legally required by law to be called an official news source, this information should be published daily or weekly, prominently so that we know what’s really going on. This would hopefully have the effect of what causes the most pain in our world and focus the world on it in an attempt to provide solutions.

By the way, the U.S. in the past used to help people with mental health issues, used to provide welfare, help them with shelter and more. Both Ronald Reagan and Bill Clinton removed those social services forces those with those chemical imbalances and their families into the streets, into for profit jail and prison systems.

President [Clinton] had been presented with an analysis showing that the Senate bill would push more than a million children into poverty.

In conclusion:

As long as we have incurable and painful diseases, incurable and painful mental illness and starvation like it is now euthanasia would be compassion to those who would choose it.

Anyway, here’s a picture of a dog and a kitten:

ziR9jlu

Disclaimer: Images are not my own. Credits can be found by Google reverse image lookup.

Is Euthanasia a solution to suffering?

Announcing VeraType

VeraType is an app I’ve been working on that lets you convert your images into text and your text into images (see screenshots). I’ve just released it a version for Windows and Mac.

[new_royalslider id=”1″]

 

It’s mostly for entertainment but it can be used for forum signatures, email messages, chat messages, typography, artwork or fun. I’ve created some tutorials shown below.

How to make great text art
How to convert text into an image
Sharing your type compositions

There is a Mac and Windows version and a version for Android.

 

Announcing VeraType

Save Login in Flash and Flex

One of the benefits of creating your login in HTML is the browsers ability to save your username and password. This feature is becoming more important with new features like Firefox Sync, Chrome Sync and so on. We can do this in Flash and Flex with a little bit of work.

First, some common prompts  you’ll recognize.

Firefox save password

Safari save password

Google Chrome save password

To begin we need to add a form to your index.template.html page inside the body tag:

	<form id="bridgeForm" action="#" target="loginframe" autocomplete="on" style="display:none">
		<input type="text"     name="username" id="username" />
		<input type="password" name="password" id="password"/>
	</form>

	http://blankpage.html

This gives the browser a form to auto fill and gives us a method to get and set the form values.

The browser will fill the form with values if the user logged in before. If there are multiple users it will fill it with the last user. Or on some browsers it will fill in the password when a saved username is entered into the form.

For this to work with Flash we need to do the following:

1. Add scripts to the page when the application loads (or embed them on the page)
2. Check for existing form values set by the browser
3. Fill in our Flash form with those values

Using the save password class we can perform these procedures.

protected function application_applicationCompleteHandler(event:FlexEvent):void
{
	var savePassword:SavePassword = new SavePassword();
	var savePasswordCreated:Boolean = savePassword.initialize(); // places our javascript onto the page
	var result:Object = savePassword.resizeApplication("60%"); // used to see the form - for testing purposes
	var result2:Object = savePassword.showForm(); // used to see the form - for testing purposes
	var loginItems:Array = savePassword.getFormValues(); // gets existing form values

	if (loginItems.length>0) {
		usernameTextInput.text = loginItems[0];
		passwordTextInput.text = loginItems[1];
	}
}

Before the browser will fill in our form we have to prompt it to save the form. To do this we need to submit the form.

That means doing the following:
4. Copy our login information to the form on the HTML page
5. Submit the form. By default a form will redirect to a new page. We can prevent this by targeting a frame or posting to a hash tag (action=”#”). We are going to target a frame.
6. After calling submit form we can continue to handle the login procedure as normal.

IE we continue to use HTTPService, URLRequest, etc as normal.

protected function submitForm_clickHandler(event:MouseEvent):void
{
	var savePassword:SavePassword = new SavePassword();
	var setValues:Boolean = savePassword.setFormValues(usernameTextInput.text, passwordTextInput.text);
	var results:Boolean = savePassword.submitForm(); // this prompts the save password dialog

	// handle actual validation and login as usual
	myLoginService.send();
}

And our MXML form:

<s:BorderContainer horizontalCenter="0" verticalCenter="0" 
				   width="250"
				   dropShadowVisible="true"
				   >
	<s:layout>
		<s:VerticalLayout paddingBottom="8" paddingLeft="12"
						  paddingRight="8" paddingTop="12"/>
	</s:layout>
	<s:Label text="Login Form" fontSize="24" fontFamily="Verdana"/>
	<s:TextInput id="usernameTextInput" text="" prompt="Username"/>
	<s:TextInput id="passwordTextInput" text="" displayAsPassword="true" prompt="Password"/>
	<s:HGroup>
		<s:Button label="Submit" click="submitForm_clickHandler(event)" />
	</s:HGroup>
</s:BorderContainer>

View ExampleSource CodeLibrary

Optional Multiple Account support
On all of the major browsers if you type into the username field the auto complete will fill in the rest of the username or password. When multiple users are saved for the same site the browsers save the last one submitted and fills the form in with that one on future visits.

If the form is left blank or other events happen the browser may not fill in the form. Usually logging in once will retain that login. If we are using Firefox we can get it to help us auto complete the form when the user types in the username. Other browsers are not as forthcoming.

To do this we need to:
7. Give the HTML form our username and “tab” to the next field
8. Check if the browser has filled in the password after username is entered
9. Fill in our password field with the password

protected function username_focusOutHandler(event:FocusEvent):void
{
	var savePassword:SavePassword = new SavePassword();

	// if username or password is blank check for password after supplying username
	// only am able to get this to work with Firefox at the moment 
	// not thoroughly attempted with other browsers (limited time)
	var value:String = savePassword.checkForPassword(usernameTextInput.text);

	if (value!="") {
		passwordTextInput.text = value;
		passwordTextInput.selectAll();
	}

	// set focus on our text field
	passwordTextInput.setFocus();

	// we have to focus back on Flash because of the javascript we use
	var results:Object = savePassword.setFocusOnFlash();

}

In conclusion, we want our Flex and Flash apps to provide the best experience as possible.

Notes
In Safari it seems that you have to be on a server (localhost or remote) for the passwords to be saved. Firefox has a few minor quirks as well as Chrome but I can’t remember them now. It mainly had to do with making sure the HTML form had all the required elements. Any issues bring them up in the comments and it might jog my memory.

PS This is a work in progress. Please leave your comments or improvements.

Save Login in Flash and Flex

Using CSS and Styles in Flex – Styles Guideline

This post we will go over guidelines in setting up style sheets in Flex and in CSS in general. First, the stylesheet examples. BTW This is a work in progress. First we start with the fonts.css file which contains any embedded fonts:

/* CSS file for Embedded Fonts */

/**** MyFont ************************************/

@font-face {
	src: url("/assets/fonts/Font.otf");
	fontFamily: MyFont;
	embedAsCFF: true;
	fontStyle:  normal;
}

@font-face {
	src: url("/assets/fonts/Font.otf");
	fontFamily: MyFont;
	embedAsCFF: true;
	fontStyle:  italic;
}

@font-face {
	src: url("/assets/fonts/Font.otf");
	fontFamily: MyFont;
	embedAsCFF: true;
	fontWeight: bold;
	fontStyle:  normal;
}

@font-face {
	src: url("/assets/fonts/Font.otf");
	fontFamily: MyFont;
	embedAsCFF: true;
	fontWeight: bold;
	fontStyle:  italic;
}

/**** Arial ************************************/

@font-face {
   src: url("/assets/fonts/Arial.ttf");
   fontFamily: ArialEmbedded;
   embedAsCFF: true;
   fontStyle:  normal;
}
 
@font-face {
   src: url("/assets/fonts/Arial Italic.ttf");
   fontFamily: ArialEmbedded;
   embedAsCFF: true;
   fontStyle:  italic;
}
 
@font-face {
   src: url("/assets/fonts/Arial Bold.ttf");
   fontFamily: ArialEmbedded;
   embedAsCFF: true;
   fontWeight: bold;
   fontStyle:  normal;
}
 
@font-face {
   src: url("/assets/fonts/Arial Bold Italic.ttf");
   fontFamily: ArialEmbedded;
   embedAsCFF: true;
   fontWeight: bold;
   fontStyle:  italic;
}

Notice we named each format with the same font family name. Next we have our textstyles.css file. This contains text components that will use embedded fonts:

/* CSS file for Label, TextInput, TextArea, RichText, RichEditableText components */

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

/**** LABEL ************************************/

s|Label
{
	fontFamily:    MyFont;
}

s|Label.loginGroupStyle
{
	fontSize:      12;
	fontFamily:    MyFont;
	embedAsCFF:    true;
	color:         #FFFFFF;
}

s|Label.formItemStyle
{
	fontSize:      14;
	fontFamily:    MyFont;
	embedAsCFF:    true;
	color:         #FFFFFF;
}

s|Label#loginDescriptionText
{
	color:         #FFFFFF;
	fontSize:      15;
	fontStyle:     italic;
	textAlign:     center;
}

/**** TEXT INPUT ***************************/

s|TextInput
{
	font-family:      MyFont;
	font-size:        24;
}

s|TextInput:normalWithPrompt
{
	font-style:       normal;
	horizontal-align: left;
	color:            #CCCCCC;
	font-family:      MyFont;
}

s|TextInput.myStyle:normalWithPrompt
{
	font-style:       normal;
	horizontal-align: left;
	color:            #CCCCCC;
	font-family:      MyFont;
}

/**** TEXT AREA ***************************/

s|TextArea
{
	fontFamily:        MyFont;
	fontSize:          24;
}

s|TextArea:normalWithPrompt
{
	color:             #CCCCCC;
	fontFamily:        MyFont;
	fontStyle:         normal;
	fontWeight:        bold;
	textDecoration:    underline;
}

s|TextArea.myStyle
{
	color:             #CCCCCC;
	fontFamily:        MyFont;
	fontStyle:         normal;
	tabStops:          0 100 200;
	typographicCase:   uppercase;
}

s|TextArea.myStyle:normalWithPrompt
{
	color:             #CCCCCC;
	fontFamily:        MyFont;
}

Embedded Fonts

First we are going to start with fonts. If you have any embedded fonts separate them out into a separate CSS file. This allows you to comment out the embedded font file to compare the application file size with or without fonts included.

All for one
Fonts have multiple type faces signified by style and weight. In Flash these are regular, bold, italic and bold italic. You must create a rule for each of these for them to be included with the font family. If you don’t include italic or bold and your text is italic or bold then the text will show the default font family and not your embedded font.

You should also name the fonts of the same family the same name for each style and weight (see example). Notice that we have 4 font face rules all for the same font family. When you use the font-face rule you are only embedding one face of the font family. By default that is the regular font face.

Note: Some fonts do not include italic or bold.

Checking what fonts are embedded
You can see what font and styles of those fonts are embedded by calling trace(Font.enumerateFonts()). You should see 4 entries for your embedded font (one for each font face).

Errors
If you get warnings you may be using MX component and text fields. These do not embed the fonts as CFF. The warning looks like this:

The warning: incompatible embedded font 'Verdana' specified for 
mx.core::UITextField (UITextField398) . 
This component requires that the embedded font be declared with 
embedAsCFF=false.

To get around this error you need to switch to using Spark components or embed the fonts again but with CFF turned off. You can also enable “Use Flash Text Engine in MX components” in the Flash Builder compiler options. To embed a font again as non CFF add the following but set the embedAsCFF to false:

/* Embed as CFF as false */

@font-face {
   src: url("/assets/fonts/Verdana.ttf");
   fontFamily: Verdana;
   embedAsCFF: false;
   fontStyle:  normal;
}
 
@font-face {
   src: url("/assets/fonts/Verdana Italic.ttf");
   fontFamily: Verdana;
   embedAsCFF: false;
   fontStyle:  italic;
}
 
@font-face {
   src: url("/assets/fonts/Verdana Bold.ttf");
   fontFamily: Verdana;
   embedAsCFF: false;
   fontWeight: bold;
   fontStyle:  normal;
}
 
@font-face {
   src: url("/assets/fonts/Verdana Bold Italic.ttf");
   fontFamily: Verdana;
   embedAsCFF: false;
   fontWeight: bold;
   fontStyle:  italic;
}

Precompile to SWF
Embedding your fonts separate from the rest of your CSS styles also allows you to precompile the CSS to a SWF file separately. In my tests compiling the fonts CSS to SWF increased the compile time (instead of decrease). This was tested when embedding Lucida Grande. See the section performance without unicode range for more info.

Character Sets and Unicode Ranges
When you embed a font you are automatically including the full character set. Fonts can contain up to 65,000 glyphs. This can add unnecessary size to your application. You can define a range of characters that will include only the characters you specify. We do this through the unicode-range property.

An example of setting the unicode range and then setting it inside an embed tag:

unicodeRange: U+0041-005A, U+0061-007A, U+0030-0039
@font-face {
   src: url("/assets/fonts/Arial.ttf");
   fontFamily: Arial;
   embedAsCFF: true;
   fontStyle:  normal;
   unicodeRange: U+0020-007E;
}

The following define different ranges that are embedded:

U+0020,U+0041-005A – Upper-Case [A..Z]
U+0020,U+0061-007A – Lower-Case a-z
U+0030-0039,U+002E – Numbers [0..9]
U+0020-002F,U+003A-0040,U+005B-0060,U+007B-007E – Punctuation
U+0020-007E – English Range (all the above)

You can find the complete set of ranges and short hand names in the Flash Builder/sdks/4.6.0/frameworks/flash-unicode-table.xml file.

You can also use the language description instead of the character ranges (if you manually add the unicode short names to the flex-config xml file):

unicodeRange: Uppercase, Lowercase, Numerals, Punctuation, "Basic Latin", "Japanese Kana";

Note: If you set a range than any characters outside of that range will not be embedded in the font you are using.

Note: If you do not add the short names you’ll get an error similar to the following, “Invalid Unicode range ‘UPPERCASE'”. Note: I didn’t get it to work with short hand names in my tests.

Note: Consider our international friends before making a decision to include only English characters.

Character or Glyph?
Type designers distinguish characters from glyphs in order to comply with Unicode, an international system for identifying all of the world’s recognized writing systems. Only a symbol with a unique function is considered a character and is thus assigned a code point in Unicode. A single character, such as a lowercase a, can be embodied by several different glyphs (a, A). Each glyph is a specific expression of a given character. source

Interesting note: When we specify the Unicode character range to include the lowercase “a” we may also be including uppercase “A”.

File size with and without range set
When embedding fonts be sure to check the file size. Without setting a range when embedding Avenir the application increased in size by 116kb. When embedding Lucida Grande without setting a range the application file size increased by 560kb.

Here are the results for embedding the Avenir font:

Original file size (no embedded font)          51kb 

With one character and one type face           65kb
-  regular

All 4 type faces no range                      167kb
- regular, italic, bold, bold italic

All 4 type faces english character range       80kb 
- regular, italic, bold, bold italic

The following are how much size difference there is when setting ranges:

Avenir embedded without range (default)        116kb
Avenir embedded with range                     29kb

Gill Sans embedded without range (default)     132kb
Gill Sans embedded with range                  46kb 

Lucida Grande embedded without range (default) 560kb
Lucida Grande embedded with range              27kb

Performance without unicode range set
Compiling can take much longer if you do not set a character range. In my tests embedding the full range of characters in the Lucida Grande font family took 6-24 seconds longer each compile time when no range was set. That number dropped to about 1 second with the range set.

Using Compile CSS to SWF option
I tested compiling CSS to SWF (right click on the CSS file in Flash Builder and check Compile to SWF). In my tests it took much longer to compile when this option was enabled. It is supposed to help by not recompiling styles but in my tests it did not work. It may have been that character ranges were set and that may have kept the CSS dirty flag set so it was always recompiled or it could have been something else entirely. I didn’t figure it out at the time of this writing but you should probably test compile times when using this option.

Naming fonts
When naming embedded fonts use a name similar to the font name but not exactly the same. If the font is named “Courier New” then name your font “CourierNew” or something similar. Do not name it “Courier New”.

We do this because if the font is installed in your operating system it will show up in your application even if it’s not embedded correctly. It will give the appearance of being embedded without it actually being embedded.

Using a unique name and then applying that font unique name to your components and CSS allows you to see visually if the font is embedded and applied correctly at runtime. We do this because Flash fall backs on device fonts if it can’t find an embedded font with the same name. It will look like you embedded the font but if you run the application on another computer where the font is not installed an alternative font will be shown.

STYLES
Let’s move on to CSS styles. You’ll notice the spaces between the name and value of the styles. Adding a space allows you to double click on the value for selection and makes it easier to read. If you want to be fancy you can align the values with tabs or spaces as shown.

s|Label
{
	fontSize:      14;
	fontFamily:    MyFont;
	embedAsCFF:    true;
	color:         #FFFFFF;
}

Camel case or dashes
Style names of multiple words can be defined with camel case, “fontFamily”, or by dashes, “font-family”. I don’t think it matters if you use either. Whatever you choose stick to it the whole file. One advantage to camel case is it’s used in the attributes of MXML. So if you needed to copy and paste between MXML and CSS style declarations and were using camel case rather than dashed case you would not have to remove the dashes as dashes are not allowed in MXML. One advantage of using dashes is it’s easier to read.

Alphabetical Ordering of Style Names
You don’t have to order styles alphabetically but it looks nicer. What’s more important is the grouping and ordering of the style inheritance.

Grouping and ordering
When defining styles in your CSS file group them by type (TextInput styles, Label styles, Button styles, etc) and in those type groups define the defaults first, next by class (CSS class) and then by ID. Go from broadest scope to narrowest. This order is based on the way the styles are inherited and applied.

/**** TEXT INPUT ***************************/

/* default type selector */
s|TextInput
{
	font-family:      MyFont;
	font-size:        24;
}

/* class selector */
s|TextInput.myStyle
{
	font-style:       normal;
	horizontal-align: left;
	color:            #CCCCCC;
	font-family:      MyFont;
}

/* type selector with ID selector condition */
s|TextInput#usernameTextInput
{
	font-style:       normal;
	color:            #AAAAAA;
	font-family:      MyFont;
}

Base Types
Order the base types before the classes that extend them.

/**** TEXT BASE ***************************/

s|TextBase
{
	font-family:      MyFont;
	font-size:        24;
}

s|TextBase:normalWithPrompt
{
	font-family:      MyFont;
	font-style:       normal;
}

/**** TEXT INPUT ***************************/

s|TextInput
{
	font-family:      MyFont;
	font-size:        24;
}

/**** TEXT AREA ***************************/

s|TextArea
{
	font-family:      MyFont;
	font-size:        24;
}

Creating class and type styles
When creating class styles try to name them by function or context rather than color. There are many reasons for this but it comes down to handling design changes gracefully.

Let’s say your application has lots of blueStyle, darkBlueStyle, lightBlueStyle, lightBlueBoldStyle type of styles. That may be defined as this:

.blueStyle {
   color: #0000ff;
}
<s:Label styleName="blueStyle" />

You may have thousands of labels and buttons using “blueStyle”. Then let’s say you receive instructions to change the color to red. That would look like this:

.blueStyle {
   color: #ff0000;
}

But now blueStyle no longer means blue color. Now what do you do? You could change the color value of each of the styles to red but then the style names would no longer describe the style content. To retain an accurate style name description you would need to rename all the style names to say “red” instead of “blue”, set all the style values to red and then find and replace each instance that referenced the old blue style names with the new red style names. That’s what we call a concrete implementation.

If we name styles by function or context we can avoid that. For example, if you have a login form, create a “s|Label.loginFormLabelStyle” style rather than “.blueBoldLabel”. Then when you have a change from blue to red you only have to change the values in the loginFormLabelStyle styles.

So instead of “blueStyle” you would have “loginFormLabelStyle”:

.loginFormLabelStyle {
   color: #0000ff;
}

Then the client says they want to change the color to red you simply change the value and the style name still applies even though the value changes to red:

.loginFormLabelStyle {
   color: #ff0000;
}

Inheriting Styles from Containers
On that note, you may have a form that has multiple Labels. If possible apply the style to the container rather than individual elements. The individual Labels will inherit those values from the container. For example, if all the text in the Labels in a form are dark grey then apply the style to the parent group like so, “s|Group.loginFormStyle”.

Using the above method may create more styles but it is more abstract, like writing to an interface.

Style Constants in code
If you do have universal colors in Flex you have the freedom to use a global constants rather than global styles. You don’t have that freedom in other environments but it’s possible in Flex. So this would be perfectly legal, <s|Label color=”{ApplicationModel.TEXT_COLOR}”/>. This is doing one of the things CSS was created to do. You’re environment and workflow will probably dictate the advantages and disadvantages of this.

Multiple style files
As CSS files can grow over time. Large CSS files can grow out of control. Break CSS styles into groups and then those groups into different files. For example, create a CSS file for Label, TextInput, TextArea, TextBase, RichText, RichEditableText in one, List, DataGroup, DataGrid, ItemRenderers in another and containers such as Group, HGroup, VGroup, BorderContainer, SkinnableContainer, etc in another. Don’t forget Button, RadioGroup, Slider and etc in another. You could join the List groups and Buttons groups into one file but I recommend still keeping the major text components separate.

While it sounds like overkill to separate CSS into separate files it’s an attempt to give CSS organization and structure. This is because CSS has a loose set of rules that allow it to get out of control. When it’s unorganized it makes it hard to find where and why styles are defined and which are applied to a given component.

In the containers or styles CSS file I would also put the universal, global and general styles. General styles being the class type declarations that do not have a type for example, “.myStyle”.

In practice you should try and qualify the generic class style and ID declarations with a type. This increases performance. For example, if you know a style is only going to be used with Labels do this:

s|Label.myStyle 
{
	fontWeight: bold;
}

rather than this:

.myStyle 
{
	fontWeight: bold;
}

Specificity and inheritance
One tip to remember about styles is that the closest style to the object wins. And by closest I mean in proximity, specificity and last defined. So an inline style overrides a type declaration which overrides a global declaration which overrides a universal declaration.

APPLICATION
In your application add your includes like so:

<s:Application>

	<s:Style source="fonts.css"/>
	<s:Style source="styles.css"/>
	<s:Style source="textcomponents.css"/>
	<s:Style source="components.css"/>
	<s:Style source="containers.css"/>

</s:Application>

If you need to debug styles you can comment out each file one at a time until you find the style that’s causing the issue.

Naming gotchas
If you name your CSS file defaults.css it will be automatically included whether you specify the include directive or not. The only reason I wouldn’t recommend naming it this if you ever need to comment out your stylesheets. Also, you do not want to name your stylesheet a reserved word such as default.css. This will cause errors.

POP QUIZ
In the following Label what would the font family be and what would be the inheritance order?

<s:Label id="myLabel" text="Hello world" fontFamily="Noteworthy"/>
s|Label.myStyle 
{
	fontFamily: Courier;
}

global {
	fontFamily: Baskerville;
}

s|Label 
{
	fontFamily: Helvetica;
}

s|Label#myLabel
{
	fontFamily: Verdana;
}

s|Label 
{
	fontFamily: Garamond;
}

* {
	fontFamily: Didot;
}

To make it more challenging what would the order be with this change:

<s:Label id="myLabel" text="Hello world" fontFamily="Noteworthy" styleName="myStyle"/>

And using the same styles as before plus this one:

.myStyle 
{
	fontFamily: Futura;
}

Experimental Flex style inheritance lookup utility class and SWC.

Using CSS and Styles in Flex – Styles Guideline

UI Graphic tips in Flex

This example shows how to create text inner shadow, text and display object border, beveled text with border, lines with inner shadow and frames with inner shadow.

This example includes a BorderStrokeFilter and TextShadowFilter classes and skinnable container FrameSkin skin. It also includes a drop shadow explorer. It is setup so you can compare text with drop shadow filter applied (in Flash) with images of rasterized text (with stroke) exported from Photoshop.

Demo
Source

UI Graphic tips in Flex

Add a border or outline to Text or Bitmap at runtime

Update: I’ve created a new border filter based on the Spark DropShadowFilter. It works better and it’s native. You can read more here.

I’ve been trying to figure out how to add an outline to dynamic text and found out that there’s little usable concrete examples out there.

I hobbled together some classes that find the outline of an object and used that to draw pixels in those places. I then attempted to outline that outline to create a simple border weight like effect. Here’s the demo.

The main issue for a text outline is that the text has to be rasterized first; it’s not as easy to apply as a drop shadow filter effect.

The other issues are that the border grows in rather than out, the edge is aliased and the outline is cut off if the bitmap is not large enough ahead of time.

I think a better approach would be to create a pixel bender filter that can be applied to display object. Or instead of getting the points around an object get the text path (like in FXG Path) and then apply a stroke to it.

<s:Path data="M 1,2 L 3,4">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>

If possible the class would extend Label and add a stroke property or extend Path and add a text property (when you set the text the path would be created). Examples:

<s:Path text="Test Text">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>
<s:Path bitmapData="{image1}">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>
<s:Label text="Test Text">
    <s:stroke>
        <s:SolidColorStroke weight="2" />
    </s:stroke>
</s:Path>
Add a border or outline to Text or Bitmap at runtime