How to add movieclip inside textfield - actionscript-3

I would like to add a movieclip to a textfield. The objective is to be able to scroll the movie clip, since the uiscrollbar only works for textfield, i think my solution to scrolling the movie clip is to put it inside a textfield.
I have tried something like:
myText.addChild(myClip);
but failed with error: 1061: Call to a possibly undefined method addChild through a reference with static type flash.text:TextField.

The problem is that a TextField is not a DisplayObjectContainer, so you can't add children.
(The good news is that there are a number of alternate solutions you can find through Google)

You won't be able to add it to a textfield and I'm not exactly sure what you're mean by "scrolling the movie clip" but assuming you have a movieclip that is larger than the area you want to display it, something like this might work:
<s:Group>
<s:Scroller>
<mx:SWFLoader source="#Embed(source='movieclip.swf')"/>
</s:Scroller>
</s:Group>

Sorry if this is a bit of a thread-jack, but I recently had a situation where I needed this type of functionality. And while I'm sure you no longer need an answer to this, I hope that the solution that I came up with will help someone else.
Dear god, why would someone do this?!
In my particular case, I had an extremely long textfield that needed to scroll. In my experience, scrolling by moving the movieclip vertially is unreliable when dealing with extremely long textfields which necessitated that I use the Adobe/Flash uiscrollbar-esk method of adjusting the scrollV of the text field.
This was further complicated by the need for both in-line images which pulled from the library (as opposed to an external source) as well as a black-box border around a section of the text, both of which needed to scroll along with the text.
In a nutshell, one would probably only need to do something like this for a completely self contained swf and under extenuating circumstances (like pharma banners).
Inserting Images From Library:
To accomplish this you need to create a movieclip from an image in the library and export that movieclip for Actionscript. Then, in your code, add something like this:
//This is a string from your textfield that you will replace with an image
var matchForImageSplit:String = 'IMAGE 1 GOES HERE';
//This is the code to replace the above string
//Here, "Image1" is the class name of the exported MovieClip
var imageToAdd:String = '<img src="Image1" />';
my_text.htmlText = my_text.htmlText.split(matchForImageSplit).join(imageToAdd);
Adding the black-box border around text:
This was a bit more tricky. What I had to do was create a MovieClip with a border at the size I needed and give it a name. Then I positioned it behind the text where it was supposed to go, and enclose all of that in a parent_mc movieclip.
I then had to code the box to move along with the scrolling. The below is specific my project, but this is the gist of it:
//THIS CODE IS NON-FUNCTIONAL AND SHOULD ONLY BE USED AS A REFERENCE
//Redundant - just making the example more clear.
var my_text:TextField = parent_mc.my_text;
var borderBox:Sprite = parent_mc.borderBox;
//Vars for calculating position and movement
var borderBoxStartY:Number = borderBox.y;
var incrementRate:Number = my_text.textHeight/my_text.numLines;
var sPos:Number;
var top:Number = dragger.y;
var bottom:Number = (dragger.y + track.height) - dragger.height;
var range:Number = bottom - top;
var ctrl:Number = parent_mc.y; //"parent_mc" is the parent MC that contains the textField and borderBox
function dragScroll():void {
ratio = my_text.maxScrollV/range;
sPos = (dragger.y * ratio) - ctrl;
my_text.scrollV = Math.ceil(sPos);
borderBox.y = ((borderBoxStartY + incrementRate) - (my_text.scrollV * incrementRate));
}
One caveat to note before trying all of this is that when utilizing scrollV, text is moved line-by-line and therefore does NOT scroll smoothly (as it would with position based scrolling). This can result in the scrolling looking "jerky".
EDIT:
I should also note that this was all custom programmed and does not actually utilize the scrollPane/uiscrollbar components, but behaves in the same fashion.

Related

How do you make a MovieClip inside a scrollPane move to a new location using AS3?

I have an MC that is a list and it's inside a scrollPane. I want to make the list jump to a new location by clicking an object inside the MC.
I do not want the user to manually scroll the list. However, I'm not sure how to reference the MC in the scrollPane.
I'm lost on the coding, have some incredibly basic AS3 going on that doesn't work:
scrollPane.source = List1;
scrollPane.setSize(440, 610);
scrollPane.scrollDrag = true;
The list works in that I can manually scroll through it. So I tried this code to see if I coul move the MC inside the scrollPane up 300 pixels--it obviously didn't work:
button1.addEventListener(MouseEvent.MOUSE_DOWN, moveList1);
function moveList1(evt:MouseEvent):void {
scrollPane.source.List1.y = -300;
}
I'm assuming since the MC "List1" isn't actually on the stage is where I'm getting tripped up.
Thanks for any help.
Apparently I asked a similar question a long time ago that I since forgot about.
The solution is:
"scrollPane instance name".verticalScrollPosition = "wherever you want the pane to scroll to".
Example usage code:
scrollPane.verticalScrollPosition = 100;

flash actionscript 3.0 hide part of an image

I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.
Is there a way to hide just a part of an image?
On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.
image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png
I've tried by just reducing the height of image-2, but it looks awful and distorted.
Is there something in flash that works closely the same as CSS's behavior.
example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.
By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.
Is the mask property applicable in this situation?
I'm quite new to flash so I don't know a lot of things yet.
You can indeed use a mask.
How to programmatically create your mask
Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:
Main Timeline
myImage.mask = myMask;
function mouseMoveHandler(e:MouseEvent):void {
myMask.height = myImage.y - e.stageY;
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
You have just to adapt this code to your animation, in the function where you click your button.
I got it working now, many THANKS #VC.One. heres how I did it.
Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.
I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.
Then applied the mask to img2_mc.
/* the code */
img2_mc.mask = mask_mc;
function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob
mask_mc.height = volumeKnob_y;
}

Making a AS3 "Textfield" with buttonMode and useHandCursor

Sorry for the bad title. Couldn't think of a better one...
I'm doing a software that is configurable with loaded data from XML.
User can define the max "width" of an TextField and the TextFields are multiline and wrapping happens when the text wouldn't fit the width. Text for the TextFields is also loaded from the XML file and the length is arbitrary.
Because TextField doesn't have neither buttonMode or useHandCursor properties I made TextFields children of sprites. So for every TextField there is a sprite as a parent.
Then the real problem:
("TextFields" are actually the sprites with a TextField as a child)
The "TextFields" should not be clickable outside of the text in them. At the moment it seems like that the sprites extend to the full width of the TextFields and therefore user can actually click the "TextFields" from an area where there is no text.
I "tried" to change the size of the sprite, checked the AS3 reference and now I know why everything disappeared after that.
So I need a solution in which, the "TextFields" have buttomMode and useHandCursor enabled and the container should be able to cut off the area where there is no text.
The TextField object has some default sizing characteristics. You need to apply one of these:
TextFieldAutoSize
to this property:
TextField.autoSize
to get it to form fit your text. Then by adding it into an empty Sprite, said Sprite will also be the exact size of your text.
Changing the size of the Sprite is the wrong approach as what you're actually doing in that case is scaling its interior content. Sprites automatically size themselves to fit the objects they contain. As long as you deal with making sure the TextField is sized properly, the parent Sprite will be sized properly as well.
Im sure you dont need it anymore but someone may do, so here it is.
As you have a sprite as parent them you can make him to desable the mouseChildren.
yourSprite.tf.text = 'something';
yourSprite.buttonMode = true;
yourSprite.mouseChildren = false;

Dropshadowfilter on textfield disables the html-links inside. Is there a way around this?

When i put a dropshadowfilter on a dynamic textfield with html-content, the links (a href) stop working.The textfields rotate in flash 3D space so they have a transformmatrix applied to them. Could this be the reason? Anybody had problems with html-links and dropshadowfilter applied to the textfield? it makes no difference if you put the filter on the textfield itself or the movieclip container around it...
Quick fix ... simply target the textfield within the mc and set rotationX and rotationY = 0 !!
I've just tried it in 2 ways and they both worked.
1.using a movie clip as a container
I created a dynamic text field
I embedded the characters, set html to true, set the htmlText with a link...
then placed all that inside a movie clip which I rotated in 3D.
Tried it and it worked.
2.not using a movie clip as a container.
I created the dynamic text field, embedded characters and all of the above except
placing it all inside a movie clip.
I just rotated the text field in 3d using the transform matrix like you mentioned.
//my text field is called 'label'
label.htmlText = 'stackoverflow';
var m3d:Matrix3D = new Matrix3D();
m3d.appendRotation(30,Vector3D.Y_AXIS);
label.transform.matrix3D = m3d;
This worked as well.
Hope it helps

Deleting a shape via code

Pretty basic question here, but its still got me a little confused..
I have an object(navigation menu bar) that I want to change the colors on with code, so in an updateColor function, I get the bounds of the object (which is a drawing shape contained in a movieclip) and redraw a new shape on top of it with the new color, but I've noticed that the last shape still exists behind this redraw.
I tried using obj.graphics.clear(); before the redraw but that didn't get rid of the original shape. Is there another command that I'm overlooking?
Unless you drew the object you wish to remove within the same graphics object, clearing won't work. You need to remove the DisplayObject.
Depending on the number of children you can do:
obj.removeChildAt(0);
This also removes movieclips / buttons you placed on the stage manually.
If you have a reference to the DisplayObject you wish to remove you can simply do
obj.removeChild(backgroundClip);
Note that you can also change the color of a DisplayObject directly:
import flash.geom.ColorTransform;
...
public var test:MovieClip; //instance on stage
...
var cf:ColorTransform = test.transform.colorTransform;
cf.color = 0xff0000;
test.transform.colorTransform = cf;
while(this.numChildren)
{
this.removeChildAt(0);
}
Will clear child object on this MovieClip,
if it's clearing too much, then put the shape drawing in a subclip, and clear the subclip.