Posts Tagged ‘abstract’
I’ve had quite a few questions about how to make depth in flash. Earlier (like, 2 years ago) I put up an experiment file to give some interactive depth to some sketchbook sketches, see Floating Sketches. I’ve finally gotten around to translating that into as3. It’s still the same basic idea, Create layers of levels, and have each one respond to the mouse a little differently. The ‘closer’ depths will move faster while the farther away depths will be slower. A simple technique called Parallax.
- Seperate the scene into layers
- Place the layers in the correct depth
- Make closer layers react fast and farther layers slower
Example
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
91
92
| //define number of layer.
var numLayers:uint = 15;
//number of items in a layer
var numBallsPerLayer:uint = 100;
var defaultBallSize:uint = 25;
var stageWidth3d:uint = 800;
var stageHeight3d:uint = 800;
var layers:Array = new Array();
//init
makeMatrix();
//3d created by layers and placing objects on each layer - the layer has it's own distance, simulated by movement and alpha
function makeMatrix():void {
//walk through desired number of layers
for (var layerNum:uint=0; layerNum<numLayers; layerNum++){
//make layer object to add balls to
var thisLayer:MovieClip = new MovieClip();
addChild(thisLayer);
layers.push(thisLayer);
//create desired number of balls per layer
for (var ballNum:uint=0; ballNum<numBallsPerLayer; ballNum++){
//trace("layer: "+layerNum +"; ball: "+ballNum);
var c1:Number = randomColor();
var c2:Number = randomColor();
//create ball
var thisBall:MovieClip = new MovieClip();
thisBall.graphics.beginFill(c1, .9);
thisBall.graphics.lineStyle(defaultBallSize/3, c2, .9);
thisBall.graphics.drawCircle(defaultBallSize, defaultBallSize, defaultBallSize);
thisBall.graphics.endFill();
//apply filter to ball
var myGradientGlowFilter = new GradientGlowFilter(0,
0,
[c1, c2, c1],
[0, .9, 1],
[0, 63, 255],
20,
20,
.9,
BitmapFilterQuality.HIGH,
BitmapFilterType.OUTER,
false);
var myBlurFilter = new BlurFilter((numLayers-layerNum)/numLayers*5, (numLayers-layerNum)/numLayers*5, 1);
var filtersArray:Array = new Array(myGradientGlowFilter, myBlurFilter);
thisBall.filters = filtersArray;
thisLayer.addChild(thisBall);
//coordinates
thisBall.x = Math.random() * stageWidth3d * layerNum;
thisBall.y = Math.random() * stageHeight3d * layerNum;
//size
thisBall.scaleY = thisBall.scaleX = layerNum/numLayers * (Math.random() + 1);
//ball animation
thisBall.layer = layerNum;
thisBall.addEventListener(Event.ENTER_FRAME, animateBall);
}
//layer depth/alpha
thisLayer.alpha = layerNum/numLayers;
}
//listeners to animate from mouse movement
addEventListener(Event.ENTER_FRAME, positionLayer);
}
var easingStrength:Number = 10;
function positionLayer(e:Event):void{
for (var layerNum:uint=0; layerNum<numLayers; layerNum++){
//move layers according to mouse poosition
var xv:Number = (stage.stageWidth-layers[layerNum].width)/stage.stageWidth;
layers[layerNum].x -= (layers[layerNum].x - xv * mouseX) / easingStrength;
var yv:Number = (stage.stageHeight-layers[layerNum].height)/stage.stageHeight;
layers[layerNum].y -= (layers[layerNum].y - yv * mouseY) / easingStrength;
}
}
function animateBall(e:Event):void{
e.target.x += (Math.random() - .5) * 2 * e.target.layer/numLayers;
e.target.y += (Math.random() - .5) * 2 * e.target.layer/numLayers;
}
function randomColor():Number{
return Math.floor(Math.random() * 16777215);
} |
Source
depth.fla
Author: Evan Mullins | Filed under: tutorial
Tags: 3D, abstract, animation, as3, collage, color, download, experiment, flash, game, interactive, open source, tutorial
I’ve re-purposed an old project of mine, the interactive pog portfolio viewer, to FlashDen. I call it the pog portfolio because each work is represented by a circle, or pog, and you play ith it in the “bay” with different interactive physics configurations. When you click a pog you can view a close up image of that item and more details. The whole file has been cleaned up (code and graphics) and documented for easy customizations.It is a small file size as well, under 36kb swf!
This is mainly an image viewer, stay tuned for any updates, like video support etc.
Works and configuration loaded in through a single xml file. Select works from the bay to view title, description image and a link (if applicable). Organize works with the tags or select all and choose the physics of the bay for interactivity control (gravity, spring, grid and friction).
It is fully customizable and fully driven by xml. The xml file contains values for configuring the swf, and also all the information about each work to be included in the portfolio.
Each work is loaded into the “bay�? as a round thumbnail or “pog�?. These pogs are animated with the interaction options (gravity, friction, spring and grid). The pogs are sortable by tags (parsed in from the xml).
The whole color scheme of the image viewer is configurable, or can even be set to random! Have a different color scheme every time your image viewer loads!
Clicking a pog in the interactive bay sends that thumb to the holding area and loads the close up into the focus window for that work. It also loads the details about that work into the detail box (to the right of the focus box). Each works needs a 50×50 thumbnail and a close up (max 375px x 270px) image. Focus images are all loaded in with an informative preloader and fade is once loaded.
Site easily integrates with Google Analytics to track user interactions within this flash portfolio!
All works in the portfolio are passed in through an external xml file, here is a sample work node from xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!-- Name or Title of work -->
Random Gear
<!-- Description of work -->
Random gear photograph from FlashDen assets.
<!-- Image paths (thumb and focus) are both constructed with the directory names above, or you can use an absolute path (http://flashden.net/new/images/pictures/icon_newsroom.gif) -->
<!-- Image thumbnial, this is brought in and masked to a circle (width:50px x height:50px) -->
random_gear.jpg
<!-- Focus thumbnail, loaded into the Focus Box when pog is clicked (max width:375px x height:270px) -->
random_gear.jpg
<!-- If a link exsists place it here the Text goes in the title node and the url in the url, if no link leave empty -->
http://flashden.net
<!-- Tags for this work. Tags are parsed and displayed across the bottom of the bay (seperated by a pipe '|') -->
Photo|Industrial |
Enjoy, and let me know what you think!
Circlecube Files on FlashDen
Author: Evan Mullins | Filed under: portfolio
Tags: abstract, actionscript, analytics, animation, as2, circle cube, color, download, experiment, flash, flashDen, game, interactive, open source, physics, portfolio, review, web design, work, xml
StomperNet now has a site map. Only it’s much bigger than just a site map, we’re calling it Stomper Universe! It contains all the pieces parts that make up StomperNet. It links to different sites, video series, tools, and more by giving a 3D interactive space to inspect the thumbnails and click through to the sites! It will help visitors navigate easily to all areas of StomperNet, whether they are new to them or old favorites.
So go check out the StomperNet Universe now!
Author: Evan Mullins | Filed under: portfolio, work
Tags: 3D, abstract, actionscript, animation, as3, flash, interactive, stompernet, web design, website
Overview
Having things drift around or move randomly has always interested me. Having an animation that is never going to be the exact same thing is very exciting. The focus turns from key-ing exact animations to programming a feel and letting the animations take car of themselves! One type of seemingly random motion is Brownian motion. This gives the movement a random walk wandering look, it will just drift around with no real direction.
Steps
Step by step this process is very simple. In every random motion you create the random number, and apply it to the property. If you want constant random action (motion) rather than just random placement, you repeat that over and over.
- Make a random number (random velocity)
- Apply the random number (apply velocity to property)
- Repeat (if needed)
To create a random number in actionscript, use Math.random(), which creates a random number between 0 and 1. Usually you’ll want to scale it to a range you want to use. If you want a number between 50 and 100, you’d do Math.random() * 50 + 50. *50 to scale it to 0-50, and + 50 to bring it up to 50 – 100. Also if we want to get a 100 range around 0 (-50 – 50) we would do Math.random() * 100 – 50. In the code below I’ve abstracted this to Math.random() * this.randomRange – this.randomRange/2.
Example
Here I’ve got dots created and placed randomly, with randomly set scale and alpha. On every frame each dot has a random velocity applied to it’s x and y coordinates.
The yellow dot is the simple example (code below) and the rest are included in the complex example below.
Actionscript
Simple Example:
1
2
3
4
5
6
7
8
| dotOne.onEnterFrame = function() {
//create a random velocity for x and y direction
vx = Math.random() * 4 - 2;
vy = Math.random() * 4 - 2;
//apply velocity to coordinates
this._x += vx;
this._y += vy;
} |
Complex example:
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
| var numDots = 25;
var randomRange = 1;
for(var i=1; i<=numDots; i++) {
//create a new dot
duplicateMovieClip(_root.dot, "dot"+i, i);
//save it's ref path for use
theDot = _root["dot"+i];
//give it random coordinates
theDot._y = Math.random() * Stage.height;
theDot._x = Math.random() * Stage.width;
//give each dot a distinct random range
theDot.randomRange = i/numDots;
//give each dot a random size and transparency
theDot._xscale =
theDot._yscale =
theDot._alpha = i*4;
//apply this code on the dot every frame
theDot.onEnterFrame = function() {
//create a random velocity for x and y direction within the specifically created random range for each dot
vx = Math.random() * this.randomRange - this.randomRange/2;
vy = Math.random() * this.randomRange - this.randomRange/2;
//apply velocity to coordinates
this._x += vx;
this._y += vy;
}
} |
Download
randomMotion.fla
Author: Evan Mullins | Filed under: tutorial
Tags: abstract, actionscript, animation, as2, download, experiment, flash, open source, tutorial
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
