Page 1 of 1

Creating a catalog Flash MX, PHP, mySQL Rate Topic: -----

#1 Broly  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 16-December 04

Posted 16 December 2004 - 05:32 PM

Prefaction & presentation

Hi all.
I'm new in this forum...I'm an Italian 18yrs old boy...then you can imagine that my english is "scolastic", I pray you to excuse me in advance for mistakes and "strange forms" that you'll sure find in my tutorials...I tried to be simple and clear...and without too "italianizations" and mistakes...

Another important thing : I'm a very DISASTER with graphic and design... in fact I use flash at 99% for code and not for graphig...then my tutorials will be more "programmation-side" and not "design-side", please forgive me :D

Introduction

IMPORTANT : this tutorial uses components v1 (flash mx), if u use V2 compnents (flash mx2004) you muse change the event syntax and some images won't correspond....I can't ensure that this tutorial will work also with Mx2004...Maybe in future I'll made a new catalog tutorial and it'll be compatible with tha flash versions that will exists at that moment
I wrote this tutorial some time ago, and this is the reason because it isn't about Mx2004 :huh:

In this tutorial, we'll see how we can create a "little" product's catalog
using Flash, Php and MySql.

We'll have three files:

- config.inc.php, that contains the informations for the connection at the database
- Select.php, that select the product's dates from the database, and return it in a format for Flash
- Catalog.swf, that's the catalog the user will see :)

The code will be simple, I don't have particular hints to give for this tutorial : - )

Let's start :pirate:

Weel, we start from the database creation. After, we'll see the php files and, last but not least, the flash part.

1) Well, we're going to create our database. In this sample, I've called the database "catalog" (wow, what original name!)

In our database, we must create a table (products) with some fields...use this query to create the table in your Database

CREATE TABLE products (
id int(20) NOT NULL auto_increment,
name varchar(200) NOT NULL default '',
quantity int(5) NOT NULL default '0',
cost int(5) NOT NULL default '0',
description tinytext NOT NULL,
colors tinytext NOT NULL,
image varchar(200) NOT NULL default '',
PRIMARY KEY (id)
)



Well done! Now we have a database and its table...but it's empty...Well, we'll insert some informations into the tables : - )
This is an example of query that you can use for insert the infos about a product

INSERT INTO products VALUES (1, 'shirt', 200, 10, 'This is a very nice t-shirt, avaible in all sizes', 'red,darkblue,yellow', 'Tshirt');


Ok, now our database is complete (you can insert a lot of information in the database :)
In the example we have 5 products in the DB, this is
the query I used to fill it:

INSERT INTO products VALUES (1, 'shirt', 200, 10, 'This is a very nice t-shirt, avaible in all sizes', 'red,darkblue,yellow', 'Tshirt');
INSERT INTO products VALUES (2, 'shorts', 300, 5, 'A pair of nice shirts for you :)', 'red,darkblue', 'Shorts');
INSERT INTO products VALUES (3, 'bra', 100, 10, 'A nice bra...also if it\'s transparent...', 'white', 'Bra');
INSERT INTO products VALUES (4, 'Shoes', 400, 25, 'A pair of very nice shoes, that you can use in every occasion', 'brown, black', 'Shoes');
INSERT INTO products VALUES (5, 'Trainers', 150, 20, 'A pair of trainers, wonderful if you move yourself everyday', 'white,lightblue', 'Trainers');


2 ) Now it's time to create the php files. We'll have two files: config.inc.php and select.php. The first file will be used to contain tha database access informations, the second file is a part of the "hearth" of your little application

2a) config file (config.inc.php)

Now that we've our database, we must connect to it and pick the information...otherwise, how can we have a catalog ? ;)
Well, we'll make the connection using Php.
As said before, the config.inc.php file will contain the database access infos, like this

<?
$server = "localhost";          // Database Host (usually localhost)
$user = "root";          // Username
$pass = "password";              // Password
$database = "catalog";      // Database name
?>



The lines are explained in the script: these are the variables that we'll use for the connection at the database


2b) The file that "pick" the info from the database is "Select.php": this files retrieve the info from the db, then returns it in a format readable by flash. This file is called "Select.php"

<?
// Include the external file (the variables for the database connection)
include("config.inc.php");
// Connect at the Db using the &quot;config.inc.php&quot; variables
$connessione = @mysql_connect($server,$user,$pass);
// Select the database
$database = mysql_select_db($database,$connessione);
// The query text (Select all from the products table in our database)
$select = "SELECT * FROM products";
// Make the query
$result = mysql_query($select);
// Count the rows (total result)
$rows = mysql_num_rows($result);
// For each result
while($list = mysql_fetch_array($result)){
    // Set some variables, using the info get from the database
    // $list is the array that contains the Db values
    // For example $list[&quot;id&quot;] is the value of  an &quot;id&quot; field in the Db
    $id = $list["id"];
    $name = $list["name"];
    $stock = $list["quantity"];
    $cost = $list["cost"];
    $description = $list["description"];
    $colors = $list["colors"];
    $image =  $list["image"];
    // Print in the browser window a string, in a format that Flash can read
    // (Flash read namevar=value&amp;namevar2=valuevar2....)
    // We'll see after why we've some "|"
    print("Total=$rows&Oggetto$id=$name|$stock|$cost|$description|$colors|$image&");
}
?> 



I think (and hope :)) that code comments are sufficents to explain what the code do...Now, in the browser, with our products, we'll have this result:

Total=5&Oggetto1=shirt|200|10|This is a very nice t-shirt, avaible in all sizes|red,darkblue,yellow|Tshirt&Total=5&Oggetto2=shorts|300|5|A pair of nice shirts for you :)|red,darkblue|Shorts&Total=5&Oggetto3=bra|100|10|A nice bra...also if it's transparent...|white|Bra&Total=5&Oggetto4=Shoes|400|25|A pair of very nice shoes, that you can use in every occasion :)|brown, black|Shoes&Total=5&Oggetto5=Trainers|150|20|A pair of trainers, wonderful if you move yourself everyday ;)|white,lightblue|Trainers&

Total is the number of total objects
OggettoN is a string that contains the info about a product

Inside Flash, using Actionscript, we'll divide this info for can use it in the catalog

3) Flash side

We've already finished the Php scripts.
Now we must go on with Flash Mx.
In our Flash movie we'll have some "particular" scripts, pay attention!
But before all, after code (and before code again :D)...start graphic :)

Watch the image and try to replace it exactly (or download the fla :P)
(Comboname and Combocolors indicate the name of the component ; - ) )

Posted Image

Combocolors and Comboname are two "ComboBox" components (avaible in Flash UI Components Set)

Posted Image

Posted Image

The square is a normal shape, but the "white circle" that you see in the figure, is an emptymovie clip, with istance name "object_image"

Posted Image

"Go" and "Ok" are two buttons, picked from "Button Clip Art", a Common Library (if you haven't it, search on Macromedia Exchange,
but you find the "Go" and "Ok" buttons also in the fla

There're 4 text fields: there are all dynamic texts:

Posted Image

In the picture you see the different instance names (name, quantity, cost, description)
Pay attention: description is a multline textfield!

Posted Image

Very well, we made the graphic...ok ok, it isn't so beautiful...but I warned you I'm a DISASTER, no ? :D

3b) Flash methods

PAY ATTENTION NOW
We've 3 available "ways" now: each product should have some avaible colors (in fact, in the database we've a "colors" field when we insert
the possible colors of the product)
Now, Flash Mx can't load Gif using LoadMovie, and the setRGB method envolve also the background of the Jpg (the only image format
that Flash MX can dinamically load), then we can

- 1st method: Create one jpg for every color (example: Tshirt.jpg / Tshirt-red.jpg / Tshirt-darkblue.jpg)
- 2nd method: Load an external swf, that contains the gif (imported using File->Import), and use on it the setRGB method
- 3rd method: Show the product without the colors change

We'll examine all those ways ; - )

If you prefer to use the 3rd method, delete from the graphic the "Combocolors" component and the "Ok" button.

Now, the code can be different if you use 1st, 2nd or 3rd method...when there are some differences, they're explained...otherwise, it means the code works well for all ways :)

At the first frame in the Flash movie, insert this code

// Create a new LoadVars object, called "catalog"
catalog = new LoadVars()
// Load the vars from the external Php file
catalog.load(php_file)
// When the vars are loaded
catalog.onload = function(success) {
for(this.a=1;this.a<=this.total;this.a++){
// Create an array (ObjectN) for each object in the catalog
this["object"+this.a] = this["Oggetto"+(this.a)].split("|")
//Add into the combobox the names of the objects in the catalog
_root.comboname.addItem(this["object"+this.a][0])
// Create into the array ObjectN a new array whith the avaible colors of the object
this["object"+this.a].colors = this["object"+this.a][4].split(",")
// Remove the 4th element of the array (The colors now are in the "colors" array)
this["object"+this.a].splice(4,1)
// Remove "OggettoN", that was a "temporary" object
delete(this["Oggetto"+this.a])
}
}




The lines are explained, but we must make another explanation, from

for(this.a=1;this.a<=this.total;this.a++){

to

delete(this["Oggetto"+this.a])

When we load the vars from the Php file (in the "catalog" object), we obtain some variables, such as

OggettoN = name|quantity|cost|description|colors|image

(N is a number variable)

This is our "temporary string", for have all informations for a product.
With this code

this["object"+this.a] = this["Oggetto"+(this.a)].split("|")

We create, into "catalog", a newest array (objectN), that contains
the information of the product (with the SPLIT function, we create
an array with this informations

ObjectN[0] = product name
ObjectN[1] = product quantity
ObjectN[2] = product cost
ObjectN[3] = product description
ObjectN[4] = product colors // If you don't want use the colors, you'll have this element, but you don't use it
ObjectN[5] = product image // the name without extension

Now, with this array we can

_root.comboname.addItem(this["object"+this.a][0])

Add an item (the name of the object) in the "comboname" component, that is the list of the products
And (if you NOT use the method without the colors change) create another array (colors) in the array ObjectN

this["object"+this.a].colors = this["object"+this.a][4].split(",")

We use another split function, because ObjectN[4] is like "red,darkblue,yellow"...using a split function, we'll have, for example

ObjectN.catalog[0] = "red"
ObjectN.catalog[1] = "darkblue"
ObjectN.catalog[2] = "yellow"

We'll see after why we "must" use this "colors array".
Now we can delete the "old" 4th element of the array (the colors list), because we've the colors array

Wiith this line
this["object"+this.a].splice(4,1)
We remove the 4th element of the array (Attention: if you don't want use the colors, don't write this line)

At the end:
delete(this["Oggetto"+this.a])
We remove "OggettoN", that was "only" a temporary string for pick the information of an object.

The code on the 1st frame is complete

Rember that if you use the 3rd method (without colors), your code would 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])
}

3c) 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])
}
}



Let's 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 almost the same of the previous code, BUT two lines are different

loadMovie(_root.catalog["object"+selected][4]+".swf","object_image")

In fact, 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]
}




Note that using this method, we'll have only ONE image that represent the product.
Hint : If the product is avaible in different colors, but you don't want show them, you can write the avaible colors in the description

Well, we're near to the end... here the last code :)

3d) 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

We now see the different codes (one for every "method") that we have to write for the "Ok" button (near the ComboColors)

1 - If you want use the image ("1st method"), the code for the "Ok" button is

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)

Hint: Take at the jpg image a background color egual at the background color of the Catalog.swf

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 belowfor an example

Posted Image

The movie clip, that contain the gif (in the picture, a t-shirt), is called "object"

Posted Image

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.

We're arrived at the end :ph34r:

You find the source codes for this tutorial attached.

I hope you liked this tutorial...and I promise that it won't the last : - )
See you soon, byez and good work everybody B)

Attached File(s)

  • Attached File  files.ace (79.61K)
    Number of downloads: 531


Is This A Good Question/Topic? 0
  • +

Replies To: Creating a catalog

#2 Mila  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 33
  • View blog
  • Posts: 193
  • Joined: 28-October 06

Posted 19 July 2008 - 06:10 PM

That was an excellent and very comprehensive tutorial. It helped me a lot on a project I was working on (though I do appreciate the "heads up" on changing the syntax for MX2004). Very well done. :^: :^:
Was This Post Helpful? 0
  • +
  • -

#3 sfmst  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 29-March 11

Posted 29 March 2011 - 01:03 AM

thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1