Monday, January 10, 2011

SmartFoxServer Tutorial: Playercards

Hey everyone!

In today's tutorial, I'm going to show you how to make a playercard, which when an avatar is clicked, a playercard will appear and show the user's username. Anyway, let's get started, shall we?

To begin with, I'm going to let you know that I'm using the avatarChat example file for this tutorial. Anyway, the first thing your going to want to do is open up the actions panel for the chat frame and add this coding to it:

function showPlayerCard() {
loadMovieNum("playercardSWF.swf", 1);
}

Basically all that coding does is tell the Flash file to load an external file, which I'll be using to display the playercard.

The next thing you'll want to do is open up the avatar movieclip from the Flash library. In this movieclip, you will be able to clearly see all the instances in your avatar.


Anyway, on with the tutorial. Click on the disc movieclip (don't double click) and add this coding:

on (release) {
_global.lastP2 = _parent;
_global.lastP2Name = _parent.name.text;
_root.showPlayerCard();
}

That coding basically tells the Flash file what the username of the player is and to load the playercard.

The next, and last, thing to do is to make the playercard. I quickly made a playercard SWF file, saved it, and published it with the name playercardSWF. I also saved it in the same location as the avatarChat example file that I'm using for this tutorial.

Now, the architecture I used when making my playercard SWF file was making a text file to display the user's username and adding a background to it as well. I also added a few extra things to my file for interactivity, which aren't required.

Anyway, after adding a dynamic text field with an instance name of playerName, I put the background of the playercard and the dynamic text field both in a movieclip named thePlayerCard.

The last thing I did, was add some coding on the first, and only frame of the playercardSWF file. The coding I added to the playercardSWF file on the root frame was this:

function loadPlayer(mc, uname) {
thePlayerCard.playerName.text = uname;
}
loadPlayer(_global.lastP2,_global.lastP2Name);

After you do all the above, test your movie and you should clearly see that it works just fine.

If you have any questions, comments, or if you run into any errors when following this tutorial, be sure to leave a comment and I'll reply to it as soon as I can.

Download playercardsTut Source File: Download
Download playercardSWF Source File: Download

16 comments:

  1. how do we add a "close" button and close the card?

    megatron242342

    ReplyDelete
  2. Everything works except the username for the playercard. Please help?

    ReplyDelete
  3. Crazy Legs: What version of Flash are you using? If you are using Flash CS5, embed the font.

    ReplyDelete
  4. Megatron242342: I did a simple one for my tutorial and on my close button I think I added the coding:

    on (release) {
    _root.thePlayerCard._visible = false;
    }

    ReplyDelete
  5. How can the "avatar" be displayed?

    -Retro1

    ReplyDelete
  6. Well I embedded the font and please correct me if im wrong by adding a new font, then clicking on the classic dynamic field textbox with multline then click embedded and then clicked the new font and pressed ok...No name still :(

    ReplyDelete
  7. Retro1: Copy and paste the disc movieclip from the avatarChat and paste it inside the thePlayerCard movieclip on the playercardSWF file and on the avatar symbol in the avatarChat file replace the coding on the disc movieclip with this new coding:

    on (release) {
    _global.lastP2 = this._currentframe;
    _global.lastP2Name = _parent.name.text;
    _root.showPlayerCard();
    }

    Also, in the playercardSWF file, on the root frame, replace it with this coding:

    function loadPlayer(mc, uname) {
    thePlayerCard.playerName.text = uname;
    thePlaceCard.disc.gotoAndStop(mc);
    }
    loadPlayer(_global.lastP2,_global.lastP2Name);

    ReplyDelete
  8. Crazy Legs: You have to embed the font that your file uses and you have to select the correct weight of your font. Google this, or search for it on YouTube.

    ReplyDelete
  9. Hey coolboy!
    How would you make an exit button?

    ReplyDelete
  10. @Edward: Download the source file from above and look at the exit button in it. I can't remember how exactly I added the exit button in that file, but at a guess I would say I used this coding:

    on (release) {
    _root.unloadMovieNum(1);
    }

    Again, that was just a guess at the coding I used above, althought here are various ways to create an exit button on the loaded SWF of the playercard.

    ReplyDelete
  11. This was really helpful. Thank you. =D

    ReplyDelete
  12. Btw it's;
    function loadPlayer(mc, uname) {
    thePlayerCard.playerName.text = uname;
    thePlacerCard.disc.gotoAndStop(mc);
    }
    loadPlayer(_global.lastP2,_global.lastP2Name);

    and not

    function loadPlayer(mc, uname) {
    thePlayerCard.playerName.text = uname;
    thePlaceCard.disc.gotoAndStop(mc);
    }

    (Player not Place!) lol
    loadPlayer(_global.lastP2,_global.lastP2Name);

    ReplyDelete
  13. The link doesnt work, can you please re-upload it? And how do you inter-link SWF's? Do you put both SWF's in the same folder, or what? Please respond and re-upload.

    ReplyDelete
    Replies
    1. Please read the update to the newest post! Specify SFS2X or SFS1X!

      Delete
  14. Why did you take ALL of your files down?

    ReplyDelete
    Replies
    1. I didn't take them down, the file hosting site did without informing me. I no longer have the hard drive with the files, so I am unable to re-upload them at this moment.

      Delete