I'm trying to create an image component that can be scaled using 9-slice scaling.
I'm 100% positive the grid rectangle is inside the image's bounds. However, the scale9Grid property seems not to affect anything.
I have tried many different things. Here is my last attempt where I try to put the image in a canvas. Any idea what I'm doing wrong?
mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()"
>
<mx:Script>
<![CDATA[
import mx.core.BitmapAsset;
import mx.controls.Image;
[Embed(source="assets/image.png")]
private var barImageClass:Class;
private var barImage:Image;
private function init():void
{
barImage = new Image();
barImage.addChild( new Bitmap( (new barImageClass() as BitmapAsset).bitmapData ) );
barImage.scale9Grid = new Rectangle( 120, 4, 2, 2 );
barImage.scaleX = 2;
addChild( barImage );
}
]]>
</mx:Script>
I believe you need to apply the scale9Grid to the bitmap, instead of to the sprite/movieclip it's inside of.
See this adobe doc. I think it will solve your problem. Cheers
Related
I have 2 canvas objects that both contain a tiling image. My client recently requested that both the images be able to appear at the same time. I simply allowed them to be both enabled at the same time thinking they would tile appropriately but they do not.
After some careful thought I realized this is because they are of varying width so although my tiling image is 7 pixels in width, it may not always end at 7 pixels thus causing it to not appear to tile cleanly.
I can't just lop off the remainders because the imagery is being used to assess quantities of items (without going into too much detail) and having item 1 with 97 quantity next to item 2 with 200 quantity on one row compared to row 2 with item 1 having 100 quantity and item 2 having 300 quantity will show up strange to the end-user.
Does anyone know of how I could get started with maybe splicing the two canvas objects together or rather using 1 canvas object and then using BOTH background images and setting a percentWidth or something that the other one comes into affect?
You can use the copyPixels() method of the BitmapData class to achieve this sort of result. To do this, you need to load each image with a Loader. When the images are loaded, you have two Bitmap objects. From there, you access the corresponding BitmapData for each Bitmap and can splice them together.
After the splice, you create a new Bitmap object from the combined BitmapData. Then you feed the combined Bitmap to some other component. Unfortunately, a Canvas won't accept a Bitmap for its backgroundImage style. But you can add the combined Bitmap to a UIComponent or set it as the source of an Image component.
Finally, add either the UIComponent or Image to a Canvas. Since you can layer things on the Canvas, you effectively have a background image as long as place (and leave) the combined image at index 0 of the Canvas.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
minWidth="955" minHeight="600"
creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.containers.Canvas;
import mx.controls.Image;
import mx.core.UIComponent;
import mx.events.FlexEvent;
private var loader1:Loader;
private var loader2:Loader;
private var bitmap1:BitmapData;
private var bitmap2:BitmapData;
protected function onCreationComplete():void
{
loader1 = new Loader();
loader1.load(new URLRequest("Android_Robot_100.png"));
loader1.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoader1Complete, false,0,true);
loader2 = new Loader();
loader2.load(new URLRequest("rails.png"));
loader2.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoader2Complete, false,0,true);
}
protected function onLoader1Complete(event:Event):void
{
bitmap1 = (loader1.content as Bitmap).bitmapData;
if (bitmap1 && bitmap2)
copyPixels();
}
private function onLoader2Complete(event:Event):void
{
bitmap2 = (loader2.content as Bitmap).bitmapData;
if (bitmap1 && bitmap2)
copyPixels();
}
protected function copyPixels():void
{
// false = non-transparent background
var combined:BitmapData = new BitmapData(200,200, false);
var sourceRect1:Rectangle = new Rectangle(0,0,bitmap1.width, bitmap1.height);
var sourceRect2:Rectangle = new Rectangle(0,0,bitmap2.width, bitmap2.height);
combined.copyPixels(bitmap1, sourceRect1, new Point(0,0));
combined.copyPixels(bitmap2, sourceRect2, new Point(bitmap1.width, 0));
var result:Bitmap = new Bitmap(combined);
var image:Image = new Image();
image.source = result;
var canvas:Canvas = new Canvas();
canvas.addChildAt(image, 0);
addChild(canvas);
// as an alternative, just add the bitmap to a UIComponent
// note you can't do this and the above at the same time,
// becuase the 'result` Bitmap can only be the child of one
// object, adding it to one thing removes it from the other...
// var uic:UIComponent = new UIComponent();
// uic.addChild(result);
// addChild(uic);
}
]]>
</mx:Script>
</mx:Application>
Ultimately I was overcomplicating it. I simply did this with masking like...
<mx:Canvas width="100%" height="100%">
<mx:Image id="myFirstUnrelatedImage" width="50%" height="65%" maintainAspectRatio="false"
verticalCenter="0" left="3"
source="#Embed('../assets/image1.png')" visible="true"/>
<!-- not sure why borderStyle here is required but it won't show up without? -->
<mx:Canvas id="image1mask" width="30%" height="94%"
borderStyle="none" visible="false"/>
<mx:Canvas id="image1" width="100%" height="100%"
minWidth="0" styleName="myStyle"
mask="{image1mask}"/>
<!-- not sure why borderStyle here is required but it won't show up without? -->
<mx:Canvas id="image2mask" width="20%" height="94%"
right="0" borderStyle="none" visible="false"
includeInLayout="false"/>
<mx:Canvas id="image2" width="100%" height="100%"
minWidth="0" styleName="myStyle2"
mask="{image2mask}"/>
</mx:Canvas>
Where my styles were controlling the backgroundImage and backgroundRepeat properties in css.
I need to move a sprite only vertically on mouse move. How do I implement it with as3?
Thanks
Flash version
var s:Sprite = new Sprite();
s.x = 20;
s.graphics.beginFill(0xFF0000);
s.graphics.drawRect(0,0,20,20);
addChild(s);
stage.addEventListener(MouseEvent.MOUSE_MOVE,moveSprite);
function moveSprite(e:MouseEvent):void
{
s.y = e.localY;
}
Flex version
<mx:Canvas width="100" height="100">
<mx:mouseMove>
<![CDATA[
s.y = event.localY;
]]>
</mx:mouseMove>
<mx:Canvas id="s" backgroundColor="#ff0000" width="20" height="20"/>
</mx:Canvas>
Each of these you can paste in and will do what you said. it will create a 20x20 red box that is vertically the same as the mouse but fixed horizontally. The flex version your mouse has to be within the containing Canvas.
addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(e:MouseEvent):void{
mySprite.y += amount;
}
Ok, dragging is a little more complicated. You need to define a rectangle for the bounds of the dragging. If you want to just drag along one axis then you make the rectangle have a width of 0. In this example I've restricted the amount of scrolling and and down to different numbers that you can change below.
import flash.events.MouseEvent;
import flash.geom.Rectangle;
mySprite.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void{
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
var scrollUpAmount:int = 10;
var scrollDownAmount:int = 200;
var boundsRect:Rectangle = new Rectangle(mySprite.x,mySprite.y-scrollUpAmount,0,mySprite.y+scrollDownAmount);
mySprite.startDrag(false, boundsRect);
}
function mouseUpHandler(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
mySprite.stopDrag();
}
I'm creating a map that has points of interest. (POI) When a user mouses over the POI an info bubble pops onto the screen and it loads an swf. I currently have 3 problems. My 4th problem is that this is due Monday 21st! so any help would be greatly appreciated!
I can't detect the size of the swf so that my infobubble will size itself to the size of the swf.
When I mouse over my swf file, it disappears.
I would love to have the my swf file pop up in a layer on its own instead of being on the stage of my main flex file...but i have no clue how to do this.
package com.modestmaps
{
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Shape;
import flash.display.Sprite;
import flash.filters.BlurFilter;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.net.URLRequest;
import flash.text.TextField;
public class InfoBubble extends Sprite
{
public var textField:TextField;
public var background:Shape;
public var shadow:Shape;
public function InfoBubble(text:String)
{
//I name the instance of my POI marker on my map to the url link of my swf file. So whatever marker i click on the correct url will
this.name = urlLink;
this.mouseEnabled = true;
this.mouseChildren = false;
//this creates a shadow behind my infobubble
shadow = new Shape();
shadow.filters = [ new BlurFilter(16, 16) ];
shadow.transform.matrix = new Matrix(1, 0, -0.5, 0.5, 0, 0);
addChild(shadow);
background = new Shape();
addChild(background);
textField = new TextField();
textField.selectable = true;
textField.multiline = true;
textField.wordWrap = true;
//textField.text = urlLink;
textField.width = textField.textWidth+300;
textField.height = textField.textHeight+288;
//addChild(textField);
var request:URLRequest = new URLRequest(urlLink);
var loader:Loader = new Loader();
loader.load(request);
addChild(loader);
//marker clips are positioned with (0,0) at the given location
//current measurements of swf file w432 h288
//if i could dynamically determine the size of the loaded swf file its position would be automatically calculated
loader.y = -288 - 37;
loader.x = -8;
//marker clips are positioned with (0,0) at the given location
textField.y = -textField.height - 35;
textField.x = -10;
//currently my rectangle's size is determined by the textField size. I don't even use the textfield. I want the rectangle to be drawn using the dimensions of the swf file instead.
var rect:Rectangle = textField.getRect(this);
// get your graph paper ready, here's a "speech bubble"
background.graphics.beginFill(0x12345);
shadow.graphics.beginFill(0x000000);
for each (var g:Graphics in [ background.graphics, shadow.graphics ] ) {
g.moveTo(rect.left, rect.top);
g.lineTo(rect.right, rect.top);
g.lineTo(rect.right, rect.bottom);
g.lineTo(rect.left+15, rect.bottom);
g.lineTo(rect.left+10, rect.bottom+15);
g.lineTo(rect.left+5, rect.bottom);
g.lineTo(rect.left, rect.bottom);
g.lineTo(rect.left, rect.top);
g.endFill();
}
}
}
}
I hope you more skilled coders can help me out. I'm new to flex and as3
Edit: There is no javascript in this file. All of it is AS3.
Edit2: This is the temporary site I am testing it on http://cjbutchershop.com/temp/adtypes/mapTest.swf
You can get the size of your application by doing:
var width:int = Application.application.width;
var height:int = Application.application.height;
With regards to the text disappearing when you hover over the info bubble; you might want to reconsider your approach. Rather than loading an external swf, I have implemented info bubbles for modest maps by adding/removing child objects (like a TextField) to my marker object (which extends Sprite) in response to the appropriate mouse events.
I am new to Flex myself, but i have done something similar while trying out an example while learning.
Basically what i suggest is Open the bubble in a new popup window using the PopUpManager class on MouseOver event on the parent window (on your map).
And show the popup in a TitleWindow Component,also tap the close event on Title window component.That way you will come back to the same page.Hope this helps.
Posting code here
< ? xml version="1.0" encoding="utf-8" ? >
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.Alert;
import mx.managers.PopUpManager;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var photoFeed:ArrayCollection;
public function searchFlickr():void {
photoService.cancel();
var params:Object = new Object();
params.format = 'rss_200_enc';
params.tags = srchTxtId.text;
photoService.send(params);
}
public function resultHandler(event:ResultEvent):void {
photoFeed = event.result.rss.channel.item as ArrayCollection;
}
public function openPanel(levent:ListEvent):void {
var panelCmpObj:panelcomp = new panelcomp();
panelCmpObj.source = levent.itemRenderer.data.content.url;
PopUpManager.addPopUp(panelCmpObj,this,true);
}
public function test():void {
Alert.show('testtest');
}
]]>
</mx:Script>
<mx:HTTPService id="photoService" url="http://api.flickr.com/services/feeds/photos_public.gne" result="resultHandler(event)"/>
<mx:HBox width="362" height="24">
<mx:TextInput id="srchTxtId"/>
<mx:Button label="Search for pics" id="srchBtnId" click="searchFlickr()"/>
</mx:HBox>
<mx:TileList id="imgTileList" dataProvider="{photoFeed}" width="100%" height="100%" itemClick="openPanel(event)">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="125" height="125"
paddingBottom="5"
paddingLeft="5"
paddingTop="5"
paddingRight="5">
<mx:Image width="75" height="75" source="{data.thumbnail.url}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
CODE FOR THE COMPONENT shown on PopUP
< ? xml version="1.0" encoding="utf-8" ? >
< mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
showCloseButton="true"
styleName="noPadding"
creationComplete="init();"
close="titleWindow_close(event);" >
< ![CDATA[
import mx.managers.IFocusManagerComponent;
import mx.controls.Alert;
import mx.core.IFlexDisplayObject;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable]
public var source:String;
private function init():void {
PopUpManager.centerPopUp(this);
}
private function titleWindow_close(evt:CloseEvent):void {
PopUpManager.removePopUp(evt.target as IFlexDisplayObject);
}
]] >
< /mx:Script>
< mx:Image width="379" height="261" id="imgId" source="{source}"/>
<mx:ControlBar horizontalAlign="right" width="100%">
</ mx:ControlBar>
< /mx:TitleWindow >
"So you are trying to get the application size from within the info bubble swf? Why is the info bubble in a separate swf? If you have the info bubble source code, I suggest adding it into your map application and directly instantiate the info bubble object. – elevine 2 hours ago"
I have three different type of infoBubbles (only static bubble is shown). Some of my info bubbles have moving content. I am not looking for the application size of the external swf in the bubble, i am looking for the physical size. The height and width of the external swf that is populating the bubble. If I knew the height and width, I can have the infobubble match the height and width. Right now I have the info bubble hardcoded to the size of the current info bubble; however, i will have different sizes of info bubbles swf files.
I have rows of text data that can vary between 0 and 100, and all need to be visible on the screen at one time. The default behavior is fine for the grid until the rows * rowHeight > gridHeight.
Basically I need a hook into the item height, or row height to calculate it based on the height of the grid. I've set paddingTop and paddingBottom to zero, but there is still a considerable amount of white space in between rows.
My datagrid component...
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="OnCreationComplete()"
paddingTop="0"
paddingBottom="0"
>
<mx:Script>
<![CDATA[
private function OnCreationComplete():void
{
//setRowHeight(10);
}
override protected function setRowHeight(v:Number):void
{
super.setRowHeight(v);
}
]]>
</mx:Script>
</mx:DataGrid>
setRowHeight() helps, but the itemRender for the cell bigger than the cell, if I set the row height to something like 10.
You might want to look at the DataGrid.variableRowHeight property as, when this is set to false (the default) all rows will be the same height as the largest itemRenderer. You could also look into writing your own itemRenderer for each DataColumn.
If all you really want to do is set the row height based on the number of items in the dataProvider though, you could just set the DataGrid.rowHeight property like this (assuming your grid has a fixed height, say 100%) :
myDataGrid.dataProvider = myArray;
myGrid.rowHeight = Math.floor((myGrid.height - myGrid.headerHeight)/myArray.length);
(I'm taking the floor here because if you end up with a fractional value that rounds up, you'll need a scroll bar)
The only problem with this approach, as I think you've noticed, is that the itemRenderer might not display properly in a row that's too small. I guess you could solve this by changing the font within the renderer based on its height.
Thank you inferis, that helped me a lot. This is my final grid component. It's not really self contained because of a few call-outs, but if it helps someone else get theirs to work, great!
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
paddingTop="-3"
paddingBottom="-3"
resize="OnResize(event)"
>
<mx:Script>
<![CDATA[
import mx.containers.Panel;
import mx.core.Application;
import mx.events.ResizeEvent;
protected function OnResize(event:ResizeEvent):void
{
this.invalidateDisplayList();
}
/**
* #private
* Sizes and positions the column headers, columns, and items based on the
* size of the DataGrid.
*/
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
if( this.collection.length > 0 ) // so don't divide by zero
{
var appHeight:Number = Application.application.height;
var appMinusMenuHeight:Number = appHeight - Application.application.hboxPrintBar.height;
var boxHeight:Number = Application.application.vboxViewAll.height;
if( boxHeight > 0 )
{
var gridHeight:Number = (appMinusMenuHeight - this.headerHeight) * 0.93;
var calcHeight:Number = gridHeight / this.collection.length;
var calcHeightFloor:Number = Math.floor( calcHeight );
setRowHeight( calcHeightFloor );
//var p:Panel = this.parent as Panel;
//p.title = calcHeightFloor.toString();
if( calcHeightFloor <= 10 )
this.setStyle("fontSize",calcHeightFloor);
}
}
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
]]>
</mx:Script>
</mx:DataGrid>
I have a sprite that I do some custom drawing in, but I would like the container to know where to position the sprite properly. To do this, the container needs to know how big the sprite is. UIComponents go through a measure stage, but sprites don't . How do I calculate the size that a sprite will be?
Edit: I'm doing the drawing in Event.ENTER_FRAME, and it's animated, so I can't tell ahead of time how big it's going to be. The UIComponent has a measure function and I'd like to create something similar.
The precise answer, as far as I can gather is, you can't tell ahead of time, you must actually draw into the sprite to determine it's size.
Sprites take the size that you draw in them. It has no size at all until you've drawn something in it. If your application allows you can draw a border (rectangle maybe) first and then measure the sprite. But don't draw outside the borders later.
Also, depending on what you are drawing, then you may be able to use math to pre-calculate the final size.
i.e. if you are drawing a circle, you could use Math to figure out the final height / width.
mike
Have a look here -- I hope this answers your question:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var s:Sprite;
private var w:UIComponent;
override protected function createChildren():void
{
super.createChildren();
if (!s)
s = getSprite();
w = new UIComponent();
trace("The sprite measures " + s.width + " by " + s.height + ".");
w.addChild(s);
box.addChild(w);
}
private function getSprite():Sprite
{
var s:Sprite = new Sprite();
s.graphics.lineStyle(1, 0xFFFFFF);
s.graphics.beginFill(0xFFFFFF, 1);
s.graphics.drawRect(0, 0, Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000));
s.graphics.endFill();
return s;
}
]]>
</mx:Script>
<mx:Box id="box" backgroundColor="#FFFFFF" />
</mx:Application>
If you run this, the trace statement should display the height and width of the drawn Sprite, which is randomly generated. In other words, you can get the height and width of the sprite simply by querying its height and width properties.
If you need to layout some others components based on the Sprite width and height, but before actually drawing it, you can draw on a flash.display.Shape object, use this size as a reference, and then attach the Shape on the Sprite.