ADOBE忍术

Have you ever seen this before?!

This dialog may be confusing, specifically the “Web root” and “Root URL”. Most examples use localhost, valid settings may look something like this:

However I couldn’t find any examples using a remote server. Fortunately, there’s some documentation provided by Adobe:

So that’s real simple, assuming for the “web root” field, you can provide Flash Builder a path on your system with write access to the “Root URL”. That usually means through a Mapped Network Drive on Windows or a mounted Volume on Mac.

This was almost a dead end for me since I only had FTP access to this one server I was working on, and (to my knowledge) Windows 7 does not provide any way to map a FTP site to a Windows drive letter (such as W:\). Thankfully there is a solution for Windows, NetDrive (free for non-commercial use):

As you can see, you simply enter your FTP information, select a drive letter, and press connect. This handy dandy program also supports WebDAV.

Valid remote server fields may look something like this:

In conclusion, Flash Builder’s Data/Services panel can connect to both local and remote servers, so long as the web service is running and Flash Builder has write access to the web root.

If you are new to using Pixel Bender shaders in Spark, you may run into the same issue I did. That is, when you try to use a .pbj filter as the AnimateTransitionShader‘s shaderByteCode, the Pixel Bender filter must have two image ‘inputs’.

Here is an example of Pixel Bender code declaring two inputs and one output:

input image4 frontImage;
input image4 backImage;
output pixel4 dst;

If there is only one input, then AnimateTransitionShaderInstance will throw a TypeError #1010:

TypeError: Error #1010: A term is undefined and has no properties. at spark.effects.supportClasses::AnimateTransitionShaderInstance/play()
[E:\dev\hero_private\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateTransitionShaderInstance.as:298] at spark.effects.supportClasses::AnimateInstance/startEffect()
[E:\dev\hero_private\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateInstance.as:433] at mx.effects.effectClasses::SequenceInstance/playCurrentChildSet()
[E:\dev\hero_private\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:631] at mx.effects.effectClasses::SequenceInstance/playNextChildSet()
[E:\dev\hero_private\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:657] at mx.effects.effectClasses::SequenceInstance/onEffectEnd()
[E:\dev\hero_private\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:603] at mx.effects.effectClasses::CompositeEffectInstance/http://www.adobe.com/2006/flex/mx/internal::effectEndHandler()
[E:\dev\hero_private\frameworks\projects\framework\src\mx\effects\effectClasses\CompositeEffectInstance.as:457] at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at mx.effects::EffectInstance/finishEffect()
[E:\dev\hero_private\frameworks\projects\framework\src\mx\effects\EffectInstance.as:806] at spark.effects.supportClasses::AnimateInstance/finishEffect()[E:\dev\hero_private\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateInstance.as:873] at spark.effects.supportClasses::FadeInstance/finishEffect()
[E:\dev\hero_private\frameworks\projects\spark\src\spark\effects\supportClasses\FadeInstance.as:269] at spark.effects.supportClasses::AnimateInstance/animationEnd()[E:\dev\hero_private\frameworks\projects\spark\src\spark\effects\supportClasses\AnimateInstance.as:812] at spark.effects.animation::Animation/sendAnimationEvent()
[E:\dev\hero_private\frameworks\projects\spark\src\spark\effects\animation\Animation.as:861] at spark.effects.animation::Animation/end()
[E:\dev\hero_private\frameworks\projects\spark\src\spark\effects\animation\Animation.as:980] at spark.effects.animation::Animation/doInterval()[E:\dev\hero_private\frameworks\projects\spark\src\spark\effects\animation\Animation.as:808] at spark.effects.animation::Animation$/timerHandler()
[E:\dev\hero_private\frameworks\projects\spark\src\spark\effects\animation\Animation.as:702] at flash.utils::Timer/_timerDispatch() at flash.utils::Timer/tick()

Not all Pixel Bender filters are designed to operate with two source images. The simplest solution for implementing single input Pixel Bender filters in Spark is to use ShaderFilter instead of AnimateTransitionShader. The difference being ShaderFilter does not capture before and after bitmaps, instead the ShaderFilter is applied directly to one bitmap.

Here is an example of a Group with a ShaderFilter applied to it:

<s:Group>
   <s:filters>
      <s:ShaderFilter id="myShader" shader="@Embed(source='myFilter.pbj')"/>
   </s:filters>
</s:Group>

That filter can be easily animated with AnimateFilter. In the following example, the AnimateFilter class interpolates the “size” paramater of the ShaderFilter in the above example.

<s:AnimateFilter bitmapFilter="{myShader}" duration="500">
   <s:SimpleMotionPath valueFrom="0" valueTo="100" property="size"/>
</s:AnimateFilter>

When embedding a SWF, there are a two parameters that control how it scales, crops, and aligns within the available width and height.

• scale: Specifies the scaling method and/or cropping of display objects drawn outside of the dimensions of the object containing the SWF.

• salign: Specifies where the scaled SWF is positioned within the dimensions of the object that contains the SWF.

“salign” is often confused with the HTML object tag’s “align” attribute. However, “align” is actually the same deprecated HTML attribute applied to <img>, <object>, and <applet> tags.

Creating instances of MovieClips set to “Export for Actionscript” in Flash Professional is really easy to do with the following AS3 code:

var myClipClass:Class = getDefinitionByName("MyClip" + "01") as Class;
var myClip:MovieClip = new myClipClass();
addChild(myClip);

The magic occurs when you assign the returned Class to a separate variable. This enables you to construct instances of that Class, and assign them to other variables. Of course, you aren’t limited to only MovieClips, you could construct instances of any type of Class, as long as a definition exists for it.

This technique essentially allows you to do something like:

var test:MovieClip = new ("MyClip" + variable)();

Which is obviously invalid code.

Note: You must assign the Class to a separate variable before you can construct instances of it. Unfortunately, I haven’t found any way to eliminate the need for a separate variable that stores the Class reference.

There are three states of TLF LinkElements (“hyperlinks” or “anchors”) that may be customized:

• Normal: When the LinkElement is in both its non-hover and non-active state (or when ROLL_OUT is dispatched)
• Hover: When the LinkElement dispatches a ROLL_OVER event and the primary mouse button is not pressed.
• Active: When the LinkElement dispatches a MOUSE_DOWN, MOUSE_CLICK, or MOUSE_MOVE and the primary mouse button is pressed (MouseEvent.buttonDown).

LinkElements must be children of RichEditableText in order to function. If the “editable” property is set to “true” (which it is by default), the control key must be pressed concurrently with the LinkElement mouse activity. This is the special nature of FlowElementMouseEvent

Below is an MXML example using an inline TextFlow declaration which styles the LinkElement as so: normal, hover, & active. However, keep in mind TextLayoutFormat supports many other properties for styling.

<s:RichEditableText editable="false">
 <s:textFlow>
   <s:TextFlow>
     <s:linkNormalFormat>
          <s:TextLayoutFormat color="#FF0000" textDecoration="underline"/>
     </s:linkNormalFormat>
     <s:linkHoverFormat>
          <s:TextLayoutFormat color="#0066FF" fontStyle="italic"/>
     </s:linkHoverFormat>
     <s:linkActiveFormat>
          <s:TextLayoutFormat color="#00FF00" fontWeight="bold"/>
     </s:linkActiveFormat>
     <s:p>Hello <s:a href="http://www.adobe.com/">Adobe</s:a></s:p>
   </s:TextFlow>
 </s:textFlow>
</s:RichEditableText>

A few things to note:

• The linkNormalFormat is blue (#0000FF) and underlined by default.
• Both linkHoverFormat and linkActiveFormat reference the linkNormalFormat unless specified otherwise.
• LinkElements may contain any of the following elements:
  • linkNormalFormat
  • linkHoverFormat
  • linkActiveFormat
  • tcy
  • img
  • span
  • br
  • tab
• Link format elements must contain only one <TextLayoutFormat> child element which formats any LinkElement within the parent of that link format element
• Link formats may be inherited from parent elements or you may override them in child elements.
• Link format elements are not supported with TextConverter.TEXT_FIELD_HTML_FORMAT
• FlowElementMouseEvent listeners may be added to LinkElements and the CLICK event handler may prevent the default navigateToURL behavior:

private function mouseClickHandler(e:FlowElementMouseEvent):void
{
     e.stopImmediatePropagation();
     e.preventDefault();
     trace("LinkElement clicked");
}

All of the preceding Text Layout Framework markup has been tested and proven functional with the following Flex SDKs:

• Flex 4.0.0.14159 with its included TLF 1.0
• Flex 4.1.0.16076 with its included  TLF 1.1
• Flex 4.5.0.20967 with its included TLF 2.0