Posts Tagged ‘open source’
Flashvars and actionscript 3! Flashvar is a way that in your html embed codes (object tags) you can send variables and values into your swf file. These variables can then be grabbed internally and used your programming! Examples of these could be images that you want to use in your swf but don’t want to import or hardcode them into the flash file or paths to xml or flv files to use as well. Actionscript 3 has a different procedure than as2 did as to how you read these flashvars from the actionscript side. The embed codes and html side of things are still the same, but in case your new to actionscript altogether, I’ll give an example of the html as well.
1
2
3
| <object width="200" height="200" type="application/x-shockwave-flash" data="flashvars_as3.swf">
<param name="flashvars" value="colors=0x012345,0x123456,0x234567,0x345678,0x456789,0x567890,0x678901,0x789012&delay=.11&loop=true&random=false"/>
</object> |
In actionscript 3 we use the loaderInfo object to access the flashvars. The parameters Object of the loaderInfo will contain all the flashvar variables and values.
1
| this.loaderInfo.parameters |
As an example of something that is visual I’ve created this little app to read some options from flashvars about colors. An app that will read a list of colors and update a box that is on the stage already to those colors with the specified delay. I always have fun with randomness so I threw in the option for random colors as well. This file looks for certain flashvars: color, loop, delay and random. These are the keys or names of the variables and they are followed by the values you want them to hold. Note that flashvars can be set in any order, so you don’t have to start with color and end with random.
In this example I’m looking for 4 flashvars specifically (in any order):
- colors:String – a comma delimited list of hex colors or simply a string “random” for randomly generated colors (the hex for black #000000 needs to be 0×000000 in flash) (default is random)
- loop:Boolean – whether or not to repeat these colors (default is true)
- delay:Number – the delay between colors (in seconds). (default is 1 second)
- random:Boolean – determines whether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)
This is much more than is required for this example, but I was having fun playing with random colors and timing and options. I figured it diesn’t hurt to show the effect you can have with a couple different variables on one file. Here is an example using the object tags above:
And here are some more (please don’t have a seizure!)
Here’s the full source if you’re interested:
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| /*
circlecube.com
App to demonstrate the process of getting flashvars from embed code to actionscript (as3)
Displays colors specified.
looking for 4 flashvars specifically (in any order):
colors:String - a comma delimited list of hex colors or simply a string "random" for randomly generated colors (the hex for black #000000 needs to be 0x000000) (default is random)
loop:Boolean - wether or not to repeat these colors (default is true)
delay:Number - the delay between colors (in seconds). (default is 1 second)
random:Boolean - determines wether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)
*/
//initialize vars
var myflashvars:Object = new Object()
var myColors:Array = new Array("random");
var myLoop:Boolean = true;
var myDelay:Number = 1;
var randomOrder:Boolean = false;
var allRandom:Boolean = false;
//read flashvars in actionscript3
//if colors flashvars doesn't exist use these defaults
if (!this.loaderInfo.parameters.colors){
myflashvars = {colors: "random", delay: 1};
}
else{
myflashvars = this.loaderInfo.parameters;
}
//assign flashvars to variables within flash
for (var item:String in myflashvars) {
trace(item + ":\t" + myflashvars[item]);
if (item == "colors"){
myColors = myflashvars[item].split(',');
}
else if(item == "loop"){
myLoop = parseBoolean(myflashvars[item]);
}
else if(item == "delay"){
myDelay = myflashvars[item];
}
else if(item == "random"){
randomOrder = parseBoolean(myflashvars[item]);
}
}
//use my variables!
if (myColors[0] == "random"){
allRandom = true;
}
var counter:Timer = new Timer(myDelay * 1000);
counter.addEventListener(TimerEvent.TIMER, nextColor);
trace ("color number: 0", "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);
counter.start();
stop();
function nextColor(e:Event):void{
//cycle through colors
if (!allRandom && !randomOrder){
if (counter.currentCount+2 > myColors.length){
if (myLoop == true || myLoop == "true"){
counter.reset();
counter.start();
}
else{
counter.stop();
}
}
trace ("color number: "+counter.currentCount, "color hex: "+myColors[counter.currentCount]);
setColor(myBox, myColors[counter.currentCount - 1]);
}
//randomly select a color from the myColors array
else if (!allRandom && randomOrder){
var randomColor = Math.floor(Math.random() * myColors.length);
trace ("random number: "+randomColor, "color hex: "+myColors[randomColor]);
setColor(myBox, myColors[randomColor]);
}
//randomly create colors
else{
trace ("number: "+counter.currentCount, "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);
}
}
function setColor(item:DisplayObject, col):void{
if (col == "random"){
setRandomColor(item);
}
else{
setHexColor(item, col);
}
}
function setHexColor(item:DisplayObject, col:Number):void {
var myColor:ColorTransform = item.transform.colorTransform;
//check color bounds
if (col > 16777215) col = 16777215;
else if (col < 0) col = 0;
myColor.color = col;
item.transform.colorTransform = myColor;
}
function setRandomColor(item:DisplayObject):void{
setColor(item, (Math.floor(Math.random() * 16777215)));
}
function parseBoolean(str:String):Boolean
{
switch(str.toLowerCase())
{
// Check for true values
case "1":
case "true":
case "yes":
return true;
// Check for false values
case "0":
case "false":
case "no":
return false;
// If all else fails cast string
default:
return Boolean(str);
}
} |
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, as2, as3, color, download, experiment, flash, html, open source, tutorial, web design
I’ve written a tutorial which is published over at flash.tutsplus. This tutorial demonstrates how to create a horizontally scrolling image viewer and covers xml parsing, loading and resizing external images, and creating intuitive and responsive scrolling!
You’ll find full source code available for download as well as the demo files and step by step milestones all throughout the tutorial.
Author: Evan Mullins | Filed under: portfolio, review, tutorial
Tags: actionscript, animation, as3, design, download, experiment, flash, interactive, open source, physics, portfolio, review, tutorial, usability, website, xml
Interactive Design project for StomperNet’s tease of the announced reveal on 09/09/09 at 09:09:09!
“Online Marketing Changes Forever!”
Wanted it to be unexpected, and I think we hit it! Check it out live at stomper999.com!
Details:
For this project I used flash, html, css and javascript. Tweener for the fading effects. Found a nice stock flash from flashDen for the countdown and used jquery and the easing and color plugins.
Author: Evan Mullins | Filed under: portfolio
Tags: abstract, actionscript, animation, as3, color, css, flash, flashDen, html, interactive, javascript, open source, physics, stompernet, web design, website, work
Here is a preview of a file I’m writing a tutorial for. It’s nothing groundbreaking, but it deals with many normal tasks and will show my process a bit. This tutorial will show how to create a horizontally scrolling image viewer. It will cover xml loading & parsing, loading & resizing external images to fit into a scrollable container, and creating intuitive and responsive scrolling!
Let me know what you think, and if there’s anything you want specifically mentioned/explained in it I’ll do my best! Or if you have any ideas of how this could be improved.
Update: The article/tutorial has now been published follow the link to theTutorial to Create a Responsive Image Scroller in ActionScript 3.0
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, animation, download, experiment, flash, interactive, open source, portfolio, tutorial, usability, web design, xml
A specific use of drag and drop which is a bit more complicated than your average drag & drop needs is a slider. You can use components, but I usually prefer using my own graphics and code, partly because the components tend to bloat the filesize of the swf and partly because that’s just how I am, I like to make it myself. Many projects I’ve worked on require sliders as a form of user input, such as a volume control in my video player, or the inputs for my Voter’s Aide app that let users assign value to issues in the 2008 presidential election. I figured I’d just pull out the code I used with the sliders there, since it was already done. The issue with sliders is we need to restrict the dragging to a certain area, which in itself is a line of code, but I also prefer to allow users to click the actual bar as well for quick selection.
Example
Vertical Slider Steps
The vertical slider here goes from 0 – 100. We need to drag the handle but have it restricted to the slider, so users won’t be confused when they click and drag the handle off the slider and break it. We want to click the background bar of the slider and have the handle snap to that place, and we need to be able to see what value the slider holds (0 – 100). I made this code to be pretty reusable, as long as the slider is set up in similar fashion.
- Make graphics for slider bg and handle
- Put the graphics into a slider mc
- Place them each at 0,0 and center their registration points (for easier control and code later)
- Assign button mode to handle and bar (for better usability)
- Add Mouse Down Event Listener for handle and bar and assign press function
- In bar press function set position of handle according to mouse position, and then call the handle press function
- In handle press function remove the Mouse Down listeners and add stage mouse event listeners for both mouse Up and Move (Stage listeners emulate onReleaseOutside (from as2) and also provide more accurate results)
- Define dragging area as a rectangle(x, y, width, height), if you’ve do the set up earlier it should be close to Rectangle(0,0,0,slider.bar.height);
- Begin dragging handle and apply the drag area limiting rectangle
- Mouse Move function find value (should simply be the handle’s y position) and updateAfterEvent for smooth animation
- Mouse Release function remove stage listeners, re-add the listeners to the slider and stop dragging
Actionscript (as3)
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
| // Vertical Slider
sliderVertical.handle.buttonMode = true;
sliderVertical.bar.buttonMode = true;
sliderVertical.handle.addEventListener(MouseEvent.MOUSE_DOWN, verticalHandlePress);
sliderVertical.bar.addEventListener(MouseEvent.MOUSE_DOWN, verticalBarPress);
function verticalBarPress(e:MouseEvent):void{
sliderVertical.handle.y = sliderVertical.mouseY;
verticalHandlePress(e);
}
function verticalHandlePress(e:MouseEvent):void {
sliderVertical.handle.removeEventListener(MouseEvent.MOUSE_DOWN, verticalHandlePress);
sliderVertical.bar.removeEventListener(MouseEvent.MOUSE_DOWN, verticalBarPress);
stage.addEventListener(MouseEvent.MOUSE_UP, verticalHandleRelease);
stage.addEventListener(MouseEvent.MOUSE_MOVE, verticalHandleDrag);
//limit dragging area
var verticalDragArea:Rectangle = new Rectangle(0, 0, 0, -sliderVertical.bar.height+1);
sliderVertical.handle.startDrag(false, verticalDragArea);
}
function verticalHandleRelease(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_UP, verticalHandleRelease);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, verticalHandleDrag);
sliderVertical.bar.addEventListener(MouseEvent.MOUSE_DOWN, verticalBarPress);
sliderVertical.handle.addEventListener(MouseEvent.MOUSE_DOWN, verticalHandlePress);
sliderVertical.handle.stopDrag();
updateVNumber();
}
function verticalHandleDrag(e:MouseEvent):void{
e.updateAfterEvent();
updateVNumber();
}
function updateVNumber():void{
sliderVertical.sliderValue = sliderVertical.stat.htmlText = Math.abs(sliderVertical.handle.y);
sliderVertical.stat.y = sliderVertical.handle.y - sliderVertical.handle.height/2;
} |
Horizontal Slider Steps
Pretty much the same as the vertical slider, but adjust heights and y positions to widths and x positions. Note in this example I have a range of (-100 to 100) and to accomplish the bar I just reused the same on flipping it around, so here we have the handle, the barLeft and the barRight. I use both of these combined to calculate the limiting rectangle area.
Actionscript (as3)
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
| // Horizontal Slider
sliderHorizontal.handle.buttonMode = true;
sliderHorizontal.barLeft.buttonMode = true;
sliderHorizontal.barRight.buttonMode = true;
sliderHorizontal.handle.addEventListener(MouseEvent.MOUSE_DOWN, horizontalHandlePress);
sliderHorizontal.barLeft.addEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);
sliderHorizontal.barRight.addEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);
function horizontalBarPress(e:MouseEvent):void{
sliderHorizontal.handle.x = sliderHorizontal.mouseX;
horizontalHandlePress(e);
}
function horizontalHandlePress(e:MouseEvent):void {
sliderHorizontal.handle.removeEventListener(MouseEvent.MOUSE_DOWN, horizontalHandlePress);
sliderHorizontal.barLeft.removeEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);
sliderHorizontal.barRight.removeEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);
stage.addEventListener(MouseEvent.MOUSE_UP, horizontalHandleRelease);
stage.addEventListener(MouseEvent.MOUSE_MOVE, horizontalHandleDrag);
//limit dragging area
var dragArea:Rectangle = new Rectangle(-sliderHorizontal.barLeft.width+1, 0, sliderHorizontal.barLeft.width+sliderHorizontal.barRight.width-2, 0);
sliderHorizontal.handle.startDrag(false, dragArea);
}
function horizontalHandleRelease(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_UP, horizontalHandleRelease);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, horizontalHandleDrag);
sliderHorizontal.handle.addEventListener(MouseEvent.MOUSE_DOWN, horizontalHandlePress);
sliderHorizontal.barLeft.addEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);
sliderHorizontal.barRight.addEventListener(MouseEvent.MOUSE_DOWN, horizontalBarPress);
sliderHorizontal.handle.stopDrag();
updateHNumber();
}
function horizontalHandleDrag(e:MouseEvent):void{
e.updateAfterEvent();
updateHNumber();
}
function updateHNumber():void{
sliderHorizontal.sliderValue = sliderHorizontal.stat.htmlText = sliderHorizontal.handle.x;
sliderHorizontal.stat.x = sliderHorizontal.handle.x - sliderHorizontal.handle.width;
} |
Source
source as3dragdrop-sliders.fla file
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, AIR, animation, as3, flash, flex, interactive, open source, tutorial, usability, web design
