Avatar Creation in Flash

[sidigrid]

hi,
I have been trying hard to implement avatar in Flash using openSpace II beta4 but have not succeded.I would really be glad to recieve some guidelines regarding it. Can i reuse the flex example avatar? And what else would i need to do to get avatar in flash..Please do help out people..


Regards,
Sid

[sidigrid]

Can anyone help out..plz...Really got stuck..

[Bax]

(PLEASE DO NOT DOUBLE POST)

The official documentation is on its way. In the meanwhile, a custom Avatar can be created by following this workflow.

1) Create a new actionscript class in an external AS file: the class must extend the Avatar class. You will have to import com.smartfoxserver.openspace.engine.model.avatar.Avatar and com.smartfoxserver.openspace.shared.view.items.Tile.

2) Create a new FLA file: the resulting SWF file after compilation will constitute the avatars library to be loaded in your application and passed to the OpenSpace.avatarAppDomain property (check this documentation for more informations); as an alternative, you can create your custom Avatar in the library of your application FLA file directly.

3) In the Flash Components panel, locate the OpenSpace 2 >> AvatarLibrary component and drag it in the Library panel: this is a non-visual component containing the Avatar and Tile classes that you will need in order to be able to compile your FLA.

4) In the Library panel, create a new Symbol of type "Movie clip". In the linkage section flag the "Export for ActionScript" checkbox and enter the name of your class in the "Class" field (while the "Base class" field must be empty). Make sure Flash can validate your class by clicking the validation button; if validation returns an error, you will have to set the classpath properly in your FLA settings.

5) Go back to your class code and override the methods of the base Avatar class to control the appearance of your avatar in response to calls made by the OpenSpace Engine. Check the Flex example for the available methods and properties you can override. You will need to add the graphical assets in the FLA file to handle different skins, actions, chat balloons, etc.

6) Export the final SWF file.

7) Open the OpenSpace 2 server-side configuration file and declare the avatar in the <AvatarTypes> section (follow the provided examples). The mainclass attribute must contain the fully qualified name of your custom avatar class.

[sidigrid]

Sorry for the double post Bax.. Forgot that i posted and reposted it.


ThankYou for the reply. Would try it out right away.

[pengerknitter]

I'm able to import the component into Flash but I'm having difficulty with step 4 - validation.

4) In the Library panel, create a new Symbol of type "Movie clip". In the linkage section flag the "Export for ActionScript" checkbox and enter the name of your class in the "Class" field (while the "Base class" field must be empty). Make sure Flash can validate your class by clicking the validation button; if validation returns an error, you will have to set the classpath properly in your FLA settings.

Can you elaborate on how to set the classpath properly and to what? Can you please give an example?

5) Go back to your class code and override the methods of the base Avatar class to control the appearance of your avatar in response to calls made by the OpenSpace Engine. Check the Flex example for the available methods and properties you can override. You will need to add the graphical assets in the FLA file to handle different skins, actions, chat balloons, etc.

6) Export the final SWF file.

step 5 is in flexbuilder - right?
I don't understand why you have to export the final swf after editing the code.

Just as a test, I opened the DemoAvatarContainer.fla and changed the color of the torso in the front standing position, saved and exported swc. Then copied those two files into the flexproject assets/avatar folder and rebuilt the project.
I'm getting the following error when I run the example:
[Warning] An error occurred while creating avatar '0': Invalid main avatar class definition for 'demo' avatar type: class must extend Avatar

This probably is related to not having the correct classpath and/or base class set.

btw: the link to 'this documentation' in your earlier post is not valid.

[Bax]

I'm able to import the component into Flash but I'm having difficulty with step 4 - validation.
Can you elaborate on how to set the classpath properly and to what? Can you please give an example?

Well, if the actionscript class .as file (for example our DemoAvatar.as) is located in the same folder of the .fla file (for example our DemoAvatarContainer.fla), you have nothing to do: clicking on the validation button in the Properties panel of the avatar movieclip in the .fla will tell you that the class was found.

step 5 is in flexbuilder - right?

Not necessarily: step 5 simply tells you to override the methods you need from the Avatar class. You can use whatever editor you like. Read the official client API reference of the Avatar class on the OpenSpace website.

[gl0om]

I'm trying to build OS2 project in Flash CS4 using Avatars from examples/Flex.zip

I get such alternate compile errors:
Sometimes these in DemoAvatar.as
1120: Access of undefined property myAvatarSymbol.
1120: Access of undefined property avatarGraphics.
1120: Access of undefined property avatarGraphics.

And sometimes these in GhostAvatar.as
1120: Access of undefined property tf_name.
1120: Access of undefined property tf_animTime.
1120: Access of undefined property tf_coords.

tf_name and e.t.c - are exists inside ghostAvatar clip
avatarGraphics also exists inside DemoAvatar clip
But I didn't find myAvatarSymbol in both clips and linkages.

I have no idea of what to do... please, help.


p.s: and I don't know why, but I haven't openSpace 2 Component in components panel. However I've installed this component with OpenSpace_Flash.mxp

[Bax]

Do you get these errors when compiling the DemoAvatarContainer.fla file?

About the missing components in the Components panel, check this post.

[gl0om]

Do you get these errors when compiling the DemoAvatarContainer.fla file?

Nope, I get them when compiling my project. DemoAvatarContainer.fla is compiling without errors.

[TiagoR]

Hi,
im having touble to to create an working avatar on this new version, and its harder without proper documentation.
Couldnt you provide a working Flash example? (with avatar)

[Bax]

gl0om
I don't understand. You compile the avatars container. Then you should load the swf at runtime in your application. Why should the project compilation include the avatars?

TiagoR
We will publish an example as soon as possible. Anyway, did you read the Avatar class API reference?

[TiagoR]

Yes ive read the Avatar class API reference and tried to follow but im getting to luck to spawn my avatar, lathough im getting no compiling errors.
The work flow from one version to another changed alot and im completly lost here now

[gl0om]

gl0om
I don't understand. You compile the avatars container. Then you should load the swf at runtime in your application. Why should the project compilation include the avatars??

If you open main.as from Open Space Example, you should find lines:
var tmp1:GhostAvatar;
var tmp2:DemoAvatar;

As I used some parts from this file, I included these 2 lines to my code.

[Nepaleno]

Hello,

I managed to create avatar with base class DemoAvatar. But when I try to access it with

Code: Select all

var demoAvatar:DemoAvatar = openSpace.getMyAvatar() as DemoAvatar

I get
1046: Type was not found or was not a compile-time constant: DemoAvatar.
1120: Access of undefined property DemoAvatar.

UPDATE:
Wow, just got that DemoAvatar class out of swf library with getDefinition('DemoAvatar') function. Is there any other way?

[Bax]

Ok, I'll try to shed some light on avatar usage in Flash... and then we will need to improve the docs (and add a complete example)!

Let's assume that the DemoAvatar contained in the DemoAvatarContainer.fla file from the Flex example is ok, which means that you can compile the Flash project without errors.
You now have two ways to let Flash "know" your avatar: use an external library or an internal one.

External library
The avatars container is an external assets library loaded at runtime by your application. You will need to follow these steps:
1) export the DemoAvatarContainer.swf file;
2) load the swf file at runtime in your application;
3) pass the application domain in which you loaded the swf to OpenSpace, by means of the OpenSpace.avatarAppDomain property; OpenSpace will now be able to instantiate the DemoAvatar.

This approach was used in the examples provided with OpenSpace v1, and in general it is the best because you can keep adding assets to the avatar (new shirts, shoes, etc) without the need to recompile the whole application, because the latest version of the avatars container swf file is always loaded at runtime.

Internal library
The avatars container is an internal library which is compiled into your application when you generate the main swf file. You will need to follow these steps:
1) export the DemoAvatarContainer.swc file;
2) in Flash CS4 or later (doesn't work in Flash CS3, you will need to stick to the previous approach), open your project's ActionScript Settings panel, go to the Library path tab and add the swc;
3) the DemoAvatar class and all its graphical assets are now part of your project, but in order to make Flash compile them together with your own classes, you need to put a reference in your code: in one of your classes, in the properties declaration add:

Code: Select all

var temp:DemoAvatar

without creating an instance (of course you will need to add an import statement for the DemoAvatar class, including its package);
4) compile and run your application.

This approach is used in the Flex example provided with OpenSpace v2. It can be useful to avoid loading an external swf file, especially if you have static avatars (where "static" means that their graphical appearance doesn't change -or changes a little- during gameplay). Of course this makes the main application swf file bigger, increasing initial loading times.

---

Hope this is useful. Let us know, and if it is, we will convert this into a tutorial on the support page of the OpenSpace website.