Rember that if you use the 3rd method (without colors), your code must be only
catalog = new LoadVars()
// Load the vars from the external Php file
catalog.load(php_file)
catalog.onLoad = function(success) {
for(this.a=1;this.a<=catalog.total;this.a++){
// Create an array (ObjectN) for each object in the catalog
catalog["object"+this.a] = catalog["Oggetto"+(this.a)].split("|")
//Add into the combobox the names of the objects in the catalog
_root.comboname.addItem(catalog["object"+this.a][0])
// Remove "OggettoN", that was a "temporary" object
delete(this["Oggetto"+this.a])
}
}
Now, the code of the 1st frame is complete :)
3.3 Show product image
Well, now we've to write the code for the "Go" button (near the ComboName).
This button, when is pressed, must show the product selected in the "ComboName"
Now, for each "method" (Image, External Movie or No Color), we've a different code on this button.
We'll see the three different codes
If you use the 1st method (Create one jpg for every color), write this code
on(press){
selected = _root.comboname.getSelectedIndex()
// Remove all the elements from the "ComboColor"
_root.combocolors.removeAll();
// Insert the first element in the "ComboColor"
_root.combocolors.addItem("Select a color")
// Load the external image into the movie clip
loadMovie(_root.catalog["object"+selected][4]+".jpg","object_image")
// Set the informations (name, quantity,...) in the dynamic fields
_root.name.text = _root.catalog["object"+selected][0]
_root.quantity.text = _root.catalog["object"+selected][1]
_root.cost.text = _root.catalog["object"+selected][2]
_root.description.text = _root.catalog["object"+selected][3]
// Add the elements (colors in the ObjectN.colors array) in the ComboColors
for(a=0;a<_root.catalog["object"+selected].colors.length;a++){
_root.combocolors.addItem(_root.catalog["object"+selected].colors[a])
}
}
We see better some lines of this code
loadMovie(_root.catalog["object"+selected][4]+".jpg","object_image")
After the remotion of the 4th element of the array ObjectN (in catalog), the 6th element (remember
the array's first element is 0)
became the 5th element (Array[4])...then the "image" field is the 5th element of the array.
With this code we load the external image (that must be in the same directory of the swf) in the movie clip
"object_image"
Another line that I try to explain better is
for(a=0;a<_root.catalog["object"+selected].colors.length;a++){
_root.combocolors.addItem(_root.catalog["object"+selected].colors[a])
}
With this code, we make a cycle, that insert all the colors (the elements in the "colors array" (catalog[objectN].colors , do you remember? ;)) in the
ComboColors component
I think that the other lines are explained enough
If you use the 1st method (load external swf that contain a gif), write this code
on(press){
selected = _root.comboname.getSelectedIndex()
_root.combocolors.removeAll();
_root.combocolors.addItem("Select a color")
loadMovie(_root.catalog["object"+selected][4]+".swf","object_image")
_root.name.text = _root.catalog["object"+selected][0]
_root.quantity.text = _root.catalog["object"+selected][1]
_root.cost.text = _root.catalog["object"+selected][2]
_root.description.text = _root.catalog["object"+selected][3]
for(a=0;a<_root.catalog["object"+selected].colors.length;a++){
_root.combocolors.addItem(_root.catalog["object"+selected].colors[a], colors_list[_root.catalog["object"+selected].colors[a]])
}
}
It's the same of the previous code, only two lines are different
loadMovie(_root.catalog["object"+selected][4]+".swf","object_image")
In effect, if we want load an external movie that contain a gif, we must load an swf and not a jpg.
The swf must be in the same folder of the Catalog.swf file.
The name of the external swf (or jpg, if you use the 1st method) MUST be the
value that there's in the database ("Image" field)
Look also at this line:
_root.combocolors.addItem( _root.catalog["object"+selected].colors[a], colors_list[_root.catalog["object"+selected].colors[a]])
The "bold" string is the "value" parameter that we'll insert in the combocolors. If this parameter isn't specified, the value is the same as the label.
In this method, we must have a value, that's the RGB code of the color.
In effect, if you use this method, in the 1st frame of the movie, you must add a code, like this:
colors_list = new Object()
colors_list.red = {rb:255, gb:43,bb:0,ra:0,ga:100,ba:100,aa:100,ab:0}
colors_list.darkblue = {rb:0, gb:0,bb:153,ra:0,ga:100,ba:100,aa:100,ab:0}
colors_list.blue = {rb:0, gb:102,bb:255,ra:0,ga:100,ba:100,aa:100,ab:0}
colors_list.yellow = {rb:255, gb:204,bb:0,ra:0,ga:100,ba:100,aa:100,ab:0}colors_list is an object, that contains some colors (colors_name = the rgb values)
The names that you write into the database (colors field) must be EQUALS at that there are in the "colors_list"
You can add or remove all the colors in the colors_list, for example if you want add "white" at this colors_list,
add this line at the script, write this
colors_list.white = {rb:255, gb:255,bb:255,ra:0,ga:100,ba:100,aa:100,ab:0}We'll see in the code for the "Ok" button the utility of this value
At the end, if you use the 3rd method, the code you've to write is "only" this (obviously, there isn't the code that concern the ComboColos):
on(press){
selected = _root.comboname.getSelectedIndex()
loadMovie(_root.catalog["object"+selected][5]+".jpg","object_image")
_root.name.text = _root.catalog["object"+selected][0]
_root.quantity.text = _root.catalog["object"+selected][1]
_root.cost.text = _root.catalog["object"+selected][2]
_root.description.text = _root.catalog["object"+selected][3]
}
Using this method, we'll have only ONE image that represent the product.
Well, we're at the last code :)
3.4 Flash method, 'changes'
If you use the method "whitout colors", your work is finished: the next code is used for "change" the color at the product
Else, if you use one of the another method, go on ;D
Well, we'll see the different codes (one for every "method") that we'll write for the "Ok" button (near the ComboColors)
1 - If you want use the image ("1st method"), the code for the "Ok" button will
on(press){
sel_color = _root.combocolors.getValue()
loadMovie(_root.catalog["object"+selected][4]+"-"+sel_color+".jpg","object_image")
} It's simple: we've already seen that the 5th element of the array "ObjectN" is the name of the image
that correspond at the product.
You can easly understand that with this code, the movie load ad image, that has a name like
product name-color.jpg (eg: Tshirt-red.jpg) (only the image that is loaded when the user click on "Go" button must have a name like procuct name.jpg)
In fact, with this "method", you must create an image for every color of the product, that will be loaded
when a user select a color from the "combocolors"
Well, for the 1st method we've finished the work :)
2- If you use the 2nd method, you must write this code for the "Ok" button
on(press){
sel_color = _root.combocolors.getValue()
colore = new Color(_root.object_image.object)
colore.setTransform(sel_color)
}
For understand this code, we must before see how create the external movie, that must have a name like
procuct name-color.swf (eg: Tshirt-red.swf) (only the movie that is loaded when the user click on "Go" button must have a name like procuct name.swf)
The external movie, must have a movie clip (that contains the product's gif, or also a draw made in the movieclip), and the movie clip must have position 2,2
Watct the picture for an example
The movie clip, that contain the gif (in the picture, a t-shirt), is called "object"
Then, remember to "create" the external swf with the "object" movie clip.
Now, watch this code
sel_color = _root.combocolors.getValue() colore = new Color(_root.object_image.object) // Create a new color object (colore), with "_root.object_image.object" * as target colore.setTransform(sel_color) // Apply the color object at the movie clip
* Do you remember that we load the external movie (that contains "object" movie clip) is loaded into the "object_image" movieclip? Then,
the movie clip "object" of the external file now is in the "object_image" movie clip
Well, now also this "method" is finished
Remember that with this method, when you change the color, the quality can be "low". Personally, I prefer,
for the "quality" of the various color, the method with external jpg; but this 2nd method is more "fast" for change
the colors that create one image for every color
We've seen the 3 different "opportunity", and now we've finished our work
In the sample *zip, you'll find
CatalogWithoutColors.fla
CatalogImgColors.fla
CatalogLoadSwf.fla
Config.inc.php
Select.php
Tshirt.gif
Tshirt.fla
Tshirt.jpg
Tshirt-red.jpg
You can create the other images
Good work :)
