Posted by Anthony in Flash tagged actionscript 3, Flash

Recently I was working on a project where I had a container SWF file, which loaded two different SWF files into it. Pretty straight forward stuff, and nothing I haven’t done before. However, my surprise came when I was adding a preloader movieclip in one of the loaded SWF files. Here’s what happened:

In my container SWF, I had a library item set to export with class name “PreloaderMC”. As you might imagine, I created and added this preloader to the stage when my two SWF files were loading, then removed it from the display list once everything was loaded. I also had a library item exporting as “PreloaderMC” in one of my loaded SWF files. When testing and exporting the loaded SWF by itself, there was no issue. However, when I loaded that SWF into the container SWF, the preloader that was created and used in the loaded SWF was the one from the container SWF.

After asking a few colleagues and perusing some of the documentation, this wasn’t necessarily an unexpected find. It all has to do with application domain, which I won’t go into detail about here. In short though, if you use Loader.load() when loading another SWF file, and don’t specify LoaderContext (which, among other things, defines the ApplicationDomain for the loaded object), then the loaded SWF is considered a child domain of the container SWF, and thereby uses whatever class definitions are in the container that may have the same names.

So, lesson learned. Either be more explicit about specifying the application domain when loading external SWF files, or just use unique class names for item that are set to export to ActionScript.

No Comments »

Posted by Anthony in Blogging, Flash tagged apple, applications, Flash, mobile, optimization

OK. I need to get this off my chest. I’m not a fan of Adobe’s attempt to get into the mobile application game.

There. I said it. That feels better.

But why am I not a fan of what they’ve done? Quite frankly, in the process of trying to build a mobile application with Flash Builder 4.5, I’m finding myself either engineering components from scratch, or reengineering the default “mobile-optimized” components to get them to do what I want/need. Plus, I’m finding that in an application of even a decent size (more than just a “hello world” app with a couple simple views like Adobe likes to show off to get Flash developers excited about mobile apps), the optimization and performance are still lacking.

Maybe I’m just being pessimistic. And maybe I’m not doing everything correctly to get things optimized for the mobile app. Honestly, I hope that I am missing something that I’ll catch soon and have a light bulb-over-the-head moment. But my experience thus far has taught me that Steve Jobs was right in bashing Adobe’s ability to create mobile-optimized content.

Here’s a snippet from a blog post from Steve Jobs, dated April 2010:

As you probably noticed, this post was from April of 2010. Yeah, that’s over a year and a half ago. And guess what? Adobe still doesn’t have it right. They’re close. But not there. And with the news of Adobe dropping mobile support for Flash Player a couple weeks ago, I’m guessing they never will be there. They may try to really hone in on the mobile application side, rather than just the Flash Player plugin for mobile, and they may get close. But like Jobs eluded to, Adobe holds all of its developers at the mercy of when they choose to adopt new features, whereas developing a mobile application natively gives immediate access to the full spectrum of features.

Don’t get me wrong. I’m not completely agreeing with the Flash haters out there who think that all Flash needs to go away—there is definitely still a time and place for Flash on the web. I’m just agreeing that Adobe needs to realize what their strengths are, and really concentrate on them rather than trying to get a foot into every single realm and telling developers that the Adobe solution will change their lives and work seamlessly.

No Comments »

Posted by Anthony in Flash tagged actionscript 3, classes, Flash, flash builder

I’ve been working on a mobile application in the recently released Flash Builder 4.5, which has support for exporting native apps for iOS and Android. While the engineering is largely sound and well done (with the exception of some big-name missing components from the “mobile-optimized” list, such as ComboBox), there are definitely a few glitches that I’ve encountered thus far in my experience with it. One such glitch is in the TextInput component.

Read the rest of this entry »

1 Comment »

Posted by Anthony in Flash tagged actionscript 3, cache, embed, Flash, html, websites

Recently, I had a client whose server had its own cache that only cleared once a day, which ended up posing problems for updating content, as the server cache would either needed to be flushed, or we’d just have to wait it out and wait for the cache to clear on its own.  The content I was working on was a Flash file, so rather than having to flush the server cache every time I made an update, I came up with another solution for the Flash file.

The solution was to make a “container” SWF file that would load in the actual content for the page.  This was nice because the container ended up also acting as a preloader for the main content.  All I had to do in the container file was to append a query string to the end of the content to load in (i.e. “photo.jpg?id=12345678″), which effectively acted as a “cache buster” that would make the browser and server think it was loading a new file each time the page was loaded.

The result was this little nugget of Flash goodness: FileLoader.

I polished up the container file I made in my solution above, adding in a couple of customizable variables, and am making it freely available for download.

Read the rest of this entry »

1 Comment »

Posted by Anthony in User Experience tagged Flash, google, user experience, websites, yahoo

We’ve all seen them.  Horribly designed, heavy, busy, and “flashy”.  Yep, you guessed it.  Bad Flash websites.  But beyond that, I firmly believe there’s another obvious reason why people (like the folks at Apple, for instance) don’t like Flash.  And as much as I may hate to say it, being a web developer who uses Flash in my digital tool belt, I’m starting to lean the same way.  Here’s a huge reason why…

Yahoo!  Heard of that website?  Thought so.  It used to be my home page.  That is, until the Flash ads literally started to hamper my user experience and demand my attention not only to see the stupid thing, but to figure out where I needed to click to close the darn thing.  I’ve since boycotted Yahoo! because of the repeatedly poor user experiences I had.  I mean seriously, check out this screenshot I took of the Yahoo! start page and see if you notice what may have annoyed me:

Yep, you guessed it.  That innocent little ad in the right side column (which started out in its own box, by the way) expanded itself — on its own — multiple times before settling into its home, where it should have been in the first place.  And when it expands, it overlays the main content of the page.  So if you click just a split second too late, you’re getting passed off to the ad’s site like a proverbial peace pipe, becoming another statistic in their “click-through rate” column, and furthering the spread of expandable ads, because the stats are saying they’re more effective due to the increase in click-rate.

Call me old fashioned, but that sort of in-your-face advertising represents a key problem with advertising — specifically with what is done with Flash.

Somewhere in the world, some Flash developer worked on this ad.  And this is happening all over the place.  Maybe the Flash developers are thinking it’s cool, and a good idea.  Maybe they are doing it because The Man is telling them they have to in order to get their paycheck.  Or because the client is paying them handsomely and for that, they just don’t care.

Whatever the reason may be, here’s my humble opinion:  Any Flash developer who works on ads like these and doesn’t feel remorse for the end user is not a true web developer.  In my mind, they simply fall into the category of someone who knows how to use Flash as a program, not as a tool to use  to truly create a good user experience with it when the situation calls for it.  It’s like someone who picks up Photoshop (or PS Elements) and thinks they’re a graphic designer just because they own the software and know how to crop a picture or auto-adjust levels.  I don’t claim to be an auto mechanic just because I’ve changed my own oil and own a socket wrench.  Or a heating and cooling expert just because I changed the air filter on my furnace.  Or a doctor because I own a thermometer and can gauge when I’m running a fever.

Simply put, I am seriously starting to dislike and even boycott websites with poor user experiences.  And like I said, because of my Yahoo! experience, I have honestly stopped visiting their site as my source for news and email.  I’d much rather get news from somewhere like Google, where clean and simple hierarchical text and images are used, and intuitive user interface design is present.  It’s clean, easy to read, and unassuming, letting me get to where I need faster and easier.

Until next time, happy (and better, more intelligent, less obtrusive) coding!

No Comments »

Posted by Anthony in Flash tagged actionscript 3, effects, embed, Flash, fonts, text format

The other day, I had a revelation. It was a moment a lot like the Microsoft commercials, where I pictured myself slightly better looking (3 inches taller, perfect hair, and more muscular), coming to a moment of self-realization…. Or something like that. Maybe you’ve already figured this out, maybe not. Either way, I think it’s pretty sweet.

Here’s what my realization entailed:

As some of you may know, I’m always a big fan of keeping live text — be it static or dynamic — in Flash files, so that when I or anyone needs to go back in and make an update, it can be done w/o opening a Photoshop file, slicing and dicing image(s), and importing them into Flash.  Not only is it easier, but it’s a tremendous help in keeping file size down.

One aspect that is sometimes difficult is when a design calls for an effect on text, such as a gradient.  In Flash, we’re all probably aware that you can create a static text field and a shape (such as a gradient box), set the text field on the layer above said shape, and right-click the text layer to set it as a mask over the shape.  But here’s where my realization came…

It’s very true — this same effect can be done with pure ActionScript, for more dynamic scenarios… or if you’re one of those people who hate the stage with a passion.  All I’d need to do in the code is create a text field and a gradient box, layer them appropriately, and set the text as the mask on the gradient box.  And, since you can embed fonts in Flash (see the previous post about Embedding Fonts Using ActionScript 3.0), it can be done with any crazy display font that a design calls for (Immi 505 in the example below).

With that in mind, I put together a little demo to prove to myself (and you) that it was as easy as I thought it would be.  The demo has an input text field that you can use to change and update the text — which happens on the fly each time the input field is updated (so you know it’s truly live and dynamic, and not slight of hand).  So go ahead and play around with it.

So there you have it.  Dynamic text with a gradient fill effect.  Easy peasy, eh?

Until next time, happy coding!

Download

What’s that, you say? You want to see the source code to make this work? Well, ask and ye shall receive. Just click the button below to download the source FLA and AS file for this demo.

6 Comments »

Posted by Anthony in Flash tagged actionscript 3, design, Flash, optimization, user experience

We’ve all seen it before. Someone builds a well-intentioned Flash website that will wow the masses, but that ends up looking sub-par because of mis-placed, mis-sized, or otherwise unfortunate visual assets. It’s easy to do — you put together a design, draw out your shapes, do some resizing with a Transform tool to get things “perfect”, and in the process, you inevitably create fuzzy lines. It’s not all your fault. Blame it on Photoshop or Flash for allowing smaller-than-pixel increments — doesn’t matter to me where you place the blame. But at the end of the day, one of the MUST DO items when putting together any website is to ensure that your vertical and horizontal lines are crisp and exact — unless there’s good reason why to do otherwise.

Lucky for you, Flash comes well-equipped with providing tools for developers to use when coding their Flash applications.  My three most-used Flash methods for clean lines and exact placement are listed below, and are all part of Flash’s Math class.  If you use them, you’ll be sure clean up the lines and sizes of your site in no time.  (It may not help poorly-drawn shapes that you draw by hand, but for dynamically-drawn, code-generated items, or code-based asset placement, it’s golden.)

A Few of My Favorites

Math.ceil()
This function returns the ceiling of the specified number or expression, which equates to the closest integer that is greater than or equal to the number.

Math.floor()
This function returns the floor of the specified number or expression, which equates to the closest integer that is less than or equal to the number.

Math.round()
This function rounds the value of the passed-in parameter to the nearest closest integer. If the passed-in value is exactly in the middle, it rounds up.

Read the rest of this entry »

No Comments »

Posted by Anthony in Tutorials tagged actionscript 3, arrays, Flash, javascript, PHP

I’ve worked on a number of Flash projects where I’ve needed to convert a raw number into a correctly comma-formatted string for display.  Doing this is a relatively simple process, but since I found myself repeating the same chunk of code in multiple projects, I ended up creating a function that I could reuse over and over again. And the nice thing about this chunk of code is that, with a few language-specific modifications, you can use it as JavaScript, PHP, etc.

// This variable gets set as 1,234,567,890
var commaFormattedNumber:String = formatWithCommas("1234567890");

function formatWithCommas(pNum_str:String):String {
   var lReturn_str:String = "";
   var lStringAsArray_arr:Array = pNum_str.split("");
   var commaCounter_num:Number = 1;
   for (var i=lStringAsArray_arr.length-1; i>=0; i--) {
      lReturn_str = lStringAsArray_arr[i] + lReturn_str;
      if ((commaCounter_num == 3) && (i != 0)) {
         lReturn_str = "," + lReturn_str;
         commaCounter_num = 1;
      } else {
         commaCounter_num++;
      }
   }
   return lReturn_str;
}

Notes:

• In our example, we pass in 1 String value into the function, and it returns a String.
• Inside of the function, we split the passed-in string into an Array, then we loop through the array backwards, adding the number in each array slot each time through the loop.
• While looping through the array, notice that we have the variable commaCounter_num, which keeps track of which slots to also add in a comma. The conditional logic checks if the commaCounter_num is up to 3 and if the value of i is NOT zero. If both of these are true, we add in a comma and continue on. We must add the check of ensuring that i is not zero, so we don’t get a 6-digit number, for example, that ends up being returned with a comma at the very beginning of the string.

So there you have it.  A nice little chunk of code you can use to format a number into a correctly comma-formatted string. Not a whole lot to it, but still a nice reference function to have for future use.

Until next time, happy coding!

No Comments »

Posted by Anthony in Tutorials tagged PHP, websites

One of my little PHP tricks I have become a big fan of is having a set of variables at the top of each file that I use to populate values later on in the file. For instance, I often bulk all of my <head> tag content into one file, and then have a “include_once("headTag.php");” to write it into each file in which it needs to be. If I do this though, I’m stuck with the same page title, description, etc. Or am I?

If I include a standard set of variables at the very top of each of my PHP files for my site, I can then utilize those variables in any file that is written into that file. So if I want a custom page title on each page, I can make a variable named $pageTitle_str, and set it equal to whatever I want to be the page title for that particular page.  Then, in the file that includes all of the <head> tag content, I would have a little PHP logic to echo that into the <title> tag.  And if I use conditional logic to echo it in, I can set the title to a default value in case the variable isn’t found.

Here’s how it’s done. In the example below, I have the PHP code for a fictitious page in my site that will be placed on the top of that file. I also have the <title> tag for the file that is written into this fictitious page, which includes the conditional logic to echo in the variable for page title.

File – fictitious.php
Code Snippet:
   <?php
   $pageTitle_str = "Custom Page Title";
   ?>

File – headTag.php
Code Snippet:
   <title><?php if ($pageTitle_str) { echo $pageTitle_str; } else { echo "Default Page Title"; } ?></title>

And that’s all there is to it. The <title> will be written out whether the variable exists or not. And if you include the variables on each page, you can do WAY more than just setting page title. You can set sections and subsections for use in styling in a top navigation file, or have custom descriptions or keywords for the <head> tag on each individual page. The possibilities are endless.

Until next time, happy coding!

No Comments »

Posted by Anthony in Flash tagged actionscript 3, classes, Flash

On a recent project I was working on, I had to create animated snowfall, to give the effect of a winter wonderland. Rather than doing timeline animation (WAY too much detail to do with individual snowflakes by hand), I made a class that displays/generates the effect of random snowfall. And rather than just making the class specific to snowflakes, I made it a generic and flexible Confetti class to be used in multiple ways.

A few notes about the class, its flexibility, and it’s use:

• Overall, the class automatically assigns random X coordinates, fall times, delays, scale, alpha, rotation, and tint (if colors are specified) for the effect of true randomness and depth of field.
• To import, instantiate, and start a batch of confetti in the file, only 4 lines of code are needed.
• There is a public “start()” method for the class, rather than having the class auto-start (though the demo below does auto-start, but that is through the parent file, not the class).  This is done in an effort to save in performance.  There are also public methods for “stop()”, “clear()”, and “remove()”, done in an effort to to be able to phase out the confetti (stop), clear all current instances of individual confetti pieces (clear), or stop and clear out all confetti pieces (remove).
• The class is set up to pass in an Object as the parameter when creating your Confetti object, which takes up to 6 optional attributes: width, height, colors, maxPieces, symbol, and speed.  If any or all of these are not defined, default values will be used.  Through much time and testing, calculations were solidified to make for realistic default settings.
• The class allows for passing in a custom symbol to use, rather than using the auto-generated one. In the demo below, all “shape modes” other than “Auto” are instances of MovieClips from the Library, set to export to ActionScript. These custom MovieClip symbols can have multiple frames, too.  If a MovieClip symbol has multiple frames, the class will randomly assign a frame to show for each individual piece.

With that all said, here’s a demo of the Confetti class.  And in response to the request, the class and a sample FLA file are available for download (see link below the demo). Feel free to toy around with it, change the settings, and have fun with it.

Until next time, happy coding!

2 Comments »