ActionScript 3 textfield disable default cursor - actionscript-3

I'm looking for a way in ActionScript 3 to allow the user to scroll a TextField (left to right) if the amount of text is greater than the TextField's width without the cursor changing to the flashing I.
The textfield is inside a MovieClip. I cannot use MouseChildren = false and selectable = false as both stop the textfield being scrollable.
Any ideas?

Well, the simplest way is to set the myTextField.selectable = false. The cursor doesn't change and the text field's content remains scrollable. Maybe I missed something here, but it works on my simple test.

If you're still open to suggestions...
(This is roll-over scrolling instead of mouse-down to scroll by dragging)
var scrollSize : int = 5; //# scrolling speed
tf.selectable = false;
tf.height = 25; //# (set height only if [tf] is already on Stage with text)
tf.addEventListener(MouseEvent.MOUSE_OVER, scroll_start);
tf.addEventListener(MouseEvent.MOUSE_OUT, scroll_stop);
function scroll_start (evt:MouseEvent) : void
{ tf.addEventListener(Event.ENTER_FRAME, handler_enterFrame ); }
function scroll_stop (evt:MouseEvent) : void
{ tf.removeEventListener(Event.ENTER_FRAME, handler_enterFrame ); }
function handler_enterFrame (evt:Event) : void
{
//# touch right edge = scroll text towards left
if ( tf.mouseX >= (tf.width - 10) ) { tf.scrollH += scrollSize; }
//# touch left edge = scroll text towards right
if ( tf.mouseX <= (tf.x + 10) )
{
if ( tf.scrollH > 0 ){ tf.scrollH -= scrollSize; }
else { /* do else here = Hurray */ }
}
}
There is a weird effect that only happens if you scroll fully to the end of text/sentence and then immediately scroll backwards, when it reaches zero scroll there is a "bounce" effect. Likely caused by Enter Frame event. Will check that later tonight if possible but the general concept is there in code...
Gotta fly but hope it helps...

I'd suggest the following:
switch off mouse interactivity for the child TextField
mc.mouseChildren = false;
mc.addEventListener(MouseEvent.MOUSE_WHEEL, scroll);
and scroll it manually:
private function scroll(e:MouseEvent):void{
tf.scrollV += e.delta;
}
Working example here
update:
To scroll text horizontally you need to change the scrollH property of the TextField, for example you may handle MOUSE_WHEEL event like this:
private function scroll(e:MouseEvent):void{
tf.scrollH -= e.delta;
}

Related

Hiding/Showing stage elements when using drag and drop

I asked a question about drag and drop a few days ago, which was answered here:
Changing text dynamically with drag / drop in Flash CS6 (AS3)
I have another question related to the first question, not sure if I was supposed to ask it on that original question or start a new one.
Anyway, I am trying to have some stage elements show on the screen when the slider is being used, and then hide when the user stops using ("drops") the slider button. The elements are a button and a textarea component.
I set the alpha for each element to zero and then wanted to use as3 to tell the system when to set the alpha to 100, and then of course when to set it back to zero.
The issue I'm having is that when I let go of the slider, everything becomes hidden again EXCEPT for the text inside the textarea component.
Here is my code:
slider.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);
function fl_ClickToDrag(event:MouseEvent):void
{
slider.startDrag(false, rectangle);
graphic.alpha = 1;
textarea1.alpha = 1;
}
stage.addEventListener(Event.ENTER_FRAME, _onEnterFrame);
function _onEnterFrame(e:Event):void {
if (slider.x > 26){
textarea1.text = '25+';
}
}
slider.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop);
function fl_ReleaseToDrop(event:MouseEvent):void
{
slider.stopDrag();
graphic.alpha = 0;
textarea1.alpha = 0;
}
What am I missing here?

Scrolling Left To Right With Actionscript 3.0

maybe someone can help me with this Adobe Flash Actionscript 3.0 question.
I'm trying to make a timeline with "buttons" on the left and right most part of the screen so the timeline can be scrubbed when the mouse goes to those parts of the screen. The buttons themselves are simply there as a means to show the user where they need to hover over in order to make the timeline scroll in that direction.
I've been able to get the timeline to scrub once with the code below, but I want to make it so that it keeps scrolling for the duration of time that the user keeps their mouse over it.
Also I placed an If statement that prevents the timeline from being scrolled off the screen.
Currently the code is only used once and goes left to right on the X axis by 15. How do I make it so it keeps steadily moving to the left or right until the mouse is off the scroll buttons?
//Scroll Logic
backScroll_btn.addEventListener(MouseEvent.ROLL_OVER, backScroll);
function backScroll(e:MouseEvent){
if(timeLine.x < 1406.55){
timeLine.x = timeLine.x + 15;}
}
forwardScroll_btn.addEventListener(MouseEvent.ROLL_OVER, forwardScroll);
function forwardScroll(e:MouseEvent){
if(timeLine.x > 0){
timeLine.x = timeLine.x - 15};
}
Since you want a continuous scroll, use an enter frame event listener to trigger the scroll. The buttons will then have two listeners triggering the scrolling on/off for either side.
var scrollingBack:Boolean;
var scrollingForward:Boolean;
backScroll_btn.addEventListener(MouseEvent.ROLL_OVER, backScrollOn);
backScroll_btn.addEventListener(MouseEvent.ROLL_OUT, backScrollOff);
function backScrollOn(e:MouseEvent):void { scrollingBack=true; }
function backScrollOff(e:MouseEvent):void { scrollingBack=false; }
forwardScroll_btn.addEventListener(MouseEvent.ROLL_OVER, forwardScrollOn);
forwardScroll_btn.addEventListener(MouseEvent.ROLL_OUT, forwardScrollOff);
function forwardScrollOn(e:MouseEvent):void { scrollingForward=true; }
function forwardScrollOff(e:MouseEvent):void { scrollingForward=false; }
timeline.addEventListener(Event.ENTER_FRAME,doScroll);
function doScroll(e:Event):void {
if (scrollingForward) {
if(timeLine.x > 0){
timeLine.x = timeLine.x - 15};
} else if (scrollingBack) {
if(timeLine.x < 1406.55){
timeLine.x = timeLine.x + 15;}
}
}
I think this may work, have enterframe event listen when the item is rollover and increase the X by every frame unitl the mouse roll out of the button.
backScroll_btn.addEventListener(MouseEvent.ROLL_OVER, backScroll);
function backScroll(e:MouseEvent):void
{
addEventListener(Event.ENTER_FRAME,myButton);
backScroll_btn.addEventListener(MouseEvent.ROLL_OUT, backScrollOut);
}
function backScrollOut(e:MouseEvent):void
{
removeEventListener(Event.ENTER_FRAME,myButton);
}
function myButton(e:Event):void
{
timeLine.x+=15;
}

How to wait a while before adding elements in css? javascript?

I have a problem that I will explain.
I'm doing an animation in HTML5 and CSS3. My idea is that a plane is flying around and it launches a missile after a while. What I want to do is to make the missile appear after that time. I thought about doing that changing the z-Index property of my div (because I have the missile image into a div container) using javascript after a while (any time I choose). For doing that I found the sleep function at the bottom. I created the "appear" function that I know it works because It changes my zIndex value but it doesn't wait the 2 seconds I want.
I also thought I had the solution by using the visibility property, but I have the same problem, sleep function doesn't wait at all.
Any suggestions? Thanks
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function appear(object){
sleep(200000);
var objective = document.getElementById(object);
objective.style.zIndex=1;
You can pass a function to the setTimeout function which will call that function in x milliseconds.
function waitForMe() {
alert('triggered!');
}
// Call waitForMe in 200000ms
setTimeout(waitForMe, 200000);
So for your example, you would want to use 2000 (2 seconds), not 200000 (200 seconds):
function appear(object) {
setTimeout(function () {
var objective = document.getElementById(object);
objective.style.zIndex=1;
}, 2000);
}
Hiding and showing an element
You can hide and show a method in a few ways:
Use z-index as you suggest, probably not the best way as we can actually hide it instead of sending it to the back of the page.
objective.style.zIndex = 1;
Use display, this hide the object completely.
// hide
objective.style.display = 'none';
// show
objective.style.display = 'block';
Use visibility, this will hide the object but it will still take up space in the page. This wouldn't matter if you're using position:fixed or position:absolute.
// hide
objective.style.visibility = 'hidden';
// show
objective.style.visibility = 'visible';
You can either create a div around the objective, and add it in with javascript like this
document.getElementById('objectivespan').innerHTML=imagehere;
Other than that, you can use
objective.style.visibility='hidden';
and change it to
objective.style.visibility='visible';
for the delay, use
function sleep(){
alert('slept');
}
SetTimeout('sleep', 10000);

how to check, whether user is dragging the object rightside or leftside in actionscript 3

I am creating a flash based application, where user can change a rectangle shapes, width and height using mouse drag. here is a quick prototype image.
let me explain briefly: In the image you can see, i am having a tiny red rectangle, which one now sitting is starting position and user can drag that only 100px to right side. The idea is when, user is dragging that to right, i want to rectangle also expand right side with that, like a flexible box. if he is dragging back then it will return with that.
so, the doubt is: how will check, whether user is dragging right side or left side. so based on that we can update the rectangle width.
Here is the code :
import flash.geom.Rectangle;
import flash.events.MouseEvent;
var horizRect:Rectangle = new Rectangle(scrollPathHoriz.x, scrollPathHoriz.y, 100, 0);
var horizCount:Number;
//event listener for the anchor point.
scrollHoriz.addEventListener(MouseEvent.MOUSE_DOWN, dragScroller);
stage.addEventListener(MouseEvent.MOUSE_UP, dropScroller);
//mouse down and mouse up event handler.
function dragScroller(evt:MouseEvent):void {
horizCount= scrollHoriz.x;
scrollHoriz.startDrag(false, horizRect);
scrollHoriz.addEventListener(MouseEvent.MOUSE_MOVE, calculateHorizPixel);
}
function dropScroller(evt:MouseEvent):void {
scrollHoriz.stopDrag();
scrollHoriz.removeEventListener(MouseEvent.MOUSE_MOVE, calculateHorizPixel);
}
function calculateHorizPixel(evt:MouseEvent):void {
horizCount ++;
trace(horizCount);
}
Since you are already saving the starting x position,
You simply need the difference between starting position & current position :
function calculateHorizPixel(evt:MouseEvent):void {
var dx = scrollHoriz.x - horizCount;
trace(dx);
}
A negative value of dx indicates that scrollHoriz moved left, else right.
Or try this:
import flash.events.MouseEvent;
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveMouse);
function moveMouse(event:MouseEvent):void
{
var dx:Number = mouseX - stage.stageWidth/2;
trace(dx);
}

as3 video full screen mode

I have created a video player, but need to add a button that, when clicked, puts the video into full-screen viewing mode. I don't want to scale everything on the stage - just the video. I can't seem to find how to do this - I thought it would be easy.
See if this works:
stage.displayState = StageDisplayState.FULL_SCREEN;
videoPlayer.x = 0;
videoPlayer.y = 0;
//save the width and height in temp vars
//for restoring them later.
videoPlayer.width = stage.fullScreenWidth;
videoPlayer.height = stage.fullScreenHeight;
My understanding is that you can only set the entire stage to full screen, not elements selectively, as you are effectively scaling up the stage object at the root of the display tree. The best way to accomplish the effect that you are looking for would be to arrange/hide/show any objects that you don't want to be visible in a FullScreenEvent.FULL_SCREEN event handler.
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/events/FullScreenEvent.html
Also, a relevant tidbit from the Stage docs, displayState section:
The scaling behavior of the movie in full-screen mode is determined by the scaleMode setting (set using the Stage.scaleMode property or the SWF file's embed tag settings in the HTML file). If the scaleMode property is set to noScale while the application transitions to full-screen mode, the Stage width and height properties are updated, and the Stage the resize event.
Came across this problem recently and this worked like charm. So putting it up here in case it helps anyone.
Flex Client code:
private function startFullScreen(event:MouseEvent):void
{
videoHolder.removeChild(vid); //videoHolder is an spark VideoDisplay
Component
this.stage.addChild(vid);
this.stage.displayState = StageDisplayState.FULL_SCREEN;
oldWidth = vid.width; //store old values required while going back
oldHeight = vid.height;
vid.width = this.stage.width;
vid.height = this.stage.height;
this.stage.addEventListener(FullScreenEvent.FULL_SCREEN,fullScreenHandler);
}
}
/* handler for Fullscreen */
private function fullScreenHandler(event:FullScreenEvent):void
{
//This function is called when user presses Esc key
//on returning to normal state, add the video back
if(!event.fullScreen)
{
this.stage.removeChild(vid);
videoHolder.addChild(vid);
vid.width = oldWidth;
vid.height = oldHeight;
this.stage.removeEventListener(FullScreenEvent.FULL_SCREEN,fullScreenHandler )
}
}
If elements on the stage are scaling it sounds as though you're using the fullScreenRect property rather than simply instructing the stage object to go into fullscreen mode.
Amarghosh has the right approach, but it can be made more flexible by attaching a listener:
stage.addEventListener(Event.RESIZE, _onStageResize, false, 0, true);
stage.displayState = StageDisplayState.FULL_SCREEN;
private function _onStageResize(event:Event):void
{
if(stage.displayState == StageDisplayState.FULL_SCREEN)
{
// Proportionally resize your video to the stage's new dimensions
// i.e. set its height and width such that the aspect ratio is not distorted
}
else
{
// Restore the normal layout of your elements
}
}
To Enter Full Screen Mode
var fullScreenButton:Button = new Button();
...
addChild(fullScreenButton);
fullScreenButton.addEventListener(MouseEvent.CLICK, fullScreenButtonHandler);
...
private function fullScreenButtonHandler(event:MouseEvent)
{
var screenRectangle:Rectangle = new Rectangle(video.x, video.y, video.width, video.height);
stage.fullScreenSourceRect = screenRectangle;
stage.displayState = StageDisplayState.FULL_SCREEN;
}
To Leave Full Screen Mode
...
stage.displayState = StageDisplayState.NORMAL;
...
Note: You can also press escape.
Source: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS44B1892B-1668-4a80-8431-6BA0F1947766.html