Hello everyone who is still interested in learning how to use SmartFoxServer2X with HTML5 using Adobe Animate (but not Adobe Flash)!
So, as the title says, this is just going to be an extremely simple tutorial on a very basic start to my new set of upcoming tutorials which I will be building upon from this tutorial.
As many of you already know, Flash is pretty much dead at this point, which is forcing developers to move to a more reliable and cross-platform technology - HTML5. From now on, this blog will be mainly focused on HTML5 tutorials rather than Flash and ActionScript based tutorials for that reason.
I know many of you loved the user interface of Adobe Flash as much as I did, and I also know many of you have probably tried to switch to using Adobe Animate to stay using their amazing UI, however if you are like me, you have probably had a little trouble understanding the way the code works with their HTML5 Canvas document type, so that is why I have chosen for this tutorial to be created using Adobe Animate and to use the HTML5 Canvas document type using the JavaScript programming language.
STEP 1: Anyways, let's get started with this simple tutorial by opening up Adobe Animate and creating an HTML5 Canvas document as I did in the image below.
(Figure 1)
STEP 2: Now that we have our document created, let's begin by creating a few simple user-interface elements that will let a client know when they are, or are not, connected to the server. Here is an image of how my User-Interface turned out once designed and completed.
(Figure 2)
As you can see, almost everything is just a basic design element rather than an interactable symbol, with the exceptions of the "Connect!" Button Symbol that has the instance name of ConnectBtn1 (see Figure 3), as well as the "Awaiting Connection Attempt..." Dynamic Textbox with the instance name of ConnectStatusTxt (see Figure 4). You can set the Button and Dynamic Textbox instance names by going to the top of the Adobe Animate window and selecting "Window" and then "Properties".
(Figure 3)
(Figure 4)
Oh also, you can see from Figure 2 that after I created my main interface, I resized the document's width and height to 700px in width and 360px in height, just to get it to fit better and not have so much extra blank space, but obviously you can define your stage's width and height to whatever you like best for your own project as it makes no difference on the code we will be using for this tutorial, so I will only consider this as an Optional Step.
STEP 3: Now that we have created our client visuals, complete with a "Connect" Button Symbol, and also a "Server Connection Status" Dynamic Textbox and have given them both instance names, we can now link the SmartFoxServer 2X HTML5/JavaScript Client API into our file.
Now, there are many different ways to achieve pretty much the same goal, but first you have to make sure you have SmartFoxServer 2X, which can be downloaded from their official website
by clicking here. And after that, you need to also make sure you download their official
JavaScript API w/ Binary Protocol, which is what I will be using in this tutorial. The API can be downloaded
by clicking here and scrolling down to where you see the text I previously bolded and underlined in this step and clicking the orange Download button as shown in Figure 5.
(Figure 5)
After we have SmartFoxServer installed and have downloaded the JavaScript Client API, in the folder where you have saved your .fla file, create a folder named "ExternalFiles", and inside that folder, create 2 more folders, one named "libs", and the other named "img" (Note: the img folder is only needed if you have any images you need to place into your Fla file, otherwise the lib folder is all that we will use). This is only an optional step for organizational purposes as it could also be done differently as well.
Next, copy and paste the extracted JavaScript API files that you just downloaded from Figure 5 into the Fla Project Folder -> ExternalFiles -> libs folder so that it looks similar to how mine looks (see Figure 6).
(Figure 6)
STEP 4: Finally! The time we have all been waiting for is here! It's coding time!
TUTORIAL AND CODE WILL BE ADDED TO COMPLETE THIS POST LATER TODAY, SO BE SURE TO STAY TUNED!
