I'm building inside Flash Builder and just started learning actionscript about 1 hour ago; I can't seem to find a good resource to learn this subject quickly. Prime objective, what should be a simple task: Get this thing to display an image. It appears to load the image correctly (It apparently figured out the encoding), and it compiles fine, but all I get is a blank white screen when it loads in firefox(Flash is enabled and working fine.). Could anyone help? Complete n00b here. I'm well experienced with java, c#, c, html, php and the like, but complete actionscript/flash n00b.
package
{
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.Bitmap;
public class images extends Sprite
{
public function images()
{
drawIcon();
}
private var sp:Shape;
[Embed(source="E:/Documents/Shapemakr/ebayPics/July29_TreeImagesForFBbuilding/IMG_3294.JPG")]
private var contentIconClass:Class;
private var contentIcon:Bitmap = new contentIconClass ();
// ...
private function drawIcon():void{
sp.graphics.beginBitmapFill(contentIcon.bitmapData);
sp.graphics.drawRect(20, 35, 13, 13);
sp.graphics.endFill();
}
}
}
Ok, here's my new code. Seems like it /should/ be adding it to the 'movie', but I can't see anything. Seems to compile fine (It's a 1600x1200 picture btw. Not sure if the 'small icon' size in the programming might have something to do with it.).
package
{
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
public class images extends MovieClip
{
public function images()
{
drawIcon();
//var defaultImage:libraryImages = new libraryImages(469, 60);
var myImage:Bitmap = contentIcon;
addChild(myImage);
}
private var sp:Shape;
[Embed(source="E:/Documents/Shapemakr/ebayPics/July29_TreeImagesForFBbuilding/IMG_3294.JPG")]
private var contentIconClass:Class;
private var contentIcon:Bitmap = new contentIconClass ();
private function drawIcon():void{
sp.graphics.beginBitmapFill(contentIcon.bitmapData);
sp.graphics.drawRect(20, 35, 13, 13);
sp.graphics.endFill();
}
}
}
Edit: Thanks badfeelings! After changing the size params in drawRect to the size of the picture, it works! Now just need to shrink the picture, load it from an URL, and make it clickable to a URL. Seems like it should be doable if I can understand the basics that I understand right now, with a bit of googling.
New code:
package
{
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
public class images extends MovieClip
{
public function images()
{
/*
drawIcon();
//var defaultImage:libraryImages = new libraryImages(469, 60);
var myImage:Bitmap = contentIcon;
addChild(myImage);*/
sp = new Shape(); //instantiate a new shape
addChild(sp); //add it to the display so it can be seen
drawIcon();
}
private var sp:Shape;
[Embed(source="E:/Documents/Shapemakr/ebayPics/July29_TreeImagesForFBbuilding/IMG_3294.JPG")]
private var contentIconClass:Class;
private var contentIcon:Bitmap = new contentIconClass ();
private function drawIcon():void{
sp.graphics.beginBitmapFill(contentIcon.bitmapData);
sp.graphics.drawRect(20, 35, 1600, 1200);
sp.graphics.endFill();
}
}
}
Edit: Wow, thanks again! This new code does exactly what I need to do, now I just need to figure out how to manipulate the loader to change the size and position. Should be doable with research/fiddling, I'm sure!
package
{
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.events.*;
import flash.net.*;
import flash.display.*;
public class images extends Sprite
{
public function images()
{
//to load an image, you can use the `Loader` class:
var loader:Loader = new Loader();
loader.load(new URLRequest("http://www.shapemakr.com/image/mturk/IMG_3282.JPG"));
addChild(loader);
//it's good practice though to listen for COMPLETE, IO ERROR, and SECURITY error events on the loader in case something goes wrong.
//to listen for a click:
loader.addEventListener(MouseEvent.CLICK, myClickHandler);
}
function myClickHandler(e:Event):void {
navigateToURL(new URLRequest("http://www.adobe.com"), "_self");//do something, the image was clicked
}
}
}
Edit: Figured out out how to position the picture and scale it. Wow, this Loader class makes things simple. Now I just need to tweak it to load a list of pictures, their x/ys, and their associated urls somehow. (Anyway, yes, I'm being obnoxious in putting all my code on here so that it might help some other n00b in the future. Nothing more infuriating than incomplete partial code that doesn't work and not being able to figure out how to get it to work due to ones n00bness. Having a working example to start with greatly aids in the learning process, as it can be tweaked to understand better/learn from there.)
package
{
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.events.*;
import flash.net.*;
import flash.display.*;
public class images extends Sprite
{
public function images()
{
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
//to load an image, you can use the `Loader` class:
var loader:Loader = new Loader();
loader.x = 50; loader.y=100; loader.scaleX=.3; loader.scaleY=.3;
//loader.mask = rect;
loader.load(new URLRequest("http://www.shapemakr.com/image/mturk/IMG_3282.JPG"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
addChild(loader);
//it's good practice though to listen for COMPLETE, IO ERROR, and SECURITY error events on the loader in case something goes wrong.
//to listen for a click:
loader.addEventListener(MouseEvent.CLICK, myClickHandler);
}
function myClickHandler(e:Event):void {
navigateToURL(new URLRequest("http://www.adobe.com"), "_self");//do something, the image was clicked
}
private function loaderComplete(e:Event):void {
// now your image is fully loaded
trace(e.target.content.width);
// etc etc, whatever you need to do with your image prior to
// addressing it from elsewhere.
}
}
}
Edit: Just made a function that should make loading a list of Img-urls and their associated GOTO urls a snap. Also found out that you can't overload functions in action-script3, at least not conventionally, poo. Minor inconvenience, I guess.
package
{
import flash.display.*;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.*;
import flash.net.*;
import flashx.textLayout.formats.Float;
public class images extends Sprite
{
public function images()
{
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
loadClickImage(50,100,"http://www.shapemakr.com/image/mturk/IMG_3282.JPG","http://adobe.com");
//loadClickScaleImage(50,100,.5,.5,"http://www.shapemakr.com/image/mturk/IMG_3282.JPG","http://adobe.com");
}
function loadClickImage(x:int,y:int,imgurl:String,gotourl:String):void
{
loadClickScaleImage(x,y,1,1,imgurl,gotourl);
}
function loadClickScaleImage(x:int,y:int,scx:Number,scy:Number,imgurl:String,gotourl:String):void
{
//to load an image, you can use the `Loader` class:
var loader:Loader = new Loader();
loader.x = x; loader.y=y; loader.scaleX=scx; loader.scaleY=scy; loader.name = gotourl;
//loader.mask = rect;
loader.load(new URLRequest(imgurl));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
addChild(loader);
//to listen for a click:
loader.addEventListener(MouseEvent.CLICK, myClickHandler);
}
function myClickHandler(e:Event):void {
navigateToURL(new URLRequest(e.target.name), "_self");//do something, the image was clicked
}
function loaderComplete(e:Event):void {
// now your image is fully loaded
trace(e.target.content.width);
}
}
}
Edit: For shitz and giggles, here's the entire source for a clickable picture gallery with appropriate mouse-cursor effects. I created a nifty C# program to create the appropriate AS3 code for the positioning and URLs (All the "LoadClickImage()" code) to make it all neat and organized looking. The picture gallery looks absolutely marvelous!
package
{
import flash.display.*;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.*;
import flash.net.*;
import flash.ui.MouseCursor;
import flash.ui.Mouse;
public class images extends Sprite
{
var mouseIsDown:Boolean = false;
public function images()
{
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
loadClickImage(0,0,"http://www.shapemakr.com/image/fotor/IMG_3294.JPG","http://adobe.com");
loadClickImage(260,0,"http://www.shapemakr.com/image/fotor/IMG_3295.JPG","http://adobe.com");
loadClickImage(520,0,"http://www.shapemakr.com/image/fotor/IMG_3296.JPG","http://adobe.com");
loadClickImage(0,197,"http://www.shapemakr.com/image/fotor/IMG_3297.JPG","http://adobe.com");
loadClickImage(260,197,"http://www.shapemakr.com/image/fotor/IMG_3298.JPG","http://adobe.com");
loadClickImage(520,197,"http://www.shapemakr.com/image/fotor/IMG_3299.JPG","http://adobe.com");
loadClickImage(0,394,"http://www.shapemakr.com/image/fotor/IMG_3300.JPG","http://adobe.com");
loadClickImage(260,394,"http://www.shapemakr.com/image/fotor/IMG_3301.JPG","http://adobe.com");
loadClickImage(520,394,"http://www.shapemakr.com/image/fotor/IMG_3302.JPG","http://adobe.com");
loadClickImage(0,591,"http://www.shapemakr.com/image/fotor/IMG_3303.JPG","http://adobe.com");
loadClickImage(260,591,"http://www.shapemakr.com/image/fotor/IMG_3304.JPG","http://adobe.com");
loadClickImage(520,591,"http://www.shapemakr.com/image/fotor/IMG_3305.JPG","http://adobe.com");
loadClickImage(0,788,"http://www.shapemakr.com/image/fotor/IMG_3306.JPG","http://adobe.com");
}
function loadClickImage(x:int,y:int,imgurl:String,gotourl:String):void
{
loadClickScaleImage(x,y,1,1,imgurl,gotourl);
}
function loadClickScaleImage(x:int,y:int,scx:Number,scy:Number,imgurl:String,gotourl:String):void
{
//to load an image, you can use the `Loader` class:
var loader:Loader = new Loader();
loader.x = x; loader.y=y; loader.scaleX=scx; loader.scaleY=scy; loader.name = gotourl;
//loader.mask = rect;
loader.load(new URLRequest(imgurl));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
addChild(loader);
//to listen for a click:
loader.addEventListener(MouseEvent.CLICK, myClickHandler);
loader.addEventListener(MouseEvent.MOUSE_OVER, changeCursor);
loader.addEventListener(MouseEvent.MOUSE_OUT, resetCursor);
}
function myClickHandler(e:Event):void {
navigateToURL(new URLRequest(e.target.name), "_self");//do something, the image was clicked
//Mouse.cursor = MouseCursor.
}
private function changeCursor(e:MouseEvent)
{
Mouse.cursor = MouseCursor.BUTTON;
}
private function resetCursor(e:MouseEvent)
{
Mouse.cursor = MouseCursor.ARROW;
}
function loaderComplete(e:Event):void {
// now your image is fully loaded
// trace(e.target.content.width);
}
}
}
Edit: Added some alpha shading on mouse over.
package
{
import flash.display.*;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.*;
import flash.net.*;
import flash.ui.MouseCursor;
import flash.ui.Mouse;
public class images extends Sprite
{
var mouseIsDown:Boolean = false;
public function images()
{
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
loadClickImage(0,0,"http://www.shapemakr.com/image/fotor/IMG_3294.JPG","http://adobe.com");
loadClickImage(260,0,"http://www.shapemakr.com/image/fotor/IMG_3295.JPG","http://adobe.com");
loadClickImage(520,0,"http://www.shapemakr.com/image/fotor/IMG_3296.JPG","http://adobe.com");
loadClickImage(0,197,"http://www.shapemakr.com/image/fotor/IMG_3297.JPG","http://adobe.com");
loadClickImage(260,197,"http://www.shapemakr.com/image/fotor/IMG_3298.JPG","http://adobe.com");
loadClickImage(520,197,"http://www.shapemakr.com/image/fotor/IMG_3299.JPG","http://adobe.com");
loadClickImage(0,394,"http://www.shapemakr.com/image/fotor/IMG_3300.JPG","http://adobe.com");
loadClickImage(260,394,"http://www.shapemakr.com/image/fotor/IMG_3301.JPG","http://adobe.com");
loadClickImage(520,394,"http://www.shapemakr.com/image/fotor/IMG_3302.JPG","http://adobe.com");
loadClickImage(0,591,"http://www.shapemakr.com/image/fotor/IMG_3303.JPG","http://adobe.com");
loadClickImage(260,591,"http://www.shapemakr.com/image/fotor/IMG_3304.JPG","http://adobe.com");
loadClickImage(520,591,"http://www.shapemakr.com/image/fotor/IMG_3305.JPG","http://adobe.com");
loadClickImage(0,788,"http://www.shapemakr.com/image/fotor/IMG_3306.JPG","http://adobe.com");
}
function loadClickImage(x:int,y:int,imgurl:String,gotourl:String):void
{
loadClickScaleImage(x,y,1,1,imgurl,gotourl);
}
function loadClickScaleImage(x:int,y:int,scx:Number,scy:Number,imgurl:String,gotourl:String):void
{
//to load an image, you can use the `Loader` class:
var loader:Loader = new Loader();
loader.x = x; loader.y=y; loader.scaleX=scx; loader.scaleY=scy; loader.name = gotourl;
//loader.mask = rect;
loader.load(new URLRequest(imgurl));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
addChild(loader);
//to listen for a click:
loader.addEventListener(MouseEvent.CLICK, myClickHandler);
loader.addEventListener(MouseEvent.MOUSE_OVER, changeCursor);
loader.addEventListener(MouseEvent.MOUSE_OUT, resetCursor);
}
function myClickHandler(e:Event):void {
navigateToURL(new URLRequest(e.target.name), "_self");//do something, the image was clicked
//Mouse.cursor = MouseCursor.
}
private function changeCursor(e:Event)
{
(e.target as Loader).alpha=.85;
Mouse.cursor = MouseCursor.BUTTON;
}
private function resetCursor(e:Event)
{
(e.target as Loader).alpha=1;
Mouse.cursor = MouseCursor.ARROW;
}
function loaderComplete(e:Event):void {
// now your image is fully loaded
// trace(e.target.content.width);
}
}
}
2 Issues I see:
you have not instantiated your shape. If you're experience with C#/Java that process should be quite familiar.
You draw to the shape, but it is not on the display, so you see nothing. In Flash, you need to explicitly add things to the screen. So for this to work, you just need to do:
public function images()
{
sp = new Shape(); //instantiate a new shape
addChild(sp); //add it to the display so it can be seen
drawIcon();
}
Everything else you've done looks good. Though keep in mind it's not going to scale your bitmap drawing it like that.
You will probably find it better to forgoe the shape, and just work with the Bitmap directly:
public function images()
{
addChild(contentIcon); //add it to the display so it can be seen
contentIcon.width = 200; //or whatever you want the width to be
contentIcon.scaleY = contentIcon.scaleX; //make the aspect ratio match
//to load an image, you can use the `Loader` class:
var loader:Loader = new Loader();
loader.load(new URLRequest("http://someplace.com/myImage.jpg"));
addChild(loader);
//it's good practice though to listen for COMPLETE, IO ERROR, and SECURITY error events on the loader in case something goes wrong.
//to listen for a click:
loader.addEventListener(MouseEvent.CLICK, myClickHandler);
}
function myClickHandler(e:Event):void {
//do something, the image was clicked
}