What tool to make a paint application?

programming
1

Hello. I was unsure where to post this, I apologise if this is in the wrong place.

I am hoping someone could help me with a simple problem I am having getting my first website up and running. I have an A level in web design and have hand coded many websites, but I am new to interactive visual applications.

Basically, what I am after is a “online” version of microsoft paint; nothing advanced at all. In other words, a graphics editor like paint that can be used in a browser. I was thinking this should be possible considering people make games that users can intereact with using a browser.

May I ask, what program will I need to use to make this? Shockwave, Flash or something completly different?

Thank you

2

You can use flash. The new browser element <canvas> is very promising for this kinda stuff, and if you have good experience with javascript you should be able to implement it without too much trouble. The only thing is I’m not sure if it’s universally supported across browsers yet so you would want to look into this.

3

Flash is awesome, though saving capabilities is hard but definitely not impossible. If you are going to use flash I would advise you to use some kind of bitmap rendering, not movieclips.

4

Thank you for the quick replies.

I am completly new to making flash files, so I hope you can bear with me and answer my other questions.

  1. What program will I need to do this? I have Macromedia Flash 8, but I think this is more for flash animations.

  2. Saving the images is quite important to the design of the website. Is it possible using a database which the flash paint can store images in?

  3. Where do I get started? Any tutorials, manuals or general good teach yourself guides that will be relevant.

Sorry for all the questions. Once again, thank you for your help. I am sure Kirupa is going to be a valued source from now on.

5

[quote=mainy;2335482]Thank you for the quick replies.

I am completly new to making flash files, so I hope you can bear with me and answer my other questions.

1) What program will I need to do this? I have Macromedia Flash 8, but I think this is more for flash animations.

  1. Saving the images is quite important to the design of the website. Is it possible using a database which the flash paint can store images in?

  2. Where do I get started? Any tutorials, manuals or general good teach yourself guides that will be relevant.

Sorry for all the questions. Once again, thank you for your help. I am sure Kirupa is going to be a valued source from now on.[/quote]

Mainy - flash is flash, there aren’t different editions of flash for different things. Flash 8 can do many things, including, but not restricted to traditional timeline animation.

However, Flash has come on leaps and bounds from it’s origins as a vector tool, and animation studio.

It’s more of a programming environment now, AND is moving towards bitmap rendering rather than vector, which is of course much slower.

So to answer your question, you absolutely can use Flash to code many things, websites, games, motion graphics, and yes - a basic paint tool.

However, seeing as you are a complete beginner with flash, it’ll take you a while to be able to program an interactive, basic paint utility.

Unless of course you’re a programmer already, what experience do you have with programming?

This site itself would be a great place to start, look through the forums and also the tutorials from the front page.

You want Actionscript 2 tutorials.

6

Hi rumbleshshi,

In terms of programming experience I have very little to none in online based languages. My knowledge is limited to languages such as Visual Basic 6 and some C++, the only “online” ones would be HTML, CSS, Javascript and a tiny but of Php.

I understand this will be a big undergoing, but I have just finished collage and have a 3 month break until the new term. I have set myself a project to keep myself busy and to increase my knowledge. Besides, if I don’t start at all I will never get any better.

Thank you for your help. I was not aware that the flash programs were all very similiar, in fact I thought they all did something different! heh, see how little I know in this field.

So, what is this actionscript thing?

Thank you,

7

If you have any programming experience, you’re already ahead in the game. C++ is a definite plus, and JavaScript experience is even better.

ActionScript is the Flash programming language used to add interactivity (etc.) to Flash SWFs. It’s based on ECMAScript (JavaScript) so if you know JavaScript, to use ActionScript all you really need to do is familiarize yourself with the APIs and get a handle on how the scripts interact with the development environment.

Flash 8 will get you everything you need for a paint application, but it is not without its limitations being a version behind - and one version back from supporting the latest rev of ActionScript, ActionScript 3 (many of the same APIs but different enough to not be the same language). If you want to make use of the drawing tools in Flash, then you can stick with that. However, if you think you’re going to be pretty much working with nothing but code, you might want to consider snagging the free Flex SDK from Adobe. This will let you create Flash SWFs straight from ActionScript 3 without the need for Flash. Any graphics, however, would have to be either drawn in code, or imported, and there would be no support for timeline-based animations which are pretty much only available in the Flash authoring tool anyway.

With the Flex SDK, you could also start to learn MXML, Flex’s XML format for describing data and interfaces. This works as an alternative to writing ActionScript directly, but can also include bits of ActionScript within the XML. It would be a steeper learning curve, but something to pursue if given the interest.

Using Flash authoring is usually a little easier, especially for the visually oriented. Straight-up programmers might prefer the Flex SDK approach.

8

Also I’d like to add that if you are well versed in C++ for example, and are comfortable using classes, you might want to jump straight into AS3.

Me for example, it’s quite difficult, as I learnt programming the procedural way in AS1, but if you come from a development background and think in terms of OOP, I would suggest AS3.

If not, then stick with AS2.

Show us how you get on.

9

Please correct me if I am wrong, flash works very similiar to Visual Basic. You essentially create images called “movie clips” and add actionscript to tell them how to interact with each other and the user?

In regards to actionscript 3, what flash program uses these… Flash Mx?

Edit: Oh, I forgot to ask. ArmouredSandwich mentioned to use rendered bitmaps rather than movieclips. Why is this beneficial and how do I do this?

10

Flash 9, the lastest version also called CS3, supports actionscript 3 whereas the ones prior to it do not. Seeming as you have flash 8 you are stuck with actonscript 2 unless you get the free flex as Senocular mentioned or buying the flash 9 which can be expensive if it’s just for this project.

11

[QUOTE=mainy;2335608]You essentially create images called “movie clips” and add actionscript to tell them how to interact with each other and the user?[/QUOTE]

Thats the basics; pretty standard.

[QUOTE=mainy;2335608]In regards to actionscript 3, what flash program uses these… Flash Mx?[/QUOTE]
Flash MX is two versions below 8. The latest version is Flash CS3 - that is the first version to support ActionScript 3.

[…older versions]
Flash 5 - ActionScript 1.0
Flash 6 (MX) - ActionScript 1.0
Flash 7 (MX 2004) - ActionScript 1.0 & 2.0
Flash 8 - ActionScript 1.0 & 2.0
Flash 9 (CS3) - ActionScript 1.0 & 2.0 & ActionScript 3.0

[QUOTE=mainy;2335608]Edit: Oh, I forgot to ask. ArmouredSandwich mentioned to use rendered bitmaps rather than movieclips. Why is this beneficial and how do I do this?[/QUOTE]

Vector images are calculated through mathematical equations based on a series of points in a coordinate space. These points and their relationship to each other are processed into screen pixels and then rendered in the player to be visible for the user. Bitmaps are a collection of predefined pixels that are simply read and rendered in the player. Because there is no real processing involved to generate the imagery in bitmaps, they’re much faster to produce on the screen. The downside is that they are typically a lot larger in file size - something that is important to consider when dealing with web content.

Flash 8, however, actually introduced a feature called “cacheAsBitmap” which will let you take static vector imagery and cache its rendered data as a bitmap making it a lot faster to draw to the screen. So really, performance isn’t much of an issue post Flash 8 assuming you make use of that feature. Even before that, depending on what you were doing, it didn’t always matter. In the case of a paint application, it would certainly have no bearing. Though, a paint application would certainly want to make use of the bitmap APIs which were also introduced in Flash 8. You’ll definitely want to target Flash 8 or higher.

12

Thank you for that, it was very clear. I have decided to use Bitmaps instead of movie clips, but how do I exactly do this? All guides I have seen so far use movie clips.

In terms of actionscripts. I plan to acquire Flash Cs3. I am very lucky to have many resources available to me through collage.

Thank you

13

Use of movie clips are still required. They represent your containers. Bitmaps are just vehicles for imagery. Movie clips can contain bitmaps and vectors or text or other movie clips (really, any other display object). Movie clips are the standard container object. Think of these as chromeless application windows within your SWF. Add other display objects to these containers and position them as needed on the screen or move/transform them together however you want. Interactivity can then be applied to entire movie clips or individual elements within them.

Motion and animation can be handled within the frame-based timeline in Flash CS3 (once you get that) or it can be handled through code using events. The event to handle animation would be the enterFrame event. This will process a function handler once every time the screen is redrawn in the player (similar to running through a frame sequence in the timeline though the event is not dependant on the movement of a timeline).

What APIs are available are best explained in the documentation. It would be good to try and look through the hierarchy of display objects and see how they’re put together:
http://www.adobe.com/go/AS3LR

For example, check out MovieClip and examine the inheritance chain at the top of the page
http://livedocs.adobe.com/flex/3/langref/flash/display/MovieClip.html
Click on anyone of those classes to see their subclasses and what other display objects are comprised of them. Be careful, though, since this documentation also includes Flex classes. Anything in an mx. package is Flex, and not in Flash. If you want something Flash-specific, its actually better to go to http://livedocs.adobe.com but I like the above link because of the short go url :wink:

14

You know what, I actually have a drawing example in my intro to CS3 tutorial. It’s worth a read through. This particular implementation takes an easier, less robust approach drawing vector lines (which when enough are drawn will eventually bog down the player) but it could certainly help you get started.
http://www.senocular.com/flash/tutorials/as3withflashcs3/

15

Hello again,

I have been playing around with Flash CS3 and to be honest, it is simply amazing. So far I have mainly created little animations, purely to familiarise myself with the different controls and options available.

I understand now that I need to create movie clips that when clicked on changes what the cursor does to a blank document. This is where I am stumped and need your help. I know that actionscript 3.0 is required, but I have a couple of questions I hope you can assist with.

A) How do I make a “blank” canvas for people to draw on?

B) Where do I find the actionscript which is needed and how do I apply it?

Thank you

16

You need to read up on the API for the Sprite class in the package flash.display.Sprite
Flash has excellent documentation right in the help file. An explanation of every class in the flash library is under “ActionScript 3.0 Language and Components Reference”. Alternatively the documentation is online. The page is at http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/display/Sprite.html
but it’s easier to just use the help file provided in flash.

Every Sprite class object has a property called graphics. You will also need to read up on the Graphics class. You will use the Graphics class to do all the drawing. It’s pretty simple to use and the flash documentation has examples of how to use everything in the library.

To get started you will want to make a blank fla. Call it whatever you want, and then create a .as file with the same name in the same folder. Set the size and background color of the fla to whatever you want. Then click anywhere blank on the stage so you aren’t selecting anything. Under properties there is a box labeled Document Class. Put the name of the .as file there minus the .as so “Test.as” will become “Test”.

Then in the .as file put this code to define a new class where YourClassName is the name of the .as file minus the .as:


package{
    import flash.display.Sprite
    public class YourClassName extends Sprite{
        public function YourClassName(){
            //Your code goes here.
        }
    }
}

When you run your swf now, it will instantiate a new class of YourClassName and run the code in the constructor, so whatever you put where “//Your code goes here.” is will execute.

Some other classes you will need to import and learn are the event classes flash.events.Event and flash.events.MouseEvent for updating on new frames and detecting mouse clicks.

Just read up on the documentation for the classes I mentioned and you should be on your way. Your first goes should just be to use the graphics class to draw anything on the stage, and then detecting mouse clicks.

Good luck.

17

Hurrah!

Thank you for the reply, it is very helpful. I will give you an update of how things are going and if I need any more help.

Thank you once again