Load & Display Image in ActionScript - image

I am typing with very green fingers, so, please excuse the question. Learning from examples, I have been trying to load and display an image in ActionScript. This is from the original example that I am working on:
...
...
var bmd2:BitmapData = bmd.clone();
var infoBM:Bitmap = new Bitmap(bmd2);
var back:MovieClip = new MovieClip();
back.name = "back";
back.rotationX = -90;
var bSurface:MovieClip = new MovieClip();
bSurface.y = int(...
bSurface.z = int(...
bSurface.addChild(infoBM);
var overlay:Sprite = new Sprite();
overlay.graphics.beginFill(...);
overlay.graphics.drawRect(0, 0, bSurface.width, bSurface.height);
overlay.graphics.endFill();
bSurface.addChild(overlay);
back.addChild(bSurface);
var tf:TextField = new TextField();
tf...
tf...
tf...
bSurface.addChild(tf);
...
...
I am trying to place an image onto the bSurface instead of the text block, as above. So far, I've come up with:
var iSprite:Sprite = new Sprite();
var iMatrix:Matrix = new Matrix();
var bmData:BitmapData;
bmData = new BitmapData(surface.width, surface.height, true, 123);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("c:\pixlr.png"));
function onComplete (event:Event):void
{
bmData = Bitmap(LoaderInfo(event.target).content).bitmapData;
}
iMatrix.tx = 0;
iMatrix.ty = 0;
iSprite.graphics.beginBitmapFill(bmData, iMatrix, false, true);
iSprite.graphics.drawRect(0, 0, surface.width, surface.height);
iSprite.graphics.endFill();
surface.addChild(iSprite);
...and:
var bmData:BitmapData;
bmData = new BitmapData(surface.width, surface.height, true, 123);
var loader:Loader = new Loader();
var location:URLRequest = new URLRequest("c:\pixlr.png");
loader.load(location);
bmData = Bitmap(loader.content).bitmapData;
surface.addChild(bmData);
but to no success. I've been failing miserably for days now, and would greatly appreciate some help.
Thanking you in advance,
Sofia

You're making this more complicated than it needs to be. A Loader is a DisplayObject. So when you want to load an image you can simply do this:
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("c:\pixlr.png"));
addChild(loader);
You can use the onComplete event to handle any sizing or positioning, or fading in you might want to do.

Related

an error when I used ammo.js and physi.js , what should I do for it?

I want to use Physi.js to make a car , but there has some error, I view my demo at Chrome, and I don't know the error is caused by the file named ammo.js or physi.js ,and following are my codes:
var phymaterial = Physijs.createMaterial(new THREE.MeshStandardMaterial({color:0xff0000,wireframe:true}),0,1);
//create a wall
var wall1 = new Physijs.BoxMesh(new THREE.CubeGeometry(50,10,2),meshGray);
wall1.position.set(0,5,35);
scene.add(wall1);
var cubegeo = new THREE.CubeGeometry(31.6,6,13.6);
//create a cube as car's body
var carPhy = new Physijs.BoxMesh(cubegeo,phymaterial,0);
carPhy.position.set(0,5,0)
car.position.set(0.6,-3,0)
scene.add(carPhy);
//create four wheels use Physijs
var wheelfl = new Physijs.CylinderMesh(new THREE.CylinderGeometry(4,4,1,30),phymaterial,100);
wheelfl.rotation.x = Math.PI/2;
wheelfl.position.set(10,4,-8)
scene.add(wheelfl);
var wheelfr = new Physijs.CylinderMesh(new THREE.CylinderGeometry(4,4,1,30),phymaterial,100);
wheelfr.rotation.x = Math.PI/2;
wheelfr.position.set(10,4,8)
scene.add(wheelfr);
var wheelbl = new Physijs.CylinderMesh(new THREE.CylinderGeometry(4,4,1,30),phymaterial,100);
wheelbl.rotation.x = Math.PI/2;
wheelbl.position.set(-10,4,-8)
scene.add(wheelbl);
var wheelbr = new Physijs.CylinderMesh(new THREE.CylinderGeometry(4,4,1,30),phymaterial,100);
wheelbr.rotation.x = Math.PI/2;
wheelbr.position.set(-10,4,8)
scene.add(wheelbr);
//create constraint with Physijs.DOFConstraint
var fl = new Physijs.DOFConstraint(wheelfl,carPhy,new THREE.Vector3(10,4,-10));
scene.addConstraint(fl);
var fr = new Physijs.DOFConstraint(wheelfr,carPhy,new THREE.Vector3(10,4,10));
scene.addConstraint(fr);
var bl = new Physijs.DOFConstraint(wheelbl,carPhy,new THREE.Vector3(-10,4,-10));
scene.addConstraint(bl);
var br = new Physijs.DOFConstraint(wheelbr,carPhy,new THREE.Vector3(-10,4,10));
scene.addConstraint(br);
And the error information like following:
Uncaught ReferenceError: _emscripten_bind_btGeneric6DofConstraint_btGeneric6DofConstraint_4 is not defined
at new btGeneric6DofConstraint (ammo.js:22)
at Object.public_functions.addConstraint (physijs_worker.js:873)
at self.onmessage (physijs_worker.js:1412)
I wanna know how can I resolve it?

Delete specific image from loader

I have three images all from the same loader on screen. I need to delete a specific (targeted) bitmap once clicked. I have an onClick function below, any help is greatly appreciated. Thanks!
var nb_images:int = 3;
var bmp:Bitmap = new Bitmap;
var img_margin:int = stage.stageHeight/3.5;
var img_request:URLRequest;
var img_loader:Loader;
var images_container:Sprite = new Sprite();
addChild(images_container);
function remove_all_images():void {
for (var i:int = images_container.numChildren - 1; i >= 0; i--) {
images_container.removeChildAt(i);
}
}
function load_images():void {
remove_all_images();
for (var i:int = 0; i < nb_images; i++) {
img_request = new URLRequest('../img/planet' + (int(nb_images * Math.random())) + '.png');
img_loader = new Loader();
img_loader.load(img_request);
img_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_img_loaded);
}
}
function on_img_loaded(e:Event):void {
e.currentTarget.removeEventListener(Event.COMPLETE, on_img_loaded);
bmp = e.currentTarget.content;
bmp.x = 600, bmp.width = bmp.height = 80;
bmp.y = images_container.numChildren * (bmp.height + img_margin);
images_container.addChild(bmp);
stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(event:MouseEvent):void {
removeChild(e.target);
}
}
load_images();
Okay, first thing I did here was remove var bmp:Bitmap = new Bitmap. You're creating a reference you don't really need, so let's get rid of that altogether.
Now, in your on_img_loaded method, you're going to want to create a new Bitmap for each loaded image.
var bmp:Bitmap = e.currentTarget.content;
Then, you'll need to add the event listener directly to an InteractiveObject rather than the stage. Bitmaps are not InteractiveObjects, so we'll need to wrap it in something else before adding the listener.
var sprite: Sprite = new Sprite();
sprite.addChild(bmp);
addChild(sprite);
sprite.addEventListener(MouseEvent.CLICK, onClick);
Finally, create a method to remove the clicked Bitmap from images_container (note here I removed the nested function - this prevents argument ambiguity and is generally good practice).
function onClick(e:MouseEvent):void
{
images_container.removeChild(e.currentTarget);
}
This is the relevant code in its entirety (untested).
//remove var bmp:Bitmap = new Bitmap from the beginning of the code
function on_img_loaded(e:Event):void {
e.currentTarget.removeEventListener(Event.COMPLETE, on_img_loaded);
var bmp:Bitmap = e.currentTarget.content;
bmp.x = 600, bmp.width = bmp.height = 80;
bmp.y = images_container.numChildren * (bmp.height + img_margin);
var sprite: Sprite = new Sprite();
sprite.addChild(bmp);
addChild(sprite);
images_container.addChild(sprite);
sprite.addEventListener(MouseEvent.CLICK, onClick);
}
function onClick(e:MouseEvent):void
{
e.currentTarget.removeEventListener(MouseEvent.CLICK, onClick)
images_container.removeChild(e.currentTarget as DisplayObject);
}
Hope this helps!

Resizing dynamically loaded images Flash AS3

I have a series of banners (standard sizes) which all need to load the same corresponding image for each slide. I can load them fine but I want the image to match the size of the container MC that the image is being loaded to, is that possible? Either that or to set the height/width manually...
Everything I have tried doesnt work, here is the code for the working state (where it just loads the image which stretches across the stage)
Code:
var myImage:String = dynamicContent.Profile[0].propImage.Url;
function myImageLoader(file:String, x:Number, y:Number):StudioLoader{
var myImageLoader:StudioLoader = new StudioLoader();
var request:URLRequest = new URLRequest(file);
myImageLoader.load(request);
myImageLoader.x = -52;
myImageLoader.y =-30;
return myImageLoader;
}
propImage1.addChild(loadImage(enabler.getUrl(myImage),-20,0));
You can resize your loaded image after the Event.COMPLETE on the LoaderInfo (contentLoaderInfo) of your URLLoader is fired, so you can do like this :
var request:URLRequest = new URLRequest('http://www.example.com/image.jpg');
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_loadComplete);
function on_loadComplete(e:Event):void {
var image:DisplayObject = loader.content;
image.x = 100;
image.y = 100;
image.width = 300;
image.height = 200;
addChild(image);
}
loader.load(request);
Edit :
load_image('http://www.example.com/image.jpg');
function load_image(url){
var request:URLRequest = new URLRequest(url);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_loadComplete);
function on_loadComplete(e:Event):void {
add_image(loader.content);
}
loader.load(request);
}
function add_image(image:DisplayObject, _x:int = 0, _y:int = 0, _width:int = 100, _height:int = 100){
image.x = _x;
image.y = _y;
image.width = _width;
image.height = _height;
addChild(image);
}
Hope that can help.

How to add bounce effect to dynamically created images in winRT?

My objective is to give bounce effect to dynamically created images within a for loop.
var sb = new Storyboard();
Storyboard.SetTarget(sb, imageTranslateTransform);
sb.RepeatBehavior = RepeatBehavior.Forever;
sb.AutoReverse = true;
var da = new DoubleAnimation();
Storyboard.SetTargetProperty(da, "Y");
da.From = 0;
da.To = 100;
da.Duration = TimeSpan.FromSeconds(1d);
da.EasingFunction = new QuadraticEase {EasingMode = EasingMode.EaseOut};
sb.Children.Add(da);
sb.Begin();

Google Maps V.3 custom icons

How can I make a similar script for custom marker with Google Maps 3? Just like this with v.2 :
var iconBlue = new GIcon();
iconBlue.image = 'images/cell1.png';
iconBlue.shadow = '';
iconBlue.iconSize = new GSize(32, 32);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(3, 16);
iconBlue.infoWindowAnchor = new GPoint(15, 15);
var iconRed = new GIcon();
iconRed.image = 'images/cell3.png';
iconRed.shadow = '';
iconRed.iconSize = new GSize(32, 32);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(15, 2);
iconRed.infoWindowAnchor = new GPoint(15, 15);
var iconGreen = new GIcon();
iconGreen.image = 'images/cell2.png';
iconGreen.shadow = '';
iconGreen.iconSize = new GSize(32, 32);
iconGreen.shadowSize = new GSize(22, 20);
iconGreen.iconAnchor = new GPoint(-9, 2);
iconGreen.infoWindowAnchor = new GPoint(20, 15);
var customIcons = [];
customIcons["60"] = iconBlue;
customIcons["240"] = iconRed;
customIcons["350"] = iconGreen;
I wrote the following in Version 3 and the marker is not shown.
var cellone = new google.maps.MarkerImage("images/cell1.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(3, 16));
var celltwo = new google.maps.MarkerImage("images/cell2.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(-9, 2));
var cellthree = new google.maps.MarkerImage("images/cell3.png",
new google.maps.Size(20, 34), new google.maps.Point(0,0),
new google.maps.Point(15, 2));
var customIcons = [];
customIcons["60"] = cellone;
customIcons["240"] = celltwo;
customIcons["350"] = cellthree;
I've recently just did this icon stuff myself. And I initially used the same type of code you used, but that didn't work. Apparently new GIcon() was not functioning properly.
There is a very simple way to change icon though and it doesn't use variables.
This is what I did.
Declare markerVariable as a global variable.
When you create new markers, one of the lines should say icon : ...
Here is a sample of my code. Of course, you will have to change certain lines to have it working for your program (and you can't use marker with labels unless you change certain functions).
Lastly, icon : ... can be a link or location on your computer.
var iconArray = [
["http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/purple-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png"],
["http://www.google.com/intl/en_us/mapfiles/ms/micons/ltblue-dot.png"]
];
function getMarkers() {
for (i = 0; i < locations.length; i++) {
marker[i] = new MarkerWithLabel({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
draggable: false,
map: map,
icon: new google.maps.MarkerImage(iconArray[i]),
//icon: new google.maps.MarkerImage("http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png"),
//labelContent: locations[i][3],
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
}
}
function initialize() {
getMarkers();
}
Translated version of Mike Williams' v2 "category" example

Resources