Archive for April, 2008

BlendMode.LAYER; A must when changing the alpha property of a DisplayObject containing other DisplayObjects

I don’t know if you ever tweened a MovieClip’s alpha while this MovieClip contained multiple assets, but I kinda do this all the time (fade in ,fade out being the easiest transition for almost everything). The default way Flash handles this is by changing the alpha of every assets in the containing MovieClip (or Sprite). Sometimes it doesn’t matter but most of the time that’s not the behavior you would like it to have. When you have shapes or bitmaps that overlap or hide other graphical assets you will see what is under it when changing the alpha instead of actually changing the alpha of the container as if it was a whole.

Well I don’t know if it’s clear but I have an example below that should clarify that. Anyway, I have stumbled upon the solution to this while browsing through the help files for BlendMode. If you set the blendMode of your containing DisplayObject to BlendMode.LAYER Flash will consider this DisplayObject as only one layer and will change the alpha the way you normally think it would.

Here is the example that will illustrate my point better. The left Sprite is the reference object, the middle Sprite has no blendMode on and the right Sprite has a blendMode of BlendMode.LAYER. Mostly look at the colors while tweening and the overlapping regions of the green and blue ellipses.

I really wish I had found this earlier and I hope this will help others that were in my situation.

Cet article en Français

, , , ,

18 Comments


Flash SEO optimization case: Alex.ca

I was mandated by a friend to optimize a flash website he had done for search engines. I had previously given him advices on how to start and he did follow some of them, but it just wasn’t enough so that’s why he asked me to finish the job.

Alex (the client) is a garage that specializes in tires and other mechanical services. I am writing this post for two reasons, one because I think a concrete example is easier to understand when trying to learn something, two because this actual article and the links it provides to Alex will help its search engine ranking.

Alex‘s situation is special; the major part (90%) of its traffic is coming from direct visits, meaning the visitor write www.alex.ca directly in their browser instead of going trough a search engine. 5% of visitors come from search engines and the last 5% from referring links, mostly other Alex websites.

So my objective was to increase significantly the traffic coming from search engines. To do that task I was assigned very little time so I have to concentrate on the factors that will have the most impact. One of these factors is the title of the pages. As I had instructed my friend, he had already created multiple html entry pages for this flash website. Trouble is that he had given each of them the same title. So I started by creating original title for each pages in relation to the destination inside the flash file.

Also those html entry pages had alternative content for people who don’t have flash or javascript, that is actually the content that is being referenced by search engines. The problem with the content he had created was once again that he used a lot of the same content for a lot of the pages but you see, Google doesn’t really like it when two pages have exactly the same content. So I went trough all the pages and made sure that each one off them had original content. For the pages that I didn’t have content, I simply removed the alternative content; better no content than repeating content.

Lastly for the modifying the website part I cleaned up the html a bit; there was a lot of dead links in the alternative content and that is not really good. All the pages where linking to an expressinstall.html page that didn’t exist. With this done I could go on with the next part of the optimization; creating inbound links.

One of the easiest ways to create inbound links for your website is to Digg it. When you Digg a page, it actually creates an intermediate page from Digg that link to your website. The Digg page for Alex is this one. Since Digg as a really good page rank and it links to your site, this will help your ranking a lot. Another site like that is StumbleUpon. After making these easy inbound links I put the website on local business directories.

The last thing I did was to create a sitemap.xml and put it on Google webmaster tools.

Well that’s about what you can do with 6 hours; I’ll keep you updated with the results of this optimization.

, , ,

6 Comments


My views on FITC Toronto 2008

I came back this week from FITC Toronto and I can say this; I am tired as hell (well a bit less now since I slept 14 hours last night).

I will start with the bad stuff I have to say and end up with the good stuff. I think I had too big expectation before going to the conference. I thougth I would come back changed, I thougth it would revolutionalize the way I program. Well it did that a bit but on a much smaller scale. I keep myself pretty informed about what is going on in the Flash community so the conference might have more effects on someone who doesn’t. Also I think I did wrong choices in the presentations I went to see at first so I’ll share guide lines when doing such choices.

First since the presentations are only one hour, don’t go see something on a topic you already know about. They are going to introduce it so you will loose half of the presentation on something you already know. Choose something you are completely unaware of over something you already know. Second designer are way better speakers than programmers; keep that in mind.

The good stuff: FITC is a very well organized conference, everything is on time, good speakers and great parties. Here is a list of things I want to check further:

The new stuff: A lot of presenter worked at Adobe so we got sneak peek of new features that will be present in the next version of Flash. First the way you do timeline animations will be changed a lot. The interface to modify tweens will look a lot like the interface in After Effects. You will be able to assigned a different easing function to different properties being modified in one tween. Bones for animation will also be available(you must already know this). Since the last update, the flash player uses multicores to render a frame. You won’t have the possibility to do threads or parralele programming in the next versionof flash, but you will be able to send computations to Hydra(pixel shader language) which will be run on either multicores or GPU. I also caught I glimpse that maybe we will get the profiler in the FLash IDE also. I really hope the last one will come true.

Well that is it, I really hope I will get to go back there next year.

,

2 Comments


Another good use of interfaces

Earlier this year, I came to understand how to use interfaces in ActionScript 3. I used them in a particular case where polymorphism was needed but that was it since then. Last week I realized that I could use them in much more case than that. I actually need them in nearly all of my projects.

As I have mentioned in previous post, I always structure the websites I program in the same way. I make one swf file for the preloader, one swf file for the shell (container of navigation that load every sections) and one swf for every section (page) in the site. Sometimes, the preloader needs to inform the shell (main movie) when to start its intro animation. An example of that is the don’t discover Loyalist contest website. When you first load the page, the flash file looks like it is just sitting there waiting for you to click on the start button. But actually it is already preloading the main swf file. That leads to two scenarios; either the user clicks on start and the main movie is not loaded yet so it will start only when it is fully loaded or the user clicks when the main swf is fully loaded and the preloader has to tell the main movie that it can start. I used to disable the strict mode of the compiler in order to call a public method of the main swf document class. That worked fine since I never have so much code involved for a preloader but then I hit a wall.

I came across the same problem when loading external Flash file from which I wanted to use methods. The compiler just didn’t want me to do so. When I started coding in AS3, I, at first, found the compiler to be a bit severe, but I kinda like it now, it finds problems before they arise, so that’s why I don’t want to turn of strict mode for my main movie, where I have thousands of line of code. So I had to find another solution, I tried to import the document class of my external swf with an import statement but the compiler didn’t like it that much because it wasn’t finding classes for Sprites on the stage. That’s when I remembered about interfaces.

Interfaces permit you to ensure that some classes contains some methods. So in my external swf document class I made certain it implemented the interface I was going to us and in my main movie I type casted the loader.content to that interface (Type).

1
2
3
import com.zedia.interfaces.ISection;
 
var mySection:ISection  = ISection(loader.content);

Now the compiler was happy. I could load external swf and use its methods. One trouble was left; I wasn’t able to add my new content to the display list because my main movie didn’t know that the external swf was extending a DisplayObject. All I had to do to solve this was to type cast my external swf to a Sprite when I added it to the display list like this:

1
addChild(Sprite(mySection)) ;

That really did the trick and now I am going to use interfaces in most of my projects.

, ,

12 Comments


SWFAddress 2.1 and the new Google Analytics Tracker

I had made a previous post about how to integrate the new Google Analytics Tracker and SWFAddress. It wasn’t obvious but it was fairly easy. I guess people really asked for an even easier way to do it because the new javascript code(ga.js) now works with SWFAddress without indicating to it that you are not using the Urchin tracker. As a matter of fact, with the release of SWAddress 2.1 earlier this week, the support for the ga.js tracker is one of the update. Other updates include a lot of fixes for the SEO examples and also the AS2 and AS3 classes are now in the com.asual.swfaddress.

I really have to look into the SEO  example that was released along version 2.0. It is one of my goal for the next month along to getting to know PureMVC better.

, , , ,

No Comments


Fading out volume using TweenLite

I showed in my previous post how to change the volume of a playing sound. In this post I am going to show how to tween that volume using TweenLite.

The class we are going to do the tween on is the SoundTransform class. So we will first have to create our sound objects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var someSound = new Sound(new URLRequest("MySound.mp3");
var someChannel = new SoundChannel();
var someTransform = new SoundTransform(1);//volume is set to the max
 
someChannel = someSound.play(0, 99999, someTransform);//The sound will start from 0 millisecond, will loop 99999 times and will use the someTransform SoundTransform
 
//the next lines are for fading out the volume
 
TweenLite.to(someSound, 1, {volume:0, onUpdate:updateChannel, onComplete:stopSound});
 
function updateChannel():void{
  someChannel.soundTransform = someTransform;
}
 
function stopSound():void{
  someChannel.stop();
}

As you can see, even if you modify the volume parameter of the SoundTranform it won’t do a thing. You also have to update the SoundChannel. You can’t also tween the SoundChannel.soundTransform.volume directly. It’s the same as when you tween colors using Color.interpolateColor, you have to modify an intermediate Object.

, , , ,

24 Comments


A little bit about Sound | Using the Sound, SoundChannel, SoundTransform classes

I didn’t really mess up with sounds in ActionScript 3 until recently. I can say that it changed a lot since ActionScript 2, it’s a bit more complex, but I’m pretty sure it gives more possibilities also.

First, you can either load the sound from the library, or you can load it externally. If it is from the library, you first have to click export for ActionScript in the property panel from that sound, and use the class name you gave it. Let say you gave it “MySound” as class name here is how you would simply make it play:

1
2
var someSound:MySound =  new MySound();
someSound.play();

If you want to load your sound from an external file it is a bit different but afterward it’s all the same:

1
2
3
4
5
6
7
var someSound:Sound = new Sound(new URLRequest("MySound.mp3"));
someSound.play();
 
//it could also be done like this
var someSound:Sound = new Sound();
someSound.load(new URLRequest("MySound.mp3"));
someSound.play() ;

In the last example, the file MySound.mp3 has to be in the same folder as the HTML embedding the SWF because that what I indicate in the URLRequest.

If you use only the Sound class the only thing you can do is make the sound play, that’s it, no stop, no pause, no adjustment to the volume. For that you will have to use two other classes SoundChannel and SoundTransform.

SoundChannel

The SoundChannel class possess only one method and it’s the stop method. I guess you know what it does. here is how you use it:

1
2
3
4
var someSound:Soundnew Sound(new URLRequest("MySound.mp3"));
var someChannel:SoundChannel = new SoundChannel();
someChannel = someSound.play();
someChannel.stop();

The last bit of code is actually useless because it will stop the sound right after it started it but it is only to show how to use a SoundChannel. Fine but how do you pause a sound and than make it play again with only a stop() method? The SoundChannel class has a property called position which indicate where the play head is at. You have to save the value of the position property before calling the stop method. If you save to position property value after calling the stop method, it will be of value 0 which is of no interest. What you do with the value of the position property is you pass it as a parameter to the Sound.play() method. The first parameter, startTime, tell the Sound Object at which millisecond to start playing. It’s a bit confusing but this example should make it clearer:

1
2
3
4
5
6
7
8
var someSound:Soundnew Sound(new URLRequest("MySound.mp3"));
var someChannel:SoundChannel = new SoundChannel();
var somePosition:Number;
 
someChannel = someSound.play();//this make the sound play
somePosition = someChannel.position; //saves the value of the position property
someChannel.stop(); //pause or stop the sound
someChannel = someSound.play(somePosition);//this make the sound play but it now start from the position at which it was stopped

The Sound.play() method also takes two other optional parameters. The first of the two is the loops parameter, it indicate how many times you want the sound to play in loop. If you want your sound to loop forever you just pass a really big number as parameter. if you want it to play just once you pass it 0. The second of the two (the third parameter really) is the SoundTransform parameter.

SoundTransform

The SoundTransform class as some properties and no methods, but I will only speak about the volume property here. The volume property is a number ranging from 0 to 1, 0 being silent and 1 being at full volume. You can either set it in the constructor or after the SoundTransform has been created. here is how you would make a sound play at half the maximum volume:

1
2
3
4
5
var someSound:Soundnew Sound(new URLRequest("MySound.mp3"));
var someChannel:SoundChannel = new SoundChannel();
var someTransform:SoundTransfrom = new SoundTransform(0.5); // the 0.5 value here tells it to set volume to half the maximum value
 
someChannel = someSound.play(0, 0, someTransform);//the first 0 is startTime, the second is the number of loop, and finally we pass our SoundTransform

If we wanted to change the volume as the sound is playing we would do it in this way:

1
2
3
4
5
6
7
var someSound:Soundnew Sound(new URLRequest("MySound.mp3"));
var someChannel:SoundChannel = new SoundChannel();
var someTransform:SoundTransfrom = new SoundTransform(0.5); // the 0.5 value here tells it to set volume to half the maximum value
 
someChannel = someSound.play(0, 0, someTransform);
someTransform.volume = 1;
someChannel.soundTransform = someTransform;

This would start playing the the sound at half the volume to set it afterward at maximum volume. Well that is as far as I go with sound, with that you can do most of the common tasks. In a future post I will show how to use TweenLite to fade the volume to zero.

, , ,

18 Comments