[Project] Van zolder tot Loft < - > Papervision

Amercom developed an interactive test to find out what you can do with your attic. Through a serie of questions you will be advised what to do with your attic. Behind the test are some very interesting articles about defining and designing your attic. Our challenge was to create an interactive, creative and simple way to ask the questions.

So we used Papervision 3d to show different questions on a floor. You 'fly' above to the next question each time you have choosen your answer.
My goal was to find out how to use papervision in an efficient way so every ones framerate was above 20. Another challenge for me was to get the interactivity and Papervision work together. For me it was hard to get the mouse clicked or drag very smooth. But it worked out very well.

You can see the test here:
http://www.vanzoldertotloft.nl


For any questions about papervision or interactivity in this project, please comment
Graphic credits goes to Benjamin Gouverneur

SoundManager in as3

On the internet I found a very interesting class. I used it in a project I'm working on right now. It is a singleton class to load library or external sounds. So with some very simple lines of code you can implement and use the sounds.

you can download the class here:
http://evolve.reintroducing.com/2008/07/15/news/as3-soundmanager/

In your flash file you can set a linkage to the sound in your library:


To use the soundmanager simply use these lines:

//load the sound from library
SoundManager.getInstance().addLibrarySound(nl.Amercom.Sounds.MenuItem, "MenuItem");

//play the sound on a rollover or somewhere else
SoundManager.getInstance().playSound("MenuItem");

Unable to resolve for transcoding with embed image

Ok, at home I was making a new as3 project with flashdevelop.
Everything was working great, untill I wanted to use the [embed] code.

At work there's no problem with it, but here at home it just didn't work. And I was sure that I dit the same thing... here is what I did,

[Embed(source="../images/425400.png")]
protected var myImage:Class;

The compiler gave me this error: Error: Unable to transcode ../images/425400.png.
So, I thought to put the image in the /bin directory. not working either.

[Embed(source="425400.png")]
protected var myImage:Class;

after some searching on the internet, days of waiting and thinking... the solution was way to simple:

[Embed(source="/../images/425400.png")]
protected var myImage:Class;

put a '/' before you're path and it works..

[project] Interhome holiday suitcase in flash

After a lot of work, we created a new website for Interhome. It becomes a filled suitcase which checks your holiday character in a motion environment.
The style is designed by Benjamin Gouverneur and everything in flash is done by me.. Except the animations inside the suitcase. Martin Strieder is the creative animator. So my job was to put all the pieces together. A very creative, long and exciting project. One of the first big projects for me.

http://www.vakantiekarakter.nl/

special credits go to Benjamin, Wouter, Jeroen and Martin!!

[project] Wedding Gijs en Shirley

In september 2008 gijs en shirley (friends) got married. They asked me to build a website for them, so they can tell something about themselfes. I also created a 'gift shop' with different catogories. The vips on the wedding also wrote something personal about the married couple.

I build the website with adobe flash and PHP. The only thing that PHP did in this project is to send the gift shop mails.
Gijs en shirley wanted something grey and purple in their website. So I designed three previews and the picked this one:

http://www.gijsenshirley.nl/

And the lived happely ever after!

3D .... video!?

Yes, its already possible to create 3D images and to show them on the web.
And yes, its also possible create a 3D scene

Papervisions blog show this amazing link.
Video and 3D together. Flabbergasting!! The equipment is al little bit expensive. But if you got the equipment setup, you can make amazing videos.
This is the direct link to the website: click

I'm waiting to implement this technique into the world of www...

CollapsiblePanelExtender and postback in C#

After a week of searching I found the solution to save the state of an Ajax collapsiblePanelExtender.
I want to show you that it is very easy to save the state after a postback.

Clientside

First you need to create your collapsiblePanelExtender:

         TargetControlID="PanelNewsItems"
        CollapsedSize="0"
        ExpandedSize="220"
        Collapsed="False" 
        ExpandControlID="LinkButtonPanelHeader"
        CollapseControlID="LinkButtonPanelHeader"
        ScrollContents="False"
        TextLabelID="LinkButtonPanelHeader" 
        CollapsedText="Toon Nieuws"
        ExpandedText="Verberg Nieuws"
        ExpandDirection="Vertical"
        ImageControlID="ImageCollapsePanel"
        CollapsedImage="~/images/expand.gif"
        ExpandedImage="~/images/collapse.gif" 
        SuppressPostBack="false"/>

Important is the SuppressPostback parameter. If you set it 'true' the postback will not be fired. So to create a postback the SuppresPostBack parameter needs to be set to 'false'.
The expandControl and the CollapseControl is in my case a LinkButton.

As you can see the LinkButton has an OnClientClick. This click calls a javascript function that saves the state of the collapsiblePanelExtender into a HiddenField.

So you have to put a HiddenField somewhere on your page:

Somewhere in the code you need to place the javascript code to set the hiddenfield value after the clientclick on the linkbutton:

function changeStateNews(){
            objExtender = $find("<%=CollapsiblePanelExtenderNewsItems.ClientID%>");
            objHiddenField = document.getElementById("<%=HiddenFieldNews.ClientID%>");
            if(objExtender.get_Collapsed()){  
                 objHiddenField.value = '0';
            }
            else    objHiddenField.value = '1';
        }

Serverside
That's it for the clientside. Now I'll show you the serverside code:

#region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /// 

        ///  Required method for Designer support - do not modify
        ///  the contents of this method with the code editor.
        /// 
        private void InitializeComponent()
        {
            this.LinkButtonPanelHeader.Command += new CommandEventHandler(LinkButtonPanelHeader_Command);
            this.RepeaterNewsItems.ItemDataBound += new RepeaterItemEventHandler(RepeaterNewsItems_ItemDataBound);
            this.Load += new System.EventHandler(this.Page_Load);
        }
        #endregion

        void LinkButtonPanelHeader_Command(object sender, CommandEventArgs e)
        {
            if (HiddenFieldNews.Value == "1")
            {
                controlPanelExtender(true);
            }
            else
            {
                controlPanelExtender(false);
            }

            lib.cookie.setCookieValue(CookieName, HiddenFieldNews.Value);
        }

        void controlPanelExtender(bool value)
        {
            CollapsiblePanelExtenderNewsItems.Collapsed = value;
            CollapsiblePanelExtenderNewsItems.ClientState = value.ToString().ToLower();
        }

First to get the postback of the LinkButton you need to create the Command event in the InitializeComponent function.

In the Command function you can read the value of the HiddenField. According to the Hiddenfield value you can set the collapsed and the clientState of the collapsiblePanelExtender.

I also created an option in the Command function to save the state into a cookie. So the next time you open the page it sets the last saved state in the Page_Load function.

There is still one buggy thing I want to solve. If the server is very quick (say localhost) the postback sets the new state faster than the clientside. In other words: if you clicked on an expanded panel while its collapsing, the postback sets its state to collapsed, so it will collapse immediatly. My goal is to fire the postback after the clientside has finished the animation.

Any questions or reactions are welcome.