User Guide Cancel

Best practices - SWF application authoring guidelines

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

About SWF application guidelines

The best way to create Animate applications depends on the application you create and the technology that you are using to build the application.

An online application lets a user influence a website by interacting with it. For example, the application might collect information from the user (such as a username and password for a registration), information might be added to the site (such as in a forum), or the user might interact in real time with other site visitors (such as a chat room or interactive white board). Results from the server often appear in the SWF file, depending on the interaction. These examples are applications that involve the user and different kinds of server interaction. A website that does not use visitor information or data is not an application (for example, a portfolio, cartoon animation, or static informational site). Animate applications involve an interactive process between the user, a web application, and a server. The basic process is as follows:

  1. A user enters information into a SWF file.

  2. The information is converted into data.

  3. The data is formatted and sent to a web server.

  4. The data is collected by the web server and sent to an application server (for example, ColdFusion, PHP, or ASP).

  5. The data is processed and sent back to the web server.

  6. The web server sends the results to the SWF file.

  7. The SWF file receives the formatted data.

  8. Your ActionScript processes the data so the application can use it.

When you build an application, you must select a protocol for transferring data. The protocol alerts the application when data is sent or received, in what format the data is transferred, and how it handles a server’s response. After data is received in the SWF file, it must be manipulated and formatted. If you use a protocol, you do not have to worry about data being in an unexpected format. When you transfer data using name-value pairs, you can check how the data is formatted. Check that the data is formatted correctly, so you do not receive XML formatted data and so the SWF file knows what data to expect and work with.

Collecting and formatting data

Applications depend on user interaction with the SWF file. Frequently, it depends on the user entering data into forms. Animate provides many ways you can enter and format data in Animate applications. This flexibility exists because of the capabilities you have with animation and creative control over the interface, and error checking and validation you can perform using ActionScript.

Benefits from using Animate to build forms to collect data include the following:

  • Increased design control.

  • Decreased or no need for page refreshing.

  • Reuse of common assets.

     To save information that you collect from the user, save it in a shared object on the user’s computer. Shared objects let you store data on a user’s computer, which is similar to using a cookie. For more information on Shared objects, see the sharedObject class in ActionScript 2.0 Language Reference or ActionScript 3.0 Language and Components Reference.

Sending and processing data

You must typically process information before you send it to the server, so it’s formatted in a way that the server understands. When the server receives the data, it can be manipulated in any number of ways and sent back to the SWF file in a format that it can accept, which can range from name-value pairs to complex objects.

 Your application server must have the MIME type of its output set to application/x-www-urlform-encoded. If that MIME type is missing, the result is usually unusable when it reaches Animate.

The following table shows you several options for sending data to a server and receiving data using Animate:

Send data

Description

LoadVars.send and LoadVars.sendAndLoad

Sends name-value pairs to a server-side script for processing. LoadVars.send sends variables to a remote script and ignores any response. LoadVar.sendAndLoad sends name-value pairs to a server and loads or parses the response into a target LoadVars object.

XML.send and XML.sendAndLoad

Similar to LoadVars, but XML.send and XML.sendAndLoad send XML packets instead of name-value pairs.

getURL

Using the getURL() function or MovieClip.getURL method, you can send variables from Animate to a frame or pop‑up window.

Remoting

Lets you easily exchange complex information between Animate and ColdFusion, ASP.NET, Java, and more. You can also use Animate Remoting to consume web services.

Web services

Adobe Animate includes the WebServiceConnector component that lets you connect to remote web services, send and receive data, and bind results to components. This lets Animate developers quickly create Rich Internet Applications without having to write a single line of ActionScript.

You can consume remote web services by using WebServiceClasses, which can require writing complex ActionScript.

Adding data loading and validation

Validate any information you retrieve before you send that data to a server. This reduces strain on the remote server, because it does not handle as many requests when users do not fill in required fields. Never rely solely on client-side validation in any application; server-side validation must also occur.

Even if you build a simple registration or login form, check that the user has entered their name and password. Perform this validation before sending the request to the remote server-side script and waiting for a result. Do not rely only on server-side validation. If a user enters only a username, the server-side script must receive the request, validate the data being sent, and return an error message to the Animate application, stating that it requires both the username and password. Likewise, if validation is performed only on the client side (within the SWF file), a user might hack the SWF file, bypass the validation, and send data to your server in an attempt to post the bad data.

Client-side validation can be as simple as making sure that a form field is at least one character long, or that the user entered a numeric value and not a string. To validate an e‑mail address, for example, check that the text field in Animate isn’t empty and contains at least the at sign (@) and dot (.) characters. For the server-side validation, add more complex validation and check that the e‑mail address belongs to a valid domain.

You must write ActionScript to handle the data that loads into the SWF file from the server. After you finish loading data into a SWF file, the data can be accessed from that location. Use ActionScript to check whether the data is fully loaded. You can use callback functions or listeners to send a signal that the data is loaded into the document.

When you load data, it can be formatted in several ways:

  • You might load XML, in which case you use the XML class methods and properties to parse the data and use it. If you use name-value pairs, the pairs turn into variables and you can manipulate them as variables.

  • You might receive data from a web service or from Animate Remoting.

In both cases, you could receive complex data structures, such as arrays, objects, or record sets, which you must parse and bind appropriately.

Using error handling and debugging

Your application needs to be robust enough to anticipate certain errors and handle them accordingly.

One of the best ways to perform error handling in ActionScript 2.0 is to use the try-catch-finally blocks that let you throw and catch custom errors. By creating custom error classes, you can reuse code throughout your application without having to rewrite error handling code. For more information on throwing custom errors, see the Error class in ActionScript 2.0 Language Reference. For more information on try-catch-finally blocks, see try..catch..finally in ActionScript 2.0 Language Reference.

In ActionScript 3.0, use the flash.errors class to catch errors.

For more information, see “Handling synchronous errors in an application” in Programming ActionScript 3.0.

Organizing files and storing code

Consider the following guidelines before you start organizing files and storing code:

  • Do you divide the SWF file into multiple SWF files, and, if so, how should they interact?

  • What assets can you share across SWF files?

  • What files do you dynamically load?

  • How and where do you store ActionScript?

    When you develop an application, store your server-side code and files in a logical directory structure, similar to those in an ActionScript package. Arrange your code this way to keep it well organized and reduce the risk of the code being overwritten.

    For larger applications, encapsulate client-server communication and services in classes. When you use classes, you benefit in the following ways:

  • You can reuse the code in more than one SWF file.

  • You can edit code in a central place, and update all SWF files by republishing them.

  • You can create a single API that can manipulate different UI elements or other assets that perform similar functions.

Using the MVC design pattern

The MVC design pattern is used to separate the information, output, and data processing in the application. The application is divided into three elements: model, view, and controller; each element handles a different part of the process.

The model

Incorporates the data and rules of the application. Much of the application’s processing occurs in this part of the design pattern. The model also contains any components (such as CFCs, EJBs, and web services), and the database. Data returned is not formatted for the interface (or front end) of the application in this part of the process. The returned data can be used for different interfaces (or views).

The view

Handles the front end of the application (the interface with which the user interacts), and renders the model’s contents. The interface specifies how the model’s data is presented and outputs the view for the user to use, and lets the user access or manipulate the application’s data. If the model changes, the view updates to reflect those changes by either pushing or pulling data (sending or requesting data). If you create a hybrid web application (for example, one that includes Animate interacting with other applications on the page), consider the multiple interfaces as part of the view in the design pattern. The MVC design pattern supports handling a variety of views.

The controller

Handles the requirements of the model and view to process and display data, and typically contains a lot of code. It calls any part of the model, depending on user requests from the interface (or view), and contains code that’s specific to the application. Because this code is specific to the application, it is usually not reusable. However, the other components in the design pattern are reusable. The controller does not process or output any data, but it takes the request from the user and decides what part of the model or view components it needs to call, and determines where to send the data and what formatting is applied to the returned data. The controller ensures that views have access to parts of the model data that they must display. The controller typically transmits and responds to changes that involve the model and view.

Each part of the model is built as a self-contained component in the overall process. If you change one part of the model (for example, you might rework the interface), the other parts of the process do not usually need modification, which reduces problems. If your design pattern is created correctly, you can change the view without reworking the model or controller. If your application does not use MVC, making changes anywhere can cause a rippling effect across all your code, which requires many more changes than if you were using a specific design pattern.

An important reason to use the MVC pattern is to separate data and logic from the user interface. By separating these parts of the process, you can have several different graphical interfaces that use the same model and unformatted data. This means that you can use your application with different Animate interfaces, such as an interface for the web, one for Pocket PC, a version for cell phones, and perhaps an HTML version that doesn’t use Animate at all. Separating data from the rest of the application can greatly reduce the time it takes to develop, test, and even update more than one client interface. Similarly, adding new front ends for the same application is easier if you have an existing model to use.

Only use MVC if you build a large or complex application, such as an e‑commerce website or an e‑learning application. Using the architecture requires planning and understanding how Animate and this design pattern work. Carefully consider how the different pieces interact with each other; this typically involves testing and debugging. When you use MVC, testing and debugging are more involved and difficult than in typical Animate applications. If you build an application in which you need the additional complexity, consider using MVC to organize your work.

Creating secure applications

Dishonest users might try to hack your application, whether you build a small portal site where users can log in and read articles or a large e‑commerce store. For this reason, consider the following steps to secure your application.

  • Post data to HTTPS for data that needs to be secured. Encrypt values in Animate before sending them to a remote server to be processed.

     Never store any information or code in a SWF file that you don't want users to see. It is easy to disassemble SWF files and view their contents using third-party software.

  • Add a cross-domain policy, which prevents unauthorized domains from accessing your assets.

 

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online