Archive for October, 2009

Trying FDT for a month

Ya I will be leaving my beloved Flash Develop to try out FDT for a month. I have been hearing a lot of good things about it and the programing department has been pushing to get everybody on Eclipse. I have tried Flex Builder before (ok, it was version 2) but I was not very impressed. Every thing seemed complicated for nothing. What I really like about Flash Develop is that it is so simple. To get you going it take 10 minutes and it is more user friendly than Eclipse (it takes less step to do something simple like start a project).  Also it is easier to get Animators who are more designer in spirit to use it.

But I at least want to give it a try, so that is what I will be using (almost) exclusively for the next month. The month after I will try Flash Builder 4 and compare it. That way I will be able to make a good decision about wich editor to use.

I have started using FDT today and I have already bumped into two problems: first a simple trace doesn’t trace in the console even in debug mode (in the FCHS console and the FDB console whatever these are). Secondly the SWFViewer doesn’t seem to be the Debug player so I don’t see the runtime errors. These might be related problems and should be easy enough to fix, but it should be more obvious than it is right now.

If you know any tutorial about FDT, send them my way, I want to know everything I can about it during that month; I will read everything!

, , , , ,

7 Comments


How to load a YouTube movie into Flash using TubeLoc

I have written this article a while back for FFDMag, but I thought I would put it here also. It lost a bit of relevance because YouTube now has an AS3 API for its player, but if you work on a project that uses TubeLoc, I think this article can be useful.

What you should know:
- Basic knowledge of ActionScript
- Basic knowledge of YouTube

What you will learn:
- How to load YouTube videos into Flash
- How to use the TubeLoc library to control those videos

Embedding a YouTube movie in an HTML page is an easy task, but we can’t say the same about embedding a YouTube clip in a Flash/Flex website. TubeLoc, an opensource library, is there to make that easier.

Before TubeLoc, you could always go and try to find the address of the FLV the YouTube player is loading and load that FLV directly into your Flash application, but YouTube changes the address almost every night, so it wasn’t a very long term solution. Another problem that TubeLoc solves is the fact that the YouTube player is made in ActionScript 2 and most projects now are using ActionScript 3, so it was hard interfacing with the player. TubeLoc is a wrapper around the the AS2 player and show us an AS3 API, but behind the scene it handles the YouTube player using local connection.

To get started with TubeLoc you will first need to download the library at this address:

http://code.google.com/p/tubeloc/

There you will also find a great demo showing you what you can do with the library. You can pause, stop, play, mute, seek, change the volume, change the the size of the video and even load the video without the YouTube player chrome (so you won’t see the play button from YouTube the only thing that will be there is the YouTube logo at the bottom right of the video).

In the zip file that you download from the previous url, copy the “com” folder located in the “as3/src” folder in the same directory where your FLA will be. Also copy there the file as2_tubeloc.swf from the folder “as3/lib”. Now we can get coding. Here is all that is needed to load a YouTube movie into Flash:

import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
 
var youtubeMovie:MovieSprite = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
addChild(youtubeMovie);
 
function onPlayerReady(event_p:PlayerReadyEvent):void {
//it's just cleaner to remove listener that won't be used again
youtubeMovie.removeEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
 
//you can set the size of the movie this way
youtubeMovie.width = 370;
youtubeMovie.height = 276;
 
youtubeMovie.loadVideoById("tprMEs-zfQA");
}

The first lines import the library from the “com” folder we copied. After that it creates the MovieSprite. The first parameter is the id of the YouTube movie, since I will set that later I can just pass null to it. The second parameter is if I want to use the chromeless player, in this case I set it to true. The chromeless player is usefull when you want the video player to have control that are similar to the rest of your application. It is also usefull when you want to put your video under a mask to escape the traditonnal square look of videos. If we continue with the code, after we created the MovieSprite, we have to wait for the player to be initialized to go on that’s why we put an event listener on the MovieSprite(youtubeMovie). Once the listener function is called, all that is left to do is call the loadVideoById method. Finding a video id from YouTube is really easy; if the url of the video you want to load looks like this:

http://www.youtube.com/watch?v=tprMEs-zfQA

Than your id is only the last part : “tprMEs-zfQA”.

Now if you want to control your video all you have to do is :

//this will pause the video
youtubeMovie.pauseVideo()
 
//this will make it play again
youtubeMovie.playVideo()
 
//to mute the video
youtubeMovie.mute()
 
//to set the volume to half of maximum
youtubeMovie.setVolume(50)
 
//to seek in the video to 20 seconds
youtubeMovie.seekTo(20)

Well that is all it take to load a YouTube movie into Flash. I should warn you of some pitfalls; by reading the issues on the google code page, there seems to be problems with loading multiple videos at the same time. Also, destroying an instance of a MovieSprite seems to inhibit you from creating another one after so you should always keep an instance of you MovieSprite alive. Aside from that TubeLoc is an awesome library and I hope to see the proliferation of YouTube videos inside of Flash!

, , , , ,

13 Comments


Powerflasher: How labs works

Here is another video presenting an agency. This time it is Powerflasher from Germany which is also the maker of FDT, an eclipse plug-in to code ActionScript. The video is mostly about how they divide their intern teams to have three groups: agency, solutions, labs. Agency is the work done for the client (websites, applications), solutions is for when they build a product that they can sell or own (like the FDT software or they also make a 3D book component for flash) and finally labs is where they experiment. What is done in labs usually ends up either in the agency work or as a product for solutions to work on. They also explain that for some project the traditional workflow doesn’t work. Like for experimental projects, there needs to be more flexibility because some experiments might not work. That’s why they adopt a more Agile methodology. They explain their steps to achieve this. They also mention that with a traditional workflow creativity only happens at the beginning of the project while in real life it can happen anytime.

All in all it’s a pretty interesting watch. I really like these kind of video because it tells us how other agencies are working and sometime people are reluctant to speak about this.

Link: Carlo Blatz - How Labs works

, , , , , ,

No Comments


Compile time variables in Flash Develop

That is something that I have been wanting for a long time but I just found out how to do it.

So what is a compile time variable?

It is a variable that you can do conditions on at compile time (if) and the compiler will only include a set of lines in the resulting swf. This can be usefull for debugging purpose or when you have multiple languages or versions in a site. Let’s look at an example:

if (CONFIG::LANG == "en"){
  _pageHolder = new PageHolderEn();
} else {
  _pageHolder = new PageHolderFr();
}

In the previous code, if the compile time variable CONFIG::LANG is equal to “en”, than the line “_pageHolder = new PageHolderEn();” will be included in the final swf, otherwise it will be the other line. You can give a Boolean, int and String value (and probably other types too) to the variable.

So how do you set the value of that compile time variable?

Well there are a couple of examples out there about how to do so in Flash CS4 IDE or in Flash(Flex) Builder, but none in Flash Develop so that is what I am going to explain here. First if you do this in Flash Develop, it means you are either doing a Flex project or an ActionScript project (meanin you are compiling with the Flex compiler (is it still named like this?)). So once you have created your project, go in the Project Properties and in the Compiler Options tab, look for the Additional Compiler Options. Here is a screenshot of what it looks like:

compile-time

What you need to add in there is this:

-define+=CONFIG::LANG,"en"

Where CONFIG::LANG is your variable name and “en” is the value as a String.  For the variable name it seems to always be starting with CONFIG::, I don’t know if that is a convention or if that is needed so that the compiler knows its a compile time variable. I will need to do more reasearch on this. If you wanted to set the variable to a boolean you’d do this:

-define+=CONFIG::LANG,true

And same principle for a int, you’d put just the number without the quotes.

Now in Flash Develop, the project properties are stored in a file with the .as3proj extention so if you don’t want to have to change the Additional Conpiler Option you can just copy the project file and rename it. In the new file change the compile time value and depending how you want to compile, you open the right project file.

Well, it’s as simple as this.

, , , ,

1 Comment


Prepare to Roar

If you have been wondering why I haven’t been writting a lot this summer, well it’s been mostly because of this project. I learned a great deal on Papervision3D, using the webcam, on playing with bitmaps and on Facebook connect (even if I wasn’t the one doing that part) while building this project. So here you go, create some roars:

http://www.roar4milk.ca

The goal of the campaign was to get teens involved with milk and to build on some ad spots that performed very well on MTV. So what you are doing with this application is recreating the ads but adding yourself at the end instead of the cow. Now I knowthat the site is a bit (to say the least) CPU intensive (3D tends to do this), but believe me it was worse than this before and I wish I would have had a bit more time to perfect this site.

The technical cool part is that you can use your picture, be it by uploading it or using your webcam, and using the derivate bitmap I will composite it with the cow skin and apply that to the loaded Collada model. That was kind of the premise of this site and we built around it with a vintage design. I hope you like it.

Here is a short list of librairies we used: as3corelib, TweenLite, Alcon, facebook api, google analytics for flash and Papervision3D.

Another cool feature is that you can embed your roar on your blog like this:

, , , , , , ,

No Comments


Update on Online Awards for Flash Websites

A couple months ago I made a post about Online Awards for Flash Website, but since that time I updated my list with a more relevant and up to date content:

Favorites website award (about 62$) (25 words desc)

http://www.thefwa.com

Dope awards (about 10$) (35 words desc)

http://www.dopeawards.com/

Website Design Awards (5$)

http://websitedesignawards.com/index.php/category/flash-gallery/

The World’s Best Web Design (3$)

http://www.moluv.com/

Design Licks

http://www.designlicks.com/

Best Web Gallery

http://bestwebgallery.com/category/flash/

irie http://irie.be/

Digital Abstracts

http://digitalabstracts.com/

Strange Fruits

http://www.strangefruits.nl/

Design Flavr

http://www.designflavr.com/category/flash/

101 best websites (requires login)

http://101bestwebsites.com/category/flash

PageCrush (requires an image 300px x 100px)

http://www.pagecrush.net/

Spyline

http://spyline.de/section/flash

iBlog

http://iblog.chubzz.com/

Another Bookmark

http://anotherbookmark.com/

Design Snack (bigger width than 600px, it’s better to be logged in when you submit) (maybe outdated)

http://www.designsnack.com/

Minimal Exhibit (if your design is minimal)

http://minimalexhibit.com/

GOUW

http://www.gouw.nu/

LinkDup

http://www.linkdup.com/

Now again some of them haven’t been tested cause I snatched them on my last pass but when I will get new ones I will make another post. Also worth mentionning I found the website for the PixelAwards seems like an online competition that happens once a year. Here is the link: http://www.pixelawards.com/

No Comments