Jump to content

Recommended Posts

Posted

With the increase in the popularity of AJAX web applications, we have seen similar animated GIFs around the web used when an AJAX process is pending to let the user know that it's working on something. In this tutorial, you will learn how to create these professional-looking animated GIFs.

 

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

 

This example was created with Adobe PhotoShop CS3, which has animation features built-in, unlike older versions where PhotoShop is packaged with ImageReady.

 

We start with a blank canvas of around 200x100px. We will create a new layer and select the Marquee tool, and on the toolbar for the marquee, set Style to Fixed Size, Width: 4px and Height: 20px:

 

img01.gif

 

Now we can just click on the canvas and a selection of these dimensions will be made:

 

img02.gif

 

In our new layer, paint the selection with black:

 

img03.gif

 

Now right-click the layer and Duplicate Layer. Select the Move tool, hold Shift and press the down arrow key four or five times - shift will move the layer in increments. We should now have two layers like so:

 

img04.gif

 

We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

 

With the top layer active, press Ctrl+E to merge down - combining the two line layers together. Now right-click the layer and Duplicate. Goto Edit > Transform > Rotate, and holding down the Shift key, rotate the duplicated layer clock-wise a quarter of a turn:

 

img05.gif

 

Holding Shift will rotate at increments. Choose the Move tool to accept the changes. Now repeat this process (duplicate then rotate) to fill in all the gaps like so: (it may be wise to number the layers as you duplicate, so that you can keep track of which is which)

 

img06.gif

 

Now we should have 12 separate layers for each of our 'spokes'. Next, we will color them.

Starting with the first, open up the layer styles and add a color overlay of light gray. You may want to zoom in for a better look.

 

img07.gif

 

Now right-click the layer you just added a style to and choose Copy Layer Style, then proceed to Paste Layer Style on each of the other, so we have this:

 

img08.gif

 

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

 

Now let's open up the Animation Window by going to Window > Animation. You should see something like this:

 

img09.gif

 

This is a timeline of our animation. Each frame shown in here will play in order for a set number of seconds. We want to create different frames with different 'spokes' colored, in sequence.

So let's start by changing the colors of the first three spokes. Let's change the color of the first three like so, fading from light gray to dark. The colors we used were #BABABA for the first; #999999 for the second; and #444444 for the third:

 

img10.gif

 

Ok, we have our first frame. Now let's click on the New Frame button (img11.gif) and our frame will be duplicated. Making sure our second frame is selected, let's change the colors again - we can copy the layer styles if we want to move the colors along one spoke:

 

img12.gif

 

You should notice that frame one remains the same and frame two will accept our changes. Now we only need to repeat this a few more time - one frame per spoke. Make sure you click on the New/Duplicate Frame button before changing the layer styles again!

 

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

 

Once we're done, we should have a timeline that looks like this:

 

img13.gif

 

We can click the Play button at the bottom of the Animation window to see a preview. If the animation is too slow, we can change the duration in the bottom right corner of each frame. This specifies the duration for each frame to be visible. Let's try 0.1sec. Hold Shift and select all the frames in the window, then choose 0.1 seconds (or choose Other and try 0.05 - or whatever you want) on one of them. This will change all of them, because they're all selected.

 

img14.gif

 

To export, goto File > Save for Web & Devices. Choose GIF from the DropDown menu - 128 being the best quality. And you can also preview it here as well, using the controls buttons near the bottom:

 

img15.gif

 

Finally, this is what our Animated loading GIF looks like:

 

img16.gif

 

Credits ~~> Jooria

 

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Posts

    • If they ask you to write something, you should ask for the full context. We had a private chat between the administrators of mxc and gx ext. He was allowed back on the forum on the condition that he did not spam unnecessary posts. As far as I'm concerned, it shouldn't be allowed because it involves multiple scams. We want and aim for a stronger community. He's not only doing this with this account, but with several, since this user has multiple accounts. As for what one user or another contributes, that's irrelevant; I often provide support to the community and I don't need to make it public. But I repeat, if they ask you to write a comment, just ask for the full context, nothing more than that. Or if you want a direct answer from me, feel free to message me privately so we can avoid spamming a post about an extender. That's the problem with second chances 
    • I currently have a working custom quest, but the problem is that I can't see it in the game's quest log. I've added it to questname-e.dat, but I still don't see it. I think there's another file where I need to add it, but I can't find it. For the items and skills I've added, I've always put it in the name and grp fields, but there's nothing related to questgrp.dat in the quest log. Could you tell me where I can add it?
    • thats true, I try to keep my topsites clean of fake/paid votes I ban multiple accounts made by players my numbers are low but thats what I sacrifise to keep the vote system of the server owners that trust my topsites clean from multiple rewards.   @4TOP I would reply what happens here and how to fix but you replied you fixed that already.   Once the installation is completed, the script should create a marker file such as installed.txt or any other persistent flag that indicates the system is already installed.   In index.php, you must first check if this marker file exists. If it does not exist, redirect the user to install.php to start the installation process.   If the marker file exists, you must then check if install.php is still present. If it is, stop execution immediately and display an error requiring the user to delete the installer file, or remove it automatically for security reasons.   If the marker file exists and install.php does not exist, continue with the normal application execution.   This approach ensures the installation runs only once, prevents reinstallation attempts, and enforces removal of the installer for security.   NOTE: Do not trust the AI you can possibly destroy alot of things with AI, when you create a file you have to include some core protection logic to defend against common threats coming from the user input, that input should ALWAYS be treated as malicious, and check against what you expect versus not what was expected, for example: you input a username in a form the input $_POST['username'] can be anything malicious checking this global variable against an expected string or alnumeric a-Z0-9 is a way to check if the string contained other than expected chars now from that string you should apply some cleanup methods like regex in example: $raw_username = $_POST['username'] ?? ''; (personally i always use type casting) like: $raw_username = (string) ($_POST['username'] ?? ''); //or $raw_id = (int) ($_POST['item_id'] ?? 0); //array object etc... if (!is_string($raw_username) || $raw_username === '') { return 'Invalid input'; } if (preg_match('/^[a-zA-Z0-9]+$/', $raw_username) !== 1) { return 'Invalid characters'; } // do not execute the code further because return error stops the code   you can make various matches against other languages and such with the help of AI but you need to know the tricks and have a firewall logic that you build something that has to be protected, only then you can give a decent application in public that attackers can easily read and find the way in since this is a public repository this is an issue because the first rule is violated "security through obscurity" this is not a secret code and that means you have to protect it.   asside all that its a vote system for a game not that much of attack can happen, even atual studio survived such attacks except 1 that can fill a server with infinite donation coins 🙂 that few people know how to do it and still people use it so worry not. thats typical forgotten developer testing correction: $tokenOk = isset($top['token']) && hash_equals((string)$top['token'], $secret);
    • Great logic    Nothing is developed by you this looks like a very poor attemp to one shot a vote system with AI   $tokenOk = ($secret === 'TEST') || empty($top['token']) || hash_equals((string)$top['token'], $secret);  
    • after install delete "install.php" solved --' what tops?
  • Topics

×
×
  • Create New...

Important Information

This community uses essential cookies to function properly. Non-essential cookies and third-party services are used only with your consent. Read our Privacy Policy and We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue..