Typography Drawing
How would I go about creating a dynamic drawing application like this: http://www.kirupa.com/developer/actionscript/drawingboard.htm but instead of drawing with lines, I want it to draw with letters?
KirupaForum > Flash > ActionScript 1.0/2.0
Posted on: 04-14-2007, 12:42 AM
View Complete Forum Thread with Replies
See Related Forum Messages: Follow the Links Below to View Complete Thread
Typography Drawing
does anyone know how to do typography drawings in flash such as this:
http://www.storyabout.net/typedrawin...p?requestedID=
Typography Drawing
How would I go about creating a dynamic drawing ap in flash like this :http://www.actionscript.org/resource...ash/Page1.html but instead of drawing lines, I want it to draw letters.
CS4 Typography?
One of (several) complaints I've had with Flash over the years has been the lack of any decent typography. Adobe pioneered this area, I'd have thought that was one of the first things they'd have done when acquiring Flash from MM. In all the marketing literature from Adobe on CS4, I've yet to see anything about support for all the open type features (like old style numbers) or decent kerning and leading controls.
It occurred to me today that if Adobe didn't care about type in Flash, maybe there is something wrong with my workflow. So I thought I'd post here for ideas. Currently, if I want to do any type with control on par with InDesign, Illustrator, even Photoshop, I do my type in Illustrator, outline in, and then bring it in to Flash. This is a huge pain when I'm creating something that has a lot of small type boxes that might change often. Does anyone have any other solutions I'm missing?
Typography, Pt.1
Typography, pt.1
The general interest and understanding of good typography isn't to strong amongst our beloved kirupians. I feel type is a crucial part of graphic design, so I decided to share some thoughts. This is not an experiment, but definitely a good source.
I'm not very experienced, and my English is definitely not perfect. Please feel free to correct me, and/or give your opinions.
The main reason for designing anything at all is to communicate a message. Be it your actionscript skills or the amazing taste of Diet Coke with a hint of lemon - communication is the key. A lot of the young creatives at Kirupa strive to create impressive pieces of work, but to often tend to devalue the most important part: getting your message to the recipient.
Written text is the main element of communication online, and therefore very important to handle correctly.
In typographic terms, we tend to divide text into the two main categories "Display" and "Text" (or "Body copy"). Think of a newspaper like Times. It has headings set in large sizes to attract the readers attention, and the actual story (what the headings attract you towards) set in a relatively small size. The headings are "Display" and the story is "Text".
Most fonts are designed to fit into just one of these categories, and thus do not preform well at the other. Copy/paste an article from your local newspaper website into MS Word and set the font to "Impact, 10pt" (Win). You will understand quickly why Impact isn't normally used for text setting. Formatting the same article in "Times New Roman" will make it a lot easier to read.
In print design, almost* all text is set with a serif font. Serifs are small cross strokes accentuating the end of the main stroke of a letter. (Serif font example: Times New Roman.) In opposite to a sans-serif font, a serif font let your eyes glide easier through the sentence, and also makes it easier to recognize the different character forms.Sans-serif literary means "without serif". Arial is an example of a sans-serif font.
On screen, and definitely in Flash, the story is slightly different - but the principals remain the same. We rarely write long articles for publishing on screen. It's just plain harder to read long texts on a screen than it is in a book.
Also due to screen resolution (I'll explain!) it is harder to make good serif typefaces, and therefore there are fewer serif fonts usable for screen than sans-serifs. Thus Verdana (a sans serif) is one of the most popular fonts online, generally used for text setting. However, Georgia (a serif) is almost as popular.
Screen resolution: Due to the low resolution of computer screens, compared with print, (most computer screens have only 72 pixels per inch, whilst printed material start at a minimum of 150 drops of ink per inch - and most commonly around 300 dpi) fonts set at small sizes tend to appear very distorted. Different methods were applied to find a solution to this problem. I'll shortly explain the three main approaches.
Manual hinting: Some fonts are manually designed to snap to screens pixel grid when set at small sizes. This has been the leading approach for some time. Example fonts: "Georgia" and "Verdana". Both Microsoft and Apple ship these core fonts with their operating systems, making them natural choices for web design.
Pixel/Bitmap fonts: These fonts are designed to be set at a specific size, and designed to fit the pixel grid of computer screens. They are only scalable by exact multiples (8 px, 16 px, 24 px, 32 px ...), and very popular amongst flash designers and developers.
Cleartype: This technology use the screen's physical structure (a pixel actually consists of three different coloured sub-pixels arranged horizontally) to render fonts better.
I'll round up for now with some recommended free text fonts for use in Flash. (There are to many of very low quality out there!) If I find the time I'll be back soon with some more
* Georgia, serif, suitable for long text
* Verdana, sans-serif, preferably for shorter texts
(These are not really free, but bundled with both Windows and OSX. Both are designed by Matthew Carter)
* Unibody 8, a sans-serif design by Underware.
* Atlantis, a serif designed by Floodfonts.
* Nova, Croma, Dura, Forma, Norma, Plura and Supra are all zipped in Distype's old "free package". Forma is a serif, the others are sans-serifs. (Supra is very extensive.)
* Lectrum, Libra and Courriel, are all sans-serifs, also from Distype.
* Teacher's Pet, sans-serif and script designed by Orgdot.
* Pixella, a sans-serif designed by Chester Jenkins, available for free from Village.
PS: Arial is just a terrible replica of Helvetica! You're better of with the original.
Typography In Flash
hello ! i'm doing a site with flash and i have some special fonts that i want to use . in photoshop when i'm converting in gif the quality is not good in flash... if i use this this font in flash can everybody see this font even if they haven't got this font in their computer??
Masters Of Typography
Alright masters of typography ...... I have an image and it uses 2 fonts, I have no idea what they are ..... so I need to know what fonts they are ... the image is attached
Typography... And Stuff.
I was going to list this as text effect but that word brings up different means in flash,
what I really want to know is ... how can I get an outline on inputted text.
And for that matter, lets say I have drawn a shape that does not have an outline / border. Is there an easy way to do so without a lot of hassle?
~ Ryoga
Bitmap Typography And F8
Hi!
I haven't been using Flash 8 much lately, and would like to know if there has been a change in font management. Specifically, the non-antialiased fonts, like Verdana etc.
I know in Flash 2004 there were kerning issues, like a space after v (kerning) and the like. A text of verdana didn't look 'perfect', as a Html text. There were tiny little imperfections. Couple of years ago I purchased a russian software which made bitmap fonts from system fonts, such as Tahoma, Trebuchet etc, to fix those issues.
Now, after looking at the 2A version 5 website, where the font (I assume verdana) is SO clean, and its fields are dynamic.... What kind of font rendering do you think are being used? System? F8 Bitmap text? Bitmapped by hand?
thank you very much
s-
Improving My Typography In Flash?
I am completing a flash website for my client.
help me improve this typography
See the Paragraphs
My client wants the typography to be justified. However, when I justify it the spaces look odd in the paragraphs.
Does anyone have any good techniques on making justified paragraphs look as normal as possible with flash?
Thanks
Typewriter Fx And Keeping The Integrity Of Typography.
Okay, I know this one has been posted to death, but none of them dealt with this particular subject...
I am using this tutorial on a simple typewriter effect from here:
http://www.flashkit.com/movies/Effec...3373/index.php
What I want to know is, is there a way to make this keep (a) your embedded font (b) keep the integrity of my typography (i.e. line breaks, soft returns, etc.). So far all I can see is that the text is typed into the action script... I have a feeling this has something to do with a dynamic text box, but as I am new to this, I have not a clue where to begin.
Help would be appreciated.
Working with Flash MX 2004, btw.
Dynamic Text + Html + Special Typography
Hi!
I seem to remember i've read somewhere that i cannot have a dynamic text with html and special typography (a strange typography with normal range [A-Za-z0-9] that user is not expected to have installed) but i cannot find it on flash mx 2004 help, nor on internet...
Am i right?
I've tried some examples and i cannot see what i write in a text like that...
What i'd love is a dymanic text with special typography and several colors, i mean, in the same sentence, some words with different colors...i guess i'll have to use several textbox to achive this...
Thx!
Best File Type For High Quality Typography
Putting together a portfolio of graphic design examples, so type quality is critical. File size not an issue (for CD distribution) so including fonts (lots of 'em, and complete character sets at that) is, I assume, OK.
1. Best way to motion-tween typography for smooth, sharp SWF
2. Best way to capture page images? Originals may be raster or vector, from composition (InDesign) or PDFs of page layouts. Why do PDFs degrade on import?
Point me to some examples with ideas how they were done?
Flash Template Coding - Freestyle Typography Slam
Hello Looking for a little help on the coding for the Freestyle Typography Mural. . . any help will be greatly appreciated and rewarded.
Template
Ai layout File:
Freestylelayout1.ai
need some clean code. If anyone thinks they could put a little time in helping this anything is greatly appreciated and forum / site linked at footer.
Drawing An Outline Of An Object In Flash And Then Animating The Drawing?
I wish to draw an outline of an object in flash? bit by bit a piece of the outline is drawn until the outline is completed, once this has finished then object then appears and the outline disppears (this part I can manage).
I do not know where to begin? So may need a lot of direction on this one.
Scrolling Drawing Board? Drawing Without Moving The Mouse
Hello, I'm new to this board and kind of a flash newbie so you could probably help me out.
What I'm trying to build is what you could call a scrolling drawing board - just like a drawing board but when the mouse comes close to the edge of the window, it scrolls and lets you continue your drawing.
I have no problem creating a drawing board with API, but i can't make it scroll. Usually when i want to scroll a background image i make it move along with the mouse when the cursor is near the edge of the window (for example, if the mouse's coordinates are above a certain number, the background image starts moving in one direction so it "scrolls" in the other direction).
So i wanted to do this with the movieclip of the drawing in a drawing board (make it move according to mouse's coordinates near the edge of the window), but when i scroll i have to stop the mouse at the edge of the window because i cant go any further :p so the drawing moves but it stops drawing. Or maybe what i need is some way to draw even when the mouse is not moving. Is that possible?
I'm sorry it may seem a bit confused (moreover english isnt my native langage :p), I'll try to post an example later. In the meantime, if any of you see how i can do that ... thanks
Drawing Board With Specific Section For Drawing
Ive made myself a drawing board in flash, but the problem is that i can draw over anything on the stage and I want to have a specific canvas for drawing.
I tried creating a separate MC and pasting the code there but it didnt help although i have no idea why. Any ideas?
Drawing Scripts For A Drawing Program
Need help with reference scripts for a simple drawing program. I'd like the user to be able to select different tools (circle, square, pencil, paint brush), change the color of the fill, and erase or reset the screen. Can anyone refer me to the right place?
Drawing A Soft Mask... Drawing Api?
Hello everyone, (almost) first post here
I'm creating a, quite original flash website (meh... not my idea in fact, I'm only the flasher!), in wich you're in a car, sitting on the passenger side, and you're looking outside to see the contents coming on the road.
It rains.
A lot.
So the windowseat is "fogged" (how can I say that...???) and while you're loading the content you actually can draw on the glass with your.. err... finger (mouse!), like how your friends usually do in your car when you really don't want their fingerprints all over your car glass
Ok, easy way to do that:
1 - attachmovie
you actually duplicate a circle, give it some randomness in blurring and size so it looks irregular and place it right under your mouse.
Good, it works... but when you move fast, it just leaves a blank spaces between clip and clip...
Hey... that's not fair...
2 - drawing api
Oh my god... I can't make a mask with a simple line, so I should draw a shape while moving the mouse.
The point is... HOW???
I dunno if there's a better way to do that, but that's the only one in my mind now.
Actually the drawn clip should also be blurred a little bit (1 or 2 percent) wich is not a problem since you can easily blur the container.
But now the real point is: how do I draw like that with the beginfill?!?!?
Note: I uploaded the fla so you can have an idea on how it looks...
Help Needed In AS3 Drawing Board ( With Drawing Api)
Hi all,
I'm doing a flash application with flash cs3 actionscript3. I tried with as2.
Now I am facing difficulty in doing it in AS3.
the application includes:-
all the vector or images should be editable means scale rotate color change etc.
draw line -
draw rectangle -
circle
input text.
curve with node points
if anyone have any tutorials or any resourse please post here.
thanks inadvance
Harish
[MX04] "Drawing" Line Effect Using Drawing API
So i've got a basic drawing using the drawing API ala:
myLine = this.createEmptyMovieClip("newLine", 1);
myLine.lineStyle(3, 0x000000, 100);
myLine.moveTo(0,0);
myLine.lineTo(100,0);
myLine.lineTo(100,100);...etc
Now is there a way to have flash animate the drawing of the lines like a map from an Indiana Jones movie?
Thanks!
Drawing Api Drawing Saving
ok - say i have made a swf where you can draw, with possible color change and different brush size, and i want to somehow save my drawing (in a database)
so i figured every little line that is drawn on enter frame has 6 values - start x, start y, end x, end y, color and size.
approximately - first 4 are 3 numbers, color is 6 numbers and size is 2 numbers length, so its 4*3+6+2=20 numbers for one little line
the framerate of the movie is 100fp/s so getting the maximum smoothness of the drawing, so one little line is drawn in 1/100 of a second, and in a second i have to save 20*100=2000 numbers.
a symbol is 8 bytes, so 2000*8=16000 bytes (/1024~15,5kb) - in a second!
so if you draw for a minute - its 16000*60=960'000 bytes (/1024~937,5kb~1mb) in a minute!
and my question is how to save a drawing to a database different way then im thinking, to me this seems the only way...
1mb per minute of drawing seems kinda lame for me and noone will want to wait till it loads up
Drawing Api Drawing Saving
ok - say i have made a swf where you can draw, with possible color change and different brush size, and i want to somehow save my drawing (in a database)
so i figured every little line that is drawn on enter frame has 6 values - start x, start y, end x, end y, color and size.
approximately - first 4 are 3 numbers, color is 6 numbers and size is 2 numbers length, so its 4*3+6+2=20 numbers for one little line
the framerate of the movie is 100fp/s so getting the maximum smoothness of the drawing, so one little line is drawn in 1/100 of a second, and in a second i have to save 20*100=2000 numbers.
a symbol is 8 bytes, so 2000*8=16000 bytes (/1024~15,5kb) - in a second!
so if you draw for a minute - its 16000*60=960'000 bytes (/1024~937,5kb~1mb) in a minute!
and my question is how to save a drawing to a database different way then im thinking, to me this seems the only way...
1mb per minute of drawing seems kinda lame for me and noone will want to wait till it loads up
Drawing API - A Line Drawing Itself
I can draw a simple line with the drawing API and I'm able to place it on the stage where I want to but I'm trying to have the line draw itself between x=0 y=0 and x=600 y=400.
Any pointers on how to take that on?
t/y
Cant Tell When Merge Drawing Model Vs. Object Drawing Model
I keep drawing shapes on the same layer, overlapping them, and then trying to delete one of the shapes to cut a shape out of the first. This does not work automatically as Help says it does, I have to go to "Modify > Combine Objects > Union" to merge them, THEN I can cut my shape out. When is this supposed to occur "automatically"? How am I supposed to know what mode I'm in?
Cant Tell When Merge Drawing Model Vs. Object Drawing Model
I keep drawing shapes on the same layer, overlapping them, and then trying to
delete one of the shapes to cut a shape out of the first. This does not work
automatically as Help says it does, I have to go to "Modify > Combine Objects >
Union" to merge them, THEN I can cut my shape out. When is this supposed to
occur "automatically"? How am I supposed to know what mode I'm in?
Object Drawing Model / Merge Drawing Model
Recently I reinstalled Macromedia Flash 8, but then it was installed with the "Merge Drawing Model" instead of the "Object Drawing Model". How do I change this?
I've tried to read this, but it doesn't say exactly what to do;
http://livedocs.adobe.com/flash/8/ma...=00000486.html
Thanks
-JPAG
Help, I Can't See What I'm Drawing.
Can anyone tell me why I cannot see what I am drawing until I let go of my mouse? It doesn't matter which tool I am using, all of them have the same problem. Is there some setting I don't know about?
Please Help. Thank You.
Drawing A Box
I want to do an animation where you draw a box. But instead of just the box appearing I want to start with the upper left corner and then as the animation goes on the top lines is drawn then the right side line then the bottom line then the left side until it connects with the upper left corner. How do I do this?
It's About Drawing
How can I make a rectangle (to start to draw it on press and to finish it on release) - it needs to be real time drawn not when I'm finished choosing the coordinates!
Please help,
thanks.. krešo
Drawing
OK, say I have a lovely looking menu....when the page loads - BANG, there it is. I would like something a little more slick. You must have seen the effect where the lines seem to be drawn? like this..... http://www.kadiumdesign.com/
How is this done??
Cheers.
Help With Drawing
I wrote the following code, put it in the first frame's action window and nothing happens!! I see absolutely nothing. No errors, nothing. Why?
_root.createEmptyMovieClip("t1_mc",1);
_root.t1_mc.createEmptyMovieClip("back_mc",1);
_root.t1_mc.createTextField("text_mc",1);
_root.t1_mc.text_txt.autoSize=true;
_root.t1_mc.text_txt.selectable=false;
_root.t1_mc.text_txt.text="Label of Button";
with (_root.t1_mc.back_mc) {
beginFill(0x00ff00, 100);
moveTo(0, 0);
lineTo(_root.t1_mc.text_txt.textWidth, 0);
lineTo(_root.t1_mc.text_txt.textWidth, _root.t1_mc.text_txt.textHeight);
lineTo(0, _root.t1_mc.text_txt.textHeight);
lineTo(0, 0);
endFill();
}
Also, how do you change the visiblity and the position of a newly created movie clip on the stage?
Is it me? I've been programming in C++, Java and Visual Basic for years. I think I'm a fairly bright guy. But, I find this actionscript very confusing. It's not object oriented (just because you call things objects doesn't make it OO) and it's not structured well. It's not intuitive to determine what the scope of objects and variables are. It's also difficult to find code in a project. I think that Flash as a drawing and animation tool is outstanding.. but the programming environment simply sucks. A lot of people that haven't programmed in a lot of other environments may not realize it but coding shouldn't be this non-intuitive. ...and the lack of context-sensitive help doesn't help any! OK. I'm off my soap box now.
Any help for the above problem much appreciated.
Fun With Drawing Api
I was messing around with the drawing api and I figured some other people out there might find this interesting
http://www.redwaveinteractive.com/temp/blueart2.html
AS Drawing Help
Does anyone know if you can have the fills and lines you draw be on top of everything within an MC? My other elements that are already in the MC are being placed over my drawings and fills, so I can't see them at all, please help!
Drawing
Hi
In the color mixer, I've imported bitmap but when I draw the quality is ****ty.
But I've seen great result that way!
Can someone tell me why?
Drawing Api
hey guys, dont come here much im a games
but... is there a way of linking two mcs with a line (keeping in mind one of the mcs will be moving) using the drawing api? instead of the old f4 way of rescaling and sizing a diagonal line.
cheers
[m]
Drawing API
I'm really not very familiar with the new drawing API.
Could I, for example, code an animated line to appear as a sort of loose, free flowing scribble on the stage? Kind of as if someone was just loosely drawing or scribbling with a pen?
Would that be a nightmare to code?
Drawing App....need Serious Help
Hi all, I may be in over my head (definately)
But what I want to do is to creata an online drawing application, where the user can draw something simple and add some text, then save it online.
Is this possible?
I would greatly appreciate any kind of help...
superthanks in advance
API Drawing Help
Could someone please examine my code for the file below? I've been staring at it all afternoon, and I can't see anything wrong with it anymore.
The yellow circles are supposed to deform the polygon as you drag them. It hasn't done this yet.
http://www.stoehrsartstudio.com/realtimeDrawing03.fla
Drawing Api
hello, i want to create a "landscape-effect" using curveTos.
you can imagine it as several hills next to each other.
the tricky part is, that i want to create it on the fly and that it should move sideways.
any tips on that?
Can't See What I'm Drawing
I'm having some problems with flash
Usually when I drag out a box or a circle, I can see the box or the circle begin from the starting point, and then it expands as I move the cursor ******ds to the desired size. Everyone knows this.
Drag out a box, and you can actually see the box coming out... in flash, there's even that snap-on helper (that thick black circle that tells you when you're snapped onto something).
Recently however, I click and drag, but I can't see anything!! However, after I release the mouse button, then the box or the circle actually pops up normally.. But I am unable to "pre-see" the shape of what I'm drawing. What's going on?
Draging boxes from adobe photoshop and MS paint works fine.. and even on Macromedia Director... why is flash doing this to me???
Drawing ...
How does one create a pixelated gradient in one color that goes from that color to transparant?... I would be like a solid color that gradually pixelates to small boxes that eventually disappear...
I know it could be done in photoshop but bringing it into flash would grab the background as well... so I would like to do it directly in flash...
Thanks
astroanalyst
API Drawing
I am trying to design a simple drawing game in flash but I have encountered the following problems with the published .swf file:
- the lines that are drawn appear above the cursor.
- the lines draw all over the screen and not just in a designated area
- i cant get a fill tool to work on shapes that i have drawn on the screen.
Does anyone have any ideas?!
Drawing API - Help?
I've just started experimenting with the drawing API.
I'm just trying to draw a box, but all it does is draw 2 sides of the box. here's my code;
createEmptyMovieClip("yada", 1);
this.onEnterFrame = function() {
with(yada) {
this.lineStyle(2, 0x00FF00, 100);
this.moveTo(80, 80);
this.lineTo(120, 80);
this.lineTo(120, 120);
this.moveTo(80, 120);
this.moveTo(80, 80);
};
};
What am I doing wrong?
Thanks for any help.
Radmo
Drawing Api
im trying to simulate the rectangle tool in a paint program. but, because i clear the shape every frame to make the size adjustable, when i go to draw a new one the old is cleared. does anyone have any suggestions?
Code:
drawRect = function (x1, y1, x2, y2) {
with (this) {
moveTo(x1, y1);
lineTo(x2, y1);
lineTo(x2, y2);
lineTo(x1, y2);
lineTo(x1, y1);
}
};
onEnterFrame = function () {
if (mouseisDown == true) {
clear();
lineStyle(1, 0x0000ff);
drawRect(xdown, ydown, _xmouse, _ymouse);
}
};
onMouseDown = function () {
xdown = _xmouse;
ydown = _ymouse;
mouseisDown = true;
};
onMouseUp = function () {
mouseisDown = false;
};
Drawing API
Hey, I really need some help with a little drawing thing i'm making to add a fun element to my site... The FLA is attatch (windows)...
What I want to do is restrict the area on which is drawable, I found a source movie which does it but could not understand the code.
I realise that I need an elemant in the background that defines the restricted area so we'll call this 'canvas'.
The new MC created that holds the line is called 'line'.
Thanks for your help, Robb
Drawing Api
I saw a site somewhere were you could paint with your mouse and if you painted similar to a certain letter an action was triggered.
Does anyone have an idea of how this was done?
Drawing
Is it possible to design a simple drawing game in flash (MX), something simple like the 'paint' application found in windows with a draw and a Fill option.
Cheers
Tim
|
TRACKER
