Jan 12 2009

Create animated gif files in flash AS3

Category: Slushh — Hadi Tavakoli @ 12:21 am

OK, we are trying to create a flash tool which users can play with to publish their own designed animated gif files and save them locally on their computer or publish it on the web.

Let's call this software "Slushh"! and we will let users choose different graphic designs in their canvas, let them draw things around, let them upload their images or animated gif files, let them type notes and choose their favorite font, size, etc, etc

As it all appears, this gonna be a very huge piece of software, but it will be a great fun I'm sure and I hope I can finish it before March. it maybe a bit challenging though as I'll be working on it alone as the rest of the team is still on AS2! So if I'm going wrong anywhere or you might have any better idea on how things are getting done, please do advice me.

Alright, before anything, we need to have a complete list of all is going to happen in the software. no matter how complicated the work is, we can create an outline from what will be the output and what are the inputs. and narrow down the requirements little by little until we really feel that a task cannot be no more divided into any smaller sections.

OK, here is the outline of all is going to happen in the software in general. We need to make sure that it's covering all the main functions. Here I have divided the whole thing into three steps, first input will gather all of the information the software may need to server the user start working on his graphics. Second, user will play around with the different tools available in the software to actually create his frames of animations and third, user will be able to preview and save what he has created. Although the classification below is not in great details but it does help us find our way around. I don't know about you but to me, starting a project is always the biggest step to take and after you have the details listed and find the starting point, then everything else will be easy to achieve.

  • Inputs
    • flashVars //different settings to be inserted. We need a class to grab all the flashVars and save them for later uses in the software.
    • Template //A graphic chosen by user to act like a frame for the final output, it can be gif or png, animated or static, let's call it the template. We need a class to test the imported template (it will be loaded via flashVars) and decide on its type and introduce it to the software.
    • Stamps //These will be some animated or static graphics which user can add to their stage at run time. We need a class to load the stamps which are categorised in XML.
    • Effects //We will have some Photoshop like effects which can be applied to any selected inanimate graphics. We need a class for the reading effects' names, thumbnail and function from XML. Effects will be actually produced with ImageMagick on the server.
    • Fonts // I'm not sure if we can produce and embed fonts at run time, but if we can, we need a class to grab the fonts from XML and embed them for later use in the software.
  • Processes
    • Timeline //Frames for the animation can be added, removed or duplicated
    • Text Tool //User can select his favorite text style and write anywhere on the stage
    • Doodle Tool //Doodle can draw with different brushes and styles in the stage
    • Effects Tool //in-animated graphics will be due to effects, multi-effects available and they can be removed from a graphic
    • Upload Tool //User can upload his own graphics or animated gif files
    • Image Insertion Tool //the software will provide a basket full of different graphics that user may insert
    • Stamp Insertion Tool //effects can be applied on in-animated stamps only
    • run time PNG conversion //Every frame of the movie will be converted to PNG in run time. (While ago I read an article that was talking about a class that can do such on the fly conversion in flash player 10 so if we do this without the need of sending pixel information to server and having PHP to generate the file then it directly means that we are saving a lot of time and bandwidth) I feel like we need flash CS4 for this... hmm, not sure yet, but we'll find a solution for that when the right time comes though.
  • Outputs
    • gif file //Would it be possible to create animated gif files in run time also?!! I guess I'm expecting too much from flash! Am I getting too greedy on this? HeHeHeHe! we'll come to this later anyway, but if it's not possible which I think it won't be, then we need to put all the frame information in an XML object and send it to PHP and PHP will be able to put the frames together using the ming library and get us the final gif file to perform in the preview window and even give users to save the file on their local computer if they are logged in!

 

Alright, let's get to work now. But before we start, keep in mind that the main intention of creating classes is to for you to save time in future. it's a kinda time investment! as it will require you to think more and devote more time for creating classes that later you will reuse them over and over again so easily. So it will defenetily worth it.

I remember someone told me that if you are not going to use classes with AS3, then even don't bother buying the expensive CS4 (or CS3) ! because the whole idea behind AS3 is to code in OOP.

OK, now I'm going to create some classes which are going to be used in our project :-SS Let's start with a scroller, then a preloader... make sure to read my next posts...