A Better Way

Finding a better way to get things done, a technical journey

Archive for category Adobe Technologies

The Death of Flash

Apr 28

Posted by Jack Lawson in Adobe Technologies, Development, JQuery, Javascript, Web Design | 2 Comments

Example of ActionScript 2.0 running on Macrome...
Image via Wikipedia

I’m excited. Not because a technology is dying, necessarily, but because something far, far better has risen in it’s place. Because now I, as a developer, can use a language (no, ActionScript is not a language, at least in my book) that works for rapid development, that leverages my existing knowledge of CSS, and that users won’t have to use a plugin for.

Flash is dead, long live jQuery.

I’ve recently been playing around on a few pseudo-projects, where I’ve just done as much “flashy” stuff as I can (Maybe I’ll update these later if I ever have anything finished.) So far, I’ve had things fade in, things move, things flash, things animate to different colors, things change when they’re focused on, or moused over, or clicked on… almost everything anyone used flash for in the past, I’ve been able to replicate. The only thing I haven’t tried so far is embedding multimedia (I have used a sound plugin that works beautifully, though.) And all of this with a few lines of code, no compiling.. and only a 19kb download.

Almost everything I’ve ever wanted to do with jQuery already exists in a plugin. Everything else was either a tweak of another plugin, or something I built myself, and always under 20 lines of code. Make that happen with Actionscript.

I guess what I’m saying is: jQuery is easier for the developer to develop, and it’s easier for the client computer to run (no plugins, faster, direct dom manipulation). So, why is anyone still using Flash?

Reblog this post [with Zemanta]

Tags: ,

Flex Dynamic External Stylesheets Revisited

Sep 9

Posted by Jack in ASP.NET, Adobe Technologies, Development | No Comments

Well, it seems that my article on Flex Dynamic External Stylesheets is the most popular on my blog; and, given that, I should probably explain what I did a bit better. The last article was more of a discussion on what I went through to get it working, whereas this will be more of a tutorial of sorts.

Note: this is using Flex 3; Flex 2 may be similar, but I can’t guarantee anything.

First thing: you cannot load a CSS file into your SWF. It’s just not possible. It’s what I struggled with, and finally had to come to the realization of; you have to compile the .css into a .swf file (as I explain further down.) Also, the “css” that flex uses isn’t CSS, it’s some convoluted garbage they call CSS. It should be called FSS. But I digress.

The first thing I did was get the CSS written that I wanted to change, and put it in a CSS file. It had background-color changes that overwrote the CSS in the main file. So, if the main CSS file was called default.css, and said:

.blueBox {
    color: #fffffff;
    background-color: #000066;
}

My new CSS file was called newBlue, and said:

.blueBox {
    color: #ccccff;
}

Or whatever you happen to choose. This causes my new CSS file’s font color to overwrite the old one, just like real CSS.

I then right-clicked my new CSS file, and set it to “compile to swf”. Don’t do this with default.css, that’ll be ok to compile into the original swf; the compile-to-swf option creates a seperate  SWF file specifically for your CSS (because it’d be way too easy to just load a .css file, right?)

The next step was to modify the ActionScript file. I was passing through a parameter called “Theme”, so I used that to call the compiled CSS that I wanted to load, and overwrite the main. I passed through the theme parameter as a querystring parameter on the flash file name (flash.swf?Theme=jack)

The actionscript was something like this:

//(function called by creationComplete
CSSFormat();

//(somewhere further down the page)
public function CSSFormat():void{
    //this will load up default.css, so we always have something.
    //however, the theme will flash the default color before it
    //loads the new theme you're trying, so keep that in mind.

    var theme:String = "default"var themeSWF:String = "default"

    //This grabs "Theme" from the parameters.

    if(Application.application.parameters.Theme != undefined) {
        theme= Application.application.parameters.Theme;
    }

    themeSWF = theme;

    //note: swf files don't like compiling with hyphens.
    //your url will obviously change, depending on where you decide to
    //store your swf. Mine's in the app_themes directory for an
    //asp.net application.

    var css_url:String = "App_Themes/" + theme + "/" + themeSWF + ".swf";
    StyleManager.loadStyleDeclarations(css_url);
}

And, now when I publish, it spits out the .css file I created into a .swf file. Put that into the directory I specified in the css_url, and it’ll load it up! And, even if it doesn’t, it’ll still load the default (don’t set default.css to compile).

Hope this helps everyone else that is remotely as frustrated as I was!

Tags: , ,

Flex Dynamic External Stylesheets

May 5

Posted by Jack in ASP.NET, Adobe Technologies, Development | 1 Comment

Note: an updated version can be found here, which only has the relevant stuff if you’re trying to figure out how to do this.

After a short hiatus succeeding my random anti-RIAA rant, I’m back with
some information on an interesting Flex issue that I had.

Flex
is the new(ish) Adobe tool that lets you develop flash-like
applications in a new way. It’s Actionscript based, but has a more web
development feel to it than the Flash applications of yore.
Unfortunately, though, being a new language, it’s lacking a lot. And I
mean a lot.

Recently,
I was tasked with augmenting an application that we have where I work.
It’s an image gallery, which reads lists of files fed to it via XML and
displays everything. It used a flex stylesheet (which is mostly CSS,
with some extra proprietary stuff mixed in), which is all good and
dandy- except that it didn’t change depending on theme. And, since we
have several websites that are the same, with different styles applied,
the image gallery looked the same, whether or not it matched. So, my
job was to take this flex doodad and spice it up, so it could change
depending on theme.

My first thought was “this can’t be too bad,
it uses these CSS-like sheets, I can just reference externally.” Well,
this wasn’t quite true. I Googled around a bit, to no avail; so, my
next step was to check the new version, Flex 3. What I had was Flex 2,
and lo and behold, Flex 3 claimed ‘external stylesheet report’. I was
in, or so I thought.

I set up my .net app to send the theme name
through a querystring, with which I’d be able to pick up the stylesheet
(thinking I’d just drop it in the theme-specific folder and grab the
path through application logic in the flex program). I did it and it
spectacularly failed. Frustrated, I tried several configurations, but
nothing worked. So, I made my way over to the Actionscript.org forums
to see what I could dig up. As you can see here,
I didn’t make much progress. Apparently, I was going completely the
wrong way (and may have thrown a little tantrum in the progress, but
we’ll look over that, heh.)

But just then, a fellow named Jeff with a blog post saved the day. After reading his instructions,
I got correct results instantly! Fantastic. I now had my working
project, which changed styles based on the asp.net theme I was in. I
guess flex and asp.net just isn’t quite right to be married to each
other yet, no matter how much XML you pass back and forth.

Here’s what I did:

On init() (function called by creationComplete)CSSFormat();

After init()public function CSSFormat():void{var theme:String = "default"var themeSWF:String = "default"

if(Application.application.parameters.Theme != undefined) { theme= Application.application.parameters.Theme;}

themeSWF = theme;

//conditional comments to take out hyphens were here, but I took them out to shorten it a bit. some directories use hyphens, while the swf files themselves have issues compiling like that.

var css_url:String = "App_Themes/" + theme + "/" + themeSWF + ".swf";StyleManager.loadStyleDeclarations(css_url);}

Moral of the story? Although I got it to work, I’m sticking to Silverlight.

Tags: