How can I prevent CTRL+A from functioning with editable TextField()
The previous example only works with Flex Text and TextArea objects, this works with all flash.text.* objects.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var t:TextField;
private function init():void
{
t = new TextField();
t.height = 80;
t.width = 100;
t.type = TextFieldType.INPUT;
t.multiline = true;
var c:UIComponent = new UIComponent();
c.addChild( t );
foo.addChild( c );
addEventListener( KeyboardEvent.KEY_UP, edit );
addEventListener( KeyboardEvent.KEY_DOWN, edit );
}
private function edit( event:KeyboardEvent ):void
{
if( event.type == KeyboardEvent.KEY_DOWN && event.ctrlKey )
{
t.type = TextFieldType.DYNAMIC; // Dynamic texts cannot be edited. You might be able to remove this line.
t.selectable = false; // If selectable is false, then Ctrl-a won't do anything.
}
else
{
t.type = TextFieldType.INPUT;
t.selectable = true;
}
}
]]>
</mx:Script>
<mx:Canvas id="foo" height="90" width="110" backgroundColor="#FFFFFF" />
</mx:Application>
Not tested, but perhaps you could catch the selectAll event on the TextField and prevent it bubbling up, or clear the selection (not sure when the event is fired).
Use the setFocus function paired with a KeyboardEvent listener:
<xml version="1.0"?>
<!-- menus/SimpleMenuControl.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="800" initialize="init()" >
<mx:TextInput id="nom"/>
<mx:Script>
<![CDATA[
private function init():void
{
addEventListener( KeyboardEvent.KEY_UP, edit );
addEventListener( KeyboardEvent.KEY_DOWN, edit );
}
private function edit( event:KeyboardEvent ):void
{
if( event.type == KeyboardEvent.KEY_DOWN && event.ctrlKey ) setFocus();
else nom.setFocus();
nom.selectionEndIndex = nom.selectionBeginIndex = nom.text.length;
}
]]>
</mx:Script>
</mx:Application>
The setFocus means that the Text object will no longer listen to any keyboard events.
I would not recommend using the enabled property as that will gray-out the textarea.
Related
I am not understanding something I believe that flex can run actionscript but every time I try I get different errors.
this time my error is:
Description Resource Path Location Type
Could not resolve <fx:script> to a component implementation. as.mxml /ar/src line 7 Flex Problem
I keep looking at flex tutorials and it's almost like they assume that one knows the ide hence they are just showing the .as code.
I think that everything flash can do flex can do. So why be restricted to only one.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<fx:script>
var socket:XMLSocket;
stage.addEventListener(MouseEvent.CLICK, doConnect);
function doConnect(evt:Event):void{
stage.removeEventListener(MouseEvent.CLICK, doConnect);
socket = new XMLSocket("127.0.0.1", 9001);
socket.addEventListener(Event.CONNECT, onConnect);
socket.addEventListener(IOErrorEvent.IO_ERROR, onError);
}
function onConnect(evt:Event):void{
trace("Connected");
socket.removeEventListener(Event.CONNECT, onConnect);
socket.removeEventListener(IOErrorEvent.IO_ERROR, onError);
socket.addEventListener(DataEvent.DATA, onDataReceived);
socket.addEventListener(Event.CLOSE, onSocketClose);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);
}
function onSocketClose(evt:Event):void{
trace("Connection Closed");
stage.removeEventListener(KeyboardEvent.KEY_UP, keyUp);
socket.removeEventListener(Event.CLOSE, onSocketClose);
socket.removeEventListener(DataEvent.DATA, onDataReceived);
}
function keyUp(evt:KeyboardEvent):void{
if(evt.keyCode == 81){
socket.send("exit");
}
else{
socket.send(evt.keyCode);
}}
function onDataReceived(evt:DataEvent):void{
try{
trace( "From Server:", evt.data );
}
catch(e:Error){
trace('error');
}}
function onError(evt:IOErrorEvent):void{
trace("Connect failed");
socket.removeEventListener(Event.CONNECT, onConnect);
socket.removeEventListener(IOErrorEvent.IO_ERROR, onError);
stage.addEventListener(MouseEvent.CLICK, doConnect);
}
</fx:script>
</fx:Declarations>
First, make sure you use fx:Script with a capital S; not a lowercase S.
Then move your fx:Script tag out of the fx:Declaration and your code will compile:
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
var socket:XMLSocket;
stage.addEventListener(MouseEvent.CLICK, doConnect);
function doConnect(evt:Event):void{
stage.removeEventListener(MouseEvent.CLICK, doConnect);
socket = new XMLSocket("127.0.0.1", 9001);
socket.addEventListener(Event.CONNECT, onConnect);
socket.addEventListener(IOErrorEvent.IO_ERROR, onError);
}
function onConnect(evt:Event):void{
trace("Connected");
socket.removeEventListener(Event.CONNECT, onConnect);
socket.removeEventListener(IOErrorEvent.IO_ERROR, onError);
socket.addEventListener(DataEvent.DATA, onDataReceived);
socket.addEventListener(Event.CLOSE, onSocketClose);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);
}
function onSocketClose(evt:Event):void{
trace("Connection Closed");
stage.removeEventListener(KeyboardEvent.KEY_UP, keyUp);
socket.removeEventListener(Event.CLOSE, onSocketClose);
socket.removeEventListener(DataEvent.DATA, onDataReceived);
}
function keyUp(evt:KeyboardEvent):void{
if(evt.keyCode == 81){
socket.send("exit");
}
else{
socket.send(evt.keyCode);
}}
function onDataReceived(evt:DataEvent):void{
try{
trace( "From Server:", evt.data );
}
catch(e:Error){
trace('error');
}}
function onError(evt:IOErrorEvent):void{
trace("Connect failed");
socket.removeEventListener(Event.CONNECT, onConnect);
socket.removeEventListener(IOErrorEvent.IO_ERROR, onError);
stage.addEventListener(MouseEvent.CLICK, doConnect);
}
</fx:Script>
The fx:Declaration tag is primarily used for MXML components that are non-visual, such as validators or services. While fx:Script is clearly non-visual it is not usually embeded inside fx:Declaration.
The code below imports and controls an mp3 sound file. When I change from an mp3 to an m4a file the code does not work. Do I need to use a different class to play an m4a file?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="init()" >
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
import mx.rpc.events.ResultEvent;
private var sound:Sound;
private var soundChannel:SoundChannel = new SoundChannel;
private var loaderContext:SoundLoaderContext;
private var trackPosition:Number = 0;
private var timer:Timer;
private var leftGraphic:Sprite;
private var rightGraphic:Sprite;
private function init():void{
var audioFile:String = "recording.mp3";
sound = new Sound(new URLRequest(audioFile));
sound.addEventListener(Event.COMPLETE, onSoundLoaded);
function onSoundLoaded(event:Event):void{
maxTime.text = convertMillesecs(sound.length)
trackSlider.y-= 5;
trackSlider.maximum = sound.length;
}
}
private var counter:Number
private function soundComplete( e:Event ):void{
maxTime.text = convertMillesecs(soundChannel.position);
maxTime.text = convertMillesecs(sound.length)
}
private function checkTrack(event:Event):void{
// manage track counter
trackSlider.value = soundChannel.position;
currentVal.text = String(convertMillesecs(soundChannel.position));
}
private function convertMillesecs(time:Number):String{
var h:Number = new Number(Math.floor(time/1000/60/60));
var m:Number = new Number(Math.floor(time/1000/60)-(h*60));
var s:Number = new Number(Math.floor(time/1000)-(m*60));
var hours:String;
var minutes:String;
var seconds:String
//minutes and seconds always two digits
if(m.toString().length == 1) {
minutes = "0"+m;
} else {
minutes = m.toString();
}
if(s.toString().length == 1) {
seconds = "0"+s;
} else {
seconds = s.toString();
}
// last two digits represent actual seconds
seconds = seconds.slice(seconds.length-2, seconds.length);
return minutes + ":" + seconds;
}
private function controlChange1(event:MouseEvent):void{
var optionString:String;
switch(event.target.id){
case "playButton":
play();
break;
case "pauseButton":
pause();
break;
default:
break;
}
}
private function play():void{
playButton.visible = false;
pauseButton.visible = true;
timer = new Timer(100);
timer.addEventListener(TimerEvent.TIMER, checkTrack);
soundChannel.stop();
soundChannel = sound.play(pausePosition);
timer.start();
}
private var pausePosition:int
private function pause():void{
pausePosition = soundChannel.position;
soundChannel.stop();
playButton.visible = true;
pauseButton.visible = false;
}
private function onTrackSliderChange(e:Event):void{
soundChannel.stop()
soundChannel = sound.play(e.target.value * sound.length / trackSlider.maximum);
playButton.visible = false;
pauseButton.visible = true;
}
private function formatButton(val:String):String{
return convertMillesecs(soundChannel.position)
}
]]>
</mx:Script>
<mx:HBox backgroundColor="0x000000" horizontalCenter="0" verticalCenter="0" verticalAlign="middle" horizontalScrollPolicy="off" verticalScrollPolicy="off" >
<mx:Canvas id="controlBar1" paddingLeft="1" buttonMode="true" useHandCursor="true" >
<mx:Button id="pauseButton" width="40" height="40" click="controlChange1(event)" visible="false" color="0x0B333C"/>
<mx:Button id="playButton" width="40" height="40" click="controlChange1(event)" color="0x000000" />
</mx:Canvas>
<mx:Label id="currentVal" text="00:00" color="0xffffff"/>
<mx:HSlider id="trackSlider" height="10" width="500" liveDragging="false" change="onTrackSliderChange(event);"
dataTipFormatFunction="formatButton" showTrackHighlight = "true" mouseEnabled="true" useHandCursor="true" />
<mx:Label id="maxTime" text="00:00" color="0xffffff"/>
</mx:HBox>
</mx:Application>
The Sound class can play one of two formats: mp3 and the raw format AS3 records to. So it is impossible to use the Sound class to play m4a, unfortunately.
Fortunately, it is possible to play m4a using another class: NetStream. You may or may not have as fine of control over it without the SoundTransform and SoundMixer classes, but you can still play the file no problem (I've done it in the past, though it didn't end up working quite the way I was hoping for so I ended up going with mp3s instead)
Adobe Article on m4a playback
So my mario project must include a staple of Mario's movement, and that of course is the option to jump a short height or a fairly large one. As we all know, holding down the jump button makes him jump higher, that's what my goal is here. In my case, that button is X and I am unsure of how to do that.
This is currently my unsuccessful attempt, and gravity is set to 0.87 by default in my variables.
This is in my keyDownHandler (when the key is pressed)
if (event.keyCode == Keyboard.X && onGround == true)
{
vy += jumpForce;
holdJump = true;
onGround = false;
if(holdJump == true && onGround == false)
{
_mario.y += 1;
}
else
{
vy = vy + (grav * 0.20);
holdJump = false;
}
This is in my keyUpHandler (when the key is not pressed/let go)
if (event.keyCode == Keyboard.X)
{
if (holdJump == false)
{
accy = 0;
gravity = 0.80;
incSpeedY = 0;
}
}
Ok, I've extended my comment.
You can use standard vy=vyLast-g*(t-tLast), and just set vyLast to min(0,vyLast) when jump key is released, and set it to jump starting speed when jump key is pressed on the ground.
Here is the sample Adobe Air application with jumping red circle. It implements the logics that I've described into the comment:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
>
<fx:Script>
<![CDATA[
import flash.utils.getTimer;
import mx.graphics.SolidColor;
public var marioY:Number = 0; //jump height above ground (meters)
public var g:Number = -9.81; //meter/(second^2)
public var lastTime:Number = NaN;
public var lastVerticalSpeed:Number = 0;//speed of a flight -meters/second
public var jumpSpeed:Number = 10;//initial jump speed - meters/second
public var timeRatio:Number = 1000;//milliseconds in a second
public var heightRatio:Number = 50; //pixels/meter
protected function get landed():Boolean{
return marioY <= 0 && lastVerticalSpeed <= 0;
}
protected function onKeyDown(event:KeyboardEvent):void{
if(event.keyCode==Keyboard.UP && landed){
lastVerticalSpeed = jumpSpeed;
trace('fly!');
}
}
protected function onKeyUp(event:KeyboardEvent):void{
if(event.keyCode==Keyboard.UP){
lastVerticalSpeed = Math.min(0,lastVerticalSpeed);
trace('fall!');
}
}
protected function onEnterFrame(event:Event):void{
if(!isNaN(lastTime)){
var deltaTime:Number = (getTimer() - lastTime)/timeRatio;
marioY+=lastVerticalSpeed*deltaTime;
if(landed){
lastVerticalSpeed=0;
marioY=0;
}else{
lastVerticalSpeed+=g*deltaTime;
}
}
mario.y=area.height-marioY*heightRatio-20;
lastTime = getTimer();
}
]]>
</fx:Script>
<s:Group width="100%" height="100%" keyDown="onKeyDown(event)" keyUp="onKeyUp(event)"
enterFrame="onEnterFrame(event)" id="area"
creationComplete="area.setFocus()"
>
<s:Rect width="100%" height="100%" fill="{new SolidColor(0x0000FF)}"/>
<s:Ellipse id="mario" width="10" height="10" fill="{new SolidColor(0xFF0000)}"
y="100" x="100"
/>
</s:Group>
</s:WindowedApplication>
I'm not sure if that title is descriptive enough, but here is the basic issue. I have a spark.effects.Animate instance repeating n times with a listener on the EFFECT_REPEAT event. In that event's listener, I'm incrementing a variable. Logic would dictate that if the variable started at 0 and the animation was played with a repeatCount of 3, the variable would be 2 when finished. This works fine, until I focus a different tab. When doing this, on occasion, the repeat event isn't fired/handled (or the animation is just not actually doing the animation) and my count isn't correct when finished.
This is a fully functioning example built against Flex 4.5. To duplicate just click the GO button and maintain focus on the TAB. Then click it again and switch tabs and switch back. The counts don't match.
How can I fix this so that the repeat event is called consistently?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="600" height="400" applicationComplete="application1_applicationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Image;
import mx.events.EffectEvent;
import mx.events.FlexEvent;
import spark.effects.Animate;
import spark.effects.animation.MotionPath;
import spark.effects.animation.SimpleMotionPath;
private var animate:Animate;
private var someCounter:int = 0;
protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
// Create the graphic
var img:Image = new Image();
img.source = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
// Add the graphic
addElement( img );
// Create the motion path
var smp:SimpleMotionPath = new SimpleMotionPath();
smp.property = "x";
smp.valueFrom = 0;
smp.valueTo = this.width - 275;
// Add the motion path to a Vector
var paths:Vector.<MotionPath> = new Vector.<MotionPath>();
paths.push( smp );
// Create the animation
animate = new Animate();
animate.easer = null;
animate.target = img;
animate.duration = 150;
animate.repeatCount = 15;
animate.motionPaths = paths;
animate.addEventListener( EffectEvent.EFFECT_REPEAT, animate_effectRepeatHandler );
animate.addEventListener( EffectEvent.EFFECT_END, animate_effectEndHandler );
}
private function animate_effectRepeatHandler( event:EffectEvent ):void
{
lblCounter.text = someCounter.toString();
someCounter++;
}
private function animate_effectEndHandler( event:EffectEvent ):void
{
lblCounter.text = someCounter.toString(); // Sometimes doesn't equal animate.repeatCount - 1
}
protected function button1_clickHandler(event:MouseEvent):void
{
if( !animate.isPlaying )
{
someCounter = 0;
animate.play();
}
}
]]>
</fx:Script>
<mx:Label id="lblCounter" horizontalCenter="0" bottom="50" width="150" height="50" textAlign="center" />
<mx:Button horizontalCenter="0" bottom="0" label="GO" width="150" height="50" click="button1_clickHandler(event)" />
</s:Application>
The initial height of a text area is much larger than the content, I cannot find a way of making it always the same height as the text content:
<mx:TextArea id="textarea" borderStyle="solid" width="100%" wordWrap="true" selectable="false" backgroundAlpha="0" focusAlpha="0" text="this is a little test" />
Gives a bordered box that is much taller than needed.
This also gives an unintential problem if you have links within the content in that a link 'mouseover' is triggered when nowhere near the link.
<mx:Script>
<![CDATA[
public function onInit():void
{
var style:StyleSheet = new StyleSheet();
var aLink:Object = new Object();
aLink.color = "#0000FF";
var aHover:Object = new Object();
aHover.color = "#00FF00";
aHover.textDecoration = "underline";
style.setStyle( "a:hover", aHover );
style.setStyle( "a:link", aLink );
textarea.styleSheet = style;
}
]]>
</mx:Script>
<mx:TextArea id="textarea" width="100%" wordWrap="true" borderStyle="solid" selectable="false" backgroundAlpha="0" focusAlpha="0" >
<mx:htmlText>
<![CDATA[<a href='event:http://www.adobe.com'>Navigate to Adobe.com.</a> this is testing nothing at all really]]>
</mx:htmlText>
</mx:TextArea>
The Text component doesnt suffer from this, but I cannot attach a stylesheet to a text component.
Hoping someone can help. Or is there some other component I can use where I can add a stylesheet to stylise anchor tags.
I found this overridable in the TextArea.as source and if I override it and remove the "2 x" multiplier it almost works but unfortunately it means that the content doesnt get bigger when it needs to and vertically scrolls instead, so its almost there:
override protected function measure():void
{
super.measure();
measuredMinWidth = DEFAULT_MEASURED_MIN_WIDTH;
measuredWidth = DEFAULT_MEASURED_WIDTH;
// TextArea is minimum of two lines of text
measuredMinHeight = measuredHeight = 2 * DEFAULT_MEASURED_MIN_HEIGHT;
}
If you extend Text, you can add a getter/setter that allows you to set the styleSheet of the underlying UITextField object.
package
{
import flash.events.Event;
import flash.text.StyleSheet;
import mx.controls.Text;
import mx.core.mx_internal;
use namespace mx_internal;
public class StyledText extends Text
{
public function StyledText()
{
super();
}
private var _styleSheet:StyleSheet = null;
[Bindable("stylesheetChanged")]
public function get styleSheet():StyleSheet {
return _styleSheet;
}
public function set styleSheet(value:StyleSheet):void {
_styleSheet = value;
if ( textField ) {
textField.styleSheet = _styleSheet;
}
dispatchEvent(new Event("stylesheetChanged"));
}
override protected function createChildren():void {
super.createChildren();
//textField is created in the createChildren
//method of the Label class
if ( textField && styleSheet ) {
textField.styleSheet = _styleSheet;
}
}
}
}
Then you can use the component like so:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" preinitialize="onInit()">
<mx:Script>
<![CDATA[
public function onInit():void
{
var style:StyleSheet = new StyleSheet();
var aLink:Object = new Object();
aLink.color = "#0000FF";
var aHover:Object = new Object();
aHover.color = "#00FF00";
aHover.textDecoration = "underline";
style.setStyle( "a:hover", aHover );
style.setStyle( "a:link", aLink );
text.styleSheet = style;
}
]]>
</mx:Script>
<ns1:StyledText id="text" x="0" y="79">
<ns1:htmlText>
<![CDATA[<a href='event:http://www.adobe.com'>Navigate to Adobe.com.</a> this is testing nothing at all really]]>
</ns1:htmlText>
</ns1:StyledText>
</mx:Application>
I haven't tried what you're attempting, but this link looks like it might help:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=13628&productId=2.
Based on Bedwyr's link, I thought I would try recalcing the height myself and this seems to work fine (not noticed any bad side-effects yet, but there may be):
this.addEventListener( Event.CHANGE, onReMeasure );
this.addEventListener( Event.RESIZE, onReMeasure );
override protected function measure():void
{
super.measure();
measuredMinWidth = DEFAULT_MEASURED_MIN_WIDTH;
measuredWidth = DEFAULT_MEASURED_WIDTH;
var lm:TextLineMetrics = getLineMetrics( 0 );
measuredMinHeight = measuredHeight = DEFAULT_MEASURED_MIN_HEIGHT;
}
private function onReMeasure( eventObj:Event ):void
{
var ht:Number = 0;
for( var n:int = 0; n < textField.numLines; n++ )
{
ht += textField.getLineMetrics(n).height;
}
ht += 10; // padding
height = ht;
validateNow();
}