Posts Tagged ‘experiment’
Go get the file at FlashDen
Dynamic Scrolling Link List XML driven (No Wrap)
An interactive link list. Vertically scrolling list of links or just text. Could be used for a nav menu or a link list, or even just a scrolling list. Scroll speed calculated dynamically from mouse position to give not only scrolling control, but also speed control. Reads an external XML file containing just titles and url paths and creates this interactive click-able link list! On click the link is highlighted and on release loads the url either in a blank window or not (configurable). On rollover the list item grows with animation and is highlighted (all configurable, size speed etc). Once end of list is reached scrolling stops, another version is available with a wrap-around feature: Dynamic Scrolling Link List XML driven Auto wrapping
Circlecube Items at FlashDen
Author: Evan Mullins | Filed under: portfolio
Tags: abstract, actionscript, animation, as2, download, experiment, flash, flashDen, interactive, open source, xml
I have been thinking of different interactions that are possible with objects. If you’ve read this blog at all you’ll know that I’ve played with physics and gravity and throwing balls and bouncing balls and all sorts. But I hadn’t wrapped my head around an interactive spinner. I know it’d be easy to make a slider or something that would apply a spin to an object, but this just isn’t interactive enough for me.
Circle with slider to rotate and button for random spin:
This attempt at spinning is ok. I mean, it spins the object and it even glides to a stop if you press the button for a random spin… But it’s just not intuitive and not fun. But if you want this, here’s how I did it.
Actionscript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| drag = .96;
speed = 0;
slider.handle.onPress = function() {
spinning = false;
//drag along the line
this.startDrag(true, slider.line._x-slider.handle._width/2, slider.line._y-slider.handle._height/2, slider.line._width-slider.handle._width/2, slider.line._y-slider.handle._height/2);
}
slider.handle.onRelease = slider.handle.onReleaseOutside = function() {
this.stopDrag();
}
_root.onEnterFrame = function() {
if (spinning) {
//apply the speed to the rotation
knob._rotation += speed;
//recalculate speed
speed = speed*drag;
//if speed gets unnoticeably tiny just set it to 0
if (Math.pow(speed, 2) < .0001) {
speed = 0;
}
}
else {
//set the rotation from the slider position
knob._rotation = slider.line._x + slider.handle._x + slider.handle._width/2;
}
//spit out feedback continuously
feedbackr.text = knob._rotation;
feedbackaccr.text = speed;
}
spinner.onRelease = function() {
//find a random speed
speed = (Math.random()* 50) - 25;
spinning = true;
} |
I want to grab it and spin it though. I want to apply the same principles from physics, like acceleration and friction as forces to the object, so I can grab to spin and release to watch it glide gracefully to a stop. I’ve been thinking about this and how I’d have to use trigonometry and stuff to do it. One day I finally had the time and tried it out. It took me a minute but I figured out that what I needed was arctangent. So (with pointers from jbum, thanks Jim!) I came up with this:
Interactive grab-able circle to spin and twirl:
This one is much more interactive and intuitive. I really think this is because there are no sliders or buttons, no controls, just an object to interact with. It’s much more like real life!
Steps:
In order to make a grab and spin object
1. You have to know where you grab. The user clicks on the shape (knob) and you must figure out what degree or rotation point they have started at. (atan2)
2. As the knob is clicked and the mouse moves (dragging), calculate new rotation by mouse position
3. When mouse is released figure out the current speed of rotation and apply it to the knob with friction, so it can be thrown and spun in that way. (Of course this is optional, if you just want to spin it when the mouse is down you’re done at step 2)
Actionscript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| damp = .96; //friction
r = 0; //rotation
accr = 0; //speed of rotation
knob.onPress = function() {
dragging = true;
//find mouse y coordinate in relation to knob origin
a = _root._ymouse - knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse - knob._x;
//using arctangent find the spot of rotation (in degrees)
oldr = Math.atan2(a,b)*180/Math.PI;
}
knob.onRelease = knob.onReleaseOutside = function() {
dragging = false;
}
knob.onEnterFrame = function() {
if (dragging) {
//find mouse y coordinate in relation to knob origin
a = _root._ymouse-knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse-knob._x;
//using arctangent find the spot of rotation (in degrees)
r = Math.atan2(a,b)*180/Math.PI;
//use current rotation and previous rotation
//to find acceleration
//averages the acceleration with the
//previous acceleration for smoother spins
accr = ((r - oldr) + accr)/2;
//apply the acceleration to the rotation
knob._rotation += accr;
//remember current rotation as old rotation
oldr = r;
feedbacka.text = a;
feedbackb.text = b;
}
else {
knob._rotation += accr;
//apply friction to acceleration force
//and if acceleration gets tiny, just set it to zero
if (Math.pow(accr, 2) > .0001 ) {
accr *= damp;
}
else{
accr = 0;
}
}
//spit out feedback continuosly
feedbackr.text = knob._rotation;
feedbackaccr.text = accr;
} |
I commented the code to explain what is happening, if you need more just post a comment. Let me know if you find this useful and what you end up making with it.
Downloads:
spin.fla and interactiveSpin.fla
Author: Evan Mullins | Filed under: portfolio, tutorial
Tags: abstract, actionscript, animation, as2, circle cube, download, experiment, flash, game, interactive, open source, tutorial
Overview:
Local Connection
Communication between two separate flash files placed on the same page (or even running simultaneously on one machine) is a nice way to spread a project out. You can send variable, call functions, pretty much do anything in one swf from another. Easiest case use would be a navigation menu set up in one flash file to control the other one containing the content. I’ve made an example here showing how to send text from one to another. I’ve done it both directions here. Send text from the red swf to the blue swf, and from mr. Blue you send to the red flash file. I have named the flash functions in actionscript accordingly (or tried to, now I notice a few places I misspelled receive, ‘i’ before ‘e’, right? oh yea, except after ‘c’)…
Anyways, try out the example here, I made it a little easier by putting a keyListener on ‘Enter’, so you don’t have to actually press the send button. Didn’t realize it before, but this is like a chat app built in flash! So go ahead and chat with yourself to prove that it works!
Execute actionscript in one swf from another! Inter-swf communication.
Example:
Type here to send Red text to Blue flash file
And see it received here, and go ahead and send some back to Red.
Actionscript:
Red:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| // Receiving
//create a local connection for reciept of text
var receiving_lc:LocalConnection = new LocalConnection();
//function called from other swf
receiving_lc.recieveBlueText = function(textRecieved:String) {
feedback.text += textRecieved+"\n";
};
//receive connection of specified name
receiving_lc.connect("fromBlue");
//Sending
sendButton.onRelease = function() {
//create local connection for sending text
var sending_lc:LocalConnection = new LocalConnection();
//put text from input into a var
var textToSend = inputText.text;
//send through specified connection, call specified method, send specified parameter
sending_lc.send("fromRed", "recieveRedText", textToSend);
//set the input empty
inputText.text = "";
} |
Blue:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // Receiving
var receiving_lc:LocalConnection = new LocalConnection();
receiving_lc.recieveRedText = function(textRecieved:String) {
feedback.text += textRecieved+"\n";
};
receiving_lc.connect("fromRed");
//Sending
sendButton.onRelease = function() {
var sending_lc:LocalConnection = new LocalConnection();
var textToSend = inputText.text;
sending_lc.send("fromBlue", "recieveBlueText", textToSend);
inputText.text = "";
} |
And the code to listen to the ‘enter’ key(this is in both files):
1
2
3
4
5
6
7
8
| //Enter button to send
var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if (Key.getCode() == "13") {
sendButton.onRelease();
}
};
Key.addListener(keyListener); |
Download Source:
localConnectionRedBlue.zip
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, as2, download, experiment, flash, open source, tutorial
Here’s a graphic of a circle of men. You may recognize the outline from any public restroom. They’re standing in a corny circle holding hands, like an all over the world theme., let’s just hope they all washed their hands…
I made the graphic a while ago, and have been wanting to interactive-ize it. I’ve really been wanting to play with elasticity, throwing things and snapping to a point… Although I’m still thinking about a version where I’d spin the objects rather than just throw them, I figured I’d put it up for any feedback that comes.
The different pieces all rotate differently and it changes if you are dragging or ‘holding’ them. Then you can press the anchor (gray) button to toggle the snap. The objects will all center around the anchor and spring into place (elasticity applied to position and rotation). And then the interactivity changes and rather than dragging and dropping them, you push and bump or throw them. It almost turns into a game…
Here’s some of the actionscript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| _root.tr = 0;
_root.k = 0.2;
_root.damp = .9;
_root.margin = 150;
_root.heads.ax = 0;
_root.heads.vx = 0;
_root.heads.ay = 0;
_root.heads.vy = 0;
_root.heads.ar = 0;
_root.heads.vr = 0;
_root.heads._x = (Math.random() * (Stage.width + _root.heads._width)) - _root.margin;
_root.heads._y = (Math.random() * (Stage.height + _root.heads._height)) - _root.margin;
//Heads
_root.heads.dragging = false;
_root.heads.onEnterFrame = function() {
if (!_root.center.dragging){
if (_root.heads.dragging){
this._rotation += 1.2;
}
else {
rot = this._rotation + Math.random();
xmouse = _root._xmouse/Stage.width;
this._rotation += rot + xmouse;
}
this._x+=Math.random()*2 - 1;
this._y+=Math.random()*2 - 1;
}
else {
//_root.heads._x = _root.center._x;
//_root.heads._y = _root.center._y;
_root.heads.ax = (_root.center._x - _root.heads._x) * _root.k;
_root.heads.vx += _root.heads.ax;
_root.heads.vx *= _root.damp;
_root.heads._x += _root.heads.vx;
_root.heads.ay = (_root.center._y - _root.heads._y) * _root.k;
_root.heads.vy += _root.heads.ay;
_root.heads.vy *= _root.damp;
_root.heads._y += _root.heads.vy;
_root.heads.ar = (_root.tr - _root.heads._rotation) * _root.k;
_root.heads.vr += _root.heads.ar;
_root.heads.vr *= _root.damp;
_root.heads._rotation+=_root.heads.vr;
}
this.onPress = function() {
startDrag(this, false);
_root.heads.dragging = true;
}
this.onRelease = this.onReleaseOutside = function() {
stopDrag();
_root.heads.dragging = false;
}
this.onRollOver = function() {
if(_root.center.dragging){
startDrag(this, false);
_root.heads.dragging = true;
}
}
this.onRollOut = function() {
if(_root.center.dragging) {
stopDrag();
_root.heads.dragging = false;
}
}
}
//Button
_root.center.dragging = false;
_root.center.onEnterFrame = function() {
this.onPress = function() {
startDrag(_root.center, false);
_root.center.dragging = !_root.center.dragging;
if (_root.center.dragging) {
this.gotoAndStop("on");
}
else {
this.gotoAndStop("off");
}
//var vr:Number = 0;
}
this.onRelease = this.onReleaseOutside = function () {
stopDrag();
//_root.center.dragging = false;
}
} |
Author: Evan Mullins | Filed under: portfolio
Tags: abstract, actionscript, as2, color, experiment, flash, interactive
Author: Evan Mullins | Filed under: portfolio
Tags: actionscript, animation, as2, download, experiment, flash, flashDen, interactive, network, open source, xml
