Throughout the whole process we saw that one of the most important things when creating an animated banner is not only that you are skilled as a animator / programmer, but also that you or someone in your team is skilled when reducing file sizes to fit the specs that the publishers will give you before making the pieces . These are some tips that may be useful for you in the future, to reduce file sizes without damaging the banners too much:

1. Plan the banner and its idea, being aware of the size you have available , maybe there will be some rich media banners in which you’ll do all you wanted to.
2. Use Size report from Flash Publish settings as one of your main tools, checking which frame is loading the most of the file size and if something needs to be redistributed .
3. It’s easier to do a rough full version and then optimize it than creating everything optimized from the very beginning . The same for image sequences. Make them full and then remove frames as needed.
4. Regarding text, if it is not very large you can write it in Flash and then break it into shapes, but if there’s a lot of text you should create it in JPEG or GIF format.
5. If the banner has audio features , try export them as mono on a higher quality, as long as the sound isn’t completely messed up.
6. Try avoid PNG or formats including transparency when using bitmaps (for either texts or other images). You can use formats using a white or black background and then play with the blending mode available in Flash to make it disappear.
7. As the solution , and also if everything else failed or wasn’t enough, try to remove some time from the timelines of your Flash movies.

Conditional Compilation

You can create one flash file and compile it many times with different behaviors by using conditional compilation. Basically it allows you to turn on and off blocks of ActionScript when you publish so you can use the one base file for many purposes.

To set up a config constant go to Publish Settings, choose the Flash tab, select ActionScript 3.0 and then click the settings button.  Then choose the Config  Constants tab.

Here you can add or remove constants , eg add one and call it ‘CONFIG::ONLINE”. Set its value to true. Add another called ‘CONFIG::LOCAL’ and set its value to false.

Then in your ActionScript you can wrap any code inside CONFIG::ONLINE{} or CONFIG::LOCAL{}. For example in the online version you might have a link on a local file.

If you publish the file it will include the code inside the ONLINE config tags. If you change the values in the Publish settings it will publish the code inside the LOCAL config tags.

Performance optimization

The tips below relate to heavy duty Flash work- and will help you optimize your applications/website to give the best performance.

Ints an uints:

As a rule of thumbs, the type ‘int’ is much faster than ‘uint’. Use this, for example, when doing loops or using the while() function.

Increment:

The fastest way to do math increment is by using the method i+1= instead of, example i++

Meaning that:

I+=1;

Is faster than:

I++;

Loops:

In for loops , remember to use ‘int’ – and to pre-calculate any calculations inside the for loop including the calculations inside the first parentheses “for(..)”:

var lengthOfArray: int currentArray.length;

for ( var i:int=0; i<lengthOfArray;i+=1) {}

Smoother video scrubbers

You may know that when compressing a video, the video gets cut up in keyframes every xth frame. From this keyframe onto the next, the frames in between are calculated only by the change in pixels. The Stream Class’s seek() method in AS3 can only seek to theses keyframes.

In default, keyframe for FLV/F4V video are set every the thirtieth frame. Fine for long videos, but take a video that is 20 seconds long at 30fps. With the default encoding settings there will be only 20 keyframes generated that the seek() method can display. So when you release the scrubber in between these frames the scrubber will jump to the next keyframe. When utilizing a 600px wide scrubber, the jumps can be up to 30px( 600px /20keyframes=30px per keyframe). This jumpiness can be avoided by setting the keyframe distance for instance to every fifth frame.

Adobe Flash CS4 Professional Classroom in a Book

addTarget

If you want to animate a number of Movie Clip on the stage using the same animation and effects, a great way to do it is to use addTarget.

• Add a few Movie Clips to the stage and the name their instances eg ‘clip2’ ,’ clip3’ etc.
• Animate one of them on the timeline adding effects, filters, easing etc.
• Select the animation and name its instance in the properties panel eg ‘myTween’.
• Add this line of ActionScript for every Movie Clip you want animated:
  • myTween.addTarget(clip2);
  • myTween.addTarget(clip2);

The nice thing about this is that you can continue to edit the animation of myTween and all the other clips will automatically adopt the changes.

Check out addTarget in the ActionScript 3.0 Reference Library for even more options.

Before-After (masked picture viewer)

Create a new Flash File (Action Script 2.0) in Flash program, set frame rate of the movie to 36fps and save it under your own project name. Import images, that you have previously edited with image editing software (cut two images on exact same size, and save them in .jpg or .png image format).

This is some resources for beloved visitors.

Google(www.google.com ) is a great resources for information. Plus Papervision 3D, the library that allows users to work with 3D models in Flash.

A resource that accompanies the tip ‘How to make a class or package import optional at compile time’ can be found via the Adobe LiveDocs website. A more in depth look at the techniques can be found at http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_21.html .

Essential ActionScript 3.0 from O’Reilly (http://orielly.com ), is part of the Adobe developer Library series. It focuses on the new features and functionality of ActionScript 3.0. Plus, there is some coverage of the Flash Player API and changes between the two and three.

NWP (www.newwebpick.com ) is a website that is a global community platform for the creative industry. It is a place for creative professionals to show off their creative works and to share their inspiration and range of originality.

Thunderbolt.

It is really useful little tool that enables you to log information from your app to the firebug console in Firefox. Excellent for testing, debugging and refining apps. Just throw the SWC into your library folder and log anything-you can even log errors and see the Firebug error indicator come up. If you are testing a debug mode SWF it will give you the class paths and line numbers the logs originate from. Once imported, all that’s needed to log to the console is Logger.info( “ Some info”), Logger, warn, (“Some warning”) or to distinguish an error Logger. Error (“Some error message”).

ActionScript 3.0 in Flex Builder Essential Training

There are two ways to add Flash files ( or more correctly, SWF files) to your HTML pages. Firstly, the flash application itself has plenty of Export options, and these are probably the best place to start. The second method allows you to place to start. The code directly into your HTML page. This method is probably more flexible and is suitable for most applications.

The Export techniques do have some advantages , especially for the newcomer. But this technique covers virtually all eventualities and has some advantages of its own. Not at least of these is that it uses a very small amount of standards-complaint code, and requires no browser scripting . It’s also very easy to understand and is great for placing a Flash file just where you want it.

Rather than Export the SWF from Flash, you will simply select Test Movie from the control menu. This creates a file with the same name as your Flash file, but the .swf suffix. Copy this file to the “images” directory of your site.

Next, you’ll need the code. Type this into your HTML page:

<object type=”application/x-shockwave-flash”

Data=”images/portfolio.swf” width=”640” height=”480”>

<param name =”movie” value=”images/portfolio.swf”/>

<img src=”portfolio.jpg” width=”640” height=”480” alt=”Sorry, you can’t view my Flash portfolio.”/>

</object>

Within that block of code you should be able to easily spot the parts you are likely to need to edit, including the name of the SWF as well as it’s pixel dimensions. If you followed the steps to create a simple Flash portfolio then the chances are your HTML will work without any alterations.

As well as embedding the Flash file, the code also includes a regular <img> tag within the <object> tag. You need to create a JPEG or GIF image that will be displayed in the event that the user doesn’t have the Flash plug –in installed. This would normally be a representative still image from the movie.

Finally, edit the alt text for the <img> tag. This is an accessibility requirement to accommodate users who can’t see the replacement image. Don’t forget, this includes search engines such as Google, so make sure the text you enter is good description of the content of the image and the Flash file.

Exporting Flash

Explore Flash’s Edit menu and you’ll see the Publish Settings option . Select this, and in the Formats tab choose Flash and HTML. This will output an HTML page with the code in place to import your movie.

The Flash tab contains options for compression settings and Audio quality. Leave these at the defaults, or experiment with them-especially if you need to get the file size down.

The HTML tab is the most pertinent one for our purposes, and also the most complicated! Luckily , the Template options come with some descriptions next to the selector. It’s good idea to use one of the detection methods on offer, as these will handle those (few) users who do not have the Flash plug-in installed.

Sometimes, of course, you might just want to have the Flash file appear as a small part of an existing web page. In that case, you should be able to use the appropriate Export option, then simply copy the Flash- related code from the page Flash has created, and paste it into your existing HTML page. Alternatively, see the method of embedding Flash in the adding Flash to pages manually technique.

Adobe Flash CS3 Professional Classroom in a Book

Spice up your website with some of these more advanced techniques and simple tips more professional, better looking, more engaging and more fun.

Now is about flash topic. Some 96 percent of browsers are able to display some form of Flash content. However, the latest version of the plug –in is only installed on 25-40 percent of browsers,. Bear this in mind when deciding which version to output, and opt for older versions where your content allows.

Besides that, checking for the Flash plug-in. When you export your Flash movie you can opt to check that the user has the appropriate plug-in. This creates a JavaScript to check the user’s browser, and if they not have the correct version they can be offered alternative content such as a static JPEG.

But not everyone has Flash. While the majority of web browsers do have the Flash plug-in installed, there are still of people who don’t use it. With current estimates of internet user numbers topping 800 million worldwide , even a small percentage without Flash adds up to many millions of users.

Embedding small Flash objects. Flash doesn’t have to comprise your entire website. You can use small Flash objects to accomplish specific tasks, such as adding an animated menu, a banner advert , or simply to add some eye-candy.

Adobe Flash CS4 Professional Classroom in a Book

A problem that effects Flash to this day is load performance . Most times, an HTML page and it’s content is downloaded and displayed before a Flash piece has finished downloading, leaving a blank white space in your page. The following techniques “fakes” the initial frame of a Flash piece with a bit HTML/CSS . The actual Flash piece is hidden outside of the web browser’s viewport while downloading its assets. When ready for display, the Flash piece can call a bit of JavaScript, using Flash Player’s External Interface to display  the piece. We use this technique to improve perceived performance when loading our Flash media pod at www.kontain.com

Resources:

This particular implementation  uses the excellent SWF Object library to load and embed our Flash piece. SWF Object is available at www.deconcept.com .

The HTML and the full code can be found on www.webdesignermag.co.uk

<html>

<head>

<script type=”type/javascript” src=”swfobject.js”></script>

<script type=”type/javascript”>

The CSS(CSS code goes here)

The JavaScript(JavaScript code goes here)

Flash and ActionScript: Frame 1

Place “placeholderImage.png” on the stage in the first frame.

Flash and ActionScript: Frame 2 and beyond

By this time, the first frame has been downloaded and is ready for display. Call the “showFlash” JavaScript function from the second frame.

Import flash.externalExternalInterface;

…

ExternalInterface.call(“showFlash”);

Dynamic font

A key area of any style of website is its font headers and other copy elements. Although Flash includes features to embed entire fonts in your library, a little ActionScript 3.0 allows you to select only characters that will be used in your project. This may not be a big deal with smaller fonts but can slow up the loading process if the font contains multiple languages and special graphic characters. Runtime type allows fonts to load only when needed. Characters must be converted to Unicode (example,”A” becomes “U+0041”).

Int, uint Number

Typing in general boosts the speed of AS3 code. When it comes to numerical variable types in Flash, the platform shows some unexpected behavior.

Most developers commonly believe that appropriate use of the “new”(in AS3) int, uint data types will result more optimized code therefore better performance . With other languages this is generally right in practice as well, but it is different with AS3.

In reality unit types perform quite slow and they show quite a fluctuation in each case. Surprisingly , Number types execute quite fast, only a slightly slower than int.

Avoiding uint types everywhere you can, appropriate use of int types and Number types will result better performance in reality.

Ref: http://www.gskinner.com/blog/archives/2006/06/types_in_as3_in.html

Learning ActionScript 3.0: A Beginner’s Guide

Lets say you are using a package for debugging and want an easy way to turn it on and off. The idea behind it is that turning it off would also remove the import for obvious fill size reasons.

This handy solution is made possible constants. If you define a constants. If you define a constant, for instance CONFIG::DEBUG, to a Boolean value you can turn a block of code on and off from the compilation point of view.

In Flash IDE, you can set those constants in PUBLISH SETTINGS> “Settings…”>”Config constants”.  For other editor you can set the flex compiler command line options as follows:

-define=CONFIG::DEBUG,true .

I have a package level function, called log(), that I use in place of trace() to output in the JavaScript console. Here is how I use the compiler constant to turn that feature on and off.

public function log(…args):void

{

CONFIG::DEBUG

{

[callthe debug package and pass the arguments]

When CONFIG::DEBUG is set true, the log is calling the debugging package. Otherwise, the compiler ignores the entire block. Log() turns into an empty method. All references to my debugging stuff are removed, therefore not imported.

All I have to do so is change one constant and all my log() methods are disabled.

Squeeze for speed

So you’ve spent all that time optimizing your assets , have you considered your data?

While file compression is nothing new, here’s simple solution you may have overlooked. As sites become more complex and data driven, users expect content to download at faster and faster rates, and we often find ourselves trying to optimize our work as much as possible. One area that focused on is the way we load data into our Flash sites.

XML is by far and away the ‘standard ‘ in regards to maintaining  a dynamic Flash website. We figured out that I could optimize the size of XML files being loaded into Flash by compressing them. In order to do this, we turned to GZIP compression and the ability of Flash to read binary data. Since then, we have made it a standard to incorporate  GZIP compression into my workflow when involving XML data, where the resulting compressed     XML file is 85-90 percent smaller than the uncompressed original.

My process works as follows:

1. We choose the desired XML file we want to compress and run it through the GZIP compressor.  The output is saved as a binary GZ file.(You can download the GZIP compressor at http://www.gzip.org ). Compression can be done via a manual process or an automated (for example via a CMS).
2. In Flash, I load the.gz filevia URLLoader, making sure I set the URLLoader’s dataFormat property to binary.
3. When loaded, we save the data as a ByteArray ,uncompress it, and reset its position property to 0;
4. Using the method readUTFBytes on the byteArray object and passing the property bytesAvailable, we convert the loaded binary file into a String which in essence is the XML we are looking for.
5. The last step is crating my XML object, which is created by passing my converted string into the constructor.

ActionScript 3.0 in Flex Builder Essential Training

1. First you need to find or create an image no bigger then 150×200 pixels. Import that into the library, open up your library and drag it onto the stage.
2. Then, if need be you can scale your image down by selecting it. Press Ctrl+Alt +S  at the same time to scale your image down 50 percent.
3. Then click on your image and press F8 to convert it to a Movie Clip, making sure your registration point is centred . Then delete your Movie Clip from the stage.
4. Open up your library and right click on your Movie Clip and select linkage  and choose ‘Export for ActionScript ‘ and name the class “Image” with a capital”I”.
5. Now name your only layer “Action”, press F9 to open up your actions panel and copy the ActionScript that is. Then Ctrl+Enter to test your movie.

Using Code injection to write with Javascript code in your AS file.

When playing with ExternalInterface.call(), sometimes you need to do more than just calling a function. For instance you can define a Javascript function that you’ll be using later. ??

This is simply done by using an XML:

Var initObJS:XML=

<script>

<![CDATA[

Function(objlD)[

Try