Thursday, 5 August 2010

Doodling Program in Flash AS2

Inspired by Dragon's Den this week, when 2 guys demonstrated a fun drawing program they had made, I decided to learn some more about Flash's drawing API to make a very much simpler doodling application in Flash.

Try It



It might look complex, but the hardest bit is only 26 lines of ActionScript, including comments. What makes me laugh the most, is that the whole application comes out as less than 2Kb.

The Code

It's getting late in my time zone, so I won't dissect the code in this post. But enjoy the code, and I'll explain it another time:


//Code from http://dansinteractive.blogspot.com
//default settings
var layernum = 0;
var curcolour:String = "0x000000";
var curlineweight = 5;
//draw the line
drawline = function () {
["layer"+layernum+"_mc"]lineStyle(curlineweight, curcolour, 100);
["layer"+layernum+"_mc"]lineTo(_xmouse, _ymouse);
};
//start drawing on mouse press
_root.paper_mc.onPress = function() {
layernum += 1;
startx = _xmouse;
starty = _ymouse;
createEmptyMovieClip("layer"+layernum+"_mc", this.getNextHighestDepth());
["layer"+layernum+"_mc"]moveTo(startx, starty);
drawlineInterval = setInterval(drawline, 10);
};
//stop drawing on mouse release
_root.paper_mc.onRelease = function() {
clearInterval(drawlineInterval);
}
_root.paper_mc.onReleaseOutside = function() {
clearInterval(drawlineInterval);
}
//colour selector
_root.black_mc.onPress = function () {
curcolour = "0x000000";
}
_root.blue_mc.onPress = function () {
curcolour = "0x0000FF";
}
_root.cyan_mc.onPress = function () {
curcolour = "0x00FFFF";
}
_root.green_mc.onPress = function () {
curcolour = "0x00FF00";
}
_root.magenta_mc.onPress = function () {
curcolour = "0xFF00FF";
}
_root.red_mc.onPress = function () {
curcolour = "0xFF0000";
}
_root.white_mc.onPress = function () {
curcolour = "0xFFFFFF";
}
_root.yellow_mc.onPress = function () {
curcolour = "0xFFFF00";
}
//line thickness selector
_root.line1_mc.onPress = function () {
curlineweight = 1;
}
_root.line3_mc.onPress = function () {
curlineweight = 3;
}
_root.line5_mc.onPress = function () {
curlineweight = 5;
}
_root.line10_mc.onPress = function () {
curlineweight = 10;
}


Happy doodling.

Monday, 2 August 2010

Simpler Click and Drag Rotation in Flash AS2

Although this is more lines of code, the code is easier to follow.

The last example used trigonometry to calculate the angle of rotation and gave a realistic simulation of dragging an object in a circle. This is much more basic, and sets the rotation of the object based on a horizontal drag only.

The Script

/* sets the starting point for the maths that follows */
var objectnewdeg = 0;
var objectdeg = 0;
var mindeg = 0;
var maxdeg = 300;
/* this function rotates the object live as the user drags */
rotateobject = function () {
/* this checks whether the user is rotating within the max and min rotation factors defined in the variables above, it only allows rotation if it is within the set limits, otherwise the object won't move */
if (objectnewdeg>=mindeg && objectnewdeg<=maxdeg) {
curpoint = _xmouse;
objectnewdeg = objectdeg+(curpoint-objectstartdeg);
_root.object_mc._rotation = objectnewdeg;
}
}; 

/* This starts the object rotation function and sets the starting point of the user's click - all rotation is then based on the difference between where the user first clicks and where they drag to */
_root.object_mc.onPress = function() {
objectstartdeg = _xmouse;
objectrotInterval = setInterval(rotateobject, 10);
}; 

/* This stops the rotation as soon as the user let's go. It also checks that the user has not been able to drag further than the min or max limits before the code could correct them, and if they have, adjusts the rotation to fit within the limit boundaries */
_root.object_mc.onRelease = function() {
clearInterval(objectrotInterval);
if (objectnewdegmaxdeg) {
_root.object_mc._rotation=maxdeg;
objectnewdeg = maxdeg;
}
objectdeg = objectnewdeg;
};

/* This is the same as the function above, but executes if the user has drifted off the object when they stop dragging */
_root.object_mc.onReleaseOutside = function() {
clearInterval(objectrotInterval);
if (objectnewdegmaxdeg) {
_root.object_mc._rotation=maxdeg;
objectnewdeg = maxdeg;
}
objectdeg = objectnewdeg;
};


While this code may have more lines, it's much simpler to follow. In addition it also allows you to set a maximum and minimum rotation factor, so you can set how far you want the user to be allowed to rotate the object in either direction.

To use it, simply paste it into frame 1, and create and MovieClip on the stage with the instance name 'object_mc'.

Try It



Making it Useful

Let's say you wanted to use this to make a user input for a program. The user rotates the object (say a dial or a volume knob) and you want to use the numerical value of the object's rotation for something. Nothing could be simpler.

If you want the numerical value only once the user has stopped dragging then base your program on the variable objectdeg.

If you want the numerical value to constantly update as the user drags, then base your program on the variable objectnewdeg.

Click and drag rotation in Flash AS2

In Flash I often find that some things which seem hard, are easy, and some things which ought to be easy are hard. Making things rotate when you click and drag them is, for me, one of the latter. It doesn't take much code, but figuring the code out hurt my brain.

You'd think this would be easier - you'd think there would be a class already in existence for this. But as there isn't here's an ActionScript 2 solution.

The Script With Comments

The comments explain how it works:

/*sets starting points for the maths that comes later*/
var objectnewdeg = 0;
var objectdeg = 0;
/* This is the Rotate Object function, it updates the rotation of the object continuously as the user drags */
rotateobject = function () {
    curpoint = (Math.atan2(_root._ymouse-_root.object_mc._y, _root._xmouse-_root.object_mc._x)/Math.PI)*180;
    objectnewdeg = objectdeg+(curpoint-objectstartdeg);
    _root.object_mc._rotation = objectnewdeg;
};
/* This initiates the
Rotate Object function when the user clicks on the object */
_root.object_mc.onPress = function() {
    /* This finds the position around the object that is first clicked in degrees and sets it as a variable that is used in the function above */
    objectstartdeg = (Math.atan2(_root._ymouse-_root.object_mc._y, _root._xmouse-_root.object_mc._x)/Math.PI)*180;
    /* starts the function above and sets the repeat frequency as 10 */
    objectrotInterval = setInterval(rotateobject, 10);
};
/* This stops the
Rotate Object function when the user releases the object, so it stays where the user left it, then records the new rotation of the object as objectdeg ready for when it is rotated again. */
_root.object_mc.onRelease = function() {
    /* stops the function above */
    clearInterval(objectrotInterval);
    /*records the new rotation of the object as set by the user's drag as variable objectdeg, ready for next time they drag */
    objectdeg = objectnewdeg;
};
/* This is almost a repeat of the release code above, but takes account of the fact the user might drift off the object when they drag it, hence onReleaseOutside. */
_root.object_mc.onReleaseOutside = function() {
    /* stops the function above */
    clearInterval(objectrotInterval);
    /* records the new rotation of the object as set by the user's drag as variable objectdeg, ready for next time they drag */
    objectdeg = objectnewdeg;
};



The Script Without Comments

And if that code above looks scary, it's not so bad without comments - only 19 lines.

var objectnewdeg = 0;
var objectdeg = 0;
rotateobject = function () {
curpoint = (Math.atan2(_root._ymouse-_root.object_mc._y, _root._xmouse-_root.object_mc._x)/Math.PI)*180;
objectnewdeg = objectdeg+(curpoint-objectstartdeg);
_root.object_mc._rotation = objectnewdeg;
};
_root.object_mc.onPress = function() {
objectstartdeg = (Math.atan2(_root._ymouse-_root.object_mc._y, _root._xmouse-_root.object_mc._x)/Math.PI)*180;
objectrotInterval = setInterval(rotateobject, 10);
};
_root.object_mc.onRelease = function() {
clearInterval(objectrotInterval);
objectdeg = objectnewdeg;
};
_root.object_mc.onReleaseOutside = function() {
clearInterval(objectrotInterval);
objectdeg = objectnewdeg;
};


Copy and paste the code into the first frame. Then place a MovieClip on the stage and give it the instance name 'object_mc'.

Test the movie and you should be able to click the object anywhere and drag it to rotate it.

The centre of rotation is the Registration point that you set when you made the object into a MovieClip.

If you want to re-use the code yourself, just replace every instance of the name object_mc with the instance name of your object.

Try It



Applying it to something useful

I originally developed this for use with my VirtualCompass teaching aid This uses drag rotation to allow the user to position several different elements on the screen.

Design: Another Reconsideration - Ivan Chermayeff, 1969

When, as a young college design student, I discovered the existence of Ivan Chermayeff I felt I had found the one professional graphic designer that really understood the purpose and role of his vocation. His approach resonated with me as being honest, open and direct - and as such was a refreshing change from what can seem to be a rat race of mimicking styles and trends at speed without pause for genuineness or genius. Chermayeff's own philosophy has had a massive impact on my own thinking about my role as a designer, and the ideals I hold about how I should apply my craft.

Years later, when studying at University I came across an article originally written by Chermayeff in 1969 (and if memory serves correctly re-published in Idea: Special Issue: Chermayeff & Geismar, 1981) entitled "Design: Another Reconsideration". I drank in every word, photocopied it, and used it to fuel part of my dissertation. Since then I have often wanted to read it again, but never found it re-printed or archived anywhere on the Internet.

Yesterday, when visiting my parents, I took a look in their attic and found some of my old college work. Stuffed into one of my essays I was suprised and pleased to find the photocopy I must have made over 10 years ago.

I wouldn't know how to get hold of it now, so I have attempted to transcribe the article from my photocopy.  If Ivan Chermayeff or IP owners of Idea magazine object, I will gladly take this down.

But in my opinion, this is too good to miss.

Design: Another Reconsideration

Every few years, or is it months – on some days it seems like minutes – I ask myself, as I'm quite sure most other designers do, what is it I do every day. What is design anyway? And whatever it is, do I personally really want to do any more of it? Is it of any importance? To society? To communications? Even to clients?
It is easier to begin answering these questions by sneaking up on them; by deciding what design is not.
Design is not what a considerable number of self-described designers think it is.
Design is not art.
Design is not terribly significant.
Design is not always better than nothing.
Design is the solution to problems, real, important or unimportant. The problems of design are not designer problems, they are client problems. Design must therefore grow out of a reasonable understanding of these problems, and their goals and aspirations.
If design solutions do not come directly out of the problems they face, then they will not be design solutions, but be arbitrary, and will probably lean heavily on current fads of typographic or illustrational style. Such designs will also be no good, or to put it another way, will not be design. Truman Capote when asked what he thought of the writing in some best seller, a few years back, replied, “That's not writing, that's typing.” The same thing applies to design. If it's not an answer to a problem, it's not design, it's layout.
I suppose I should backtrack and make clear that “design” refers to Graphic Design or other predominantly visually oriented areas of activity. It include the shell of the typewriter but not the guts.
Because design is concerned with symbols rather than structures, looks of machines rather than their works, typefaces rather than words, a concerned designer can get frustrated.
In order to design a good symbol the designer must understand what it will represent and the more he investigates, presuming a highly cynical, objective, and unbiased questioning attitude, the more likely the designer will want to influence the structure, to change it for the better, or quit.
Every problem of every client is different, and every client is different. (You can argue that they are all the same, but that would be a confession the design is a waste of time and money.) Under these circumstances the only way to keep up or reach a high level of design (in no way synonymous with successful) is to maintain a continuous and unrelenting interest in what the problem at hand really is. It is an old adage that once a problem is truly described, the solution comes along with the description.
Herein lies one fundamental problem with design as a viable activity.
Simply put:
Design problems are more interesting than design solutions.
It seems more challenging to design a new concept, than to design an ad about it. Talking about problems, visually or in print, is not as rewarding or interesting as dealing with them intimately.
All this, of course, is only true if the problems are interesting. Not all problems are either interesting, valid or worth working on or thinking about for a second, unless it's a matter of survival.
I feel it is extremely important for designers to be more interested in areas outside their own. Design is a service operation. Thinking about and developing solutions to other people's problems.
Designers usually don't write very well.
Designers don't usually even communicate very well, even thought communication, or one form of it, is their life's work.
Designers should read.
Designers should make themselves aware of everything.
Designers must be selective.
Designers must think.
Ivan Chermayeff
New York, May 1969
(Source believed to be: Chermayeff, I. (1981). Design: Another Reconsideration. Idea Special Issue: Chermayeff & Geismar. Unknown (1), Unknown.)

Tuesday, 30 March 2010

3D Explained a different way

To add to my earlier posts about 3D stereoscopy, this BBC clip compares different ways of perceiving 3D that can all be used by artists and animators.

Tuesday, 16 March 2010

Free web design helps from SitePoint - JQuery and more...

I have probably mentioned SitePoint before, but that is because they have some really useful things for web designers.

The offering that prompted me to blog tonight was some free sample chapters from their JQuery book, and better still - 100 free JQuery codes as well.

Get it here: http://bit.ly/a0sN6a

Their website is well worth checking out while you are there to see what other freebies are available.

Monday, 15 March 2010

Boom to Bust - Where have all the websites gone?

This BBC article about some of the once big names of the Internet brought back memories for me. It is strange to think that most of my current students were only kids at the time, anything between 5 and 10 years old. They probably won't remember most of these. But for me, as one who was working in a new web industry as a brand new web and graphic designer, many of these were the every day names we saw as examples of success.

It is interesting to see that not one of those names survives today.

For students of web design now, it is well worth looking at these early examples to see how things have changed (technology), and how some things have not (usability issues and big corporation buy-outs).

It is also interesting to see how Boo.com might have survived if it were launched today. While back then the internet was too slow to cope with the technology they were trying to use, today it would be no bother. Too ahead of its time perhaps? Or too willing to ignore the constraints of the time? You decide - but the lessons are still important now.

Any way - enjoy the article:

http://news.bbc.co.uk/1/hi/magazine/8568509.stm

And if you want to see what those sites might have looked like why not look them up in the Wayback Machine:

http://www.archive.org/