Goodbye and thank you, Flash Player, for all that jazz

July 27th, 2017

My adventure with Flash Player had started back in 2002 when I’ve explored the capabilities of this platform for the User Interface prototyping at Philips Research using Flash MX components and ActionScript 2.

 

 

One of my first commercial work was games development together with Sean Wood using Flash lite development for one Japanese mobile operator, later we’ve done together interactive maps app for Ayuquila river basin area for United Nations University.

My interest into the development of UI components using Flash platform had led to my collaboration with Judah Frangipane on Tree component with Drag and drop support.

Later I worked with Dmitry Leader on Re:mark application to be used by mentors for adding remarks to the reviewed documents, early days of the company that is now known as Grammarly.

Then we played with an idea on building audio player in Flash for ukrainian mobile operator Kyivstar and Anton Antropov.

In 2005 a group of ex-employees from Macromedia and Microsoft had established an startup in intriguing Ukraine to build on Web an user customized application built in Macromedia Flex 1.5 and later Adobe Flex 2, that’s how I did open an new chapter in my life with Flex UI framework.

I’ve spent with Flex UI framework almost 10 years of my development career, did a few talks at Ukrainian Flash User group, open-sourced InputAssist component, but after Adobe decision in 2011 to abandon the future development of Flex framework it become obvious that sooner or later every seasoned Flex developer has to move on.

Nowdays my choice of technologies for modern web application is React and Redux state container, Javascript with Ecmascript 6 touch, npm and many more.

Yes, we will say the final goodbye to Flash player runtime in 2020, but Web and UI interfaces will remain with us till the very end of our professional life.

Incompatibility issue when migrating Flex SWC Library projects from Flex 2 Builder to Builder 3 Beta 2 project and back

October 17th, 2007

The steps I underwent:

  1. I had installed Flex Builder 3 beta 2 (FB 3 beta 2) as a plugin on my Eclipse 3.2
  2. Opened my Flex SWF Library projects inside of Flex Builder 3 beta 2
  3. Selected Flex 3 M3 (Beta 2) SDK at the dialog (default value)
  4. Flex Buidler 2 had given me the following error in my log file: (full error info skipped for the sake of text clarity)
  5. java.lang.IllegalArgumentException: Attempted to beginRule: P/FlexLibrary, does not match outer scope rule: P/as3corelib
    at com.adobe.flexbuilder.project.actionscript.internal.FlexProjectPreferences.setUpgradeFlexSDK
    (FlexProjectPreferences.java:147)
    at com.adobe.flexbuilder.project.actionscript.internal.ActionScriptProjectSettings$2.runInUIThread
    (ActionScriptProjectSettings.java:285)

  6. Nevertheless of the received error, I was able to compile ALL my Flex 2 based projects that relies on my Flex SWC Library projects in FB 3 Beta 2
  7. Then I had reopened my plain Flex projects inside Flex Builder 2 again, because at the company we are using currently Flex Builder 2 for the production.
  8. But Flex Builder 2 constantly had failed to recompile all Flex SWC Library projects that were previously opened at least once at FB 3 beta2.

My resolution to this issue was to delete manually a config file created by FB 3 beta 2 and located at each Flex SWC library project folder at the following path:

c:\workspace\\.settings\com.adobe.flexbuilder.project.prefs

How big is your Flex?

October 16th, 2007

Mine Flex 2 authored SWF is 19 levels deep in its full glory:

[sourcecode language=”actionScript3″]_level0.index0.VBox5.GradientBox25.indexViewStack.
mainPage.contentPane.mainViewStack.customerViewStack.
presentationViewer.swf.FlexLoader396.instance458.sfiViewer.
bank.foreground.sa04d14eaa39b3fd.content.clip[/sourcecode]

Hyperlink component for Flex 2 ver 0.1

June 6th, 2007

    Sometimes the look of <mx:LinkButton> look is not enough to satisfy the designer’s requirement to display hyperlinks inside you Flex 2 application in a way we got used to see them in HTML world, e.g. to display hyperlinks inside Flex 2 in a plain text.

Luckily Flash 9 supports pseudo CSS style selectors like a:hover, a:link, a:active. Let’s use this fact to our advantage!

Source MXML code of the example project:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    xmlns:text="jabbypanda.controls.*"
    width="100%" height="100%"
    horizontalAlign="center"
    backgroundGradientColors="[#000000, #282828]" backgroundColor="#282828"
    verticalAlign="middle" viewSourceURL="srcview/index.html">
 <mx:Script>
     <![CDATA[
         import jabbypanda.controls.HyperLink;
         import jabbypanda.controls.events.HyperlinkEvent;
 
        private function onLinkClick(evt : HyperlinkEvent) : void {
            // here you can invoke loading of external web-page if you want    via URLRequest
             var hControl : HyperLink = HyperLink(evt.target);
            txtDataUrl.text = "You just had clicked '" + hControl.linkText + "'";
            txtDataUrl.visible = true;
          }
 
          private function changeStyle() : void {
              hLink.setStyle("colorLink", 0xFFFF00);
              hLink.setStyle("colorHover", 0xFFFF00);
              txtDataUrl.visible = false;
          }
     ]]>
 </mx:Script>
 <mx:Style>
     HyperLink {
         colorLink : #FF0000;
         colorHover : #00FF00;
         colorActive : #0000FF;
     }
 
     Label {
         color : #CCCCCC;
         fontSize : 16;
     }
 
 </mx:Style>
  <text:HyperLink linkText="Click me! I am a hypertext link" id="hLink" linkClick="onLinkClick(event)"/>
  <mx:Button id="btn" label="Change the style" click="changeStyle()"/>
  <mx:Label id="txtDataUrl" visible="false"/>
</mx:Application>

See the demo below.

Example: http://jabbypanda.com/labs/hyperLink/htmlText.html
Source files: http://jabbypanda.com/labs/hyperLink/srcview/index.html

ps
I marked this component version as 0.1 because I feel there is a open room for suggestion how to correct/ extend Hyperlink component to make it more useful.

Tell me frankly, does this hyperlink component look good enough to match a view and feel of plain old <a href> tag from HTML world?

Acknowledgments

Hyperlink component example written by Tracy Spratt

Fix for “backgroundColor” and “disabledBackroundColor” styles for Tree component from Flex 2.0.1 SDK

May 12th, 2007

    Problem: Unoccupied space with tree items inside Tree component is always filled with black color if “depthColors” style is applied to Tree UI component from Flex 2.0.1. SDK.

   Fix: My ExtendedTree class fixes this error by reusing the old code from method implementation ‘drawRowBackgrounds’ in Tree.as from old Flex 2.0 SDK.

Example: http://jabbypanda.com/labs/treeDepthColors/treeDepthColors.html
Source files: http://jabbypanda.com/labs/treeDepthColors/srcview/index.html

Using a:hover pseudo CSS classes with Flex 2.0.1 SDK components

April 24th, 2007

   I like using a:hover pseudo CSS class for styling hyperlinks in HTML and I would like to do the similar with hyperlinks inside text displayed with Flex 2.0.1 SDK UI components such as mx:TextArea and mx:Text.

   In Flex 2.0.1 SDK the support for a:hover pseudo CSS classes is done via runtime style sheets.

   <mx:TextArea> component starting from Flex 2.0.1 SDK supports setting CSS stylesheet at runtime right from the box.
   <mx:Text> is not that ready to accomplish the similar task, fortunately for us it is easy to extend <mx:Text> component and add the required functionality to it – see the code below.

 
package com.jabbypanda.controls {
    import mx.controls.Text;
    import flash.text.StyleSheet;
 
    public class ExtendedText extends Text {
 
        public function ExtendedText() {
            super();
        }
 
        public function get styleSheet() : StyleSheet {
             return textField.styleSheet;
        }
 
        public function set styleSheet(value : StyleSheet) : void {
            textField.styleSheet = value;
        }
    }
}

Example: http://jabbypanda.com/labs/hoverCSS/HoverCSSFlexSupport.html
Source files: http://jabbypanda.com/labs/hoverCSS/srcview/index.html

Acknowledgements:

    In my experiments I was both inspired by the quote from Flex 2 livedocs:‘You can also define a:link, a:hover, and a:active styles for anchor tags by using style sheets’ and by reading a great article followed by very useful comments published at FlashLit blog titled “Styling Flex TextArea content with CSS”.