Drawing API and interactivity
I am about to start this project where the background on a
full browser flash site has a number of shapes. Ideally and I am
not sure if this is even realistic, I would like the shapes to have
a slight mouse interaction. While the mouse will respond to button
etc in the front, behind the content, on the background, it should
create slight interaction, such as slight wobbles of the shapes
there, slight nudges, etc.
I have used the drawing API for simple things, but I am
wondering how hard it is to create some more organic shapes. Can I
have circles that have slight dents in them? Bows? How hard is
that?
use the jpegencoder class to encode your jpeg and the urlloader class to send to your asp. eg, to save mc:
import JPEGEncoder;
var bmpd:BitmapData=new BitmapData(mc.width,mc.height);
bmpd.draw(mc);
var jpegEnc:JPEGEncoder = new JPEGEncoder(75);
var jpegDat:ByteArray = jpegEnc.encode(bmpd);
var ldr:URLLoader=new URLLoader();
var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
var url:URLRequest = new URLRequest ("youraspfile.asp?name=snapshot.jpg");
url.requestHeaders.push(header);
url.method = URLRequestMethod.POST;
url.data = jpegDat;
ldr.load(url);
in php the image data is
$GLOBALS["HTTP_RAW_POST_DATA"];
so you'll need to translate that to asp and save it to a file named by the name variable sent via GET.
Similar Messages
-
Problem with drawing api and textfield
I have a flash file that will be used on multiple sites and
therefore will need to be able to change it's colors based on
colors fed in through parameters. I'm trying to draw a rounded
rectangle button with some text on it. I can get everything to draw
except the text. When I debug it, the textfield variables show up
with everything set up properly so I'm not sure why it won't
display. Here's the code that creates the button and text. And it's
adding the Sprites to an movie clip on my stage called btnBG in
case you're wondering what that is.
import flash.display.Sprite;
import flash.display.GradientType;
import flash.geom.ColorTransform;
import flash.events.MouseEvent;
var btnSprite:Sprite = new Sprite(); //main button sprite
var btnOutline:Sprite = new Sprite(); //outline for button
var matrix:Matrix = new Matrix();
var btnCircleOutline:Sprite = new Sprite();
var btnCircle:Sprite = new Sprite();
var btnArrow:Sprite = new Sprite();
var btnOverlay:Sprite = new Sprite();
btnCircleOutline.graphics.beginFill(btnOutlineStartColor,
1);
btnCircleOutline.graphics.drawCircle(59,11,7);
matrix.createGradientBox(15, 15, Math.PI/2,0,0);
btnCircle.graphics.beginGradientFill(GradientType.LINEAR,
[btnEndColor, btnStartColor], [1,1], [0,255], matrix);
btnCircle.graphics.drawCircle(59,11,6);
//draw arrow shape
btnArrow.graphics.beginFill(0xcad7e9, 1);
btnArrow.graphics.moveTo(57, 7);
btnArrow.graphics.lineTo(62, 11);
btnArrow.graphics.lineTo(57, 15);
btnArrow.graphics.endFill();
//draw invisible overlay
btnOverlay.graphics.beginFill(0xffffff,0);
btnOverlay.graphics.drawRect(0,0,70,22);
btnOverlay.buttonMode = true;
btnOverlay.useHandCursor = true;
btnOverlay.addEventListener(MouseEvent.CLICK, clickHandler);
//draw button outline and gradient fill
matrix.createGradientBox(70,22,Math.PI/2,0,0);
btnOutline.graphics.beginGradientFill(GradientType.LINEAR,
[btnOutlineStartColor, btnOutlineEndColor], [1,1], [0,255],
matrix);
btnSprite.graphics.beginGradientFill(GradientType.LINEAR,
[btnStartColor, btnEndColor], [1,1], [0,255], matrix);
btnOutline.graphics.drawRoundRect(0,0,70,22,5,5);
btnSprite.graphics.drawRoundRect(1,1,68,20,3,3);
//draw buy now text on button
var btnText:TextField = new TextField();
var txtFormat:TextFormat = new TextFormat();
txtFormat.font = "Arial";
txtFormat.size = 18;
txtFormat.color = 0x000000;
btnText.setTextFormat(txtFormat);
btnText.embedFonts = true;
btnText.text = "Buy Now";
btnText.selectable = false;
btnBG.addChildAt(btnOutline, iIndexer++);
btnBG.addChildAt(btnSprite, iIndexer++);
btnBG.addChildAt(btnCircleOutline, iIndexer++);
btnBG.addChildAt(btnCircle, iIndexer++);
btnBG.addChildAt(btnArrow, iIndexer++);
btnBG.addChildAt(btnText, iIndexer++);
btnBG.addChildAt(btnOverlay, iIndexer++);You can only set embedFonts to true if you are using a font
in the library. There is no need to embed the Arial font as it is
on basically all computers, also use btnText.defaultTextFormat =
txtFormat;.
txtFormat.font = "Arial";
txtFormat.size = 18;
txtFormat.color = 0x000000;
btnText.defaultTextFormat = txtFormat;
//btnText.embedFonts = true;
btnText.text = "Buy Now";
btnText.selectable = false; -
Drawing API animate??
Hi guys, i have only recently started with Drawing API, and
im getting the hang of it. But i was wondering if it's possible to
tween the lineTo method??
for example, im rounded rectangle at runtime, but i dont want
it to just " appear " , say i wanted it to " draw it's self "
like tween the outline first, then fade in the fill.
is that possible? if so, what code would i use to animate the
drawing process?
Thanx guys.Sketchsta,
> Hey David, i only just saw your post after i replyed..
uum,
> could you give be the basis of how to use the
setInterval ?
The setInterval() function can be run in more than one way.
The basic
way is to provide it two parameters: a) another function to
run, and b) a
time interval at which to run this other function. That's
really all there
need be to it.
> cuz i only used it once, but i didnt know how to stop
it, it
> kept going forever, till my com was struggling.. then i
found
> clear() ... now my comp has no problem, but i still cant
> stop the line.. anyway, off the point...
That's not off the point. ;) Sounds like that's exactly what
you need
to figure out now. The clearInterval() function stops a
particular
setInterval() loop. How does it know which loop to stop? The
answer is,
you provide clearInterval() with a number. This works a bit
like those
lines at the deli section where you "take a number" and they
eventually call
it.
setInterval() provides a return value, just like many (but
not all)
functions. The getTimer() function, for example, returns a
number that
represents how many milliseconds have passed since the Flash
movie began.
The isNaN() function returns a Boolean (true or false) value
that tells
whether a given value is "not a number." Well, setInterval()
returns a
value that indicates the number of its latest usage. The
first time you use
setInterval(), it sets up a scenario whereby it repeatedly
calls the
function you pass it at the time interval you pass it. This
is the first
such scenario, and so the number it returns is 1. The next
time you use
setInterval(), it sets up a second scenario -- calling some
other function
you provide, or the same one -- and this time it returns 2.
The third time,
3, and so on.
Conveniently, you don't have to keep track of this. You can
store the
return value of setInterval() in a variable and use the
variable as a
parameter to clearInterval().
> could you give me an example of how to set it up?
var id:Number = setInterval(drawingFunctionHere, 30);
In the above line, an arbitrarily named variable id (which
will be a
number) is set to the return value of setInterval(), which in
this case
calls an arbitrarily named function, drawingFunctionHere
every 30
milliseconds. Whenever you see fit (such as when your drawing
is finished,
and only you'll know that), you can call clearInterval() and
pass in that id
variable.
clearInterval(id);
That stops the repeated call to drawingFunctionHere(). Of
course, the
first time around, you could use clearInterval(1) -- but
again, there's just
no reason to keep track of the interval numbers yourself. You
can re-use
that id variable as often as you need.
David Stiller
Adobe Community Expert
Dev blog,
http://www.quip.net/blog/
"Luck is the residue of good design." -
Hello
I made a k-children tree algorithm in Java. Now I'm looking for a ready-made API/classes for drawing the tree.
Anyone knows any good tree drawing APIs?
I searched google for hours and couldn't find anything.
Thank youHere are some links that you may find usefull:
An interactive canvas component where you can paint any shapes:
https://jcanvas.dev.java.net/
A graph library:
http://jung.sourceforge.net/
Another graph library:
http://graph.netbeans.org/ -
Flattened circles in drawing api
Hi Guys
When I use the drawing api to create circles, sometimes they
appear flattened, as if the edges had been sliced off. Below is the
code. Can anyone tell me how to fix this?
// extends UIComponent
public function CircleThing ()
super();
mouseChildren = false;
buttonMode = true;
//resetCircle();
base = new Sprite();
baseOver = new Sprite();
label = new TextField()
label.autoSize = TextFieldAutoSize.LEFT;
label.multiline = true;
label.wordWrap = true;
label.width = 108;
label.x = -52;
addChild(base);
addChild(baseOver);
addChild(label);
addEventListeners();
//label.border = true;
//label.borderColor = 0xff0000;
//addChild(label);
//resetCircle();
//addListeners();
// This function creates the blue circle
public function drawCircle(_name:String=null):void
trace ('NavCircle drawCircle');
var myFilters:Array = [new
DropShadowFilter(5,135,0x000000,0.15,5,5)];
//base.name = _name;
base.graphics.clear();
base.graphics.beginFill(_color, .9);
base.graphics.drawCircle(0, 0, defaultDiameter/2);
base.graphics.endFill();
base.filters = myFilters;
// added djg draw overCircle
baseOver.graphics.clear();
baseOver.graphics.beginFill(_overColor, 1);
baseOver.graphics.drawCircle(0, 0, defaultDiameter/2);
baseOver.graphics.endFill();
baseOver.visible = false;
}I'm not sure about tutorials, but read up on the
flash.display.Graphics class. Your Canvas has a graphics property
and that's where you draw. Here's how to draw a red circle 50
pixels in diameter:
graphics.clear();
graphics.beginFill( 0xff0000 );
graphics.drawCircle( 100, 100, 25 );
graphics.endFill();
You should do most of your drawing in the updateDisplayList
function - just override it (in a Script block if using
MXML). -
BPM 11g: JAVA API and Webservice API
Who knows BPM 11g: JAVA API and Webservice API?
Customer want to call BPM 11g between Heterogeneous systems, such .net framework. One way is use webservice API, I think, but where can find it? thank youWhen you create a BPM application in 11g, you're actually creating a SOA composite application with a BPMN component in the composite. From within the BPMN editor, you can specify the interface (parameters) of each start node in the process. If you select a start node, look at the implementation tab, you'll see a properties group that lets you define the interface one property at a time, or by selecting an interface from the catalog.
By defining these properties you're also defining the shape of the Web Service interface that will automatically be created in the composite. If you switch to the composite view, you'll see your BPMN process with a wire to it from a Web Service that's generated from the interface defined in the BPMN editor. The naming convention is the BPMN process name with ".service" appended. When you deploy the BPMN process, the web service will also be deployed, since it's also part of the composite. From Enterprise Manager (EM) you can test the service and get the WSDL, which could be used by other applications (e.g. .NET) to start and interact with a process instance.
This is one of the advantages of the 11g architecture. The composite exposes services to consumers/clients. The implementation could have been BPEL, BPMN, a Mediator, Java/EJBs, or any combination working together. To the consumer, it's just a web service.
In case your next question was about security ... you won't see properties about security in the BPMN editor. You use Web Service Manager to apply security or other constraints to the web service endpoint. -
Behaviour of lines in flash drawing API
Hello everyone
I wanted to ask a question is it posible to move the line drawn with flash drawing API behind the objects that this line connects.
For example if I have a two movieClips that i connect with line i can see that line atop of those MovieClips.
thanks for help in advanceHow you get the line "on top" will depend on how the rest of the objects on the stage are organized. If everything is drawn directly to the stage and not enveloped in other objects then adding the line to the display list last will place it in a position on top of everything else by default.
-
How to best optimise Shapes produced by Drawing API?
I'm building an iPad app that allows a user to draw shapes using the finger. Simple logic:
holder = new Sprite();
addChild(holder);
// then based on touch events
holder.graphics.moveTo( e.stageX, e.stageY );
holder.graphics.lineTo( e.stageX, e.stageY );
// etc
What I see is that the SWF on the desktop runs at constistent 25fps. When run on the iPad it slows down significantly once you start drawing, usually as slow as 4fps.
I tried adding
var matrix:Matrix = new Matrix();
holder.cacheAsBitmapMatrix = matrix;
holder.cacheAsBitmap = true;
but that seems to have no effect. Am I looking in the right place? Are there better ways to optimise this?
Thanks
StefanI spent a bit of time fighting with this one as well. It seems that no matter what I do through Flash's drawing API I just can't seem to get good quality from my objects.
From what I can tell the only way to achieve quality is to create the shape in Photoshop first and have it inside of Flash as a bitmap. I also set cacheAsBitmap and applied a cacheAsBitmapMatrix to the containing MovieClip, although I'm not sure if it made a difference since it apparently already applies this for Bitmap objects...I think.
Anyways try that and you'll see substantially better quality.
It would be nice in future release to see vectors utilize the iPhone's vector capabilities. -
Recreating a program interface with the drawing API?
Hey there all!
I've been out of the developing arena for awhile, so please
bear with me.
I'm currently doing a road trainer gig, and it would help me
out tremendously to have a Flash version of the software I'm
providing training on. Can someone point me in the right direction
to find the ActionScript for drawing a specific programs interface?
I'm going to be needing databaseing info too, but that's
another question :-) .
Thanx in advance!
TeeCeei don't know why you would draw an interface, but the flash
drawing api can be found under the movieclip methods: lineStyle,
moveTo, lineTo, curveTo, beginFill etc. -
Flash Drawing API error?
Hi!
I think Flash drawing API is not working like it should...
Test this:
var W:Number = 12;
var H:Number = 12;
function drawRectExt():void
this.graphics.clear();
this.graphics.lineStyle(1,0xFF0000);
this.graphics.beginFill(0xFFFFFF, 1);
this.graphics.drawRect(0,0,W,H);
this.graphics.endFill();
function drawRectInt():void
this.graphics.lineStyle();
this.graphics.beginFill(0xFF0000, 1);
this.graphics.drawRect(W*0.2,H*0.2,W-W*0.4,H-H*0.4);
this.graphics.endFill();
drawRectExt();
drawRectInt();
This is the result (and the error?):
Why Flash doesn't draw the inner box (red) in the middle of the outer box?Hi again kglad!
first I want to thank you for your help with this..
now, I have tested your code with "intSqSide = 7;"
and it looks good at 100%, but if you zoom it you will see that it's not centered.
In numbers, with intSqSide = 7, the code looks like this:
function drawRectExt():void {
this.graphics.clear();
this.graphics.lineStyle(1,0xFF0000);
this.graphics.beginFill(0xFFFFFF, 1);
this.graphics.drawRect(0,0,12,12);
this.graphics.endFill();
function drawRectInt():void {
delete this.graphics.lineStyle();
this.graphics.beginFill(0xFF0000, 1);
this.graphics.drawRect(3,3,7,7);
this.graphics.endFill();
My last version was:
function drawRectExt2():void
this.graphics.clear();
this.graphics.lineStyle(1,0xFF0000);
this.graphics.beginFill(0xFFFFFF, 1);
this.graphics.drawRect(-0.5,-0.5,12,12);
this.graphics.endFill();
function drawRectInt2():void
this.graphics.lineStyle();
this.graphics.beginFill(0xFF0000, 1);
this.graphics.drawRect(2,2,7,7);
this.graphics.endFill();
I think it's logic to offset in X and Y direction the width/2 of the line. Because Flash draws the line centered, there should be an option to change that, like in Illustrator, where you can draw the stroke centered, aligned to inside or aligned to outside.
I don't know why Flash does not support this feature!
It's really frustrating to draw lines in this way. If I draw a box with 12px side and 1px contour, I want that box with those values! not 11px inside, and not with an offset of half pixel in each side!. -
Color Tweening using Drawing API
Hi, I have a function that draws a shape. The color value can
be passed in as a parameter. I have called this function quite a
few times. All of the objects start off the same color.
I want to know how to randomly make each one switch color
immediately (like a light bulb, on, off)), over a set period of
time
Anyone any ideas?
ThanksWhen you say bezier curves I presume you mean quadratic
bezier curves that the native drawing API uses? Or are you
converting spline data or cubic beziers to native drawing api
parameters from the .net data in flash as well? Some of these
calculations can take time for large data sets if done with an
emphasis on highly accurate approximations in flash.
Here are a bunch of questions I could think of:
How are you receiving the drawing data? are they coming in
via xml, for example? (Are you sure its the drawing activity that
is slow and not the parsing of data). Are they coming in as 5000
points or incrementally over time?
Are you clearing and redrawing from the start of drawing
sequence each time (it seems not, but just wanted to check)?
Are you drawing to a single Sprite's graphics context or are
you creating layered Sprites to hold subsequent portions of the
rendered drawing?
when you say 'rotating the cursor' along the path...are you
animating anything as well? How are you checking the point
intersection - bounds based? or against a rendered shape?
The last thing I can think of is: are you using some of the
advanced lineStyle settings? some of these settings can slow things
down substantially with large and complex drawings, whereas other
settings are much faster. Also even specifying the default settings
can be slower than not specifying them. But again, this is usually
only noticeable for very long drawing paths.
Your post doesn't have enough information to advise directly,
but perhaps if you answer those questions it might provide us some
clues. -
Select area through Drawing API
Hi,
I am working on Custom Kitchen Project and want to know if
some one take a picture and import into the flash project then I
just want to know how user can create or draw a random shape to
select certain area, by using Drawing API
Example is below Just wana know how he did the selection
part?
http://www.century21.com/search/map.jsp?wheresync=City,%20State%20or%20Zip
Thanks in advance.
Freddywhat's the problem? your like displays a basic use of the
drawing api. -
FP9 vs. FP10 Drawing API
Hey all,
I created a program that uses the drawing API to draw a
graph of some river level data downloaded from the web. Basically,
it will download a TAB delimited file, parse it, and draw a graph
of the past 7 days using solid rectangles. The graph draws on by
setting some timeouts and tweening the rectangles on so they slide
up from the bottom. When it runs well, it appears as if the graph
is flowing on from left to right. There are a few different graphs
that the user can choose from, and each time, the program reaches
out to the web so it can grab the most recent river level data.
When I first programmed it, I was using Flash Player 9 and it was
working well. Now that I am publishing with Flash Player 10, after
a few graphs are drawn, the drawing starts to slow down so that the
flowing on is very rough, and after they have looked at maybe 7
graphs, it almost comes to a stop. The graph still appears, but it
seems to hang as it starts to draw, and then appears all of a
sudden. So, the program is not updating as the graph draws on, but
it happens in the correct amount of time. There are a few different
methods being used here, with the timeouts and tweens, but since it
seems to degrade over time, I feel like it must be something with
the drawing API. I am removing the old graphs completely, as far as
I know, and only one is drawing at a time. The thing that is
puzzling is that it works very well with FP9, but not with FP10. I
was hoping someone had some thoughts as to differences between the
two that would manifest themselves in a way I am describing. Of
course I realize that I could just publish with FP9, but there are
a few reasons I want 10 to be used that 9 will not help with.
Thanks...
- Bthanx,
that was useful, your solution worked fine...
I still have a little problem:
I tried different actions to be performed as the tween ends:
1. remove the object (parent.removeChild)
2. set it as invisible and put it on an array for later async remove
4. add it as a child of another sprite
I then put on the stage 10 instances of M1 and let them all tween,
everytime one of those instance ends its tween (and performs one of the final action
described above) there's a little delay that freezes for a little time all the other tweening instances....
I thought that the removeChild was the delaying part but I saw that also setting visible=false
brings the same delay...
I was then wondering if there's a smart way to handle this and let everything run smooth...
thanks -
Drawing API within attachMovie instances
Hi I am trying to get curveTo to work within attachMovie
created instances where the _x coordinate of each movie lines up
with the _x coord plus width of the previous. Each movie is a
square of differing dimensions.. All works fine apart from the
curveTo which whatever i try does not come out as expected (all
curves should look like the first one but scaled according to the
dimensions of its containing square). I must be misunderstanding
the relative coord settings or something but i have tried every
combination. Can any one help? I'm at the tearing my hair out
stage.
SWF can be viewed at:
http://www.widecombefair.com/draw/spiral3.html
and the fla file at
http://www.widecombefair.com/draw/spiral3.fla
also see code below
Many thanks in advanceHi Rothrock
I will have a go without using attachMovie. Will it make a
difference?
I appreciate I could draw the squares and draw the curves
straight onto the stage, but I arrived here from component classes
where I had a square class and a curve class and used
createclassobject to get them on stage (I also had a 3rd class for
the square border). If I can get this basic approach to work then I
will have something from which to build.
With luck stwingy's answer will fit the bill but I really
want to understand how the empty movieclip and its parent are
related in terms of the drawing api. I can't fathom the ligic.
Many thanks for your help so far. -
I am creating a car driving game in Flash 8. Im using the Drawing API to make the car leave tracks as it moves using the following method:
lines = {}
_root.createEmptyMovieClip("pen", 10)
pen.lineStyle(10, 000000, 6)
pen.moveTo(this.car._x, this.car._y)
_root.onEnterFrame = function(){
pen.lineTo(this.car._x, this.car._y)
segments += 1
name = "line"+segments
lines[name] = [this.car._x, this.car._y]
A requirement of the game although is that the tracks fade after 2 - 3 car lengths and I was not sure if this was possible using the method I have already implemented.
Any help would be much appriciated!to adjust the rate of fade, change the 2nd parameter in the setInterval() function and the 2nd parameter in setTimeout. in fact, if you want a rapid fadeout, remove the setTimeout and just call startfadeF(pen):
lines = {};
var dep:Number = 0;
this.car.prevX = this.car._x;
this.car.prevY = this.car._y;
_root.onEnterFrame = function() {
var pen:MovieClip = _root.createEmptyMovieClip("pen"+dep,10+dep++);
pen.lineStyle(10,000000,6);
pen.moveTo(this.car.prevX,this.car.prevY);
pen.lineTo(this.car._x,this.car._y);
this.car.prevX = this.car._x;
this.car.prevY = this.car._y;
setTimeout(startfadeF,2000,pen);
segments += 1;
name = "line"+segments;
lines[name] = [this.car._x, this.car._y];
function startfadeF(pen:MovieClip){
pen.fadeI = setInterval(fadeF,50,pen);
function fadeF(pen:MovieClip){
pen._alpha -= 3
if(pen._alpha <= 0){
clearInterval(pen.fadeI);
pen.removeMovieClip()
updateAfterEvent();
Maybe you are looking for
-
Using selected items from drop-down list in rest of page
Hi, I hope I'm able to describe clearly what's the problem. So I'm implementing a form for the moment. It contains a drop-down list. The user has to select one item from it and as a result another drop-down list on the same page needs to be filled wi
-
hi friends, I am making a chatting messenger using socket programming in java,I have some problem in establishing chatting session between two clients,where server just provide socket address of the c2 to c1,and then two client connect to each other
-
Challeging Traversal of Vector and Array
Hi there ! I would like to render the values of this Vector and Array . How do I print it out to the browser ? try ResultSet rset = stmt.executeQuery(myQuery); System.out.println(" Finish Execute Query !!! "); /* Array Contruction */ int numColumns =
-
Arch linux for SPARC, is there still any activity?
Hello all, I just got my hands on some sparc servers and I'd love to put arch linux on there. I found a wiki-page about SPARCH, but the last real edit is over 2 years ago, and the repository is down. Is anyone still interested in this / working on th
-
BATCH in Material Doc - MSEG-CHARG, BAPI_GOODSMVT_CREATE??
HI Experts, I got a requirement like, Threre is a item 10 of qty 5, in a delivery, its batch is BATCH SPLIT. I need to create a material document from this delivery/item. So, currently material doc is creating via BAPI_GOODSMVT_CREATE from this deliv