Posts Tagged ‘animation’
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
Overview
Color can sometimes make or break your design. I’ve put together this flash to show how to set a movieclip to a certain color, I’ve had to do this at runtime and had to go by different values such as a hex number, rgb values and have even wanted to just set a random color, so this example does them all! It’s even nice for translating a Hexadecimal color into RGB color.
Flash uses a Transform object to control certain properties of movie clips. To set color we need to use a Transform object as well as a ColorTransform object. ColorTransform objets are used to, you guessed it, tell the Transform object what color we want to set our clip to. It was a little unintuitive for me to learn, but now it makes sense, or at least enough sense to use.
I’ve made a function that does all this for you. You just send it the movieClip reference and a color.
1
| setColor(myMovieClip, myColor) |
There are functions to convert rgb values to a hex value, and from a hex value to red, blue and green values as well.
To make a random hexadecimal number Math.random() * 16777216 (the total number of hexadecimal numbers)
Steps
- Imports
1
2
| import flash.geom.ColorTransform;
import flash.geom.Transform; |
- Make a Transform object
1
| var myTransform:Transform = new Transform(item); |
- Make a ColorTransform object
1
| var myColorTransform:ColorTransform = new ColorTransform(); |
- Set the rgb color of the ColorTransfrorm object
1
| myColorTransform.rgb = myColor; |
- Set the colorTransform property of the Transform object to your ColorTransform object
1
| myTransform.colorTransform = myColorTransform; |
Flash Color App
Source Actionscript (as2)
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
| //method to set a specified movieClip(item:movidClip) to a specified color(col:hex value number)
function setColor(item, col) {
//make transform object and send the specified movieClip to it
var myTransform:Transform = new Transform(item);
//make colorTransform
var myColorTransform:ColorTransform = new ColorTransform();
//check color bounds
if (col > 16777215) col = 16777215;
else if (col < 0) col = 0;
//variable to hold the color value
var myColor:Number = col;
//set color through color transformation
myColorTransform.rgb = myColor;
myTransform.colorTransform = myColorTransform;
trace("the hex number: 0x" + addZeros(myColorTransform.rgb.toString(16)));
var rgbObject = hex2rgb(myColor);
trace("the hex number in rgb format: "+rgbObject.r+", "+rgbObject.g+", "+rgbObject.b);
trace("the hex number in decimal format: " + myColorTransform.rgb);
displayColors(myColorTransform.rgb);
}
//bitwise conversion of rgb color to a hex value
function rgb2hex(r, g, b):Number {
return(r<<16 | g<<8 | b);
}
//bitwise conversion of a hex color into rgb values
function hex2rgb (hex):Object{
var red = hex>>16;
var greenBlue = hex-(red<<16)
var green = greenBlue>>8;
var blue = greenBlue - (green << 8);
//trace("r: " + red + " g: " + green + " b: " + blue);
return({r:red, g:green, b:blue});
}
//BUTTONS
randomColor.onRelease = function() {
//make random number (within hex number range)
var theColor = Math.floor(Math.random() * 16777215);
//set ball color to random color value
setColor(colorBall.inner, theColor);
}
readHexColor.onRelease = function() {
//convert 6 character input string into hex color format used by actionscript
var theColor = "0x"+hexColorIn.text;
//set ball color to hex color value
setColor(colorBall.inner, theColor);
}
readRGBColor.onRelease = function() {
//convert rgb values into hex value
var theColor = rgb2hex(redColorIn.text, greenColorIn.text, blueColorIn.text);
//set ball color to converted hex color value
setColor(colorBall.inner, theColor);
}
readDecColor.onRelease = function() {
//convert rgb values into hex value
var theColor = decColorIn.text;
//set ball color to converted hex color value
setColor(colorBall.inner, theColor);
} |
Open Source Download
color.zip (containing color.fla and color.swf)
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, animation, as2, color, download, flash, interactive, open source, tutorial
I’ve had a couple inquiries about how to do a simple preloader in Flash. The technique and also the actionscript which implements the technique. So here is a percentage preloader example with source code and a source file to play with.
Overview
So the idea of a preloader is to hold the swf until the file has sufficiently loaded. Once it’s is fully loaded, then the preloader advances to swf to the actual content.
There are different types of preloaders: status preloaders and percentage preloaders. Status preloaders only tell you the status of the loading file. So it will have a simple looping animation like a spinning wheel and you just wait until it is fully loaded. Percentage preloaders will actually tell you how much has been loaded or how much is left and usually will have a bar or something that fills as the file loads or at least tell you in numbers how much has been loaded.
These techniques require the same first few steps. As you can guess, the percentage preloader takes a couple extra steps, but it is much worth the extra few minutes in my opinion. It gives the users valuable information about the program or file they are waiting on. If they are waiting and have no idea how much longer their wait will be, who knows how long they will stick around and watch an hourglass.
In actionscript the only special methods we use for a preloader are getBytesLoaded and getBytesTotal. Once we know the bytes loaded and the total bytes to load, with a little math we calculate what percentage is loaded.
Steps
- Hold the viewers at frame 1
- Check if file is loaded yet (percentLoaded)
- If not loaded, update display (if applicable) and check again
- If loaded, continue
Example
This is a preview, note that it is not actually a preloader, just what one looks like. You can see this preloader working in my Interactive Image Viewer…
Actionscript
I’ve put this code on the preloader movieclip which sits alone on frame one with a simple stop(); actionscript command. Frame 2 contains the beginnings of the actual content. To break down the code, we first see that it is performed every frame: onClipEvent(enterFrame), so every frame we will see how much has loaded. In this case the frame rate is 20 frames per second, so we check the amount loaded every 20th of a second!
First we find the percentLoaded by dividing the total bytes to load by the number of bytes currently loaded. Then we display the percent loaded in a text box named feedback and adjust the xscale of the orange bar according to percentLoaded. Finally we’ll check to see if the percentLoaded has reached 100 yet, and if it has we play the parent clip (which in this case is the root, but it could be used to load numerous objects on the stage). When we play the parent clip, we then go to frame 2 or the actual content of the swf and this preloader is removed from the stage and the code will stop executing. But if percentLoaded is not 100% yet this frame is repeated and the code executes all over again, finding the (hopefully) new number of bytes loaded, and updating the display to inform the user. The code executes so fast that the preloader will actually animate the loading process and inform the user simultaneously.
1
2
3
4
5
6
7
8
9
10
| onClipEvent (enterFrame) {
percentLoaded = _parent.getBytesLoaded() / _parent.getBytesTotal() * 100;
this.feedback.text = "%" + Math.ceil(percentLoaded );
this.bar._xscale = percentLoaded ;
if (percentLoaded => 100) {
_parent.play();
}
} |
Download
FlashDen is hosting this preloader file: Round Preloader Bar
Circlecube Files on FlashDen
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, animation, as2, download, flash, flashDen, 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
