How to Customize

You can fully customize your billboard by editing the billboard.xml file. We reproduce the file below. You can open it and edit in any plain text editor. The xml code is quite self-explanatory.

<billboard>

<props slices="10" delay="4" />

<pic>

<located>billpic1.jpg</located>

<linksto>none</linksto>

</pic>

<pic>

<located>billpic2.jpg</located>

<linksto>http://www.flashandmath.com/advanced/particles3d/</linksto>

</pic>

<pic>

<located>billpic3.jpg</located>

<linksto>http://www.flashandmath.com/basic/tween/</linksto>

</pic>

<pic>

<located>billpic4.jpg</located>

<linksto>http://www.flashandmath.com/flashcs4/xmlspinner/</linksto>

</pic>

</billboard>

The 'props' tag (short for properties) has two attributes corresponding to the number of vertical slices (in our case 10), and the time between transitions (in our case 4 seconds). Then there is a series of 'pic' nodes. Each of those nodes contains an address of your image file (relative to the location of the html page containing your billboard). In our case, all html, swf, jpg, and xml files are in the same directory. You can put your image files in other directories on your server and enter their location between 'lacated' tags. Note:   Since we are accessing the image files programmatically it is unlikely for you to be able to load them from a remote location. (The remote server would have to contain a permission file for that). The 'linksto' nodes are self-explanatory and here you can enter a remote URL as well as a URL on your server.

You can have any number of 'pic' nodes, so you can have a billboard containing any number of images. The images can be of any size but all of the same size. Note:   For best results, the width of your images should be divisible by 2 times the number of vertical slices. For example, our images are 280 pixels wide. 280 is divisible by 2*10. So we choose 10 vertical slices. We could have chosen 5 or 20. If we choose 1, we will get a simple image flip.

The cs4billboard.fla file, the billborad.xml file, the Document Class file, BillboardMain.as, as well as the folder flashnadmath->as3 should all be in the same directory for the fla file to compile. The html page containing the applet, the cs4billboard.swf file (or your swf file by a different name), and the billboard.xml files should all be in the same directory on the server for the swf file to load the xml file. (Unless you edit BillboardMain.as to specify a different location for the xml file.) The location of image files on the server must correspond to the locations given in billboard.xml. (If they are in the same directory you simply enter their names in billboard.xml.)

If you look at BillboardMain.as file, it becomes very clear how to use the BillboardCS4 class. The BillboardMain class creates an instance of the BillboardCS4 class and uses all of its public methods. The code in both 'as' files is well-commented.

Comments

As we explain in the comments to the code, in the BillboardCS4 class we run into the issue of blurring 3D objects in Flash Player 10. We deal with it by swapping 3D objects with the corresponding 2D objects when they are facing the user. The issue is explained in our tutorial: 3D News Ticker in Flash CS4.

The issue of opening the web pages from the Flash Player on your desktop and other Flash Player security issues are addressed in our tutorial: 3D Card Flips with Tweens in Flash CS4.

Finally, the ImageLoader class is introduced in: Cube in Bloom: 3D Menu on a Cube.

Download

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.