Adding Custom Animation

How to:

Without coding, you can use Information Builders custom components, Flash files, images, and other file types to create a rich and engaging application.

In this topic, you will insert a Flash animated logo in the application. The procedure uses standard Flex Builder features, and there are no custom Information Builders components or properties.

Top of page
x
Procedure: How to Add Custom Animation With a .SWF File Logo
  1. Place the custom .SWF file that is Adobe Flash Player compatible in the Flex project directory (in this example, My_First_Project). It may reside in other locations but for the purpose of this example, place it here.
  2. From the Components pane, select SWFLoader and then create a bounding box in the top right corner of the application.

    You can position animation files anywhere in a WebFOCUS Enable application.

    The width and height are automatically calculated, but you can change them either by dragging the sides of the bounding box or by setting them on the Properties pane or directly in the MXML source code. You can also use the SWFLoader control to load other Flex applications at run time.

    The SWFLoader control allows you to load .GIF, .JPEG, .PNG, and .SVG files. You can also use the Image control to load those types of files.

  3. Assign a unique ID to the component. It is good practice to give all components distinct IDs.
  4. In the Source field, enter the path to the .SWF file that is Adobe Flash Player compatible for the logo. You can also open the file selection dialog box and navigate to the file.
  5. Set the Scale content to true to scale the .SWF file that is Adobe Flash Player compatible to the size of the SWFLoader. You can set those sizes to match. For more information, see the Flex Builder documentation. There are many useful properties that give you full control over the look and feel of the application.
  6. Set Auto load to true to load the file at run time. If you do not set it up, you must make a custom call to the load() method.
  7. Constrain the loader to the side of the application window so that it always appears to the right of the application, regardless of the width of the browser window.
  8. Set the right margin to 10.

    Flex Builder dashboard Design tab

  9. Switch to Source view to see the MXML code. 
    ?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ibi="http://www.informationbuilders.com"
    backgroundGradientColors="[#808080, #c0c0c0]">
  <ibi:ibiCanvas left="0" top="0" bottom="0" right="0">
    <mx:SWFLoader scaleContent="true" autoLoad="true" id="logo"
     source="IBILogo.swf" right="10" width="212" height="73" y="0"/> 
  </ibi:ibiCanvas>
</mx:Application>
WebFOCUS