Known Participant

Question

Adding Stroke to images

Forum|Forum|17 years ago
March 22, 2009
8 replies
1985 views

Hi all,

I was wondering how I can add stroke to my images, I want to have a white border (3 pixel) around my images and I am calling my images from a image folder with a TXT or XML file. Is there a way to add the stroke to them using AS3 so it automatically applies the stroke to all my images?

Many thanks in advance
Mitchell

____________________________________
Australian Wedding Directory
http://www.weddingsonly.com.au
Weding Video Sydney
http://www.iconfilmproductions.com

ActionScript

This topic has been closed for replies.

A

austcollAuthor

Known Participant

Also the BORDER is not working for me, please let me know where exactly on my script I can place it, (after which line) so it works?

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, initHandler);
function imageLoadedHandler(event:Event):void {
var rect:Sprite=new Sprite();
rect.graphics.lineStyle(3,0x000000);
rect.graphics.drawRect(0,0,loader.width,loader.height);
(event.currentTarget.loader.parent).addChild(rect);
}

Many thanks in advance
Mitchell

A

austcollAuthor

Known Participant

Also the BORDER is not working for me, please let me know where exactly on my script I can place it, (after which line) so it works?

Many thanks in advance
Mitchell

Craig Grummitt

Inspiring

oh sorry i've just noticed a simple naming problem with the code i posted which may be the cause of your problem...? i'll reattach it here. simply place the loader.addEventListener line anywhere after creating the loader(Loader, not the URLLoader).

Craig Grummitt

Inspiring

Anywhere in your initialization routine, as long as it happens before you attempt to tween the glow.

A

austcollAuthor

Known Participant

Where this actualy goes?
FilterShortcuts.init();

Cheers
Mitchell

A

austcollAuthor

Known Participant

Hi Craig,
FIrst of all thank you very much for your time.
This is the actual full code that I have been using.

__________________________________________
//Create the loader, set dataFormat to text
//and listen when data is loaded
import flash.events.Event;
import flash.events.MouseEvent;
import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;

var loader:URLLoader = new URLLoader()
loader.dataFormat = URLLoaderDataFormat.TEXT
loader.addEventListener(Event.COMPLETE, onLoadXML)
loader.load(new URLRequest("images.xml"))
function onLoadXML(ev:Event){
try{
//Convert the downloaded text into an XML
var myXML:XML = new XML(ev.target.data)
var list:XMLList = myXML..title
//walks the list and show in textfields
for(var i=0; i<list.length(); i++){
var loader:Loader = new Loader()
this["img"+i].addChild(loader)
loader.load(new URLRequest(list .image))

var images:int = 20;

// initialise everything
// runs first and once only
function init():void {

// loop through images
for( var i:int = 0 ; i < images ; i++ ) {

// get each image
var img:MovieClip = getChildByName( "img" + i ) as MovieClip;

// apply all the stuff (position, mouse event etc)
img.addEventListener( MouseEvent.MOUSE_DOWN, imageMouseDown );
img.addEventListener( MouseEvent.MOUSE_UP, imageMouseUp );
img.addEventListener( MouseEvent.CLICK, onClick );
img.addEventListener( MouseEvent.ROLL_OVER, mcOver );
img.addEventListener( MouseEvent.ROLL_OUT, mcOut );
img.buttonMode = true;
// show hand when the mouse rolls over an image

// store original position
img.sx = img.x;
img.sy = img.y;

function mcOut( event:MouseEvent ):void
{
Tweener.addTween(event.target, { scaleX:1, _Glow_blurX:0, _Glow_blurY:0, scaleY:1, time:0.5 } );
}
function mcOver( event:MouseEvent ):void
{
Tweener.addTween(event.target, { scaleX:1.1, _Glow_blurX:30, _Glow_blurY:30, _Glow_color:0xFFFFFF, scaleY:1.1, time:0.5 } );
}

function onClick( event:MouseEvent ):void
{
event.target.y -= 2;
event.target.rotation += .1;

}

}

addEventListener( Event.ENTER_FRAME, updateStage );

}

// update Stage
// runs every frame
function updateStage ( event:Event ):void {

var dx:Number = mouseX - 275; // half stage width\
var dy:Number = mouseY - 200; // half stage width

// loop through images
for( var i:int = 0 ; i < images ; i++ ) {

// get each image
var img:MovieClip = getChildByName( "img" + i ) as MovieClip;

if( !img.isDragging ) {
// find the position that each movie needs to move towards
img.tx = img.sx - dx * img.scaleX / 2;
img.ty = img.sy - dy * img.scaleY / 2;

// move each image towards that postition
img.x = img.x - (img.x - img.tx ) / 20;
img.y = img.y - (img.y - img.ty ) / 20;
}

}

}

function imageMouseDown ( event:MouseEvent ):void {

// get the image clicked
var img:MovieClip = event.currentTarget as MovieClip;

// store the images x position when clicked
img.clickX = img.x;

// start dragging the image and stor the fact that it is draggin
img.startDrag();
img.isDragging = true;

}

function imageMouseUp ( event:MouseEvent ):void {

// get the image clicked
var img:MovieClip = event.currentTarget as MovieClip;

// determine if the image has moved since it was clicked (i.e. does it drag or click through to content?)
if( img.x == img.clickX ) {
// this is where you free off the content
var request:URLRequest=new URLRequest("gallery.html");
navigateToURL(request,"top");
} else {

// update image start position
img.sx = img.x;
img.sy = img.y;
}

// remove dragging and dragging flag
img.isDragging = false;
stopDrag();

}

// GO
init();

}
} catch (e:TypeError){
//Could not convert the data, probavlu because
//because is not formated correctly
trace("Could not parse the XML")
trace(e.message)
}
}
stop()

Craig Grummitt

Inspiring

ok thanks for that. i can see that you are actually loading an image in your code now, so you can strike the first two sentences in my last post but the rest of the advice in that post stands. Were you after other random coding tips? I can see that you're missing:
FilterShortcuts.init();
without which the glows on rollover won't work...

A

austcollAuthor

Known Participant

Thank you for the code, I used it but it doesn't work, how and where do you add it to this AS3? I am pulling the images from XML and then I am animating them.

var loader:URLLoader = new URLLoader()
loader.dataFormat = URLLoaderDataFormat.TEXT
loader.addEventListener(Event.COMPLETE, onLoadXML)
loader.load(new URLRequest("images.xml"))
function onLoadXML(ev:Event){
try{
//Convert the downloaded text into an XML
var myXML:XML = new XML(ev.target.data)
var list:XMLList = myXML..title
//walks the list and show in textfields
for(var i=0; i<list.length(); i++){
var loader:Loader = new Loader()
this["img"+i].addChild(loader)

I tried it once I could create the border but it doesn't move with the images.

Regards
Mitchell

Craig Grummitt

Inspiring

for starters, you're not actually loading an image anywhere in your code! you seem to have begun to do this by instantiating a Loader object, but didn't go any further. Anyway, as I said in my previous post, you would need to wait until this image has completely loaded before using my code to display the border. You would do this by adding an event listener on your Loader object for Event.INIT and put my code in the event handler.

By the way, it's probably a bad idea to set up two variables with the same name that refer to two completely different things(i'm talking about your two 'loader's) - if for no other reason that it creates confusion in your code.

now you mentioned that you wanted the border to move with the images. important information! in this case, i've adjusted my code. i'm assuming that your loader is contained within a holder sprite that will be doing the animating. (in looking at your code it appears so - this["img"+i]). i've also included the eventlistener and handler code for you to see and tweak for your purposes.

A

austcollAuthor

Known Participant

Thank you for the code, I used it but it doesn't work, how and where do you add it to this AS3? I am pulling the images from XML and then I am animating them.

var loader:URLLoader = new URLLoader()
loader.dataFormat = URLLoaderDataFormat.TEXT
loader.addEventListener(Event.COMPLETE, onLoadXML)
loader.load(new URLRequest("images.xml"))
function onLoadXML(ev:Event){
try{
//Convert the downloaded text into an XML
var myXML:XML = new XML(ev.target.data)
var list:XMLList = myXML..title
//walks the list and show in textfields
for(var i=0; i<list.length(); i++){
var loader:Loader = new Loader()
this["img"+i].addChild(loader)

Regards
Mitchell

Craig Grummitt

Inspiring

You'll have to draw a rectangle yourself around the image. To do this, you need to use the graphics property of a Sprite and call drawRect.
eg. (say your Loader is called 'loader', and the loader has completed loading an image)

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded