I have an image gallery which loads a detail image, then draws a line next to the image on one side based on image dimensions. Clicking on the image returns one back to the main image thumbnail list, then clicking a thumb loads another image into detail holder. Everything works fine with it, except that the lines, rather than disappearing upon detail image unload, accumulate. Is there a way to clear the contents of the lineDrawing MovieClip without removing it from the stage, so that I can draw a new line in it? I've tried removeChild on the MovieClip, but then the lines disappear entirely, same with placing lineDrawing.clear() at the top of the setupDetail function. Here is my (relevant)code so far, any assistance will be greatly appreciated, I am stumped!
var detailImage:Loader = new Loader();
var lineDrawing:MovieClip = new MovieClip();
setupDetail();
function setupDetail():void {
detail.visible = false;
detail.buttonMode = true;
detail.closeMessage.mouseEnabled = false;
detail.addChild(detailImage);
detailImage.contentLoaderInfo.addEventListener(Event.COMPLETE, fullyLoaded);
// make sure detail is above the gallery
addChild(detail);
detail.addEventListener(MouseEvent.CLICK, onCloseDetail, false, 0, true);
}
function fullyLoaded(evt:Event):void {
var imgHeight:int = evt.target.content.height;
var imgWidth:int = evt.target.content.width;
var hOffset:int = imgWidth + 5 + 27;
var vOffset:int = imgHeight + 5;
detail.addChild(lineDrawing);
if(imgWidth == 600) {
lineDrawing.graphics.lineStyle(3,0x9a9345);
lineDrawing.graphics.moveTo(28,vOffset);
lineDrawing.graphics.lineTo(626,vOffset);
}
else if(imgHeight == 600) {
lineDrawing.graphics.lineStyle(3,0x9a9345);
lineDrawing.graphics.moveTo(hOffset, 1);
lineDrawing.graphics.lineTo(hOffset, 599);
}
}
function onCloseDetail(evt:MouseEvent):void {
// only allow it to be closed if it is at least 90% opaque
if (detailImage.alpha>.9){
detailImage.unload();
TweenLite.to(detail,.5, {autoAlpha:0});
detailImage.unload();
detail.visible = false;
}
}
lineDrawing.graphics.clear()
Related
I am developing a desktop application. I am using ActionScript 3 via Adobe Animate CC. I designed the application, animated the GUI, and started coding. The main functions were successfully coded well, but I have added some additional features which are out of the scope of the application's original goals. All of this just to link the application to a website and some other information, which made me totally crazy because I've spent too much time with very simple if statement LOGIC!
Anyway, I created a menu with three MovieClip buttons. These menu button clicks affect one MovieClip that has a white background that moves with each click. I need there to be one background to show the beautiful effect of easeIn and easeOut animation tweens when clicking each button.
About clicked
Gallery clicked
Contact clicked
To make it easy to understand, I recreated the code with a very simple ball and 3 buttons. If you click first button, the ball moves to the right above the 2nd button. Then the first button should be unclickable, unless another button is clicked. If the second button is clicked, then the ball would move to the right above the third button. Then the second button should be unclickable also, unless another button is clicked. The same thing goes for the third button.
Now, if the first button is clicked again, the animation of the white background should not start from the default position when starting up the application!
It should animated back from its current position to the default position... and so on...
I replaced the white background with a ball for simplicity
This is very easy but I lost it with the eventListeners, eventHandlers, and if statements! :/
I also made this table which studies the cases:
I know my coding technique is not smart enough, but that is because I HATE using classes, packages, project folders... etc..
Even if the code runs too long & repeats, It would be better for me for simplicity, as programming is not my day-job!
Please, any help and quick response would be highly appreciated!
Code:
import flash.ui.Mouse;
import flash.events.MouseEvent;
one.addEventListener(MouseEvent.CLICK, moveToSecondPos);
two.addEventListener(MouseEvent.CLICK, moveToThirdPos);
//three.addEventListener(MouseEvent.CLICK, moveToFirstPos);
var buttonState:Boolean;
one.buttonState = 0;
two.buttonState = 0;
//three.buttonState = 0;
function moveToSecondPos(event:MouseEvent){
if(one.buttonState == 0){
theBall.gotoAndPlay("go1");
one.buttonState = 1;
}
else if(two.buttonState == 1){
theBall.gotoAndPlay("backToOne");
// two.buttonState = 0;
// one.buttonState = 1;
}
else{
//disable About Button
one.removeEventListener(MouseEvent.CLICK, moveToSecondPos);
}
}
function moveToThirdPos(event:MouseEvent){
if((two.buttonState == 0)&&(one.buttonState == 0)){
theBall.gotoAndPlay("goProducts");
two.buttonState = 1;
}
else if(one.buttonState == 1){
theBall.gotoAndPlay("go2");
// two.buttonState = 1;
// one.buttonState = 1;
}
else{
two.removeEventListener(MouseEvent.CLICK, moveToThirdPos);
}
}
//function moveToFirstPos(event:MouseEvent){
// if(three.buttonState == 0){
// theBall.gotoAndPlay("go3");
// three.buttonState = 1;
// }
// else{
// three.removeEventListener(MouseEvent.CLICK, moveToFirstPos);
// }
//}
First, you mentioned you wanted to have the
white background should not start from the default position when starting up the application
For that, you'll need a ShareObject or comparable method of saving and loading data.
Secondly, It appears you may be trying to do some of this with Scenes and Timeline' frames. I highly encourage you not to pursue that.
Below is a solution to the problems you mentioned. Notice that without your project, I had to recreate the scene. You can copy & paste the solution into a new scene and it will compile.
To prevent buttons from being clicked, you can remove the event listener by calling myButton.removeEventListener("click"). Alternatively, you can simply stop the object from responding to mouse events by setting its mouseEnabled property to false.
To animate the box smoothly, you can use the built-in Tween class. Alternatively, I'd direct you Greensock's TweenLite.
Because you appeared to want a series of labels to appear depending on the button clicked, I created an array which stores data specific to each button (btns:Array). By using an organized structure, it's easier to write re-useable code which doesn't depend on explicit functions. Note that there's only one btnListener() function which works for all of your buttons.
Solution
import flash.display.Sprite;
import flash.events.Event;
import flash.text.TextField;
import fl.motion.Color;
import fl.transitions.*;
import fl.transitions.easing.*;
// the list of buttons we want, along with the descriptions for each
var btns:Object = [
{
"label":"About",
"desc":"Learn more about us",
"btn":null
},
{
"label":"Gallery",
"desc":"See our photos",
"btn":null
},
{
"label":"Contact",
"desc":"Write, call, or message",
"btn":null
}
];
var nav:Sprite; // our navigation bar of buttons
var whiteBox:Sprite; // the "ball" with the content text
// where we save the coordinates of the whiteBox between loads
var settings:Object = SharedObject.getLocal("foo");
init();
function init():void {
// Create our navigation of three buttons
// our container for buttons
nav = new Sprite();
// reference to the last button
var last:Sprite = null;
// loop through the list of buttons
for each (var entry:Object in btns) {
// For each button, create a new button
var btn:Sprite = createButton(entry.label);
entry.btn = btn;
nav.addChild(btn);
// If there was a previous button, place this beside it.
if (last != null) {
btn.x = last.x + last.width + 1;
}
last = btn;
}
// Place the nav onscreen
addChild(nav);
nav.x = stage.stageWidth/2 - nav.width/2;
nav.y = stage.stageHeight - nav.height*2;
// Create the whitebox
whiteBox = new Sprite();
whiteBox.graphics.beginFill(0xFAFAFA);
whiteBox.graphics.drawRect(0, 0, 150, 50);
whiteBox.graphics.endFill();
var txt:TextField = new TextField();
txt.name = "txt";
txt.width = 150;
whiteBox.addChild(txt);
nav.addChild(whiteBox);
// Load the settings from the last run of the program.
if (settings.data.hasOwnProperty("x")) {
whiteBox.x = settings.data.x;
whiteBox.y = settings.data.y;
}
}
function createButton(label:String):Sprite {
// Creates a simple button
// Create the label
var txt:TextField = new TextField();
txt.text = label;
// Create the background
var btn:Sprite = new Sprite();
btn.graphics.beginFill(0xA1A1A1);
btn.graphics.drawRect(0, 0, txt.width + 60, txt.height + 30);
btn.graphics.endFill();
btn.addChild(txt);
btn.name = label;
txt.x = 30;
txt.y = 15;
// Hookup events
btn.addEventListener("mouseOver", btnListener);
btn.addEventListener("mouseOut", btnListener);
btn.addEventListener("click", btnListener);
return btn;
}
function btnListener(e:Event):void {
var btn:Sprite = e.currentTarget as Sprite;
var c:Color = new Color();
var entry:Object;
// Find our button in the list.
for each (entry in btns) {
if (entry.label == btn.name) {
break;
}
}
switch (e.type) {
case "mouseOver":
if (btn.mouseEnabled) {
c.setTint(0x0096ff, 0.5);
btn.transform.colorTransform = c;
}
break;
case "mouseOut":
if (btn.mouseEnabled) {
c.setTint(0x00, 0);
btn.transform.colorTransform = c;
}
break;
case "click":
// Set the text, and position of our whitebox
whiteBox.getChildAt(0)["text"] = entry.desc;
whiteBox.y = -whiteBox.height;
var tween:Tween = new Tween(whiteBox, "x", Regular.easeOut, whiteBox.x, btn.x, 0.35, true);
tween.addEventListener("motionFinish", saveState);
for each (var v:Object in btns) {
if (v.btn == btn) {
// make our button unclickable
btn.mouseEnabled = false;
c.setTint(0xFFFFFF, 0.5);
btn.transform.colorTransform = c;
} else {
// Make the other buttons clickable;
v.btn.mouseEnabled = true;
c.setTint(0x00, 0);
v.btn.transform.colorTransform = c;
}
}
break;
}
}
function saveState(e:Event):void {
settings.data.x = whiteBox.x;
settings.data.y = whiteBox.y;
settings.flush();
}
Here is my dilemma. We use image stacks a lot here with alpha channels. I want to call up images in series using a slider. I am getting a concatenated string a pull up an image from my folder. But I can not get the images to load dynamically when I slide the slider bar.
I am using the frame number to change the file name to pull up the next frame. I can get the image to show up if I put the loader outside of the function, but when I put the loader in the function I get error after error saying the file cannot be located.
Here is the code as it currently stands :
var imgLoader = new Loader();
var str1 = String (".jpg");
var sliderValue:uint = mySlider.sliderKnob.x / 3;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(event:Event):void {
sliderValue = mySlider.sliderKnob.x / 3;
status_txt.text = "Slider position is: "+sliderValue;
fileText.text = "Sketch_0"+sliderValue+".jpg";
imgLoader.load( new URLRequest ( "Sketch_0"+sliderValue+".jpg"));
addChild(imgLoader);
setChildIndex(imgLoader, 0);
}
First thing up, you need to load one image without that slider stuff and see if it loads. Verify the paths if not. Relative paths, as you put them, will work relatively to the folder where SWF is (or where the HTML page, containing the SWF, is).
Second, relieve the heavy burden you are trying to put on the Flash Player.
addEventListener(Event.ENTER_FRAME, onFrame);
var nextName:String;
function onFrame(e:Event):void
{
var anIndex:int = mySlider.sliderKnob.x / 3;
var aName:String = "Sketch_0" + anIndex + ".jpg";
status_txt.text = "Slider position is: " + anIndex;
fileText.text = aName;
// Flash Player does not load images instantly,
// so lets request new image only if user stopped moving the slider.
if (aName == nextName)
{
loadNext(nextName);
}
else
{
nextName = aName;
}
}
var currentName:String;
var currentImage:Loader;
function loadNext(value:String):void
{
// If the requested file is the same as current, just ignore the request.
if (value == currentName) return;
currentName = value;
// Dispose of the previous image in a proper way.
if (currentImage)
{
removeChild(currentImage);
currentImage.unloadAndStop(true);
currentImage = null;
}
// Create a new one.
var aRequest:URLRequest = new URLRequest(currentName);
currentImage = new Loader();
currentImage.load(aRequest);
addChild(currentImage);
}
Can any one help in suggesting a solution for the following:
i have a large image, consider it as a map, i want to put this image in a viewer that is smaller than the image and i have to be able to scroll the image by clicking and dragging it.
and i want to put in this image a clickable spots in a specified x and y coordinated, and be able to click the spots.
when clicking any spot in the image, the image will be changed with a new spots.. and so on..
can you help in suggesting what is the best object to load the image in and be able to do all the mentioned points.
Thanks in advance.
This is easier than you think. You have a few goals to consider:
"i want to put this image in a viewer that is smaller than the image": You dont need anything special to do this. The concept of this is simply that you have a mask overlay where you want the large image visible.
var viewer:Sprite = new Sprite; //200x200
var imageMask:Sprite = new Sprite; //200x200
var imageContainer:Sprite = new Sprite; //400x500
imageContainer.mask = imageMask;
viewer.addChild(imageContainer);
//this will allow you to visibly see only 200x200 of the
//imageContainer at any time
"i have to be able to scroll the image by clicking and dragging it": This is a little more logic as the imageContainer will have to move in the -(negative) direction of the mouse. Add some listeners to check for mouse actions, and drag as required.
var allowDrag:Boolean = false;
imageContainer.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
imageContainer.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
imageContainer.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
function onMouseDown(e:Event):void{
allowDrag = true;
}
function onMouseUp(e:Event):void{
allowDrag = false;
}
function onMouseMove(e:Event):void{
//return if not dragging
if(!allowDrag) return;
//move the imageContainer in a -(negative) direction of the mouse
//use an index relative to the size of the viewer and imageContainer
var speed:Number = 0.5;
imageContainer.x -= (viewer.width/imageContainer.width)*speed;
imageContainer.y -= (viewer.height/imageContainer.height)*speed;
//clean the positions so the image remains within the viewer
if(imageContainer.x > 0) imageContainer.x = 0;
if(imageContainer.x < -viewer.width) imageContainer.x = -viewer.width;
if(imageContainer.y > 0) imageContainer.y = 0;
if(imageContainer.y < -viewer.height) imageContainer.y = -viewer.height;
}
"i want to put in this image a clickable spots in a specified x and y coordinated, and be able to click the spots": This also requires a little more thinking. In this case what you want to do is create [hotspots] on the image that are clickable, when clicked = do actions.
//USAGE
//define the click area coords
var clickCoords:Rectangle = new Rectangle();
clickCoords.x = 10; //starts at x 10
clickCoords.y = 10; //starts at y 10
clickCoords.width = 100; //100 wide
clickCoords.height = 100; //100 tall
//add the click listener
var clickArea:Sprite = hotSpot(imageContainer,clickCoords);
clickArea.addEventListener(MouseEvent.CLICK, onHotSoptClick);
//hot spot factory
function hotSpot(target:Sprite,coords:Rectangle):Sprite{
//create the hotspot
var hs:Sprite = new Sprite;
hs.graphics.beginFill(0,0);
hs.graphics.drawRect(0,0,coords.width,coords.height);
hs.graphics.endFill();
//add the hotspot to the target
hs.x = coords.x;
hs.y = coords.y;
target.addChild(hs);
}
function onHotSoptClick(e:MouseEvent):void{
//do something
}
IMPORTANT:
You may want to keep a list of hot spots you create so you can do garbage cleanup, and you plan on dynamically generating hotspots per image... then YOU MUST keep an active list of hot spots and remove when not in use.
You can catch the events MouseDown, MouseUp, MouseMove, MouseOut, on your viewing window, this way you can control exactly what do you want to do.
Here is the pseudo-code:
reset()
{
isDown=false;
downPointX=0;
downPointY=0;
distanceX=0;
distanceY=0;
}
onMouseDown()
{
isDown=true;
downPointX=mouseX;
downPointY=mouseY;
}
onMouseUp()
{
if(distanceX+distanceY==0 and isDown)
click(downPointX,downPointY);
reset();
}
onMouseMove()
{
if isDown then
distanceX=mouseX-downPointX;
distanceY=mouseY-downPointY;
drag(distanceX,distanceY);
endif;
}
onMouseOut()
{
reset();
}
drag(distanceX,distanceY)
{
change your map coordinates
}
click(downPointX,downPointY)
{
if(inSpot(downPointX,downPointY)==true)
changeMap();
endif;
}
changeMap()
{
change your maps and spots
}
avoid implementing any event for your spots sprites or you can get unexpected results.
You can check these for more information
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Sprite.html#eventSummary
I have a simple horizontal gallery of 24 pictures.
The idea is to show 3 pictures on the screen from all (24) and the middle one to be shown above as the big one automaticly ( like the scheme ). This means that when some of the arrows is pressed the movement of the images have to be by one. Also they have to be auto looped. So the first one can go in the middle to.
Here is my code so far. ( I didn't put the all 24 thumbnails, here are only 3 thumbnails only for the tests ) I've managed to move the thumbnails and select a big picture. But I need it to be auto selected when comes to the middle.
buttonL1_btn.addEventListener(MouseEvent.CLICK, left);
buttonR1_btn.addEventListener(MouseEvent.CLICK, right);
function left(event:Event):void{
box_mc.x -=50;
}
function right(event:Event):void{
box_mc.x +=50;
}
//imgs
img_3_big.visible = false;
box_mc.img_1.addEventListener(MouseEvent.CLICK, img1_show);
function img1_show(e:MouseEvent):void {
img_3_big.visible = true;
img_3_big.gotoAndStop(3);
}
box_mc.img_2.addEventListener(MouseEvent.CLICK, img2_show);
function img2_show(e:MouseEvent):void {
img_3_big.visible = true;
img_3_big.gotoAndStop(2);
}
box_mc.img_3.addEventListener(MouseEvent.CLICK, img3_show);
function img3_show(e:MouseEvent):void {
img_3_big.visible = true;
img_3_big.gotoAndStop(1);
}
Although a different approach than what you have already done, the way I would do it is by keeping all 24 images outside of the .swf in their own image files and keeping track of the current image index. Something similar to this (untested code):
import flash.display.Bitmap;
import flash.display.Loader;
import flash.events.MouseEvent;
var allImagePaths:Vector.<String> = new Vector.<String>(); // Holds reference to all big images
var allImageThumbPaths:Vector.<String> = new Vector.<String>(); // Holds reference to all thumbnail images
var currentImageIndex:int = 0; // Keeps track of what image is currently selected
// Loaders that would load big image and thumbnails
var loaderMain:Loader;
var loaderThumb_Left:Loader;
var loaderThumb_Middle:Loader;
var loaderThumb_Right:Loader;
SetupGallery(); // initialize gallery
function SetupGallery()
{
// Setup image loaders
loaderMain = new Loader();
loaderThumb_Left = new Loader();
loaderThumb_Middle = new Loader();
loaderThumb_Right = new Loader();
// Add loaders to existing MovieClips on stage.
imageHolderMain_mc.addChild(loaderMain);
imageHolderThumbLeft_mc.addChild(loaderThumb_Left);
imageHolderThumbMiddle_mc.addChild(loaderThumb_Middle);
imageHolderThumbRight_mc.addChild(loaderThumb_Right);
// Load image paths into a vector collection (like an array)
loadImages();
// Setup arrow button listeners
buttonL1_btn.addEventListener(MouseEvent.CLICK, showImageLeft);
buttonR1_btn.addEventListener(MouseEvent.CLICK, showImageRight);
}
function loadImages()
{
// Initialize collection of images for easier looping/displaying
allImagePaths = new Vector.<String>();
allImageThumbPaths = new Vector.<String>();
// Load up all image paths into the image array(vector).
allImagePaths.push("image1.jpg");
allImageThumbPaths.push("image1_thumb.jpg");
// ... image2 - image23 ...
allImagePaths.push("image24.jpg");
allImageThumbPaths.push("image24_thumb.jpg");
// NOTE: Consider loading paths to image files via xml
}
function showImageLeft(evt:MouseEvent)
{
currentImageIndex--;
showCurrentImage();
}
function showImageRight(evt:MouseEvent)
{
currentImageIndex++;
showCurrentImage();
}
// Call this after each arrow click, direction will be determined by currentImageIndex
function showCurrentImage()
{
// Keep current index within bounds, if out of range then "loop back"
if(currentImageIndex < 0) currentImageIndex = allImagePaths.length - 1;
if(currentImageIndex > allImagePaths.length - 1) currentImageIndex = 0;
// Set right and left thumbnail indexes based on current image
// (Assuming my logic is correct of course :)
var indexRight:int = currentImageIndex - 1;
if(indexRight < 0) indexRight = allImagePaths.length - 1; // "Loop back" if needed
var indexLeft:int = currentImageIndex + 1;
if(indexLeft > allImagePaths.length - 1) indexLeft = 0; // "Loop back" if needed
// clear out any existing images
loaderMain.unload();
loaderThumb_Left.unload();
loaderThumb_Middle.unload();
loaderThumb_Right.unload();
// set correct images based on new indexes
loaderMain.load(allImagePaths[currentImageIndex]);
loaderThumb_Left.load(allImageThumbPaths[indexLeft]);
loaderThumb_Middle.load(allImageThumbPaths[currentImageIndex]);
loaderThumb_Right.load(allImageThumbPaths[indexRight]);
}
There may be some additional things you'll have to handle, but that's the general idea.
Going with this approach you will not deal with keyframes, in fact you would want to have only one keyframe where the AS code is located and you would want to remove all images from the .swf file itself.
This approach will:
Allow for "Looping back" of images when at the end or beginning of the gallery.
Make it easier to add or remove images in the future.
Improve initial load time for the end user.
I basically have 5 images in library, which I've given af linkage name as so:
head_image0, head_image1, head_image2 etc...
On Stage I have two containers which I will be loading my images into.
- pictureContainer1_mc
- pictureContainer2_mc
Pr default I have already loaded an image into container1.
What will happen is that, when I click menu button2, then head_image2 will load into container2 and fade up from alpha 0 -> alpha 1 - giving a transition between the two images.
After the image has alpha'ed into container2, then I run a function to swap containers, so that container1 will hold the image currently loaded and container2 will be ready to load another picture upon menu button click.
This looks like the following:
//Function receiving an ID from the button click, which we can use to load the connected image
function headerFadeIn(receivedNumber:Number):void
{
//Getting container2 rdy to tween from 0 -> 1
pictureContainer2_mc.alpha = 0;
//Preparing image string - linkagename
var tempName:String = "header_image" + receivedNumber;
//Loading the image into container 1
var headImage:Bitmap = new Bitmap();
var classDefinition:Class = getDefinitionByName(tempName) as Class;
var img:BitmapData = new classDefinition(1,1);
headImage.bitmapData = img;
pictureContainer2_mc.addChild(headImage);
//Tweening currecntly added image from 0 -> 1
//When tween is done call function onFinishTween to swap containers
TweenLite.to(pictureContainer2_mc,1,{alpha:1, ease:menuEasing, onComplete:onFinishTween});
function onFinishTween():void
{
//Setting currently loaded image in container 1
var headImage:Bitmap = new Bitmap();
var classDefinition:Class = getDefinitionByName(tempName) as Class;
var img:BitmapData = new classDefinition(1,1);
headImage.bitmapData = img;
pictureContainer1_mc.addChild(headImage);
pictureContainer2_mc.alpha = 0;
}
}
This works for me. HOWEVER I'm experiencing some "lagging" issue. When I've clicked back and forward menu buttons to change images like 15 times, then the tweening begins to "lag" and wont happen in a smooth transition.
Any calls on this?
Could I do this in a smarter way?
I would suggest to create images only once, and reuse them. Also, after the tween, i would remove the old image and save it for the next time you need that image. Also, when you swap the image from container 2 into container 1, don't create a new one, just move the image from one container to the other.
Something like this, code is not tested, just to give you an idea.
var instances:Object = {};
var currentImage:String;
//Function receiving an ID from the button click, which we can use to load the connected image
function headerFadeIn(receivedNumber:Number):void
{
//Getting container2 rdy to tween from 0 -> 1
pictureContainer2_mc.alpha = 0;
//Preparing image string - linkagename
currentImage = "header_image" + receivedNumber;
var headImage:Bitmap = _getImage(currentImage);
pictureContainer2_mc.addChild(headImage);
//Tweening currecntly added image from 0 -> 1
//When tween is done call function onFinishTween to swap containers
TweenLite.to(pictureContainer2_mc,1,{alpha:1, ease:menuEasing, onComplete:onFinishTween});
function onFinishTween():void
{
//Setting currently loaded image in container 1
//cast returned DisplayObject into a Bitmap.
var headImage:Bitmap = pictureConainer2_mc.getChildByName(currentImage) as Bitmap;
pictureContainer1_mc.addChild(headImage);
pictureContainer2_mc.alpha = 0;
}
}
function _getImage(id:String):Bitmap{
if( instances[id] ) return instances[id];
//Loading the image into container 1
var headImage:Bitmap = new Bitmap();
var classDefinition:Class = getDefinitionByName(tempName) as Class;
var img:BitmapData = new classDefinition(1,1);
headImage.bitmapData = img;
instances[id] = headImage;
return headImage;
}