Adobe Flex Development at GoAnimate

1
Adobe Flex Development at GoAnimate

• Charles Rao
• charles_at_goanimate.com

2
Table of Contents

• Overview of GoAnimate Architecture
• Why we decided to use Adobe Flex for our software
  development
• Adobe Flex Profiler
• GoAnimate's Software Development Lifecycle

3
What is GoAnimate

• Enabling Technology
• Traditionally, animation requires an animator to
• Be good graphical designer
• Be able to create storyboards based on a story
  concept
• Have technical understanding of sophisticated
  animation software
• With GoAnimate, making of an animation is easy
• No special software is needed
• Users can drag and drop characters and scenes
  rather than drawing personally
• Templates to help users get started with ideas

4
GoAnimate Architecture

• GoAnimate is a client-server architecture
• Adobe Flex is used to create the Flash RIAs
• i.e. Studio for animation creation, and Player
  for animation playing
• Server is written in PHP
• AJAX is used for communication
• Communication are transferred in JSON and XML
  formats

5
Why Adobe Flex?

• Flex applications are cross browser and cross
  platform
• Utilizing the Flash's best features
• Transitions, Effects, Skinning and Vector-based
  visual components
• Wide customer reach
• Flash Player is installed on 95 of the client
  systems

6
Why not Adobe Flash?

• Flex is a platform for Software Engineers
• UI design and code logic separation
• Greater emphasis on software engineering
• Leverage the existing software developers who are
  familiar with software engineering design
  principles
• Automated build and verification using the Flex
  SDK
• Flex Profiler

7
GoAnimate Optimization Process

• Design time optimization
• Modularized design
• Follow software engineering principles
• Design the architecture such that the amount of
  communication to/from the server are minimized
• Use of flashvars for initial state information
• Development time optimization
• Use of Flex Profiler to analyze the performance
  and the memory usage of our applications
• Build time analysis
• Use the link report with XSLT transformation to
  analyze the class sizes

8
We use Flex Profiler to Optimize

• Critical path analysis
• Find out which methods are called most often
• Find out which methods takes the longest time to
  run
• Memory profiling
• Find out which objects are taking up the most
  memory
• Find out the number of instances for each object

9
Adobe Flex Profiler

• Gathers application profiles every 10ms
• The amount of memory used
• The method calls and their stack traces
• The object instances used
• Etc...
• Ability to snapshot profiles at any time
• Along with the ability to clear profiles, this is
  an incredible tool to analyze the application
  performance between 2 time periods

10
Techniques used to reduce size

• Use HBOX and VBox instead of Grid
• Reduce and avoid nesting
• Avoid a container with a single child component
• Discard unused UI
• Remove all references to the object, allowing
  Garbage Collection to occur
• clear event listeners because they are considered
  to be references

11
Techniques used to reduce runtime

• Reuse old instances of an object
• Avoid instantiation of new objects
• Avoid unnecessary calls in the critical paths
• Move into initialization paths
• Remove all together
• Simplify logic on the critical paths
• Use of efficient algorithms on critical paths

12
GoAnimate SDLC

• Our Software Development Lifecycle is a repeating
  process
• Design the application
• Develop the application
• Measure the performance
• Identify the problem areas
• Fix the problems

13
Contacts

• Wai Lam
• ahwai_at_goanimate.com
• Eddy Leung
• eddy_at_goanimate.com
• Jordan Williams
• jordan_at_goanimate.com