Archive for December, 2007

Finally something I can show – Twist Image Holiday eCard

I didn’t write a lot these past weeks because first it’s the holidays and second because I worked pretty late on making the Twist Image holiday eCard. Basically, it’s a collection of videos that have marked the year 2007 submitted by friends of the Twist Image president Mitch Joel. I had the chance to watch these videos a lot of time and I can say they are all pretty good.

What is nice with this microsite is that I used a lot of new technologies. First and foremost it’s done using flash 9 and ActionScript 3. I also used SWFObject 2.0 and SWFAddress 2.0. You can see the deep linking in action when you go to a URL like this: http://www.twistimage.com/share2007/#/Seth-Godin/.By using SWFAddress it also enabled the use of Google Analytic. Finally I also used Tweener. I wanted to use TweenLite for my preloader but I fad a problem with it and the answer came when the site was already launched. For the snow I used the code from Galaxy Goo.

All in all this was a pretty good project, I wish I would have had more time to perfect it, like making rollover for the scrollbar and adding some sound effects but this was not a client project so it didn’t have priority in the company. Well now I am back working in ActionScript 2 and I can’t wait to get another AS3 project.

, , , , ,

1 Comment


MovieClip transparency to mouse click

Before ActionScript 3 came, when you had a MovieClip over a button, if that MovieClip didn’t have any mouse function (onRelease, onRollOver, etc) you could interact with the button underneath. Most of the time this was an unwanted behavior that you had to circumvent by putting an invisible button in your MovieClip and use the useHandCursor =  false line of code.

Well in Flash 9, it doesn’t work that way anymore, if you have a displayObject in front of a button (or displayObject with mouseEvent listeners), it will block the mouse events from happening. That’s really nice in most cases, you don’t have to do the invisible button anymore. But in the project that I just released I had these PNGs with a lot of transparency, so you could see the button underneath. The thing is that you couldn’t interact with the button because of what I just explained earlier. I looked the documentation a bit and I found this property of the DisplayObject: mouseEnabled which is useful in these situations. When you set mouseEnabled to false, your MovieClip, Sprite, DisplayObject will be transparent to mouse events like clicks, rollOvers etc. That way button that are under the DisplayObject with mouseEnabled=false can still work.

Another neat thing with that is that DisplayObject inside the DisplayObject with mouseEnabled=false can still have mouse events. So it’s pretty customizable and useful.

,

28 Comments


The best snow effect in ActionScript 3

During the last days I’ve been doing Christmas cards for different clients for the agency I work for. One of those cards needed some snow in the background so I searched for different scripts in as3 to make a snow storm. I found 3 of those scripts  and I will review them in this post.

The first script is snow effect with wind from neatFilm. It looked nice on the website, but when I tried to integrate it in my movie nothing seemed to work quite right. The code seems really strange, there are a lot of “this” keyword used for nothing and an internal SnowFlake class that you don’t know why it’s internal…. I wouldn’t advise using this class.

The second script is a script I found today. It’s a script made by Seb Lee-Delisle in 15 minutes. Well this guy must be really good if he made that in 15 minutes because it works pretty nicely. It doesn’t use too much CPU and I only had to tweak it a bit to make it work as a class that I could import easily.

The last script is made by the dude at pixelfumes. This guy released this code a long time ago and its been used on a lot of sites and even TV advertisements. The trouble is that this snow storm class is really heavy on the CPU, if you have 2 windows running one of your movie each, it’s going to run very slowly. Also even with some evident tweaking made to the code it stays heavy on the CPU.

So you can guess that I was pretty happy when I found the galaxy goo script today. It’s really the best one and next week I’ll show you what I have done with it.

, , , , , , ,

3 Comments


Using TweenLite in Preloaders

In the current project that I am doing, I need to do some Tweens in the preloader, nothing really fancy, just the habitual fade in / fade out ou move in / move out. I didn’t want to use Tweener because my preloader was only weighting 7k and using Tweener would have more than doubled the size of my preloader.

I was thinking at first about using the default Tweens classes from Adobe, but I decided to check out TweenLite. I was pretty amazed of what it can do. First it weights only 2k, but doesn’t include any easing functions, so if you want those you have to import the same classes as the Tween classes. If you use easing it adds 1k to the weight so it’s not too bad. So in total it’s only 1k more than the Tween classes.

So why use TweenLite instead of the Tween classes? Well the major advantage is that it uses a syntax really similar to Tweener. Since I use Tweener in the main Flash movie, I think it’s better for people that are going to use my code after me, they won’t have two syntax to learn in order to understand my code. Also this syntax is easy to understand and I can write it without have to copy and paste previous code.

Here is an example of code using TweenLite:

1
2
import gs.TweenLite;
TweenLite.to(mc, 1, {x:46, y:43});

, ,

4 Comments


Interactive scene with Papervision3D (Great White)

I updated my previous experimentation with papervision3D to version 2.0 (Great White). I can say that it wasn’t too hard thanks to this John Grden article.  But is article doesn’t explain everything. A lot of things have moved since the phunky branch; as an example, Planes are now in the org.papervision3d.objects.primitives package. Once you adjusted all the package you previously used so that they can now compile, you can start playing with the new toys. I didn’t try anything fancy; I just wanted to make my materials interactive. It actually was easier than with the previous version even if I had less documentation. I didn’t quite get how to use the Interactive Scene Manager in the previous version.

So if you want to make your 3D objects interactive, you first have to advise the viewport3d object. You do it in this way:

1
viewport = new Viewport3D(0, 0, true, true);

The fourth parameter of the Viewport3D constructor is the one you want to set to true. Once that is done you have to make your individual materials interactive also.

1
2
3
4
5
6
var mam:MovieMaterial = new MovieMaterial(myMovie);
mam.interactive = true;
 
var p:Plane = new Plane(mam, 100, 100);
p.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, handleMouseOver);
p.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, handleMouseClick);

You can see that you have to set the interactive property of the material to true in order to interact with it. In the previous, I also created a plane and used the MovieMaterial on it. I then added the listeners on the plane itself. I don’t know if it is better to add the listeners on the plane or on the material but it worked fine this way, if you have more insight on this feel free to make a comment about it.

You have to import the org.papervision3d.events.InteractiveScene3DEvent package in order to use the 3d events. The events you can use are these ones: OBJECT_CLICK, OBJECT_OVER, OBJECT_OUT, OBJECT_PRESS, OBJECT_RELEASE, OBJECT_RELEASE_OUTSIDE , OBJECT_MOVE, OBJECT_ADDED. They are all self explanatory so I won’t explain them.

You now have everything you need to make an interactive flash movie using papervision3D, I hope I shed some light on that.

,

8 Comments


Using embedded fonts in Flash CS3 using ActionScript 3

I just thought  I’d make a quick post about how to use embedded fonts in Flash CS3 using ActionScript 3 because I had to do that last week and I did really know how to do it. Well it starts just as you did in Flash 8, you right click in the library and you choose New Font… Then choose the font you want to embed and click Ok. Now you’ll have to right click on the new font in the library and choose linkage. In the pop window, click export for ActionScript and give it a class name. Once that is done you can use that font in any textfields you create  with ActionScript.

Here is code showing you how to do it:

1
2
3
4
5
6
7
8
9
var helve:Font = new Helve();
buttonLabel = new TextField();
txtFormat = new TextFormat();
txtFormat.font = helve.fontName;
txtFormat.color = 0x000000;
txtFormat.size = 14;
buttonLabel.embedFonts = true;
buttonLabel.text = "place label text here";
buttonLabel.setTextFormat(txtFormat);

My font class name in the library was Helve. I use the TextFormat object to set the font for the textfield, it’s that easy.

, ,

18 Comments


A bit on Silverlight again and something cool with htmlText

I have read a pretty good article today about exactly what I blogged about yesterday. It’s actually about Keith Peters asking Bill Gates what has in plan for the future of Silverlight. Gates’ answer is interesting, he mostly says that the end user doesn’t mind if it’s Flash or Silverlight; it’s all the same for him. Where the battle will be fought is on the developer side. He also says that the competition will be good for the industry just as I believe.

On an other subject,  I found something very interesting today about  htmlText. I already knew that you could insert images using the img html tag. What I found is that using ActionScript 3 you can also embed MovieClips also using the img tag. All you have to do is put the linkage id of the library of the particular MovieClip you want to embed in the src attribute of the img tag inside the htmlText. What is pretty cool is that you can use a normal text scrollbar to scroll images and MovieClips. I blog about htmlText more later because there are tons of things you can do with that.

, ,

2 Comments


Impacts of Silverlight for a Flash Programmer

I have been thinking lately about what impacts will Silverlight have on me as a Flash Programmer. I came to the conclusion that it wasn’t really threatening. It could have been threatening in the sense that it could have made Flash obsolete and make me loose future jobs at the same time. But the thing is, Flash is such a good technology, it’s been around for a long time, the community supporting it is amazing and Adobe has big plan for it, Silverlight would have to be packed with a lot of feature in order to shake Flash’s position in the market. I don’t think it has just that.

It’s true that videos in Silverlight look good, but now with the moviestar release of the Flash Player, I don’t think one is better than the other on that characteristic. It’s nice for programmers who know .net, they can just jump right in and start programming Silverlight applications (maybe with a small learning curve). Good for them, .net programmers are already in demand, now they are going to be even more in demand, their salary is going to increase, so does the cost of building a Silverlight application.

One of the thing that Flash as always suffered was the penetration rate of the Flash Player, as a proof, website using flash 9 are now starting to emerge even if its been more than 6 month since it’s been release. Silverlight will suffer even more as people are not willing to download anything anymore. Flash as the chance to be adopted by huge website like Youtube and Facebook and has been around for way longer, people trust the Flash brand.

A big advantage Flash has over Silverlight is all the documentation lying around the web. If you want to know how to do something in Flash, just Google it, it’s that easy. Also open source projects like papervision3d and Tweener are just amazing.

For all these reasons, I don’t think Flash programmers have to be afraid for their jobs because of Silverlight and that for at least five years. I actually think Silverlight is a good thing; a little competition never hurt anyone, Adobe will have to keep improving Flash which is very good for us.

, , , , ,

4 Comments


Papervision3D 2.0 – Great White – is out

Today the newest version of papervision3d was released. It’s the alpha for the 2.0 version and the code name is Great White. It has a ton of new features like shaders, animated models,  shading, bumpmaping, frustrum camera etc. Tons of words I don’t understand yet, but what is more important to me is that it’s faster; in fact it’s supposed to be about 23% faster.

It’s funny because just last weak I was trying it out, I started with version 1.5, then I went to version 1.7. Two days later I was reading the forums and I kept reading about the Phunky Branch, so I tried it, it was version 1.9. Now just one week later version 2.0 is out, I guess I’ll have to switch again. It seems like a lot as changed in the Great White branch so I suggest reading this articles by John Grden about how to upgrade current papervision3d projects.

, ,

No Comments


onReleaseOutside in ActionScript 3

It’s always strange to find out that something you thought was so basic in a previous version disappears in the next version. Well, that’s what happened with the onReleaseOutside event function from ActionScript 2. That is actually not a bad thing because I used it mostly with buttons so that they wouldn’t stay in the down state or over state when you released outside. In ActionScript 3, as soon as you leave a button (or MovieClip or Sprite) it fires the MOUSE_OUT event so you don’t really have to watch for the onReleaseOutside event like you used too.

Where you still need the onReleaseOutside event is when you drag an object like the thumb of a scrollbar because you have to know when to stop the drag. The trick is to use a MOUSE_DOWN event from the object you want to drag to start you dragging process and to use the MOUSE_UP event from the stage (this is  the trick). It doesn’t really matter to use the event from the stage because the MOUSE_UP event is nearly never used and you remove the listener after it has fired to free memory. I’ll post source code about it tomorrow.

,

No Comments