Author Archive
Overview
Integrating the clipboard of the operating system with your flash projects is sometimes essential. It’s a very simple and boils down to one basic method… System.setClipboard(). I’ve found a couple other things help the user experience though, such as selecting the text that gets copied and giving the user some sort of feedback to let them know that the text was successfully copied. Here’s a simple way to do it. Have any suggestions to make it better?
I’ve included an as2 version as well as as3. I’ve promised myself to migrate to as3, so I’m not coding anything in 2 that I don’t do in 3 also. This was to discourage me from coding in as2 and to encourage me to code as3, but also let me learn by doing it in both to see the actual differences if I was stuck doing a project in as2. I figured this could help others see the differences between the two versions of actionscript a bit easier and make their own migration as well!
Steps
- copy to OS clipboard = System.setClipboard(“Text to COPY”) of System.setClipboard(textBoxToCopy.text)
- set selection to text that is copied
- give user feedback
Examples and Source
AS2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| textBox.textBox.text = "Click this text box to copy the text or click the COPY button below. You will see feedback to the user and this text copied to your clipboard!\n\n"+
'copyButton.onRelease = textBox.onPress = function(){\n\tSelection.setFocus("textBox");\n\tSelection.setSelection(0, textBox.text.length);\n\tSystem.setClipboard(textBox.text);\n\ttrace("copied: "+textBox.text);\n\tfeedback("Text Copied!");\n}';
copyButton.onRelease = textBox.onPress = function(){
Selection.setFocus("textBox.textBox");
Selection.setSelection(0, textBox.textBox.text.length);
System.setClipboard(textBox.textBox.text);
trace("copied: "+textBox.textBox.text);
textFeedback("Text Copied!");
}
function textFeedback(theFeedback:String){
feedback.text = theFeedback;
setTimeout(function(){feedback.text="";}, 1200);
} |
AS3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| textBox.text = "Click this text box to copy the text or click the COPY button below. You will see feedback to the user and this text copied to your clipboard!\n\n"+
'function copyText(e:MouseEvent):void{\n\ttextBox.setSelection(0, textBox.text.length)\n\tSystem.setClipboard(textBox.text);\n\ttrace("copied: "+textBox.text);\n\ttextFeedback("Text Copied!");\n}';
//set it so the textBox selection will show even when textBox has no focus
textBox.alwaysShowSelection = true;
textBox.addEventListener(MouseEvent.CLICK, copyText);
copyButton.addEventListener(MouseEvent.CLICK, copyText);
function copyText(e:MouseEvent):void{
textBox.setSelection(0, textBox.text.length)
System.setClipboard(textBox.text);
trace("copied: "+textBox.text);
textFeedback("Text Copied!");
}
function textFeedback(theFeedback:String):void {
feedback.text = theFeedback;
setTimeout(function(){feedback.text="";}, 1200);
} |
Download
Source files: clipboard_as3.fla clipboard_as2+as3.zip
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, AIR, as2, as3, download, experiment, flash, flex, interactive, open source, tutorial
Thanks for your patience as I’ve been tinkering with the theme, layout and css of circlecube.com.
I started with a free theme from Justin Tadlock, Options Theme, available at theme hybrid. I’ve changed that theme quite a bit, from restyling it to fixing bugs I found and updated many other things on the site as well. So the reason I’m going on about it is I think I’m finished… and I’m asking you to let me know if you see anything that looks odd or fishy, or even just want to make a suggestion or comment on how much you like/hate the redesign. Comment on this post or contact me!
And as always, if there’s something you would like me to write about or have questions you can also contact me. I’ve even set up a poll in the sidebar showing post ideas I have which you can vote on and encourage me to write the one(s) you want most first! So let me know what you want, it encourages me to write more as well. And be sure to subscribe to the circlecube rss feed so you won’t miss anything that’s coming up!
Author: Evan Mullins | Filed under: portfolio
Tags: blog, circle cube, css, design, dreamweaver, html, php, web design, website, wordpress
Overview
Voters Aide – a little flash app I made in some spare time to help prioritize the issues and positions for the 2008 presidential election. The app would let uses assign a weight to each of the big issues (0 – 100), and then read each candidates positions on every issue and record to which candidate they leaned (0 -100). The app did all the math then. Simply multiply the weight by their leaning and total it up. So if on the economy (which was reported the heaviest weighted issue overall) you say it is a weight of 90 and you lean one way +25 then your economy position is calculated 25 x .9 toward that candidate (22.5). To get a better understanding of it even though the election is over, go ahead and run through it yourself. I copied the selection of top issues and each candidate’s position from CNN’s website. I even randomized which side each candidate would show up on and left them unmarked so no one would be prejudiced toward their candidate. I wanted uses actual positions and priorities to speak louder than their preconceived preference or bias. I know this is flawed because the candidates position descriptions often were dead a give away, even sometimes saying the candidates name. Ideally it’d be great to simplify the positions but I wasn’t about to try to summarize it all! =)
Now that the election is decided though, I wanted to share what else I learned with this app. I included my google analytics event tracking methods in the voters aide app. So to everyone that has been using the app, I was watching!
Results
I used event tracking to see what weight was applied to every issue, to see which way users leaned on every issue and of course their final calculations which told them who they support. The reports are interesting because they not only tell you how many people apply a weight to an issue, but also what value. They say not only how many users actually continued through each issue and stated which way they lean, but also how far they lean and who they lean to! Not only how many users actually completed voters aide to the final screen which shows their calculation, but also which candidate they supported in voters aide and even by how much!
The results were very interesting in the weights people used to prioritize the issues. Maybe that is because is is easier to visualize? But the issues were ranked in the following order:
|
Label |
Total Events |
Unique Events |
Event Value |
Avg. Value |
| 1. |
economy |
70 |
60 |
5,258 |
75.11 |
| 2. |
education |
63 |
55 |
4,548 |
72.19 |
| 3. |
iraq |
46 |
37 |
3,220 |
70.00 |
| 4. |
energy |
67 |
57 |
4,579 |
68.34 |
| 5. |
taxes |
40 |
38 |
2,641 |
66.02 |
| 6. |
homeland security |
50 |
43 |
3,264 |
65.28 |
| 7. |
health care |
59 |
53 |
3,789 |
64.22 |
| 8. |
afghanistan |
64 |
47 |
4,068 |
63.56 |
| 9. |
housing |
50 |
39 |
3,125 |
62.50 |
| 10. |
social security |
33 |
29 |
2,009 |
60.88 |
| 11. |
abortion |
92 |
58 |
5,544 |
60.26 |
| 12. |
environment |
56 |
48 |
3,324 |
59.36 |
| 13. |
iran |
40 |
37 |
2,266 |
56.65 |
| 14. |
free trade |
41 |
36 |
2,224 |
54.24 |
| 15. |
israel |
38 |
36 |
2,048 |
53.89 |
| 16. |
guns |
49 |
42 |
2,461 |
50.22 |
| 17. |
russia |
31 |
25 |
1,550 |
50.00 |
| 18. |
stem cell research |
27 |
26 |
1,296 |
48.00 |
| 19. |
LBGT |
37 |
31 |
1,750 |
47.30 |
| 20. |
immigration |
38 |
33 |
1,749 |
46.03 |
| 21. |
cuba |
57 |
47 |
2,151 |
37.74 |
Here is an example of the report for the most important issue, economy. It stats which candidate had the users support and even how many times and the average value.
|
Label |
Total Events |
Unique Events |
Event Value |
Avg. Value |
| 1. |
supportmccain |
26 |
24 |
1,545 |
59.42 |
| 2. |
supportobama |
23 |
19 |
1,435 |
62.39 |
| 3. |
supportno |
2 |
1 |
0 |
0.00 |
I’ll go ahead and say, (although the app was not designed to predict the president or even considered your location, it just counted how many times it reported to users which candidate they leaned towards) according to Voters Aide, John McCain would have won the election. So more people who used Voters Aide lean McCain in the end, once they get to the end of the issues. I’d have to add that this is a very small sample size and even if it were larger, I never tested the app for usability and user understanding, so the end result doesn’t mean that much in the end. But as you will be curious here is the report for the final page events:
|
Label |
Total Events |
Unique Events |
Event Value |
Avg. Value |
| 1. |
JOHN MCCAIN |
27 |
21 |
2,239 |
82.93 |
| 2. |
BARRACK OBAMA |
19 |
15 |
1,555 |
81.84 |
| 3. |
NO ONE |
12 |
10 |
1,200 |
100 |
Anyways, great election. I hope all this change will be a change for the better.
Congratulations to everyone who is excited about the future & condolences to everyone lamenting the end of the world.
Author: Evan Mullins | Filed under: tutorial
Tags: analytics, experiment, flash, review
Sally, a great photographer in the Augusta, GA area wanted help putting up a website that was easy to maintain and looked professional. I helped her out and set her up with a wordpress install, some essential plugins and a few themes! She is ecstatic!
Check out the site here: http://sallykolar.com/ and book her if you’re in the area and want great photography!
Author: Evan Mullins | Filed under: portfolio
Tags: blog, css, design, html, network, photography, portfolio, web design, website, wordpress
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
Anyway, I also made Parallax Effect in AS3, it’s pure AS3 class. And I...
