I never did stuff like this before! Tried to google around but couldn't find anything useful!
So: how is it possible to make text appear on top of an image (slideshow) in Flex using action script (can it be done another way)?
(I already found action script code that does implement the slideshow but how to show some dynamic text too?)
Thanks in advance!
The most simple method would be to just place a textarea on top of your image.
If it's dynamic text, make sure that you embed the font. If you're running into weird behavior with the font, for example, if it doesn't show up, then make sure that the font is embedded.
The font also needs to be embedded if you intend on scaling it, rotating it, etc.
Using ActionScript alone:
var sprite:Sprite = new Sprite();
//let bmp be an image of size 100x100
//loaded thru Loader class or embedded at compile time
sprite.addChild(bmp);
var tf:TextField = new TextField();
//set background/color/font etc here
tf.text = "100x100 image";
sprite.addchild(tf);
tf.x = 50;
tf.y = 50;
Make sure you addChild text after the image - otherwise image will come on top of the text and you won't see it.
Using flex: Use Canvas or Panel with absolute positioning to put things on top of each other.
<mx:Canvas>
<mx:Image source="image.png"/>
<!--Make sure Label tag is after Image tag-->
<mx:Label text="my image" x="20" y="20"/>
<mx:Canvas>
Related
I would like to customize the design (view) of the extension action button of my Chrome Extension.
I would like to know if it is possible to use html and not only a picture. I would like the button to show text and number. i would like to be able to update the text and number.
I did look it the happy if i could generate an image with the needed informations and change the default button icon. But i did not found anything.
In advance thanks
To create a dynamic browser action icon, use the HTML5 Canvas element; create a canvas, add images and/or text to it, then pass the canvas' image data to chrome.browserAction.setIcon.
Here's a small example (please note that this uses jQuery to create the canvas element):
$('body').append('<canvas id="myCanvas" width="19" height="19"></canvas>');
var myCanvas = document.getElementById('myCanvas');
var context = myCanvas.getContext('2d');
context.fillStyle = "blue";
context.font = "normal 9px Arial";
context.fillText("foo", 0, 19);
chrome.browserAction.setIcon({ imageData: context.getImageData(0, 0, 19, 19) });
Keep in mind that you only have 19x19 pixels to work with, so the font probably needs to be really small.
Depending on your needs, you could get creative with creating text as images and adding images to the canvas instead, and/or using chrome.browserAction.setBadgeText.
For further reading, see:
How can I write text on a HTML5 canvas element?
Drawing text using a canvas
Hi am making a small HTML5 canvas demo.
I initiated the canvas using modernizer from O'Reilly's HTML5 text.
This is for iPad so my canvas is 1024 by 768.
I then load in a background image in my DrawScreen function.
var backgroundImage = new Image();
backgroundImage.src = "images/background.jpg";
backgroundImage.onload = function(){
context.drawImage(backgroundImage,0,0);
}
I want to add text to this then. So I do:
function drawText(){
context.fillStyle ="gray";
context.font = "28px Helvetica";
context.fillText(message, 260, 700);
}
I then call both functions:
DrawScreen();
DrawText();
However my background image totally over writes my text. Or is on top of it. If I disable DrawScreen(); I can see the text. Changing the function order doesn't make a differnce...
How to do this? I feel so stupid that am stuck on something that seems so elementary.
Thanks
The problem is that your image is being drawn after -- and therefore on top of -- your text. This is because of the time it takes the image to load. Basically, what's happening is this:
You call your DrawScreen function
You start loading your background image by assigning the src attribute
You assign the onload() handler to fire once the image has finished loading.
DrawScreen exits, having completed all its work
You call DrawText, which immediately draws the text
At some point later, the image finishes loading, fires the onload() event, and you draw the background image.
I'd suggest restructuring your code so that all the drawing is kicked off by the successful loading of the image. That way, nothing asynchronous will be going on, and the image will be drawn, followed by the text.
Here's a quick example, on jsFiddle.
im new to flex, so naturally I would just create a dynamic sprite using the drawing api and put it behind the text... but my app is really buggy using the rawChildren to addChild.
So is there a better way to have a bg for a piece of text though actionscript?
like modifying an existing component?
I would place the text inside a canvas, and then apply a custom borderSkin to the canvas it's inside. ie:
css:
.textBubbleBackground{
borderSkin: Embed(source="img/textBubble.png",
scaleGridTop="10", scaleGridBottom="100",
scaleGridLeft="10", scaleGridRight="150");
}
mxml:
<mx:Canvas styleName="textBubbleBackground">
<mx:Text text="my text" />
</mx:Canvas>
Obviously that's a bit over simplified and you'll need to apply the proper 9 grid scaling to the background image (or I'd draw it programatically using degrafa, but that's a bit more complicated to explain)
I have a handful of sprites that I am attempting to group together via addChild().
Here is some pseudo-code demonstrating what I would like to accomplish:
import nav.text.TextSprite;
spr1:Sprite = new Sprite();
spr1.graphics.clear();
spr1.graphics.beginFill(0x000000);
spr1.graphics.drawRect(0,0,100,100);
txt1:TextSprite = new TextSprite;
txt1.text = "hello";
spr1.addChild(txt1);
//this is what isn't working: the sprite is hidden but not the text
spr1.alpha = 0.0;
For some reason I cannot seem to get the TextSprite to draw correctly... All it is is a Sprite with a TextField added to it. I think everything is working there, but I might have something wrong w/r/t making sure all of TextSprites children are grouped correctly.
I should mention that it does position correctly; but the alpha property won't respond in the way I would expect it to. I.E., the sprite that the TextField is attached to will allow it's alpha to be set but the text remains visible.
Any thoughts?
Most likely you just need to embed the font in your textfield. Try changing the x, y of spr1 and see if txt1 moves along with it. If it truly is a child then it will respond to the new position.
You need to embed the font using textfield.embedFonts = true. If your text is disappearing when you do this, how are you going about embedding the font (using the Flex embed meta tag or using the Flash IDE?), check that you are not changing the font weight (setting the text to bold when you have only embedded the normal weight font) and if you are using a text format, be sure to apply the text format AFTER you set the textfield.text property. You can get around this by using textfield.defaultTextFormat.
Is there a way to allow a flex application to have a dynamic height while embedded in an HTML wrapper?
I want the Flex application to grow in height in a way that it will not cause vertical scroll bars.
The best way should be overriding the Application's measure method like:
private var _lastMeasuredHeight:int;
override protected function measure():void
{
super.measure();
if (measuredHeight != _lastMeasuredHeight)
{
_lastMeasuredHeight = measuredHeight;
if (ExternalInterface.available)
{
ExternalInterface.call("setFlashHeight", measuredHeight);
}
}
}
This function assumes that you have a javascript function named setFlashHeight which can accept a height (or whatever you name it) parameter. An example would be:
function setFlashHeight(newHeight){
//assuming flashDiv is the name of the div contains flex app.
var flashContentHolderDiv = document.getElementById('flashDiv');
flashContentHolderDiv.style.height = newHeight;
}
I use swfobject to embed my flex applications. So the flash object resides inside a div. If yours not; the js function could easily be altered to set the flash object's height. When you implement this solution, you'll notice that scrollBars aren't working as flash consumes the event. But that's another subject...
This is possible. For an example, see the new Kontain by fi. You can see it directly in action by creating a new blog post and adding lines to the entry field. As the entry field grows in size, the page gets taller.
You'll have to coordinate between Flash and Javascript via ExternalInterface. When your Flex app needs to change size, find the new size (probably by digging into Flex's layout engine) and throw that up to a Javascript function via ExternalInterface. The javascript then can set a new height property on the container. You'll probably also want to set verticalScrollPolicy="off" on your tag so that Flex doesn't show the scroll bars when the layout engine runs.
I'm not sure I fully understand the question, are you trying to get the aplication to have a size larger than the browser's view port? If so, then as #hasseg commented and #RickDT mentioned, you can set the Application's horizontalScrollPolicy and/or verticalScrollPolicy properties to "off"?
If you're simply trying to make sure your application scales with changes to the browser's shape and size, then make sure you set the following (or values that suit) in your outer most application tag.
percentWidth="100"
percentHeight="100"
Unfortunately no, I think the only way you could do this is to get rid of the html wrapper in the first place. HTH.
There is no need for all that, just change the application from spark to mx. this will show it automaticly because I think spark does not support that at all ( I think it's stupid bug from adobe )
like this:
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" >
</mx:Application>
instead of:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" >
</s:Application>
leave application tag without height specification "don't use height="100%"