by Branimir Angelov

Branimir Angelov

gugga.com

 

Created

2 March 2009

Requirements

Prerequisite knowledge

Prior experience working with Adobe Flex and Flash technologies is recommended. Previous experience developing Rich Internet Applications (RIAs) and marketing campaigns is also helpful. This article is based on the implementation of the Bombay Sapphire platform, to illustrate the level of sophistication an international brand can achieve by launching a new incarnation of its platform. The GUGGA team was tasked with delivering a one-of-a-kind user experience and cinematic presentation while simultaneously developing a scalable platform to showcase ongoing marketing campaigns and promotional activities across different Bombay Sapphire markets (watch the video below). When developing an interactive experience of such magnitude, the challenge begins by analyzing your customers and defining how to best interact with them to promote a favorable impression of the brand. Clients prefer to see the end results of the project as soon as possible, and the ability to present them with a working version of the platform early in the production process (or at least its core features), provides you with a critical advantage. During the pre-planning phase, we had to make some tough choices about which technologies to use for the presentation layer of the platform. We researched recently developed projects and noted that the GUGGA has had successful experience approaching projects of this magnitude in the last couple of years. GUGGA created the custom open-source Flash framework (known as the GUGGA Flash Framework) that provides the necessary stability and facilitates rapid and agile application development. During our evaluation process, Flex emerged as the most beneficial solution. We found that the Flex framework offered the functionality we needed, and it answered our toughest questions with regards to scalability, extensibility, parallel development and community support requirements. One of the most critical areas of inquiry was to investigate whether Flex was capable and suitable for implementing feature rich, complex animations to deliver immersive interactive experiences. Before beginning the Bombay Sapphire project, we were only aware of business applications developed in Flex. However, after performing some preliminary tests, the team realized the potential benefits of developing in the Flex framework and designing a Flash front end. As we built each new prototype we became increasingly committed to using Flex to develop the project. In the end, we all became convinced that Flex was the best technology choice to implement large scale marketing platforms.

 

user level

Beginning

Required products

flash_builder (restored)

Before discussing marketing platforms, we need to define what they are and how they promote business development. Imagine you have an international brand that needs a web-based software solution that enables the company's marketing team to engage customers from different countries in their native language, while serving different targeted content and featuring regional activities. To successfully promote this type of brand, you would look for a solution that can be easily scaled, quickly deployed to market the product and thoroughly integrated with the existing external services. In the pre-planning phase, it's important to remember that new marketing campaigns will need to be implemented constantly while always striving to maintain the "one brand, one message" mantra. The goal is to focus on promoting a strong brand identity while providing a user experience that is both consistent and immersive.

 

The process of creating marketing platforms has become increasingly complex as technology and users become more advanced. Today's marketing strategies encompass the key aspects and challenges previously associated with large, enterprise grade software development projects. The ability to deliver an engaging user experience is a critical aspect of successfully marketing a product brand.

 

In this article, I'll describe some common strategies to create large marketing platforms using the Flex 3 framework in the context of a project to market Bombay Sapphire, a popular brand of gin. As our team developed the marketing platform for Bombay Sapphire, we learned a great deal about defining user experience requirements, implementing strategies to develop a flexible architecture and leveraging the Flex platform to make this project successful. I'll outline our team's methodology for building this marketing platform, as well as cover some interesting architectural and development techniques that can save you time and money when implementing this kind of project.

 

Using Flex to create large-scale marketing platforms

The powerful, open source, component-based Flex framework provided us with everything we needed to create a large-scale marketing platform. We determined it was the best solution by analyzing the most critical requirements of our branding project:

  • Providing a compelling user interface and user experience
  • Facilitating customization and localization
  • Enabling extensibility and flexibility in the application design
  • Offering robust access to data across existing external services

In the following section of this article I'll provide further details about each of the requirements listed above and how we integrated them into the final project (see Figure 1).

Figure 1. Strategic approaches to meet project requirements was required to provide an immersive user experience
Figure 1. Strategic approaches to meet project requirements was required to provide an immersive user experience 

Effects and transitions

The user experience of a marketing platform is defined by multiple features presented to the user in an impressive and engaging way. Due to the nature of the application, every single UI unit represents a complex, data-driven component. The need for expressive and engaging user experience is tremendous.

In order to implement the animations in those complex components, we needed a powerful object-oriented abstraction representing effects. Using this abstraction, we harnessed the power of design patterns to create powerful and flexible compositions of effects. Prior to working with Flex, we implemented a Flash framework to abstract the idea of composing and managing asynchronous operations.

Flex effects are very similar to the Flash framework we had previously used to develop engaging web projects. Another very powerful feature of Flex effects is the decoupling of the description of an animation from its execution. This is where MXML takes a starring role.

 

MXML language

The Flex MXML language provided us with an expressive way to describe complex visual presentations and effects. The declarative style of the language improved the readability and maintainability of the transitions and components described above. In addition, the design-time support provided by Flex Builder IDE increased our development speed.

 

Flash and Flex integration

Flash and Flex were designed to work well together to provide a complete solution for front end and back end application development. For example, you can skin the various states of the user interface using the Flex Component Kit for Flash (now available in the Flex 3 SDK). In later sections of this article, I'll describe two very interesting approaches to extend and further leverage the combined benefits of developing with Flash and Flex.

 

Component model

In order to achieve the desired compelling user interface and user experience, we needed a strong and reliable component model. Despite some issues of the existing Flex component model (due to its monolithic nature), it is important to take advantage of the available functionality to define a constraints-based layout, using the included CSS support, statefulness and data awareness.

The challenge to extend components is something the entire developer community is faced with and there is a wealth of community support for resolving the issues at hand.

 

Facilitating customization and localization

Our requirements caused us to look for innovative new strategies to provide the Bombay Sapphire marketing department with the ability to deliver their messaging to a wide audience located in many regions. We utilized a combination of strong component and data models in order to display product information in a variety of languages to address customers in many different countries (see Figure 2).

Figure 2. A robust component model and data model provided multilingual functionality
Figure 2. A robust component model and data model provided multilingual functionality

Component model

Every multi-market, multi-language marketing platform needs a technology that easily enables localization of content. It is not only important to serve content in different languages, but you must also be able to serve different functionality to the different markets. The Flex component model provides two critical aspects to address multi-language requirements: font management and resource bundles.

 

Data model

To support flexible customization of the functional structure of an application you need to create a deep data-driven system, which is already integral to the Flex framework.

 

Extensibility and flexibility

It is critical that the marketing platform offers an ongoing ability to grow and transform as new campaigns and products are released. The ability to develop core modules of the project facilitates the process of expanding and adding new features over time (see Figure 3).

Figure 3. Modular development increases the flexibility of a marketing platform
Figure 3. Modular development increases the flexibility of a marketing platform

Figure 3. Modular development increases the flexibility of a marketing platform

 

Modules

During the long and dynamic life of a marketing platform, the development team will need to integrate and extend functionality with independent pieces (modules) in order to change its existing implementations. In order to design a quick and easy mechanism for integrating functionally independent modules, we leveraged the modularity features that are included in the Flex framework.

 

MXML

To empower the system flexibility, it is important to manage and separate the many functional dependencies. The combination of MXML and the Flex data model, (its data binding aspect), provide the necessary firepower to develop and maintain flexibility.

 

Data access

All Rich Internet Applications rely on their ability to send and receive data successfully between various systems and web services. It is critical that data is successfully transferred and available to display in the marketing platform when needed (see Figure 4).

Figure 4. Facilitating data access to services is critical to deliver product messenging

Figure 4. Facilitating data access to services is critical to deliver product messenging

Service Infrastructure

The RIA client requires a developed and reliable data access mechanism. This is an obvious characteristic of the Flex / Service infrastructure (see Figure 5).

Figure 5. The key functional requirements compared with the functionality available in the Flex framework

Figure 5. The key functional requirements compared with the functionality available in the Flex framework

 

To review the topics described in this section, review the items listed on the left side in Figure 6 to see the key functional requirements and concerns and compare them with the functionality available in the Flex framework (displayed on the right side) to see how we concluded that Flex was the best solution for developing our marketing platform.

And it is important to also factor in the significant benefits of joining the helpful Flex community, which you can always rely on for problem solving when you encounter obstacles in the critical phases of your development project.

 

Strategies for building successful marketing platforms

Every large software project requires a well thought through methodology and approach. Below I've listed some of the most critical aspects that warrant special mention—particularly in regards to developing marketing platforms. These are well known strategies that are useful to keep in your arsenal:

  • Striving to create and keep developing an overall system model will serve as the logical framework for all of the integrated features and rich content.
  • Building each feature front to back allows you to master your client relationship and makes it easier to present clients with the user experience workflow early in the development process.
  • Responding to change over following a plan provides you and your client with ongoing flexibility. Be ready to address client's ever-changing needs without losing sight of the ultimate goal.
  • Managing the flow of changes empowers everyone on the team to develop the best possible product. Do not be afraid of change or consider change to be an obstacle. Change is good, so try to embrace and manage it.

Structuring system architecture

All marketing platforms benefit from utilizing a well organized system architecture that follows common conventions to promote the transfer of data and ease of maintenance (see Figure 6).

Figure 6. The various layers of the system are compartmentalized to interact with each other in a logical way
Figure 6. The various layers of the system are compartmentalized to interact with each other in a logical way

Figure 6. The various layers of the system are compartmentalized to interact with each other in a logical way

As developers, it is up to us to ensure that multitier architecture has clearly been separated in the client, communication, business and data layers. You should direct your focus on the front end of the system, because the most complex interactions occur there (see Figure 7).

 

Figure 7. Begin by defining the front end and determine how it will pass data to and from the user interface

Figure 7. Begin by defining the front end and determine how it will pass data to and from the user interface

In essence, the front-end core is designed as a number of Model-View-Controller-Service structures that are nested within each other.

 

  • The presentation subsystem spans over many components and acts as a dock for different modules, which determines the platform.
  • A separate data model subsystem encapsulates application data and states.
  • A services subsystem opens up the front end to communicate with the business layer.
  • A control subsystem is distributed in many specialized controllers and brings the whole application to life.

Modules are natural extensions to the presentation of the core. They are responsible for displaying specific content and functionalities. An infinite number of modules could be deployed on the platform, while keeping the core intact.

Model-View-Controller (MVC) instances could be found on every different level of granularity. For example, the front end application is seen as the top level MVC. Another implementation of that pattern would be any particular module or macro component. To see an example of this, consider the macro component that comprises the navigational system of Bombay Sapphire web application. It has a highly complicated view which is a mixture between Papervision 3D and Flex components. It also includes state-based control logic and a complex model. MVC is considered as primary design approach for separating concerns in macro components, modules and the application itself.

Feasibility of that design is ensured by the power of the MXML language and data bindings that make it possible to easily create a simple inversion of control containers on all levels. The Flash event model provides us with a powerful and loosely coupled mechanism to communicate between the different components. These principles and techniques are applied inside every subsystem and between all subsystems as well.

In the next section, I'll describe several interesting implementation details of the Bombay Sapphire marketing platform.

 

Extending application bootstrapping

When you are building a web application, one of the most important areas to examine is the initial loading experience. In this case study, we developed the marketing platform to promote the world-known brand of Bombay Sapphire. All site visitors are required to be of legal drinking age (LDA) in order to enter the site. When the page first loads, users are asked to choose their country of residence and enter their date of birth. Our requirements included adding an age verification step in the process of entering the website (see Figure 8).

Figure 8. Creating a flow diagram that maps out the users process for site entry is helpful before developing the underlying logic and user interface

Figure 8. Creating a flow diagram that maps out the users process for site entry is helpful before developing the underlying logic and user interface

Two other major requirements are to ensure the site is quick loading and provide a smooth transition between the LDA state and the rest of the experience. In order to facilitate a smooth transition, we developed the LDA piece inside the Flex application. We realized it would be unacceptable to force users to load the entire application before serving the LDA verification interface. In order to create an optimal experience, we minimized the application's loading time before the LDA is presented. After users complete the LDA form, a minimal post-LDA loading screen is presented before the actual application is displayed (see Figure 9).

Figure 9. See how the different sections of the application should load

Figure 9. See how the different sections of the application should load

To achieve our goals, we decided that the LDA verification form must be loaded during the initial loading phase. While users are entering the data in the LDA form, the Flex framework and application logic are being loaded in the background. If the background loading process is still running after users have submitted the LDA form, a post loading screen is presented to the user before the application loads (see Figure 10).

Figure 10. Placing a Flash module

Figure 10. Placing a Flash module 

To implement this in our project, we used a Flash module that was placed in the Flex application preloader display. By using Flash module, we found it was possible to create an interactive LDA verification form of a minimum file size, without using the Flex framework. 

The placement is achieved by creating a custom Flex preloader display that loads the Flash module. When the LDA verification form data is passed, a custom Flex preloader display dispatches its completed event, which triggers the application to open (see Figure 11). 

Here are some interesting details about this implementation:

  • We used the façade design pattern in our implementation of the Flash module. This allowed us to decouple the LDA verification form from the Flex application, which increased the flexibility of the solution. We also found that by using an interface for this façade, we eliminated issues related to the duplication of compiled classes.
  • The System Manager uses the preloader's first FlexEvent.INIT_PROGRESS event as a condition for moving to the second frame in the SWF file. We realized that if we ever needed to prevent the System Manager from jumping to Frame 2, we could swallow this event, and then re-dispatch it later. Although swallowing framework events is not a good practice, we discovered that in this specific case it is a very convenient solution.

Managing complex effects and transitions

In this section I'll discuss another major consideration when building marketing platforms: visual transitions. To be clear, I'm using the term transition to describe the common motion graphic concept of animating visual changes from one graphic state to another—beyond its specific Flex meaning.

Creating custom effects and transitions is a common practice in Flex. However, we found that there isn't a great deal of documentation or shared knowledge about the process of creating complex transitions. Complex transitions could be dependent on conditional logic or asynchronous operations. They might also include effects created at runtime or effects that reside in external modules. The example below illustrates why we found it necessary to spend development time composing and managing complex transitions (see Figure 11).

Figure 11. Complex transitions allowed us to display and manage multiple animations simultaneously in the Bombay Sapphire application

The example above depicts the animation that is featured as a Flex module is loaded. The main transition sequence waits for the external module to be loaded and initialized before playing its show effect. The main transition also combines a number of other effects and some of them are declared in other MXML documents. 

The structure and execution of the effects is an important aspect of building an engaging and extensible visual presentation. In many situations, effects add a certain visual impact on the viewing or controlling aspects of an application. Although less common, but equally important, is the opposite situation where the effects actually depend on view or control properties in order to execute. The diagram shown below demonstrates the flow of this type of complex transition (see Figure 12).

Figure 12. Diagram illustrating the flow of this type of complex transition

Figure 12. Diagram illustrating the flow of this type of complex transition

In the example above, we've created two parallel nodes. The first node contains a standard fade effect, followed by fade or pause effect—depending on certain conditions. The second node also contains a standard fade effect, but it is required to wait for a certain event to occur before ensuring the node's completion. After both nodes complete, another effect is displayed (which is declared in different MXML document). To add to the complexity, it's impossible to know the specific effect, because it is declared in a different module that is loaded sometime during the execution of the entire transition.

When you encounter situations when you have to deal with this type of complex transition, it is helpful to create some abstractions around the effect infrastructure, to navigate through these complicated conditions.

The higher level factory

The first group of effects is implemented on top of Flex effect factories. We created simple higher level factories that accept other factories as parameters and use them when creating the actual instances.

Here's the code example:

<effect:Reference value="{detail.module.showEffect}" />

The Reference effect is passed an effect factory (detail.module.showEffect) used for creating an instance. 

<effect:ConditionalEffect ifCondition="{panels.visible}">

  <effect:thenEffect>

     <mx:Fade duration="1500" />

  </effect:thenEffect>

   <effect:elseEffect>

     <mx:Pause duration="50" />

    </effect:elseEffect>

</effect:ConditionalEffect>

The Conditional effect is passed as arguments two effect factories; depending on certain condition (panels.visible), it will use one of them.

The "Just-in-time" effect

In this project, we found that we needed to create certain effect instances immediately before the instance is played. A common scenario is the need for "lazy" evaluation of effect factory's arguments. In our example, it wasn't possible to evaluate the "value" argument when the whole transition is created because the module that contains our "module effect" has not yet loaded. 

Here's the code example:

<effects:LazyEffect> 

      <effect:Reference value="{detail.module.showEffect}" /> 

</effects:LazyEffect>

In this situation, we created an effect that simply wraps around other effect by enabling a "lazy" creation of its instance. The creation of the actual effect instance occurs when the wrapping instance has started.

 

The "Event-blocker" effect

We also found that in some cases, we needed to block the transition's execution in a certain "place" until after the occurrence of a certain event. To achieve this, we simply created an effect that listens for this event and will only complete when the event is fired:

<effects:WaitForEvent target="{detail}" eventName="ready" />

Here's the code of the resulting transition:

<mx:Sequence>

 <mx:Parallel>

<mx:Sequence>

<mx:Fade />

<effect:ConditionalEffect ifCondition="{panels.visible}">

<effect:thenEffect>

    <mx:Fade duration="1500" />

    </effect:thenEffect>

<effect:elseEffect>

<mx:Pause duration="50" />

</effect:elseEffect>    

</effect:ConditionalEffect>

</mx:Sequence>

<mx:Sequence>

<mx:Fade />

<effects:WaitForEvent target="{detail}" eventName="ready" />

</mx:Sequence>

</mx:Parallel>

<effects:LazyEffect>

<effect:Reference value="{detail.module.showEffect}" />

</effects:LazyEffect>

</mx:Sequence>

 

As you can see, this approach is entirely declarative. It uses a semantic approach to describe complex transitions. This strategy increases the flexibility and maintainability of these kinds of transitions. You can easily change the structure of the transition and break it down into several independent and reusable sub-transitions. 

When you are implementing these custom effect abstractions, consider these guidelines:

Provide the appropriate implementation, if necessary, for the view states transition mechanism: 

Provide the appropriate implementation, if necessary, for advanced play control: play / pause / resume / end

 

Developing modular applications 

In the last section of this article, I'll describe the importance of developing modular applications. Modularization is key to creating an extensible and flexible application. The Flex framework provides a very powerful infrastructure for creating robust modules. Let's examine two different examples (see Figure 13).

Figure 13. The Bombay Sapphire interface includes a form to submit information about a specific bar

Figure 13. The Bombay Sapphire interface includes a form to submit information about a specific bar

In the first example, we're using an instance of a typical Flex module, which utilizes Flex components straight out of the box. You can see instances of a tile list component, input controls, filters and some advanced validations.

The second example is built entirely in Flash. This incorporates supporting Flash modules, which enables Flash developers to add to the design and employs more creative results (see Figure 14).

Figure 14. The Partnership section uses an entirely Flash interface to display information about the brand

Figure 14. The Partnership section uses an entirely Flash interface to display information about the brand

 

Modules architecture

Remember that modules should always be highly decoupled from the platform. Modules usually implement the MVCS pattern. The most important point to focus on when considering their architecture is the module's communication with the platform. This communication should be achieved by using interfaces and events (see Figure 15). 

Figure 15. Modules usually implement the MVCS pattern and communicate with the platform using interfaces and events.

Figure 15. Modules usually implement the MVCS pattern and communicate with the platform using interfaces and events. 

Interfaces provide for methods and properties necessary for the initialization, configuration and visual effects. Mandatory fields are contained in a single interface. Another interface provides extended features. The main goal when breaking up the logic into separate interfaces is to reduce unnecessary complexity when creating modules.

Powered by the Flash event model, modules are capable of interacting with the platform in a highly decoupled fashion. This implicit invocation technique, implemented with events, enables modules to execute navigation requests or consume application level services:

  • Modules can pass arguments through an event object.
  • Modules could also "receive a response" through an event object. This is a more exotic approach to using events, but in some situations it is very useful. For example, the module dispatches an event which abstracts a navigation request. If the platform needs to reject this navigation request, then its event handler can simply set a "rejected" flag in the event object (by setting a Boolean property of this custom event). This enables the module to check the "rejected" property of the event object, allowing it to evaluate whether the request has been approved or rejected. This technique is similar to the "prevent default" mechanism of Flash events.

Exploring a simple Flash module

One last thing that is worth researching is the implementation of a simple Flash module. 

There are several indicators of a simple Flash module:

  • A complex infrastructure is not required.
  • The Flash module is built in the Flash authoring environment.
  • The Flash module consists of Timeline–based animations or interactions

You can envision a simple Flash module as a piece of the application that uses the interface to communicate with the marketing platform (see Figure 16).

Figure 16. A simple Flash module connects to the platform via the interface

Figure 16. A simple Flash module connects to the platform via the interface 

A simple Flash module could be an impressive, branding animation that is entirely created by a Flash designer on the production team. In many cases, it is highly desirable to integrate simple Flash modules into the marketing platform without any additional development. 

This scenario can be achieved by creating a template FLA file, which the Flash designer uses to generate the SWF files that will load in the application. You can configure the template FLA file in an appropriate way so that the Flash designer can publish the FLA and create a Flex module as a result.

You can configure the Flash template by following these two steps:

  1. Create a simple custom implementation of the IFlexModuleFactory interface. 

public class FlashModuleFactory extends MovieClip  implements IFlexModuleFactory

  public function FlashModuleFactory() : void
  { 

    super();
    addFrameScript(1, secondFrameHandler);

  }

   private function secondFrameHandler() : void 

 {
    stop();
    dispatchEvent(new Event("ready"));
 }

 public function create(... parameters):Object { ... } 

 public function info():Object { ... } 

  ...

 

This sample implementation notifies the Flex framework about the completion of the module. It is also responsible for creating the class (symbol) that contains the module.

2. Create an empty FLA file that contains two frames and set FlashModuleFactory as a document class.

By using this template FLA file, Flash designers can extend the platform without requiring any complex development.

Of course, there are some very important implementation issues to consider:

  • This approach does not provide any dependency management or font management… And there is no utilization of the Flex framework. This means that you should explicitly handle these needs using your own code and tools.
  • Pay close attention to memory management. If you are using some advanced audio, video or complex custom ActionScript-based component, be very careful about memory management, especially when opening and closing the module.
  • Use caution when extending this approach. The primary goal when implementing SWFS generated by the template is to create simple modules that take advantage of the Timeline available in the Flash authoring environment. This strategy is primarily suitable for creating complex Timeline-based animations. If you wish to extend this, proceed carefully, test early and test often.

In the event that you have developed your own Flash framework, you may have already addressed some of considerations described above.

Where to go from here

In developing the Bombay Sapphire project, we found that the Flex SDK was the best choice for creating large-scale marketing platforms. Flex is a powerful, open source, component-based framework that provides a stable foundation for creating a development toolkit needed for marketing platforms. Gugga is currently working to develop an early version of this type of toolkit. The Gugga toolkit will contain implementations of various useful development techniques; I've described many of these techniques in this article.

In addition to the current beneficial characteristics of the Flex SDK, the next version of Flex (code named "Gumbo") promises to address the majority of the everyday implementation obstacles, which makes its future even more promising.

Adobe Flash Catalyst is an exciting new IDE that supports the concept of front to back development. Its upcoming release will enable Flash designers to design applications in parallel with development.

 

Additional resources

This article is based on the "Creating marketing platforms with Adobe Flex" session presented at Adobe MAX 2008 Milan. To learn more about using Flex to create marketing platforms, check out the following online resources:

 

Acknowledgements

The design and the user experience of the Bombay Sapphire Platform are exclusively a result of the excellent work and leadership of Shift Global LLC.