http://franto.com/inverse-masking-disclosed/

below is an example using text as an inverse mask.

example

A few notes:

1) this isn’t really a mask, it’s a blendMode effect, so nothing actually gets set as a mask of anything else.

2) display order (depth) matters, as the display object we are using as the mask needs to be on top (not so with standard masks)

3) everything beneath the ‘mask” will be affected so long as it’s a child of the same parent (not so with regular masks)

4) if you’re using text, be sure to set selectable to false, or it can get weird!

5) alpha values affect the masking, if you want a full mask, have the alpha of the masking layer set to 1.

enjoy!

The following example loads a bitmap image, then puts a white block over the whole image. Then text is used as an ‘inverse mask’ to ‘punch out’ the white block and show the image through the text.

Note: the image is not a child of the same container the white block and the text are.

import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import flash.display.*;

var imageLoader:Loader = new Loader();
var contentContainer:Sprite = new Sprite();
var textMask:TextField = new TextField();
var whiteBlock:Sprite = new Sprite();

init();

function init():void{

contentContainer.blendMode = “layer”;
addChild(contentContainer);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageCompleteHandler);
imageLoader.load(new URLRequest(‘http://i.ehow.com/images/GlobalPhoto/Articles/4456649/seascape-main_Full.jpg’));

}

function imageCompleteHandler(event:Event):void{
addChild(imageLoader);
setWhiteBlock();
setTextMask();
this.setChildIndex(imageLoader,0);
}

function setWhiteBlock():void{
whiteBlock.graphics.beginFill(0xffffff);
whiteBlock.graphics.drawRect(0,0,550,400);
whiteBlock.graphics.endFill();
contentContainer.addChild(whiteBlock);
}

function setTextMask():void{

var labelFormat:TextFormat = new TextFormat();
labelFormat.font = “Arial”;
labelFormat.bold = true;
labelFormat.color = 0xff0000;
labelFormat.size = 100;

textMask.autoSize = “left”;
textMask.text = “SEASCAPE”;
textMask.selectable = false;

textMask.setTextFormat(labelFormat);

textMask.blendMode = “erase”;
contentContainer.addChild(textMask);
}

I haven’t posted in a while. I’ve been involved in a big project, so will have lots to post soon. But I found a nice tidbit to share. This comes from this site:http://www.angryrocket.com/?p=113 – the link is broken – the code can be found below.

this is a great class to centralize and organize project-wide events, that any class in the project can access.

The real need for it for me came when I had a custom scroller object (the scroll bars in flex suck), that needed to see keyboard events. I wanted the keyboards events to be dispatched from the stage, and not targeted to specific instances of the scroller, as there were many. As I understand it, events dispatched from the stage do not really have a capture or bubble phase, and won’t nicely propagate up the display list, the same way they would go “down” the display list to the stage, if they were dispatched from the scroller (which they could not be in this case). So I had the stage listen for the keyboward event, and when it heard it, dispatch it through this singlton instance, whcih the scroller can invoke as a listener, and viola, it worked perfectly! All events that need to travel all over the project, to parents, grandparents, and to all points in the display list, will now do so through this great EventCentral singleton.

here’s the code:

-EventCentral.as-
package {

import flash.events.*;

    public class EventCentral extends EventDispatcher {
    private static var instance:EventCentral;
    public static function getInstance():EventCentral {
      if (instance == null){
         instance = new EventCentral(new SingletonBlocker());
      }
      return instance;
}
      public function EventCentral(blocker:SingletonBlocker):void{
        super();
        if (blocker == null) {
           throw new Error("Error: instantiation failed; Use EventCentral.getInstance()");
       }
}
        public override function dispatchEvent($event:Event):Boolean{
        return super.dispatchEvent($event);
}
}
}
internal class SingletonBlocker {}

--ProjectEvent.as--

package {
      import flash.events.Event
      public class ProjectEvent extends Event {
        public static const SOME_EVENT:String = "ProjectEvent.onSomeEvent";
        public var params:Object;
        public function ProjectEvent($type:String,$params:Object = null){
          super($type,true,true);
          this.params = $params;
}
       public override function clone():Event {
           return new ProjectEvent(this.type,this.params);
}
     override public function toString():String{
          return ("[Event ProjectEvent]");
}
}
}

To set up a listener:

EventCentral.getInstance().addEventListener('ProjectEvent.SOME_EVENT',handleSomeEvent);
function handleSomeEvent(event:ProjectEvent):void{
trace(event.params.param1);
}

to dispatch:

EventCentral.getInstance().dispatchEvent(new ProjectEvent('ProjectEvent.SOME_EVENT',{param1:'something'}));

Nice!

Basically what I was doing was creating quite a few mp3players, each with many songs, and didn’t want to edit all the xml files, as the player I was using reads from an xml file with the following structure:

So what I did was this:

Create a php file that reads the contents of a folder, and takes all the file names and returns the same xml structure as above. There are the following considerations:

1) I’m not reading any id3 tags, so the file name needs to be the actual song title, for the title to show up.
2) I’m stripping the “.mp3″ from the file name so it doesn’t show up in the title.
3) I implemented this in wordpress, so I had the whole relative path problem discussed here. To overcome this, I had php file find the path to itself, then add the “mp3s/” to it – i.e. the mp3s are located in a folder called mp3s/ in the same folder as playlist.php

Enough talk, here’s the code:


$str = '

$str2 = ' ';
echo $str2;
?>


Oh, also you need to change whatever reference to playlist.xml there is in your mp3player (or photo gallery, etc.) to playlist.php

I will write more on this later regarding the mp3 player itself – stay tuned…

EDIT: I realized that this gives errors in PHP4 – the working PHP4 code is:

$str = '

This is an improvement on the technique used here

This one deals with linemetrics, and solves the weakness of the other one (that it only works well with monotype fonts)

Here’s the class code:

Note – you must have the tweenMax library in your library path

package com.flexcommunity
{
import flash.filters.*;
import gs.*;
import gs.easing.*;
import gs.plugins.*;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.text.TextLineMetrics;
import flash.events.MouseEvent
import mx.containers.Canvas;
import mx.controls.Label;
import mx.core.Application;

public class EffectText extends Canvas
{

private var tf:Label;
private var test:Label = new Label();
private var tfs:Array = new Array();
private var lm:Array = new Array();
private var j:int=0;
[Bindable]
public var totalWidth:Number=0;
private var myColor:uint;
public var results:Array;
public var myStr:String;
public var buttonSprite:Canvas= new Canvas();

public function EffectText(str:String,color:uint)
{

TweenPlugin.activate([BlurFilterPlugin]);

var filter1:DropShadowFilter = new DropShadowFilter();
myStr = str
myColor=color;
results = myStr.split(”);

for(var i:int=0; i tf = new Label();
tf.filters = [filter1];
tf.text = results[i].toString();
test.y=0;
tf.alpha=0;
tf.setStyle("fontFamily","Arial");
tf.setStyle("fontSize",40);
tf.setStyle("color",myColor);
tfs.push(tf);

}
TimerInit();

function myTrans():void{
addChild(tfs[j]);
tfs[j].validateNow();
var metrics:TextLineMetrics = tfs[j].getLineMetrics(0);
lm.push(metrics.width);

if(j>0){
totalWidth+=lm[j-1];
}
tfs[j].x=0+(totalWidth);

TweenMax.from(tfs[j],.1,{alpha:0,blurFilter:{blurX:0,blurY:120}});
TweenMax.to(tfs[j],.3,{alpha:1,blurFilter:{blurX:0,blurY:0,quality:3},onComplete:myGlowIn,onCompleteParams:[tfs[j]],ease:Back.easeOut});
j++;
}

function TimerInit() {
var myTimer:Timer = new Timer(40, tfs.length);
myTimer.addEventListener(“timer”, timerHandler);
myTimer.start();
}

function myGlowIn(parameter1:Label):void{
var target:Label=parameter1;
TweenMax.to(target,.2,{glowFilter:{color:0xffffff, alpha:1, blurX:10, blurY:10},onComplete:myGlowOut,onCompleteParams:[target],ease:Cubic.easeOut});
}

function myGlowOut(parameter1:Label):void{
var target:Label=parameter1;
TweenMax.to(target,1,{glowFilter:{color:0xffffff, alpha:0, blurX:0, blurY:0},ease:Cubic.easeOut});
}

function timerHandler(event:TimerEvent):void {
myTrans();
}

}}}

(add this code to the component)

override public function set htmlText(value:String):void
{
// calling super method
super.htmlText = value;
// if is auto resizable we call
// the resize method
if (_autoResizable)
resizeTextArea();
}

Also, as a side note: you can bind to the height of the text component to resize containers etc. like this:

<,mx:Canvas width="500" height="{homeText.height+25}" left="16" bottom="128" backgroundImage="images/fades/fade01.png" showEffect="{myRS}" backgroundSize="100%" >
<,custom:AutoResizableTextArea id="homeText" width="94%" height="90%" showEffect="{myRS}" verticalCenter="0" left="15" htmlText="{content.lastResult.homeText}" leading="0" condenseWhite="true" selectable="true" editable="false"/>
<,/mx:Canvas>

one more little thing: I set

private var _autoResizable:Boolean = false;

to:

private var _autoResizable:Boolean = true;

I figured it’s better to have it resize by default (or else why would you use it) and avoid having to change to property when you instantiate it.

Great component. Thanks FLEX{ER}

btw – the fact that TextArea should have an autoResize method inherent in it goes without saying

Happy flexing!

Major credit goes to John Lindquist for the cool effect. Read his article here:

http://pv3d.org/2009/04/09/sliced-cube/

john says: “I’m sorry the code is a big pile of crap. I’m too lazy right now to clean it up”

well, I just made it worse!

Here’s my example (right click for source)

http://blog.flexcommunity.net/lab/ppv3dGallery_slicedCube/

Here’s a description of what I did:

First off the necessary steps required to make this happen were:

1) Load the images from an external xml file (this could also be done from a db of course).

2) Devise a method to swap out the materials on the faces of the cube as needed.

3) add ‘previous’ and ‘next’ functionality

Known weaknesses:

1) at least 4 images are needed for this to work as expected

2) better error catching (if an image path is typed wrong in the xml, it breaks the whole app)

3) no image scaling – the images need to be the exact size of the viewer (in this case 900×480)

4) Since the image swapping is called after the tween finishes, I disabled the buttons while the tween is in effect (unlike the original – which gets cool if you start clicking like a wildman)

things to add:

1) a play/pause feature (this is a simple add)

2) image captions or other data (also simple) EDIT: CAPTIONS SUPPORT ADDED

Text effect is an improved version of the technique here :
The improvement adds kerning – the original example only works right with monotype fonts.

Technical notes:

1) In order to use the papervision3d scene in a flex mxml app, I wrapped it in a UIComponent. See SlicedCube.as

2) you need to have the papervision3d and tweenmax swc in your lib path for this to work. (See the original article)

I’m sure this can be done better/cleaner. If anyone has improvements, additions, or suggestions, please help your fellow man, and put them in the comments.

Thanks!

Referencing relative paths from an swf that is not in the root folder (the same folder containing the HTML page) doesn’t work. For example, if you have

root -> html page -> swf folder -> image.jpg

And in the swf file you try to load “image.jpg” as a relative path, it does not work. According to the swf (embedded in the HTML page), the jpg it is looking for should be located in root -> image.jpg

It is not there. it is actually in root -> swf folder -> image.jpg

I found others on blogs and forums with the same problem

Obviously one could write an absolute path, or just put the image where the swf wants to see it, but in my case neither of these options was acceptable. I wanted all the images to have the same name – preview.jpg, so that the client could swap out images, and as long as they were called preview.jpg, they would work (so they couldn’t all be in the same folder. Also I didn’t want to generate a different swf for each one, looking for -say preview1.jpg, preview2.jpg, etc.

The solution I found is as follows. (this is not complete code, just the relevant snippet. It works great. Hope it helps someone out there.

var urlReq:URLRequest = new URLRequest(url);
ldr.load(urlReq);
addChild(ldr);


EDIT:
in AS 2 this can be achieved by somethng like this:

var curUrl:String = _root._url;
var strLength = curUrl.length;
// the following slice removes the name of the swf file – in this case its 13 chars long
var url:String = curUrl.slice(0,-13);
trace(url);
playlistURL = url + “preview.jpg”;

and this:

http://livedocs.adobe.com/flex/3/html/index.html?content=asdoc_9.html#142061

Some additional notes to help:

1) This method creates docs for a folder in a particular flex project, if you want to create docs for a folder not in a project, you’ll have to modify the options, see the adobe page for different command options

2) For this particular method to work, it seems you need to have the flex navigator open, and the project selected

3) ASDocs is not as forgiving with errors as the regular compiler is, and I found myself fixing ‘errors’ that were not showing up at all when i debug the flex app itself. Most of these had to do with private or public variables. Warnings were ignored.

4) even with the good advice, I had to play around a bit before getting this to work, so keep trying…

]]>




Here’s an example (you can view page source to see the HTML):

A few notes:

In AS3:

The frame name must by exactly the same (of course! – but this came up in the forums), and must be a string, passed as a parameter in navigateToURL (in place of “_blank” etc)

In AS2: (Flash): The parameter is ‘supposed’ to be a string here as well, but I could only get it to work with out the quotes (as a var) – here you use the getURL() method.

Note: if using relative urls, it will appear not to work while developing, but should once you get it on the server – flash security. This seems o only be the case with as3

Cheers,

It works like a charm.

Cheers

http://www.guerrillamail.com/