Creating an application / Tutorial / 3DImageChanger / Components / E-merald web-engineering

Components

Home → Components → 3DImageChanger → Tutorial → Creating an application

To view this site you need Flash player 8

3D Image ChangerOverviewTutorialCustomizationCreating an applicationDocumentationMethodsPropertiesEventsUsage samplesAdd to CartDynamic Menu Buttons

The following procedure explains how to add 3DImageChanger component to an application while authoring.

Example 1

In this example, 3DImageChanger is used to create a simple banner for a web application.

Before creating an application, download the following images required for this example and save them to your hard disk:

	emerald01.jpg
	emerald02.jpg
	emerald03.jpg
	emerald04.jpg

To create an application with 3DImageChanger component:

1. Set the Stage size to 200 x 195 pixels and the background color to "#B7D8DF". For frame rate enter any appropriate value — for example, 30 fps.

Drag one 3DImageChanger component from the Components panel to the Stage and set its coordinates to (20, 20).

Note: As the visual area of a 3DImageChanger instance increases while 3D rotation effect, leave enough space around the component on the Stage to avoid trimming the edges of images in the published SWF file.

3. Import the saved JPEG files into the library for the current Flash document by selecting File > Import to Library.

4. For each of the four imported bitmaps, do the following: select it in the Library panel, open the Linkage dialog box from the Library pop-up menu, and enter the corresponding linkage identifier from the following — "emerald01", "emerald02", "emerald03", and "emerald04".

In the Component inspector, do the following:

For Change Effect parameter, set: "prismatic triangular"

For Delay (seconds) parameter, set: 2

For Display Mode parameter, set: "auto-forward"

For Granularity (pixels) parameter, set: 5

For Rotation Angle parameter, set: 9

For Visual Effect parameter, set: "blur"

For Visual Effect Quality parameter, set: "low"

For Visual Effect Speed parameter, set: "low"

For Images Collection parameter as the object, add the following values by clicking the Add (+) button in the Values dialog box:

Leave the other parameters without changes.

Note: The "Images Collection" parameter is enabled in Flash Professional 8 only (because of the Collection interface). To add the above images to the "Images Collection" in your Flash Basic 8 application, do the following: (a) in the Property inspector, enter appropriate value for the Instance Name property of the component instance (for example, "changer"); (b) write the following code on Frame 1 of the Timeline:

changer.addImage("emerald01", "bitmap");
changer.addImage("emerald02", "bitmap");
changer.addImage("emerald03", "bitmap");
changer.addImage("emerald04", "bitmap");

6. Select Control > Test Movie.

You can view the completed application here.

Example 2

In this example, 3DImageChanger is used to create a slide show with a "concave surface" effect. The images are loaded as external JPEG files listed in configuration XML file.

To create an application with 3DImageChanger component:

1. Set the Stage size according to the size of images in your collection (in this case, 500 x 300 pixels) and choose the background color. For frame rate enter any appropriate value — for example, 30 fps.

2. Drag one 3DImageChanger component from the Components panel to the Stage and set appropriate coordinates for it.

In the Component inspector, do the following:

For Change Effect parameter, set: "cylindrical concave"

For XML enable parameter, set: "true"

For XML file Path parameter, set: "images.xml"

Change the values of other parameters depending on your needs.

4. In the Property inspector, enter appropriate value for the Instance Name property of the component instance (for example, "changer").

5. Create two buttons — "Next Image" and "Previous Image" — and place them on the Stage. In the Property inspector, enter appropriate values for the Instance Name property of the component instances (for example, "next_button" and "prev_button").

6. Write the following code on Frame 1 of the Timeline:

next_button.onRelease = function() { changer.gotoNextImage(); } prev_button.onRelease = function() { changer.gotoPreviousImage(); }

7. Using your favorite text editor (Dreamweaver, UltraEdit, or even Notepad is fine), create a new document and enter the following code (in this case):

<?xml version="1.0" encoding="UTF-8"?> <collection path="Nature_images/"> <img src="nature01.jpg"/> <img src="nature02.jpg"/> <img src="nature03.jpg"/> <img src="nature04.jpg"/> <img src="nature05.jpg"/> <img src="nature06.jpg"/> <img src="nature07.jpg"/> <img src="nature08.jpg"/> <img src="nature09.jpg"/> <img src="nature10.jpg"/> </collection>

This is your configuration XML document. Save the XML file in the same directory as the SWF file that contains a 3DImageChanger component and name it "images.xml".

Now for the images — they must be saved in "Nature_images" directory, in this case, which in turn must be alongside the XML document.

For more information on structure of configuration XML file, see the XML file Path parameter.

8. Publish the Flash document with appropriate name.

9. You can view the completed application here.