Posts Tagged ‘open source’
I’ve had that exact task numerous time while scripting actionscript. I have a source image loaded externally or a mc within the program and I need to fit it into a certain area (width x height) but keep the aspect ratio the same or as photoshop calls it “constrain proportions”. I’ve done this with fancy and not so fancy formulas and equations, but finally I had it and created a simple function that would do it every time. Figured it was worth sharing cause if I’ve googled it before then others most likely will too!
This is more than just setting the width and height of an object, because that way the image is easily skewed and the natural proportions are messed up. If you want to just use scale you need to know the dimensions of the image being resized, and that’s just not scalable (no pun intended).
What we have to do is to do both. Assign the width and height to skew it, and then scale it to correct the proportion. So if we want to resize an image when we don’t know it’s current size to fit into a 300 pixel square we set the width and height of that image to 300 and then a bit of logic that can be summed up in one line:
1
| mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY; |
That says if the x scale is larger than the y scale set the x to the y scale amount, and vice versa. It’s basically setting both scales to the smaller of the two. This works because we don’t know the original size of the image, but actionscript does. scaleX and scaleY are ratios of the current width and height to the originals. A little complicated I know, but that’s why I’ve made the function below. I know how to use it and now I don’t have to think about skewing and then scaling back to keep my aspect ratio or proportion. You should see how to use it just by looking at it:
1
| resizeMe(mc:MovieClip, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true) |
Pass in the movieClip you want to resize, and the size you want it to fit into. So with the same example above, just do
Example
Here’s an interactive example to show what I mean. It loads an external image and you click and drag the mouse around to resize it. To toggle whether you want to constrain proportions use the space bar. Type a url to any image you want to test it with and press load, or hit ‘enter’.
Here’s a screenshot of me playing with a photo in here NOT constraining proportions.
Source (AS3)
The resizing function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| //The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:MovieClip, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true):void{
maxH = maxH == 0 ? maxW : maxH;
mc.width = maxW;
mc.height = maxH;
if (constrainProportions) {
mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
}
} |
The full source
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
| var defaultUrl:String = "http://blog.circlecube.com/wp-content/uploads/2008/11/circlecubelogo4.png";
var image:MovieClip = new MovieClip();
loadImage();
function loadImage(url:String=""):void {
if (url == "" || url == defaultToLoadString) url = defaultUrl;
//clear image
image.visible = false;
image = new MovieClip();
//add image
var ldr:Loader = new Loader();
var urlReq:URLRequest = new URLRequest(url);
trace("loading image: " + url);
ldr.load(urlReq);
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, imageCompleteHandler);
image.addChild(ldr);
addChild(image);
}
function imageCompleteHandler(e:Event):void {
resizeMe(image, stage.stageWidth)
}
//The resizing function
// parameters
// required: mc = the movieClip to resize
// required: maxW = either the size of the box to resize to, or just the maximum desired width
// optional: maxH = if desired resize area is not a square, the maximum desired height. default is to match to maxW (so if you want to resize to 200x200, just send 200 once)
// optional: constrainProportions = boolean to determine if you want to constrain proportions or skew image. default true.
function resizeMe(mc:MovieClip, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true):void{
maxH = maxH == 0 ? maxW : maxH;
mc.width = maxW;
mc.height = maxH;
if (constrainProportions) {
mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
}
}
var constrainOn:Boolean = true;
var isPressed:Boolean = false;
stage.addEventListener(MouseEvent.MOUSE_MOVE, moved);
stage.addEventListener(MouseEvent.MOUSE_DOWN, pressed);
stage.addEventListener(MouseEvent.MOUSE_UP, released);
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
function keyDownListener(e:KeyboardEvent) {
if (e.keyCode == 32){//spacebar
toggled(e);
}
if(e.keyCode == 13){//enter
loadImagePress(e);
}
}
function moved(e:Event):void{
if (isPressed)
resizeMe(image, mouseX, mouseY, constrainOn);
}
function pressed(e:MouseEvent):void{
isPressed = true;
moved(e);
}
function released(e:MouseEvent):void{
isPressed = false;
}
function toggled(e:Event):void{
constrainOn = !constrainOn;
moved(e);
}
var defaultToLoadString:String = "type url of image to load";
toLoad.text = defaultToLoadString;
toLoad.addEventListener(FocusEvent.FOCUS_IN, toLoadFocus);
toLoad.addEventListener(FocusEvent.FOCUS_OUT, toLoadBlur);
function toLoadFocus(e:FocusEvent):void{
if (toLoad.text == defaultToLoadString)
toLoad.text = "";
}
function toLoadBlur(e:FocusEvent):void{
if (toLoad.text == "")
toLoad.text = defaultToLoadString;
}
loadBtn.addEventListener(MouseEvent.CLICK, loadImagePress);
function loadImagePress(e:Event):void{
loadImage(toLoad.text);
} |
Download
constrainProportions.fla
And as usual, let me know if you’ve got any comments questions or suggestions! Thanks,
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, as3, experiment, flash, interactive, open source, tutorial, web design
Overview
Earlier I wrote a tutorial article about asfunction in as2. Now that I’ m into as3, surprise surprise asfunction has been depreciated and now to replace it is the LINK TextEvent. Dispatched when a user clicks a hyperlink in an HTML-enabled text field, where the URL begins with “event:”. The remainder of the URL after “event:” will be placed in the text property of the LINK event.
This differs from the asfunction method in that we must add an event listener (addEventListener) to the textField object, the event listener specifies which function will be called in the event of a link click and there is no way to send arguments along with the event (AFAIK). But it’s easy enought to use one link event function for all your link events and put in a simple switch statement to coordinate the desired results…
Steps
- Use event in the href attribute. (href=”event:eventText”)
- Listen to the textField (theTextField.addEventListener(TextEvent.LINK, linkHandler);)
- Handle the link event (function linkHandler(linkEvent:TextEvent):void {…)
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
| var myHTMLText:String = "Sample text in an html enabled text box.\n"+
"Here's a normal link to <a href='http://bloc.circlecube.com'>circlecube</a> putting the link into the href attribute like normal!\n"+
"<a href='event:clickLink'>Click this circlecube</a>, to see the text event link in action! \n"+
"And some more links that don't go anywhere, but they do call functions in actionscript. "+
"Click this to move <a href='event:moveUp'>UP</a>, click me move back "+
"<a href='event:moveDown'>DOWN</a>.\n"+
"Also, one last example <a href='event:testing'>click for a trace test</a>";
//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'});
myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'});
myHTML.styleSheet = myCSS;
myHTML.htmlText = myHTMLText;
myHTML.addEventListener(TextEvent.LINK, linkHandler);
function linkHandler(linkEvent:TextEvent):void {
switch (linkEvent.text) {
case "clickLink":
clickLink();
break;
case "moveUp":
moveUp();
break;
case "moveDown":
moveDown();
break;
default:
giveFeedback(linkEvent.text);
}
}
//function to be called from html text
function clickLink():void {
giveFeedback("Hyperlink clicked!");
var myURL:String = "http://blog.circlecube.com";
var myRequest:URLRequest = new URLRequest(myURL);
try {
navigateToURL(myRequest);
}
catch (e:Error) {
// handle error here
giveFeedback(e);
}
}
//another function to be called from html text, recieves one argument
function moveUp():void {
feedback.y -= 10;
giveFeedback("Up");
}
//a simple trick to allow passing of multiple arguments
function moveDown():void {
feedback.y += 10;
giveFeedback("Down");
}
function giveFeedback(str):void {
trace(str);
feedback.appendText(str +"\n");
feedback.scrollV = feedback.maxScrollV;
} |
Source
Download the fla here: textlinkevent_as3.fla
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, as3, css, download, flash, flex, html, interactive, open source, tutorial, web design
I’ve been thinking about this blog and what kind of content I want to be creating for the world and yes, you. I really enjoy creating working tutorials and open source project or components available to download and learn from. I make these available so that you are able to pick it apart and hopefully learn something from it. And in the best of scenarios it helps you solve some problem in one of your own projects, or you contact me and are able to teach me a better way I could have done it (my personal favorite). There are no shortcuts to this kind of stuff. Learning is a process, and the way I learn (especially when it’s related to flash) is to get my hands on something that already works and pick it apart. So that’s what I try to provide in my “tutorials”- I use the term loosely because, they aren’t really walkthroughs per say, but more working examples for you to look into and see how it has to (or at least could) fit together and work. I have really enjoyed the direction I’ve gone with the blog, and to get to my point…
I have also learned a lot of what I know from books. Reading books and understanding the whys to all the ways things are done in actionscript has helped me a lot. It may have been an epiphany, but I thought – why not share the ones that have made the biggest support for me, or at least list the books that sit the closest to my keyboard when I am working through a project.
So books are good. I will be continuing with my tutorials and open source working examples and put up as much code as I can, but I want to also talk about where I learn some of the things I learn.
So if you follow the blog, thanks! You’ll start to see a larger variety in posts. Dare I put this in writing but I’m also trying to increase the frequency of posts. I’ve been pretty good at getting at least one post a week, so I’ll try to bump it up to at least 1 and a half posts a week 
Go ahead and subscribe to my feed if you want to be sure not to miss any of them, and please jump back to the posts when it’s interesting and let me know, comment with any books that have helped you better understand you specialty.
Author: Evan Mullins | Filed under: personal
Tags: blog, book, open source, review
See my previous post about how to do this with as2: Detect Flash Player Version | Actionscript based detection method (as2)
Overview
Recently I had a requirement that I had to detect which version of the flash player was currently installed. This is a normal thing, we do it all the time when embedding flash into html, we detect which version of the player is installed and if the user has an old version they are invited to upgrade…
But what about finding the flash version from within flash? An actionscript based detection method? I hadn’t ever thought about doing that…
Actionscript 3 now uses the flash system capabilities class to report all it’s “capabilities”. First we have to import it and then we have access to all the details through the Capabilities object, such as operating system, language, pixel aspect ration and flash player version. There are a ton of others and I’ve included them in the trace statements.
Steps
- import the class
1
| import flash.system.Capabilities; |
- read the version from the Capabilities object
1
| var flashPlayerVersion:String = Capabilities.version; |
This returns a string, 3 letter operating system, a space, and then the version number as four numbers seperated with commas. (just like eval(‘$version’); in as2)
I display the flashPlayerVersion and to split it out I split the string on the space, and then split the version number with the comma delimiter and display them all.
Example
Here’s what mine is (gif):
And here’s what yours is (swf):
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
41
42
43
44
45
46
47
48
49
| import flash.system.Capabilities;
var flashPlayerVersion:String = Capabilities.version;
var osArray:Array = flashPlayerVersion.split(' ');
var osType:String = osArray[0]; //The operating system: WIN, MAC, LNX
var versionArray:Array = osArray[1].split(',');//The player versions. 9,0,115,0
var majorVersion:Number = parseInt(versionArray[0]);
var majorRevision:Number = parseInt(versionArray[1]);
var minorVersion:Number = parseInt(versionArray[2]);
var minorRevision:Number = parseInt(versionArray[3]);
vers.text = flashPlayerVersion;
feedback.text = "Operating System: "+osType + "\n" +
"Major Version: "+majorVersion + "\n" +
"Major Revision: "+majorRevision + "\n" +
"Minor Version: "+minorVersion + "\n" +
"Minor Revision: "+minorRevision;
trace("Operating System: "+osType);
trace("Major Version: "+majorVersion);
trace("Major Revision: "+majorRevision);
trace("Minor Version: "+minorVersion);
trace("Minor Revision: "+minorRevision);
trace("--other capabilities--");
trace("avHardwareDisable: " + Capabilities.avHardwareDisable);
trace("hasAccessibility: " + Capabilities.hasAccessibility);
trace("hasAudio: " + Capabilities.hasAudio);
trace("hasAudioEncoder: " + Capabilities.hasAudioEncoder);
trace("hasEmbeddedVideo: " + Capabilities.hasEmbeddedVideo);
trace("hasMP3: " + Capabilities.hasMP3);
trace("hasPrinting: " + Capabilities.hasPrinting);
trace("hasScreenBroadcast: " + Capabilities.hasScreenBroadcast);
trace("hasScreenPlayback: " + Capabilities.hasScreenPlayback);
trace("hasStreamingAudio: " + Capabilities.hasStreamingAudio);
trace("hasVideoEncoder: " + Capabilities.hasVideoEncoder);
trace("isDebugger: " + Capabilities.isDebugger);
trace("language: " + Capabilities.language);
trace("localFileReadDisable: " + Capabilities.localFileReadDisable);
trace("manufacturer: " + Capabilities.manufacturer);
trace("os: " + Capabilities.os);
trace("pixelAspectRatio: " + Capabilities.pixelAspectRatio);
trace("playerType: " + Capabilities.playerType);
trace("screenColor: " + Capabilities.screenColor);
trace("screenDPI: " + Capabilities.screenDPI);
trace("screenResolutionX: " + Capabilities.screenResolutionX);
trace("screenResolutionY: " + Capabilities.screenResolutionY);
trace("serverString: " + Capabilities.serverString); |
Download
Here’s the source fla file: flash version detection actionscript method (as3)
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, as3, download, experiment, flash, open source, tutorial
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
