FLVPlaybackCaptioning + Custom position - actionscript-3

Using FLVPlayback Captioning component I would like to move the subtitle text at certain parts in y-position. Is this possible in AS3?
All of my own custom arguments are ignored when subtitles are parsed and wrapping the specific part with some sort of character won't do it either as I cannot change the text during runtime.
The reason is that in my videostreams there is boxes with text content that I don't want the subtitle on top of, and rather above for reading purposes.
I was thinking of either doing an own manual subtitle function or custom flash cuepoints that I can access but want to know if anyone has done this before.

Something like this will do it. I found out that autoLayout was over overridden by the subtitle xml so I forced it to false every "change".
public function Init() : void
{
// captions
_captions = new FLVPlaybackCaptioning();
_captions.autoLayout = false;
_captions.flvPlayback = _video;
_captions.addEventListener(CaptionChangeEvent.CAPTION_CHANGE, onCaptionChange);
_captions.source = "mySubs.xml";
addChild(_captions);
}
private function onCaptionChange(pEvent : CaptionChangeEvent) : void
{
if(!_captions.captionTarget)
return;
_captions.autoLayout = false; // force autoLayout
_captions.captionTarget.y = 666; // position of choice
}

Related

actionscript 3 contentHeight not updating properly

I am using Adobe Flash Builder with actionscript to make a desktop application.
I am getting some html code from a webpage and putting it into an mx:html element, then attempting to get the content height in order to determine if I should hide the vertical scrollbar or not. However, when using contentHeight it seems to return the height of the previous state of the element, rather than the one just set.
This is the code to fetch the html page
var htmlPageRequest:URLRequest = new URLRequest(url);
htmlPageRequest.method = URLRequestMethod.GET; //set request's html request method to GET
htmlPageLoader.addEventListener(Event.COMPLETE, onHtmlLoaded); //listen for page load
htmlPageLoader.load(htmlPageRequest);//when loaded continue logic in new function
This is the function that is run when the page request is complete
private function onHtmlLoaded(e:Event):void { //logic after html page has loaded
HtmlElement.data = htmlPageLoader.data; //set content
//determine if vscroll bar should be visible
if(HtmlElement.contentHeight > HtmlElement.height) {
scrollbar.visible = true;
}
else {
scrollbar.visible = false;
}
trace(HtmlElement.height);
trace(HTMLELEMENT.contentHeight);
}
I have realised the solution to the problem:
htmlElement.data = htmlPageLoader.data;
Rendering the HTML takes a certain amount of time - the contentHeight is being accessed before the page has actually rendered, causing the previous value to be returned.
In order to fix this, I added an event listener for (htmlRender) in order to not access contentHeight until the rendering is complete.
private function onHtmlLoaded(e:Event):void { //logic after html page has loaded
htmlElement.addEventListener(Event.HTML_RENDER, onHtmlRendered); //once the html has rendered, move on
htmlElement.data = htmlPageLoader.data; //render content
}
private function onHtmlRendered(e:Event):void { //logic for after the page has rendered
//if the content of the HTML element is bigger than the box, show the scrollbar
if(htmlElement.contentHeight > htmlElement.height) {
scrollbar.visible = true;
}
else {
scrollbar.visible = false;
}
}
I am assuming that you are using a URLLoader (htmlPageLoader) instance here to load the webpage into the mx:HTML element, which may not be actually required.
The mx:HTML component actually provides an inbuilt way to load an webpage into itself. This can be done using the location property of the mx:HTML class. It expects a simple string which could be the URL of your webpage you are trying to load.
Once the webpage is loaded, the Event.COMPLETE method is fired, within which you should be able to get your content height properly. So please try the following code:
htmlElement.addEventListener(Event.COMPLETE, onHtmlLoaded);
htmlElement.location = "your URL goes here";
private function onHtmlLoaded(e:Event):void
{
htmlElement.removeEventListener(Event.COMPLETE, onHtmlLoaded);
trace(htmlElement.contentHeight);
}
I've tried the above with a couple of URL's and it seems to be working fine. Also, I took the liberty of using camel case naming convention for htmlElement. It's just best practice.
Hope this helps. Cheers.

How to load a swf and interact with it?

I have tried SWFLoader, but the problem is the loaded content is MovieClip and I don't know how to interact with it, and the MovieClip#numChildren is zero.
And by the way, I can't pass the flashvars to the swf.
Firstly, you should know that there is no exact answer to your question as it depends on your loaded SWF (you know it or not, its display list, ...) but I'll put a simple example to explain things and you have to adapt it to your case.
For this example, let's say that we have a very simple SWF (the loaded SWF) which contain a TextField (called txt_url) and a button (a MovieClip, called btn_go).
The btn_go button will open the URL entered in the txt_url TextField.
For our second SWF (the loader), we will use a Loader object to load our first one (which is in this case will be the Loader.content) and then we will set the URL (the txt_url text) and trigger the click event on the btn_go button.
So here is an example of the code of our loader.swf :
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_SWFLoad);
loader.load(new URLRequest('loaded.swf'));
addChild(loader);
function on_SWFLoad(e:Event): void
{
// get our loaded SWF
var loaded_swf:DisplayObjectContainer = DisplayObjectContainer(loader.content);
// because we know our target objects, we can use "getChildByName()"
// set the URL
TextField(loaded_swf.getChildByName('txt_url')).text = 'http://www.example.com';
// open the URL in the browser by triggering the click event on the "btn_go" button
MovieClip(loaded_swf.getChildByName('btn_go')).dispatchEvent(new MouseEvent(MouseEvent.CLICK));
}
This example will directly set and open the URL in the browser after loading the SWF, of course we can execute that action after clicking a button or something else but it's just a simple example to show you how you can do ...
Now, the problem is when we don't know anything about the loaded SWF and its children (names, depths, ...), in this case we should do more effort to do what we want : we should traverse the entire display list of the loaded SWF to identify the target objects.
Returning to our example and let's say that we only know that there are a TextField and a button in the stage, so our code can be like this for example :
function on_SWFLoad(e:Event): void
{
var loaded_swf:DisplayObjectContainer = DisplayObjectContainer(loader.content);
var num_children:int = loaded_swf.numChildren;
for(var i:int = 0; i < num_children; i++)
{
var child:DisplayObject = loaded_swf.getChildAt(i);
if(child is TextField)
{
trace(child.name); // gives : txt_url
TextField(child).text = 'http://www.example.com';
}
else
{
if(child.hasEventListener(MouseEvent.CLICK))
{
trace(child.name); // gives : btn_go
child.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
}
}
}
}
Again, it's a very simple example just to show how we can proceed ...
...
Then about passing values (params) between SWFs, take a look on my answer of this question where you have a little example for that.
For more about Display programming (display list, display object, display object container, ...) take a look here.
Hope that can help.

Optimize ItemRenderer For Flex Mobile Application

I made this class, which is an ItemRenderer class, used in a DataGroup ( mobile application ),
and I am not entirely sure if I did the right thing or not, my issues are :
Is there a better way to show the image, which is 80x80 and directly loaded from the server;
How to make the height of the row dynamic, I mean, depending on the height of the 3 StyleableTextFeild
Is this the right way to add the listener on the image, that will trigger a simple HTTPService,
Here is the functions from the class, Any help would be much appreciated !!
Image
Declared it as a simple image :
var logo:Image;
On override createChildren
logo = new Image();
addChild(logo);
And I added on set Data
logo.source = "http://192.168.0.15:3000/"+value.logo_thumb_url;
Size
override protected function measure():void {
measuredWidth = measuredMinWidth = stage.fullScreenWidth;
measuredHeight = measuredMinHeight = 100;
}
Listener
override public function set data(value:Object):void {
tel.text = String(value.Tel);
description.text = String(value.Descricao);
nome.text = String(value.Nome);
logo.addEventListener(MouseEvent.CLICK, function():void{
var service:HTTPService = new HTTPService();
service.url = value.targer;
service.method = "GET";
// setting headers and other variables ...
service.send();
});
}
You can use URLLoader or Loader for loading the image if you are planning to cache the image on the client side, if you cache the image, it wil help you not load the image again when the users scrolls through the list. (What you have done is Ok, but you will hit performance issues)
For variable row height, if Datagroup does not work, use List. find it here Flex 4: Setting Spark List height to its content height
There should be a buttonMode property for some items, make it buttonMode for the logo, for variable row height, find something related to wordWrap and variableRowHeight properties on the datagroup.
There are a few suggestions, what you have coded is good, but, instead of adding the listeners on set data, add it in creation complete, as it is more appropriate. Also, the event listeners has to be weak referenced, http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/EventDispatcher.html#addEventListener()

How can I detect StaticText in AS3?

I have StaticText fields in my flash project and I need to run some code when the mouse is hovering over them. So I tried this code
stage.addEventListener(MouseEvent.MOUSE_OVER, mouseRollOver);
function mouseRollOver(event:MouseEvent):void {
var tf:StaticText = event.target as StaticText;
if (tf){
//my code
}
}
but it doesn't work. When I use dynamic text fields and replace StaticText with TextField in the var tf, it works fine. I also thought that I could get this thing working with static text fields if I could make the mouse detect not StaticText as a target but some kind of object that has certain text properties (like "selectable" set to true), but I couldn't figure out how to do this. Anyway, I need to detect a static text field as a target somehow. Any help would be appreciated.
Thanks in advance
Your best option would be to put the static text box in a movieclip, and then assign your code based around that. Static text boxes don't have instance names, and can't be manipulated.
It is hard to do this. See this link enter link description here
As you can see you can check if the DisplayObject is StaticText and by checking the mousX and MouseY properties you can find if the rollover is related to this field. By if you use Dynamic text and uncheck selectable field you will get a textfield that acts as StaticField
EDIT
this is an explanation what I mean:
Let we have a StaticText field into stage in Black flash document.
var myFieldLabel:StaticText
var i:uint;
//This for check for all staticFields in state and trace its text. It is possible and it is working. I my case I have only one field and I get reference to it in myFieldLabel:StaticText var. Also I change it's alpha to 0.3.
for (i = 0; i < this.numChildren; i++)
{
var displayitem:DisplayObject = this.getChildAt(i);
if (displayitem instanceof StaticText) {
trace("a static text field is item " + i + " on the display list");
myFieldLabel = StaticText(displayitem);
trace("and contains the text: " + myFieldLabel.text);
trace( myFieldLabel.mouseX);
myFieldLabel.alpha = 0.3;
}
}
//Adds event listener to the stage for mouse move event
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseRollOver);
//This is an event handler. I check if the mouse position is within the static field
function mouseRollOver(evnt:MouseEvent):void
{
if ( 0 <= myFieldLabel.mouseX && myFieldLabel.mouseX <= myFieldLabel.width && 0 <= myFieldLabel.mouseY && myFieldLabel.mouseY <= myFieldLabel.height )
{
mouseOverStaticText( evnt)
}
else
{
mouseNotOverStaticText( evnt)
}
}
// this two methods change the static field alpha. Thay are only to show that is posible to detect and manipulate some properties of the StaticField.
function mouseOverStaticText( evnt)
{
myFieldLabel.alpha = 1;
}
function mouseNotOverStaticText( evnt)
{
myFieldLabel.alpha = 0.3;
}
I'm not sure what is the purpose of the managing of the StaticText field. StaticText is not design to be managed if you have to do something this is almost sure that the field must not be a static - they can be dynamic ( without selectible property ) or can be capsulated with MovieClip or there can be a different solution in your case.

Is it possible to use a non-embedded fallback font when using an embedded font with AS3 TextField?

I have an embedded font in my AIR/AS3 app that lacks support for most international characters. Using TextField and StyleSheet with the font-family property, I assumed I would simply need to do this:
font-family: Interstate-Regular, _sans;
This works if TextField.embedFonts = false; but then Interstate-Regular isn't embedded for users that don't have it on their system. With TextField.embedFonts = true; the text doesn't even show up. Is there a way to embed Interstate-Regular and still use _sans as a fallback system font without embedding it as well?
Flash Text Engine has this "fallback" feature, but it is slower than regular TextField, and more difficult to use it.
Link to the Adobe Manual
You could implement a switch in a custom FontManagement class , if a language is not supported by your main font , revert to a non embedded font. To achieve this , you could use this FontManagement class as a centralized point where to format your TextFields. This could be achieved by creating a public static function which would return a TextField with the relevant format.
//where you need to format a TextField
var params:Object = {color:0xffffff , size:12, supported:false , etc...};
var tf:Texfield = FontManagement.formatTextField(tf , params );
public class FontManagement
{
//A basic example
public static function formatTextField( tf:TextField , params:Object ):TextField
{
//since this is a static function , the Boolean is passed as an argument
//but there are other ways to set it, depending on where in your app
//the language is identified
if( params.supported )
tf.embedFonts = true;
else
tf.embedFonts = false;
//here the rest of your formatting code
return tf;
}
}