Skip to main content
gamedev.net
🔒 Locked

[web] Using Flash

Started by VViCKiD 12 replies 1.6k views
Original Post
VViCKiD
VViCKiD
Hi guys... I have just a general question. I have a 3D model of a car. I want to make this car rotate and put it on my webpage. Also, I would like to add items to this car (mount guns and stuff to it). Thus, when a gun is added, it has to also rotate with the car ... So, my question is, would I be able to do this in Flash ? I was thinking of actually doing it with a java applet and openGL. Cheers .
GDKnight
GDKnight
It can be done theres one flash program I used awhile ago its all 3D, I think its called Swift3D. Its not macromedia flash but it can be used to import the model into the flash format. That being said you should check out these links.
http://www.erain.com/
http://www.tutorialized.com/tutorials/Flash/3D/1
http://www.macromedia.com/devnet/flash/articles/flash_3d.html

I hope that helps. [smile]
GDKnight
VViCKiD
VViCKiD
Hi GDKnight....

Thanks for the reply...
But importing the model is not my main concern...
My main concern is being able to add/remove objects on my car once...

For example,

I want to be able to allow users to remove the wheels and put bigger ones on.. Then mount a gun on the bonnet of the car... All this has to be done through the web page ..

would that be possible ?

cheers..
GDKnight
GDKnight
Quote:
Original post by VViCKiD
Thanks for the reply...
But importing the model is not my main concern...
My main concern is being able to add/remove objects on my car once...

For example,

I want to be able to allow users to remove the wheels and put bigger ones on.. Then mount a gun on the bonnet of the car... All this has to be done through the web page ..

would that be possible ?

cheers..

Chances are if you've seen this somewhere (ie. car web sites) and its done in flash, they probably used that one Swift3D program. I am in no way an expert at swift 3d but I bet it can be done. Just break the models up into various objects for instance, and bind them on the car when needed.
GDKnight
VViCKiD
VViCKiD
Thnks GDKnight ...

I will look into it !

Btw, in flash, can you make calls to download new 3D objects and add it to ur model ?

For example, my gun models are all stored on the server. When someone adds a gun, I want to make the flash get it from the server and load it onto the top of my car ..

Is that possible ?

Cheers mate !

ViLiO
ViLiO
Hi,

Unless something has changed in the last few years then flash does not have native support for anything 3d. Swift works by translating the models into 2d and then trying to make them into vector graphics, and although this can produce nice results it is quite limited (Edit: ok I just looked at swift again and it seems to have gotten waaaaaaay better than it was years ago [lol]).

You're best bet would be shockwave. Shockwave is far more advanced than flash and has native 3d support (shockwave is produced by macromedia director and there is probably a 30 day trial you can download).

Of course there are other alternatives and you mentioned one yourself. Doing your suggested project with jogl would be quite straightforward, and as another option, there are many other web-based 3d plugins you could try ...like cult3d (last time I looked into cult3d though you had to prove your skills to get them to give you a free license [grin])

All the best,
ViLiO
Richard 'ViLiO' Thomasv.net | Twitter | YouTube
GDKnight
GDKnight
Quote:
Original post by VViCKiD
Thnks GDKnight ...

I will look into it !

Btw, in flash, can you make calls to download new 3D objects and add it to ur model ?

For example, my gun models are all stored on the server. When someone adds a gun, I want to make the flash get it from the server and load it onto the top of my car ..

Is that possible ?

Cheers mate !

I've seen web sites that load them dynamically as you suggest, though I have never actually done this myself.
GDKnight
giveblood
giveblood
Swift3D only exports 3d models in an SWF format, so you can use them as movieclips. I don't really know if this is what you need.

I think you may need to write flash script to render 3d objects dynamically, for what you want. You can do this with actionscript, but it may be a bit complicated. I don't know of any good tutorials off hand, but I could find some if you want. This might not be worth it, if you could just use something else though.

You can do it with pre-made movieclips, but users wont have as much control over changing the way they look, besides the position of the clips themselves.

Quote:
Original post by VViCKiD
Thnks GDKnight ...

I will look into it !

Btw, in flash, can you make calls to download new 3D objects and add it to ur model ?

For example, my gun models are all stored on the server. When someone adds a gun, I want to make the flash get it from the server and load it onto the top of my car ..

Is that possible ?

Cheers mate !


Yes you can do this also.

If you wanted to use pre-made movieclips, you could download and import the swf files dynamically, which isn't hard to do. Have some kind of central database file that the script looks at. It could send you the names of the 3d objects, and you can then choose which ones you want to download.

For drawing the objects in 3d with flash, you can download from a server a set of nodes and such for your script to render. This also isn't hard to do, once you have the system set up to draw it out.



If you be a bit more specific on what you're trying to do, i can give you some code to help you out
-Chris
VViCKiD
VViCKiD
Thanks for the help Chris...

Imagine this scenario.

1. User gets displayed the model of car rotating in flash
2. User decides to change the wheels
3. User selects the wheels from a variety of wheel models available
4. Flash page requests for the model of wheels from server
5. Flash recieves the wheel model from server
6. The wheels on the car get replaced with the new wheels and is displayed
7. The 3d model of the car rotates with the new set of wheels

Cheers !
ViLiO
ViLiO
Quote:
Original post by VViCKiD
Thanks for the help Chris...

Imagine this scenario.

1. User gets displayed the model of car rotating in flash
2. User decides to change the wheels
3. User selects the wheels from a variety of wheel models available
4. Flash page requests for the model of wheels from server
5. Flash recieves the wheel model from server
6. The wheels on the car get replaced with the new wheels and is displayed
7. The 3d model of the car rotates with the new set of wheels

Cheers !


Unless you write your own 3d engine in actionscript that is not going to happen. It would be more like ...

1. User gets displayed the model of car rotating in flash (this is one movieclip and essentially nothing more than a pre-rendered gif only in movieclip format).
2. User decides to change the wheels
3. User selects the wheels from a variety of wheel models available
4. Flash page requests for the movieclip of the car with different wheels from the server (this is another movieclip entirely and in fact you'd probably need one for each and every combination of car + accessories you can have)
5. Flash recieves the new swf from server
6. The whole car movieclip is replaced with the new one and the user has to download it just as they had to for the car rotation in the first place (after all this is a completely different movie clip)
7. The movie clip with the 3d model of the car rotates with the new set of wheels

Like I say, flash doesn't do 3d without a lot of work on your part (i.e. doing all the 3d maths yourself)

If you do want to go down the road of adding 3d support to flash by yourself, [this clicky] seems to be a good resource to do so [smile]

All the best,
ViLiO
Richard 'ViLiO' Thomasv.net | Twitter | YouTube
VViCKiD
VViCKiD
Thanks ViliO...

That shed a lot of light on the capabilities of flash for me... Thanks..

I guess applets are the best way to solve my problem then...


What do you think ?
giveblood
giveblood
try something like this to start you off:

stop();_root.createEmptyMovieClip("gunClipHolder", this.getNextHighestDepth());gunClipHolder.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/gunclip2.swf");//Set its positiongunClipHolder._x=50;gunClipHolder._y=50;//Control the clip  (these could be put in buttons, etc)//gunClipHolder.play();//gunClipHolder.stop();_root.createEmptyMovieClip("carClipHolder", this.getNextHighestDepth());carClipHolder.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/carclip2.swf");//Set its positioncarClipHolder._x=50;carClipHolder._y=50;//Control the clip//carClipHolder.play();//carClipHolder.stop();


The URLS point to 2 swfs i just uploaded.

The first one, is the gun, and the second is the car. The only reason I did the gun first is, the gun has to be behind the car when they're layered, and I didn't feel like doing depth swapping, but don't worry about that.

The gun one is in a file called gunclip2.swf, which just contains 30 transparent images of a rendering of a gun, from Poser. The carclip is the same thing, only with a car.

Create a new movie with just that script and you will see it loads both clips, right on top of each other, and plays them.

You can create a bunch of buttons for different things, such as to call a function which stops all clips. Or, you can stop all of them once you load them, and then have a seperate function, called every frame, which says:

gotoAndStop(carClipHolder._currentframe+x);

for each of the movieclips. X can be a variable, so you can set it to -1 to reverse the direction it rotates in.

And also you can do things like:

carClipHolder._visible=0;
carClipHolder._alpha=X; (x being a variable for visibility - you can have a slider or something if you want).

and many other things.

One drawback though: for things like wheels - which in some cases should be layered on top of the frame, and others should be in back - you will have to manually erase these areas from the image in that frame of the wheels clip in which is has to be "hidden" behind something, like the frame.


Hope that helps. As far as dynamically loading a list of models from the server, give me a little bit to work on an example and check back in like 20 minutes


-Chris
giveblood
giveblood
Well, it took a little longer than I thought but I think I got something that you could work off of.

The FLA is here if you want to take a look at how its all put together, but I'll put the code here anyway.

The SWF is here

I didn't make more than 1 model for the frame or gun, and I didnt even make a seperate one for wheels, but if you read and understand how it works, you'll see that it should work if you make one and specify the address in the text files on the server.

So on the server, there should be files for each type. I have 3 - wheels, frame, and gun. no.extension just named by the type. I'll write out what's in one of them, they're all pretty much the same.

total=2&v1n=nameofframeone&v1c=addressofframeoneminuestheswf&v1i=addressofimageforframeoneminusthejpg&v2n=frameTwo!&v2c=frame2&v2i=frame2&

You can easily make a script to generate these files.
Total is the total number of models of that type.
vNn, vNc, and vNi are the variables for each model(N).

vNn is the name, displayed in a text box in the swf
vNc is the clips address on the server, relative to the swf, without an extension, in swf format, as described before
vNi is the address of an image corresponding to the model, located on the server relative to the swf, in jpg format with no extension

So you should also have all of those files on the server. The models of each and then thumbnails of each, so they don't have to load the whole movieclip when browsing through.

The stage of the FLA consists of a dynamic text box, which points to the variable _root.itemName. this displays the current items name.

then there are 2 buttons for scrolling through each list of models of the current type, and 3 buttons to load the types file into the swf. Above those is a button which you would press to set the selected model to go to the screen, but since i didnt make the actual models, that wont work in my example. But you should get an idea of how to do what you wanted to do from this.

Here's the source.

First, the buttons:

"use this" button
on(release){
_root.useItem();
}

"display frames" button
on(release){
_root.dispFrames();
}

"display guns" button
on(release){
_root.dispGuns();
}

"display wheels" button
on(release){
_root.dispWheels();
}

"scroll left" button
on(release){
_root.scrollLeft();
}


"scroll left" button
on(release){
_root.scrollRight();
}



Thats all pretty basic, pointing to functions in frame 1 of the main timeline, which is this:
// create empty movieclips to hold data for each file, // and load the files variables into it_root.createEmptyMovieClip("gunData", this.getNextHighestDepth());loadVariables("http://pulsespeed.net/batterybrain/pns/gaypics/guns", "gunData");_root.createEmptyMovieClip("wheelsData", this.getNextHighestDepth());loadVariables("http://pulsespeed.net/batterybrain/pns/gaypics/wheels", "wheelsData");_root.createEmptyMovieClip("frameData", this.getNextHighestDepth());loadVariables("http://pulsespeed.net/batterybrain/pns/gaypics/frames", "frameData");stop();_root.createEmptyMovieClip("gunClipHolder", this.getNextHighestDepth());gunClipHolder.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/gunclip2.swf");//Set its positiongunClipHolder._x=50;gunClipHolder._y=50;_root.createEmptyMovieClip("frameClipHolder", this.getNextHighestDepth());frameClipHolder.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/carclip2.swf");//Set its positionframeClipHolder._x=50;frameClipHolder._y=50;//create a movieclip to display images of items being browsed_root.createEmptyMovieClip("browser", this.getNextHighestDepth());browser._x=400;browser._y=75;browser.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/default.jpg");function dispFrames(){	_root.currentTotal=frameData.total	_root.currentType=2;	_root.currentModel=1;	_root.currentPrefix="frameData.v";	_root.itemName= eval(_root.currentPrefix + _root.currentModel + "n"); 	_root.itemClip= eval(_root.currentPrefix + _root.currentModel + "c"); 	_root.itemImage= eval(_root.currentPrefix + _root.currentModel + "i"); 	browser.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/" + _root.itemImage + ".jpg");}function dispGuns(){	_root.currentTotal=gunData.total	_root.currentType=2;	_root.currentModel=1;	_root.currentPrefix="gunData.v";	_root.itemName= eval(_root.currentPrefix + _root.currentModel + "n"); 	_root.itemClip= eval(_root.currentPrefix + _root.currentModel + "c"); 		_root.itemImage= eval(_root.currentPrefix + _root.currentModel + "i"); 	browser.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/" + _root.itemImage + ".jpg");}function dispWheels(){	_root.currentTotal=wheelsData.total	_root.currentType=2;	_root.currentModel=1;	_root.currentPrefix="wheelsData.v";	_root.itemName= eval(_root.currentPrefix + _root.currentModel + "n"); 	_root.itemClip= eval(_root.currentPrefix + _root.currentModel + "c"); 		_root.itemImage= eval(_root.currentPrefix + _root.currentModel + "i");	browser.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/" + _root.itemImage + ".jpg");}function scrollRight(){	if(_root.currentTotal>_root.currentModel){		_root.currentModel++;	}	else {		_root.currentModel=1;	}	_root.itemName= eval(_root.currentPrefix + _root.currentModel + "n"); 	_root.itemClip= eval(_root.currentPrefix + _root.currentModel + "c"); 	_root.itemImage= eval(_root.currentPrefix + _root.currentModel + "i");	browser.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/" + _root.itemImage + ".jpg");}function scrollLeft(){	if(_root.currentModel==1){		_root.currentModel=_root.currentTotal;	}	else {		_root.currentModel--;	}	_root.itemName= eval(_root.currentPrefix + _root.currentModel + "n"); 	_root.itemClip= eval(_root.currentPrefix + _root.currentModel + "c"); 	_root.itemImage= eval(_root.currentPrefix + _root.currentModel + "i");	browser.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/" + _root.itemImage + ".jpg");}function useItem(){	if(_root.currentType==1){		_root.frameClipHolder.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/" + _root.itemClip + "swf");	}	if(_root.currentType==2){		_root.gunClipHolder.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/" + _root.itemClip + "swf");	}	if(_root.currentType==3){		_root.wheelsClipHolder.loadMovie("http://pulsespeed.net/batterybrain/pns/gaypics/" + _root.itemClip + "swf");	}}



Please note that you cant scroll through the items if you haven't clicked on a set of items to scroll through. This can be easily fixed, but I didnt bother for this example.

It's not perfect and its not the best-written code but it's a quick example of how to implement your idea. I hope it helps. If you have any questions about anything, PM me if you want.


EDIT: I just realized that the default frame and gun models aren't named as the first ones (or any) in the text files, but you should still get the idea of how to do it, and thats really what matters. Im too lazy to change them, or to make more "models"
-Chris

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.