A different way to think about creative genius

August 29th, 2010

I’m not really sure what to say in this post but I think there’s something really interesting in this presentation by Elizabeth Gilbert,

I don’t know how to put the pieces together, so it’s a collection of thoughts. I’ll probably update this post at a later time.

Notes from the physicist Charles Hard Townes has many parallels to the idea above, some presented in this article.

Charles Hard Townes is a Nobel Prize-winning physicist and educator. Townes is known for his work on the theory and application of the maser and other work in quantum electronics connected with both maser and laser devices.

Asked of Townes, Some people would say that because we don’t know, it can’t be.
I would say that because we don’t know, we don’t know.

“Religion and science, faith and empirical experiment… they are united by similar goals: science seeks to discern the laws and order of our universe; religion, to understand the universe’s purpose and meaning, and how humankind fits into both.”

When asked, You’ve described your inspiration for the maser as a moment of revelation, more spiritual than what we think of as inspiration. Do you believe that God takes such an active interest in humankind?

[The maser] was a new idea, a sudden visualization I had of what might be done to produce electromagnetic waves, so it’s somewhat parallel to what we normally call revelation in religion. Whether the inspiration for the maser and the laser was God’s gift to me is something one can argue about. The real question should be, where do brand-new human ideas come from anyway?

A genius originally meant,

“a guardian spirit assigned to a person at birth; tutelary deity”

5. Roman myth
a. the guiding spirit who attends a person from birth to death
b. the guardian spirit of a place, group of people, or institution
6. ( usually plural ) Arabian myth a demon; jinn

Elizabeth Gilbert,
“But, ancient Greece and ancient Rome — people did not happen to believe that creativity came from human beings back then, OK? People believed that creativity was this divine attendant spirit that came to human beings from some distant and unknowable source, for distant and unknowable reasons. The Greeks famously called these divine attendant spirits of creativity “daemons.” Socrates, famously, believed that he had a daemon who spoke wisdom to him from afar. The Romans had the same idea, but they called that sort of disembodied creative spirit a genius. Which is great, because the Romans did not actually think that a genius was a particularly clever individual. They believed that a genius was this, sort of magical divine entity, who was believed to literally live in the walls of an artist’s studio, kind of like Dobby the house elf, and who would come out and sort of invisibly assist the artist with their work and would shape the outcome of that work.”

“So brilliant — there it is, right there that distance that I’m talking about — that psychological construct to protect you from the results of your work. And everyone knew that this is how it functioned, right? So the ancient artist was protected from certain things, like, for example, too much narcissism, right?”

I think a lighter view on the “origin” of things whether it be new ideas or life is captured nicely in this episode of Futurama – A Clockwork Origin.

Posted in Ideas, Technology | No Comments »

Converting XML to object tip

August 5th, 2010

When you are retrieving XML from the server and you ask Flex to convert it to an Object, by setting the resultFormat to "object", Flex provides you with an object proxy representing the original XML. However, when Flex encounters a node with only one item it can't tell if it's an Array or a String. So by default it converts the node into a String.

In this example accessing root.people.person is typed as an instance of ArrayCollection:

PLAIN TEXT
XML:
  1. <root>
  2.    <people>
  3.       <person name="Mikal"/>
  4.       <person name="Nikola"/>
  5.       <person name="Yuliya"/>
  6.       <person name="Katya"/>
  7.       <person name="Peter"/>
  8.    </people>
  9. </root>

But let's say only one item is returned. Because there is only one item root.people.person is typed as a String:

PLAIN TEXT
XML:
  1. <root>
  2.    <people>
  3.       <person name="Yuliya"/>
  4.    </people>
  5. </root>

Accessing the first and second example in ActionScript:

PLAIN TEXT
Actionscript:
  1. // using the first example with multiple nodes this statement
  2. var value:Object = root.people.person; // returns an array
  3.  
  4. // using the second example with a single node the same statement
  5. var value:Object = root.people.person; // returns an string

To handle this situation I see the following a lot:

PLAIN TEXT
Actionscript:
  1. // if multiple items then property is an array collection
  2.                     if (root.people.person is ArrayCollection) {
  3.                         var person:ArrayCollection = root.people.person;
  4.                         var personsLength:int = person.length;
  5.                        
  6.                         // do things
  7.                         for (var i:int=0;i<personsLength;i++) {
  8.                             var person:PersonVO = PersonVO(person.getItemAt(i));
  9.                             // do more things
  10.                         }
  11.                     }
  12.                    
  13.                     // if only one item then the date property is a string
  14.                     else if (root.people.person is String) {                       
  15.                         var person:PersonVO = PersonVO(root.people.person);
  16.                         // do the same thing as above again
  17.                     }

Save yourself repetition and time and convert the single item to an array.

PLAIN TEXT
Actionscript:
  1. // content can be object proxy, string or array collection
  2.             var peoples:ArrayCollection = ArrayUtils.getArrayCollection(root.people.person);
  3.  
  4.                         var peoplesLength:int = peoples.length;
  5.                        
  6.                         // do things
  7.                         for (var i:int=0;i<peoplesLength;i++) {
  8.                             var person:PersonVO = PersonVO(peoples.getItemAt(i));
  9.                             // do what you need to only once
  10.                         }
  11.                     }
  12.         /**
  13.          * Converts object to array collection if not array collection
  14.          * */
  15.         public static function getArrayCollection(object:Object):ArrayCollection {
  16.             // if only one item it is a string add it as a single item to an array
  17.             if (!(object is ArrayCollection)) {
  18.                 return new ArrayCollection([object]);
  19.             }
  20.             else {
  21.                 return ArrayCollection(object);
  22.             }
  23.         }

What we're doing is adding the single item to an ArrayCollection so it can use the same code as when the item is an ArrayCollection.

The following HTTPService call that results in this scenario is shown below:

PLAIN TEXT
XML:
  1. <mx:HTTPService resultFormat="object" />

Posted in Flex, Tips | No Comments »

The Gulf Oil Spill

July 17th, 2010

Put this short Ted Talk video on in the background.
http://www.ted.com/talks/lang/eng/carl_safina_the_oil_spill_s_unseen_culprits_victims.html

About this talk

The Gulf oil spill dwarfs comprehension, but we know this much: it's bad. Carl Safina scrapes out the facts in this blood-boiling cross-examination, arguing that the consequences will stretch far beyond the Gulf -- and many so-called solutions are making the situation worse.
About Carl Safina

Carl Safina's writing explores the scientific, moral and social dimensions of our relationship with nature.

Posted in General, Ideas | No Comments »

Flash Builder 4 and Flex 4 Bible and Flex 4 Fun

June 24th, 2010

I normally don't pimp out books but I'd like to mention these since I've read them recently. The first is Flash Builder 4 and Flex 4 Bible by David Gassner. I was migrating an app from Flex 3 to Flex 4 and ran into numerous hurdles. About 90% of our design had to be reskinned. I found this chapter in his book on skinning, http://media.wiley.com/product_data/excerpt/56/04704889/0470488956-4.pdf from this page, http://www.wiley.com/WileyCDA/WileyTitle/productCd-0470488956.html. It contained details that the official documentation lacked. To be fair Flex 4 came out around March so I think in time, it too will have the same details.

The second book is Flex 4 Fun by Chet Haase. This book covers the graphical and animation side of Flex 4. There are a lot of books that cover the basics. This contains the kind of details an advanced developer is looking for. Take a look at a sample chapter, http://www.artima.com/samples/flex4funCh2.pdf.

I'd like to see more books by these guys so support them!

Disclaimer: I don't receive any money or free things for this post or any post. Though I should... probably... because I would give you an accurate review either way...but i wont... but could... but won't....

Posted in Flash, Flex, Technology | No Comments »

Flash Catalyst CS5 – How to make it work for you

June 24th, 2010

Update: If you are familiar with Flash Catalyst the first section describes the pros and cons. If you just want to get to the main topic of the post you can skip down to the first header.

third party observerSpeaking as a completely objective third party observer with absolutely no personal relation to the matter... Frontpage was an interesting programs. It had a great design view, properties panel, code hinting, snippets code and more. All the features were great. All these features worked for you. The horrifying thing was that it would rewrite your code sometimes reverting your work and in a many cases counter productive. When you're trying to get your site to work with both Internet Explorer 4, Internet Explorer 3 and Netscape 4 this "helpful" assistance would ruin all the work you had just done. This was before SVN so saving multiple versions of your HTML files was a constant procedure. They eventually added a "don't rewrite my code" option and it became relevant and useful. They realized that the people using their products needed more than the cookie cutter shaped designs they provided. Anyway, that is completely unrelated to this post...

Flash Catalyst

Flash Catalyst! What a neat program. :) It's been helpful in taking artwork from Photoshop and Illustrator and creating accurate hi-fidelity FXG (Flex/Flash XML Graphics tags) skins for Flex. At least as high fidelity as I've seen on the web. Since the art can remain as vector shapes and paths they don't lose there sharp edge as you zoom in or resize. Cool!

Flash Catalyst has also been valuable in learning transitions, FXG and component skinning. The goal of FC was for the designer to import the design, convert art to components or component skins, create transitions and then package it up and hand it off to the developer to add coding logic. This approach is obvious in theory but it hasn't been the case. In reality, on Flex projects it's the developer NOT the designer who is using Flash Catalyst to integrate the artwork correctly into the project.

For example, some text inputs that were in the design next to each other were in the code in completely separate Groups. So what, you say, just copy and paste them into the right Groups in the code. This had disastrous results. Since FC doesn't yet support positioning using constraints or automatic layout containers every element in the design is hard coded to an x and y position. Flash Builder could not open the design so I was stuck in code. Many buttons and inputs had no name or id so there was no way to tell what is what and where. The automatic tab order was also out of order because of this issue. So anyway, the quickest solution was to go back into FC move all the form controls under the same group layer, add names in the layers to help identify each component in code and set the tab order in the properties panel because some controls were in sub groups and would not cycle correctly.

Another example, when the skins were created for Buttons or TextInputs there was a lot of redundancy. So what one person, says, it works right? Yes and no. I don't know how much performance is affected by multiple instances of a filter but file size and memory size are important. For example, one image had three instances of the same filter:

PLAIN TEXT
XML:
  1. <s:GlowFilter color="#FFFFFF" alpha="1.0" blurX="10" blurY="10" includeIn="upAndSelected" inner="false" knockout="false" quality="2" strength="1"/>
  2. <s:GlowFilter color="#FFFFFF" alpha="1.0" blurX="10" blurY="10" includeIn="overAndSelected" inner="false" knockout="false" quality="2" strength="1"/>
  3. <s:GlowFilter color="#FFFFFF" alpha="1.0" blurX="10" blurY="10" includeIn="down" inner="false" knockout="false" quality="2" strength="1"/>

When it could have been rewritten like so:

PLAIN TEXT
XML:
  1. <s:GlowFilter color="#FFFFFF" alpha="1.0" blurX="10" blurY="10" includeIn="upAndSelected,overAndSelected,down" inner="false" knockout="false" quality="2" strength="1"/>

This redundancy was also evident in multiple image files for the same graphic. So going into FC was quickest solution to find each instance and point them to just one image file.

An important note: There isn't a place to set the ID on Flash Catalyst components. When a designer converts artwork to a component and then exports a custom component with multiple text inputs, say a registration form, none of those text inputs contain ID's. The ID is important for validation, formatting and form submission. So when the developer gets any updated designs, which he does, he has to manually find and add the ID to each text input, radio button, button, each time etc. He has to "wire" the controls back up again adding focusIn, focusOut, change, keyDown and keyUp handlers. Also adding in Place the controls back into VGroups etc.

Another amazing feature is the ability to swap out or replace images with other images or symbols. So lets say your designer has a specific graphic used throughout the design. Instead of having 10 identical images of the same image you can go to each of the images in the Design View and select one specific instance of that graphic from the library and delete the 9 extra images. Now you are only loading one image instead of 10.

Display Object Properties Panel

You can also swap out skins for components*. So say the designer creates one button skin and has 20 buttons (or graphics of buttons) total. You can reuse that same button skin in your 20 other button instances by setting the skin class in the properties panel. *Unfortunately there is a bug that prevents you from selecting a different skin. This same bug also prevents you from replacing a graphic with a component. So if you have those 20 same buttons that are originally vector art from illustrator you have to convert each one to buttons and then create new skins for each. You cannot reuse a skin. When this bug is fixed you will only have to convert the art to a button and select the previous created skin.

Summary
Flash Catalyst is version 1. Don't expect everything at once. In the meantime if we want to get the most out of FC now we have to work around these issues. The next section will tell you just that.

Editing MXML Documents
To edit your projects MXML documents we first need to find the path to the Flash Catalyst workspace. To do this publish your Flash Catalyst project (CMD / CTRL + ENTER). Now, the browsers URL shows the path to the project workspace. So in this URL, "file:///Users/judah/Library/Application Support/Adobe/Flash Catalyst/workspace/Project/bin-debug/Main.html", the project MXML documents are located at, "file:///Users/monkeypunch/Library/Application Support/Adobe/Flash Catalyst/workspace/Project/" when on a Mac.

Flash Catalyst project files

Flash Catalyst project files


Project Files Description
/src - location of the application source files
/bin - the location of any additional flex libraries
/bin-debug - location of testing swf
/html-template - location of the html template that wraps around your application
/src/Main.mxml - the main application file. make your application changes here
/src/Main.css - the css stylesheet of the main application
/src/components - the location of custom components and component skins
/src/assets/graphics - location of optimized FXG graphic symbols
/src/assets/images - location of images

You can edit these XML documents in any text editor. To apply the changes you need to save the file and refresh the Flash Catalyst project. You can do this by opening the changed document in Flash Catalyst code view. When we do this it will recognize the document has changed and prompt you to use the newer version of the file. Select Yes. If the project does not rebuild immediately publish it using CMD + Enter.

Although you can use any text editor you will want to use an editor that supports the Flex SDK. I recommend you use Flash Builder 4 or FDT. Both have debuggers, code completion and more. Now at this point, you may be saying I'm not a developer. That's ok. There are a few tips and tricks further on that will really make your project shine.

Using Flash Builder to modify, run or debug the Flash Catalyst Project
Open Flash Builder and go to File > Import > Flash Builder Project > Project Folder and select the Flash Catalyst "Project" folder that is located in the FC workspace. On Mac it is located here:
/Users/[USERNAME_HERE]/Library/Application Support/Adobe/Flash Catalyst/workspace/Project/

Once you've imported it you can run and debug it like any other Flex 4 project. You can update the component skin code and consolidate skins and graphics.

You can even round trip the changes back into FC. The important thing to remember is you must convince FC to notice and reload the updated documents if you want to see the changes reflected in the Design View.

Making the first change - Converting the group layout
The first thing we'll do is modify a layer or "Group" as it's called in code to stack its content vertically or horizontally instead of the contents positioning themselves absolutely. To do this we only need to modify a few lines of code. If you're starting with a new FC project drag 3 different components or shapes to the Design View, select them all and select Group.

Now open the MXML document that contains that Group. You can find the document and location of the Group by selecting it in FC Design View and then switching to code view. It will be selected. In your Flex editor replace "Group" with "VGroup" or "HGroup". Add the property gap to the tag to set the space between each item. For example,

PLAIN TEXT
XML:
  1. <s:VGroup gap="10">
  2. ...your content here...
  3. </s:VGroup>

Save the file. Next, save the file. Run the application in Flash Builder or switch back to Flash Catalyst and check for newer files (using the method described above). The content inside that Group should now be stacked horizontally or vertically one after another. You can rearrange their order by moving their position above or below the other in the FC Layers panel.

Copy and paste documents to & from Flash Catalyst Code View
You also can copy and paste documents between your editor and Flash Catalyst, thus enabling round tripping. To do this create a separate Flex project instance. Go into FC code view. In the Package Explorer you can select files and directories and then copy them via CMD + C or Edit > Copy from the title menu. You can go back to Flash Builder and paste these files into your separate project folder. After you have modified or upgraded them you can reverse the procedure and copy back to FC. Select the files in Flash Builder Package Explorer and copy them. In FC Code View select the directory where you want to copy the files to and paste them into that directory using CMD + V or Edit > Paste from the title menu. You know where the MXML documents are.

Note: If you use the first method of importing the Flash Catalyst project into Flash Builder the copying and pasting method above won't allow it. It will say that you are trying to paste the same file to the location it is already at.

Note: Save in Flash Catalyst often. When you close FC it will remove the project directory. It will recreate it when you open the FC project again. Keep that in mind.

Oh and one more thing...
You can gain a couple of rich features such as deep linking, image viewer, context menus and more using another simple modification. Stay tuned...

Enjoy and post your questions here...

Posted in Flash, Flash Catalyst, Flex | 3 Comments »

« Older Entries