Posts Tagged ‘flex’
Sucks when you seem to have a bug in your code somewhere so you dissect your code over and over and are convinced that according to your code, everything should be fine, so you come back later thinking fresher eyes will see it, and still can’t find the cause, and then resort to debugging with various trace statements…
I’ve been developing a custom flash player in as3. Fullscreen and all those bells and whistles… I could test locally and eveything was beautiful… but then upload and test in the browser and when I would go into fullscreen mode, the video would pause. Pretty annoying bug! So I’d go through my code and examine anywhere a call to pause the video (there are only two): pressing the play/pause button and pressing the spacebar (keyboard shortcut). I couldn’t find any correalation. I was thinking adobe must be doing some crazy security things when going into fullscreen… but no, no other video player I’ve seen does this!
After commenting out my keyboard events, the bug is fixed! But I still can’t use the spacebar to pause/play. I love this functionality for usability. Isn’t that pretty standard for video? space to pause, it’s like second nature to me.
Does entering fullscreen really trigger a keyboard event equivalent to pressing my spacebar!? Sure enough. how much sense does that make, but it gets better! I had a friend test this swf and it worked fine for him. No pause on fullscreen! Wha!? Using good ole IE7… So yes, it’s a browser specific actionscript bug, firefox even! That was one of the things I liked about flash initially, not too much to mess with as far as cross browser issues once you get the swf embedded in the html, or so I thought.
So after playing with booleans to try to control when the keyboard events will be working.
Has anyone experienced this or another issue that just left you baffled, even after you figured out the bug?!
Well, I’ve done the right thing, I’ve posted about it to hopefully help anyone else having this issue. I created a test case file to rule out anything else in my code and make sure I’m not crazy.
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
| stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
fsb.addEventListener(MouseEvent.CLICK, fullscreenToggle);
ssb.addEventListener(MouseEvent.CLICK, fullscreenToggle);
stage.addEventListener(FullScreenEvent.FULL_SCREEN, onFullscreenChange);
fsb.buttonMode = true;
ssb.buttonMode = true;
onFullscreenChange();
function fullscreenToggle(e:MouseEvent = null):void {
//normal mode, enter fullscreen mode
if (stage.displayState == StageDisplayState.NORMAL){
//set stage display state
stage.displayState = StageDisplayState.FULL_SCREEN;
}
//fullscreen mode, enter normal mode
else if (stage.displayState == StageDisplayState.FULL_SCREEN){
//set stage display state
stage.displayState = StageDisplayState.NORMAL;
}
onFullscreenChange();
}
function onFullscreenChange(e:FullScreenEvent = null):void {
if (stage.displayState == StageDisplayState.FULL_SCREEN) {
tracer("full screen");
fsb.visible = false;
ssb.visible = true;
}
else {
tracer("small screen");
fsb.visible = true;
ssb.visible = false;
}
tracer("toggle to "+stage.displayState);
}
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
function keyDownListener(e:KeyboardEvent) {
tracer("keyboard: keyCode: "+ e.keyCode.toString());
}
var tracerwindow:TextField;
function tracer( ...args){
if (tracerwindow == null){
tracerwindow = new TextField();
tracerwindow.width = stage.stageWidth/2;
tracerwindow.height = stage.stageHeight;
tracerwindow.multiline = true;
addChild(tracerwindow);
}
for (var i:uint = 0; i < args.length; i++) {
tracerwindow.appendText(args[i].toString() + " ");
}
tracerwindow.appendText("\n");
trace(args);
} |
other places that I’ve found this mentioned that helped me understand what was going on:
http://dreamweaverforum.info/actionscript-3/123202-keyboard-event-full-screen.html
http://bugs.adobe.com/jira/browse/FP-814
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, as3, flash, flex, interactive, video, web design, work
I have had feedback that certain random movements I program are a bit “jumpy”. Such as my old brownian movement tutorial and I really noticed it in my last tutorial, the parallax 3d depth effect tutorial. I’ve been thinking about it and looking around at some code and now have this updated brownian movement example! Updated for as3 as well as making it less jumpy.
First I’ll explain what I’ve found to be the reason of the jumpiness. And then explain and show what can be done to make this movement be more smooth.
So to examine the old jumpy code. Jump back to the first version post here. I think my technique was well thought out here, but the application was poor. It was recalculating the velocities every single frame and then incrementing the coordinate positions by the newly calculated velocities… This is where the jumpiness comes in. Even though the random value was named velocity, it didn’t actually affect the dot’s velocity, it was just a variable that stored the random value used to move the current x/y coordinates.
To help the animation be more smooth, the velocity needs to be more smooth. The velocity, rather than calculating it fresh each frame, should be randomly modified each frame. And then the new velocity will calculate the new ‘random’ position. Another addition is to introduce another force to dampen the velocity over time, so things don’t get too crazy…
Steps:
- Modify velocity randomly
- With velocity and current position, calculate a new position
- Dampen the velocity
Example:
Here I have a velocity for the x coordinate as well as the y. I’m also experimenting with a z velocity. This adjusts the alpha and scale for depth perception. It doesn’t actually edit the depth or layer the dot shows up on the stage however… keyword here: experimenting. 
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
| //number of balls
var numBalls:uint = 50;
var defaultBallSize:uint = 30;
//init
makeDots();
function makeDots():void {
//create desired number of balls
for (var ballNum:uint=0; ballNum<numBalls; 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();
addChild(thisBall);
//coordinates
thisBall.x = Math.random() * stage.stageWidth;
thisBall.y = Math.random() * stage.stageHeight;
//percieved depth
thisBall.ballNum = ballNum;
thisBall.depth = ballNum/numBalls;
thisBall.scaleY = thisBall.scaleX = thisBall.alpha = ballNum/numBalls;
//velocity
thisBall.vx = 0;
thisBall.vy = 0;
thisBall.vz = 0;
//ball animation
thisBall.addEventListener(Event.ENTER_FRAME, animateBall);
}
}
var dampen:Number = 0.95;
var maxScale:Number = 1.3;
var minScale:Number = .3;
var maxAlpha:Number = 1.3;
var minAlpha:Number = .3;
function animateBall(e:Event):void{
var thisBall:Object = e.target;
//apply randomness to velocity
thisBall.vx += Math.random() * 0.2 - 0.1;
thisBall.vy += Math.random() * 0.2 - 0.1;
thisBall.vz += Math.random() * 0.002 - 0.001;
thisBall.x += thisBall.vx;
thisBall.y += thisBall.vy;
thisBall.scaleX = thisBall.scaleY += thisBall.vz;
thisBall.alpha += thisBall.vz;
thisBall.vx *= dampen;
thisBall.vy *= dampen;
thisBall.vz *= dampen;
if(thisBall.x > stage.stageWidth) {
thisBall.x = 0 - thisBall.width;
}
else if(thisBall.x < 0 - thisBall.width) {
thisBall.x = stage.stageWidth;
}
if(thisBall.y > stage.stageHeight) {
thisBall.y = 0 - thisBall.height;
}
else if(thisBall.y < 0 - thisBall.height) {
thisBall.y = stage.stageHeight;
}
if (thisBall.scaleX > maxScale){
thisBall.scaleX = thisBall.scaleY = maxScale;
}
else if (thisBall.scaleX < minScale){
thisBall.scaleX = thisBall.scaleY = minScale;
}
if (thisBall.alpha > maxAlpha){
thisBall.alpha = maxAlpha;
}
else if (thisBall.alpha < minAlpha){
thisBall.alpha = minAlpha;
}
}
function randomColor():Number{
return Math.floor(Math.random() * 16777215);
} |
Source:
as3random_brownian_movement.fla
Author: Evan Mullins | Filed under: tutorial
Tags: 3D, abstract, actionscript, animation, as3, color, download, experiment, flash, flex, open source, physics, tutorial
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
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
Ryan has announced a contest to investigate how Google is actually crawling swfs. He introduced the term “fleximagically searchable” to be included in external content, which is then loaded into the Flex swf. Hoping that google will read the external source file through the swf. Also testing how this shows up in the search results. Even though I think there a lot more to SEO than just letting Google crawl your site, there’s the pagerank and everything that Google uses in it’s top secret algorithm to determine search result position ranks.
Here’s the official rules:
- It has to be a Flex application
- ‘Fleximagically Searchable’ must be dynamically loaded. It can’t be static text inside of your application. – But I don’t care how you load it, in fact that might make a difference in how Google ranks you.
- The first link must be deep linked directly into where you load ‘Fleximagically Searchable’ into your application. Feel free to use any deep linking methods out there.
- Nothing in your code can dynamically load the phrase automatically. It has to be the result of a user interaction.
- You must provide source code and be willing to talk about exactly what you did.
- Multiple entries are allowed if you want to try different things.
They seem to be a bit vague in places, but we’ll see if Ryan decides to clarify anything.
More information: I’ve found that’s helpful at Peter Elst’s post. And Ryan explains Google and Flash’s relationship development here. Here and here is what Google has officially said. Here is the official press release from Adobe about their new
I’ll have a couple entries I’m sure… and I’ll be sure to post about those as well.
Author: Evan Mullins | Filed under: personal
Tags: actionscript, as3, flash, flex, seo, stompernet
