Flex Capacitor

Taking Flash from where it is to where it could be. Basically adding the features / structure to make Flash based sites friendlier to use and easier to create.

Update: This is an open source project (Apache license or WTFYW license). Please clone it or make it your own, etc. Please see related project at http://code.google.com/p/flexcapacitor/. The actions have been converted to mx.events.Effects. This has not been reintegrated to this project. I'm currently not working on this project.

What is Flex Capacitor?

Flex Capacitors Role

The Flex Capacitor library (in beta) is a rich internet architecture that enables you to create a traditional or interactive website easily with little to no coding. It helps you create a standards compliant, search engine optimized, automatically deep linked and restorable, back and forward button enabled, interactive, media-ready, extendable, design-unlimited website with currently available design and development tools with writing little to no code.

The Flex Capacitor library allows you to re-purpose Photoshop, Illustrator, Fireworks, Flash Catalyst and Flash Builder as web site design and development tools. Traditionally, Flash sites have lacked many of the features HTML sites enjoyed. The Flex Capacitor library provides a framework to add this functionality. As you navigate through your site unique URLs are created. When a visitor uses the back or forward buttons or returns to your site from a bookmark the Flex Capacitor library knows how to read and interpret these URLs and restores your website to the state it was in when it was bookmarked. This model also allows context menus to work on Flash sites. It also provides a model that search engines can use to index dynamic content via Flash or AJAX.

Videos and tutorials

If you can use your imagination and realize there are still bugs I am working out, you can take a look below. These are just examples not full sites, although full, deep linked sites and applications are the desired goal.

http://www.flexcapacitor.com/demos/Website/ - basic Flash site demonstrating HTML like features
http://www.flexcapacitor.com/demos/Google/ - example of a HTML like theme of the popular Google.com site

Note: The following are down at this time. They were connected to a Wordpress backend. You can see them in the video above.
http://www.flexcapacitor.com/demos/Wordpress/ - Basic Wordpress like site
http://www.flexcapacitor.com/demos/WordpresFlex4/ - Special Wordpress like site (contains a few bugs)

These examples and more are in the repository.

What features have been created or plan to be created?

See the Feature Comparisons chart for a complete list... Future planned features are Find on this Page text searching, Undo and Redo in text fields, additional pretty URL syntax, compressed tiny URLs, etc.

How would you describe it in one sentence?

Software that allows anyone to create an interactive Flash based website with the same common features provided to HTML websites using their design or development tool of choice easily in one tenth the time. To developers, if you were to make a Flash based website, the Flex Capacitor library is a micro-architecture that adds in the features traditional HTML websites have into your Flex application.

Who is your target market?

Anyone who wants or needs to create websites. Specifically people that want to spend time creating rather than spend time coding.

Why not create your site with Flash Professional?

While Flash Professional can be used to create websites many developers and designers shun it for lack of features provided by common HTML website. Common features lacking in Flash websites include deep linking, context menus, media handlers, undo and redo, find on this page, view image, etc, etc. See the Feature Comparisons chart for more information...

What is the Flex Framework?

From Adobe.com:

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applications can be built using only the free open source framework, developers can use Adobe® Flex® Builder™ software to dramatically accelerate development.

How is Flex Capacitor related to the Flex Framework?

The Flex Capacitor library compliments the Flex Framework. It is a lightweight set of classes you include in the Application that gives it the features of a traditional HTML website. It gets completely out of the way and lets you create websites any way you want.

How is this better than similar technologies?

The Flex Capacitor library has been created from the ground up to take advantage of all of the advancements made in web technologies in recent years. It is more than a library of features, it is a rich internet architecture and a foundation to build a website on. Traditional websites have to support each and every browser they want to target. With Flash you only need to target the Flash Player. With this framework you get nearly all of the features HTML sites enjoy and some new features. Using this and the Flex SDK or the new Slider Flex SDK you can design a site once and have it look the same on every browser. Using this also provides a standard compliant mechanism for search engines to crawl dynamic content. It also uses familiar conventions well known if you have ever used HTML. You can create interactive content without coding using tools like Fireworks or Flash Builder. You can reuse your actions in future projects. If you don't have something you need you can create it yourself or access a large library of actions online and find exactly what you need.

Can you extend the components?

Yes. You can add new context menu items. You can also add content handlers for different types of content. You can also change or rearrange the default behavior of the Actions stack when you click on a hyperlink. Note: Not responsible for how your site will act if you change the order. You can create or extend a large library of Actions.

Why not create your site in HTML, CSS and JavaScript?

HTML CSS and JavaScript are great technologies suited for website design and development. That's not the issue. The issue arises when there are many different browsers that run and display sites using their own layout rules, bugs and features. The process a developer must go to get their site to run and display correctly in the current set of browsers on the desktop is catastrophic. This does not include the process they must go through to get their site to display correctly on mobile devices. Many have described web development as the bane of their existence. The problem will only get worse as more browsers fragment the market. When will the web be ready with HTML 5 features?

Why target Flex, Flash Builder and Flash Catalyst first?

The Flex SDK is the most amazing software development kit I've come across. It also has been built from the ground up in a world of new technologies. I've worked in the web and desktop development world for over sixteen years and have not found a more rapid application development tool with more tighter controls for skinning, layout and composition than Flex and Flash Builder. However, the Flex SDK is for creating Rich Internet Applications and not targeted toward creating the traditional "website". The good news is they are closely related and have a lot that crosses over.

The Flex Capacitor library gives you a Rich Internet Architecture and a foundation to start from. When you add the Flex Capacitor library to your project you add a light, micro-framework that compliments the Flex framework. Since Flex only includes the classes you use, your site is extremely light-weight. Subsequent calls for retrieving data are even more lighter than traditional websites. With RSL and data caching your site is fast, responsive, light weight and visually identical in every browser.

What about Search Engine Optimization?

Google and Adobe have been making huge strides in indexing Flash and AJAX sites. Currently Flash sites are indexed contrary to popular belief by Google using a custom Flash Player created by Adobe™ starting in early 2009. However there are still issues like dynamic content. AJAX sites share in the struggle.

The Flex Capacitor library contains an easy to understand model for search engines to crawl. Simply update the URL and let the search engines know when new content has arrived. Since the Flex Capacitor library uses full featured hyperlink and button link components for navigation, search engines can crawl through the site. Search engines receive events when all content is loaded and access to the raw data. This allows them to parse and index that content. This model works with AJAX sites. Recently, Google has proposed a way to allow developers to flush the data of a unique URL out as XML or HTML. The Flex Capacitor library has been doing this from the start.

What about file size?

The average connection speed has increased from 28.8kb per second to 1500kb per second. As time moves forward so will connection speeds. What is an issue today may not be one year from now. Having said that the average file size of a typical Flex Capacitor site is 164kb with the Flex SDK RSL cached. AJAX type calls using AMF or HTTP accessing only new content are usually more than half as much weight than loading a new HTML page of the same content. And as with HTML the content is cached resulting in instant results between states / pages.

What is the workflow?

The workflow for each program is listed below. Currently Flex Capacitor is only available for Flash Builder and Flash Catalyst. In the future it will work with Photoshop, Fireworks, Illustrator, FXG and many additional tools.

Flash Builder Workflow

1. Open Flash Builder
2. Create a new project
3. Add the Flex Capacitor library to the project
3. Add the LinkManager class to the application
3. Create the layout of the site
5. Use the Link, Button, Image components or Anchor container to navigate to different states or pass parameters
6. Run the site in the browser

Flash Catalyst Workflow

1. Open Flash Catalyst
2. Create a new project
3. Add the Flex Capacitor library to the project (editing in Flash Catalyst is disabled in the beta)
3. Add the LinkManager class to the application
3. Create the layout of the site
5. Use the Link, Button, Image components or Anchor container to navigate to different states or pass parameters
6. Run the site in the browser

Fireworks Workflow

1. Open Fireworks
2. Create a new project
3. Create the layout of the site using states not pages
4. Set the hyperlink to the state you would like to go to
5. Select Commands > Export to FXG
6. Select Commands > Build FXG to Website

Note: Fireworks, Photoshop and Illustrator versions are not available at this time.

These programs will include an dynamic Actions panel that let's you add behavior and interactions visually. In Flash Builder and Flash Catalyst you can go into the MXML code and include them like regular classes. Examples will show the syntax.

How does Flex Capacitor work?

Currently it works in Flash Catalyst and Flash Builder. In the future it will work with Photoshop, Fireworks, Illustrator, FXG and any tool that can compile ActionScript.

In either of previously mentioned programs you include the FlexCapacitor.swc in the libs folder and drop the template files into the HTML-Template folder.

Then in your project or design add a reference to the Link Manager class. Wrap any component in an Anchor tag and set the hyperlink property to the name of a state. For example, "<Anchor hyperlink='products'><Button/></Anchor>".

Run the project in a browser. When you click on the Anchor you are taken to the state mentioned in the hyperlink. The URL in the address bar is updated to reflect the new state, the page title is updated to reflect the new state and the history is added to the browser enabling back and forward buttons to work.

The hyperlink property also supports parameters so if a hyperlink has parameters like, "products?id=10", the Link Manager loops through all the handlers looking for a handler that is included in state, "products" and that also contains the, "id" parameter. If such a handler exist then the actions in that handler are run.

What are Actions?

Actions are classes that provide a behavior or procedure. They are ActionScript 3 classes that extend and adhere to the Actions interface API. There are actions that can call a method, get data from the server, go to a new state, display an alert box or many additional uses. They can be creating quickly and easily. Actions are run sequentially. Actions can be virtually paused and then continue after a specified event, frame count or duration before continuing through the actions stack. For example, if you wanted to get XML from the server and display a wait icon while data is loading you would use something similar to below:

<ns:Actions>
    <ns:ShowBusyIcon>
    <ns:GetDataFromTheServer continueAfterEvent="result" >
    <ns:HideBusyIcon>
</ns:Actions>

Note: Showing an preloader or busy icon while running through an action list is built in and can be enabled or disabled.

What are Handlers?

More to come soon...

What events are available?

There are numerous events you can listen for. In addition there also numerous new ways to handle these events. When you click a hyperlink the events go like this:

hyperlink
handlers start
handlers complete

Additional possible events:

hyperlink
handlers start
   handler start
      action start
         content loaded
      action complete
      all content loaded and laid out
   handler complete
handlers complete

What is the stack?

The stack is the list of default actions that occur when you click on a hyperlink. You can inject your own actions, rearrange actions or omit actions. This gives you complete control over the flow and behavior of your application or site. You could for example, inject a analytics action. After parsing the hyperlink into a link information object the default actions are:

Scroll To Anchor
Go To State
Wait Behavior
Set Browser Fragment
Set Page Title
Wait Behavior
Scroll To Position or Anchor

User created actions are injected either before or after the Go to State action. If a user created action is specified that already exists in the default actions then it is removed from the default actions and ran when it is specified.

What about viewing the source code on sites that use this library?

It is up to the individual or company if they'd like to make their code viewable. Flash Builder has an option to export with View Source option available in the context menu. There also may be a View Display List option in the future. This will allow you to see the structure of the layout without showing the code. However, I'd like to think that in time you won't need to look at the code to do what you want.

How fast is it to develop using these workflows?

TBD please share...

Why was Flex Capacitor created?

To be able to create content that looks the same and acts the same across all browsers and operating systems. To be able to complete a site on average at one tenth of time, to run correctly right out of the box, to provide all the features HTML sites enjoy, to promote code reuse with canned actions and to reduce the learning curve for creative individuals and companies.

What is the Text Layout Framework?

The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. The framework is designed to be used with Adobe Flash CS4 Professional or Adobe Flex®, and is already included in the next version of Flex, code named Gumbo. Developers can use or extend existing components, or use the framework to create their own text components. Source code and component library for TLF are now available as open source at no charge under the Mozilla Public License at www.opensource.adobe.com.

See the feature tour and the online rich text editor demo on Adobe Labs.

What do people think about making website development easier?

Quote from a web developer in a recent Lynda.com newsletter:

Testimonial of the month

I am taking graphic and web design classes at school. I am 60 years old and I had never opened an Adobe product until a month ago. I figured out a system that works for me: I review the subject on lynda.com the night before my class. The next day, I am in school from 9AM - 4PM and seldom have any trouble because of the pre-class preparation that I do. lynda.com helps me to learn the tools and shortcuts before I take the class. I will now go on and take some of the other advanced classes on lynda.com when I am ready. What I love is how the segments are broken down into short videos so it is easy to review a particular section if I need it. Thanks for making learning at 60 easy and fun!

-susan y. 10/2009

I turn down requests to create websites 2 or 3 times a week. Read an actual recent rather cheesy but honest conversation:

Me: what if making websites was easier?
Her: easier than what?
Me: what if it was easy
Her: oh you mean like a wysiwyg editor with advanced stuff like databases, etc?
that would be fantastic, then it would be art instead of tech.

Cheesy but you get the point. People want to express themselves. If you remove that barrier it becomes more about creativity than technology.

Can I start using this?

Yes. Although note that it is still in beta. In the table of contents follow the Using the Link Manager guide. Instructions for accessing the SWC and the example projects are mentioned in the guide.

What is the theory behind this?

In my opinion Flex has about 9 out of 10 things you need to make any kind of web application. To serve both the needs of an asyncronous / stateful technologies like Flash and enable the stateless features of HTML a new architecture had to be created. This "Rich Internet Architecture" or RIA provides a system to address both.

The theory is this. You add hyperlink components to the project. These include and extend Button, Image and Text and add a container called Anchor. These components add the hyperlink and hyperlink target properties. Using our familiar friend the hyperlink, we can enter any name of the state we want to go to. So, if we had a state called "Contact" we would set the hyperlink to "Contact" and when the user clicked on that link it would take them to the "Contact" state, update the browser URL, update the browser page title and run any behaviors associated with that state. If the URL was previously, "http://www.site.com/page.html#home" it would become "http://www.site.com/page.html#contact" after the link was clicked. Since we have updated the URL we can bookmark it, go forward or back in navigation, send the link in an email, copy and paste the link in a document, etc. While the example shows how to navigate to another state it is important to note you can add additional information including anchor and user parameters.

What do I think about all of this?

I'm looking forward to being able to create sites easily exactly the way I want to without worrying about the browsers or the technology. I'll be able to use visual tools like Illustrator or Photoshop to design the site, then add motion and interactivity to it with Flash Catalyst or Flash Builder. I'm also really excited about Adobe's Text Layout Framework (TLF). The TLF adds advanced layout and markup to Flash Player sites. It will be a much better workflow than in the past.

Please leave feedback in the comments.

Contact: flexcapacitor at gmail dot com

To use these components in your project follow the Getting Started guide and then take a look at Using the Link Manager tutorial.