Karlski

SHIFT+ENTER adding a new line - chat textfield

2011-07-01T05:59:00.000-07:00

Looking all over the internet for a simple adding a new line when pressing SHIFT+ENTER... not to be found.

So, for the ones who also looked very long, here is an example.
This sample also disables the ENTER key. Only when you hit SHIFT+ENTER it adds a new line to the textfield


public class TextfieldSample extends Sprite
 {
  private var textfield:TextField;

  public function TextfieldSample()
  {
   //Creating the textfield an adding it on stage.
   textfield = new TextField();
   
   //event to disable the ENTER key
   textfield.addEventListener(TextEvent.TEXT_INPUT, handleTextEvent);
   //event to enable SHIFT+ENTER key
   textfield.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
   
   //Make it an input textfield
   textfield.type = TextFieldType.INPUT;
   
   //Just use border to show it easy on stage.
   textfield.border = true;
   //You need multiline for adding new lines.
   textfield.multiline = true;
   
   addChild(textfield);
  }

  private function handleTextEvent(event:TextEvent):void
  {
   if (event.text.charCodeAt() == 10) 
   {
    //char code 10 == ENTER key
    event.preventDefault();
   }
  }

  private function handleKeyDown(event:KeyboardEvent):void
  {
   if(event.shiftKey)
   {
    if(event.keyCode == Keyboard.ENTER)
    {
     //You need to give something else the focus, otherwise the textfield is blocked 
     //and adding the new line will not work.
     stage.focus = stage;
     //Don't use appendtext for adding a new line, this function does not puts the new line in the correct position.
     textfield.replaceText(textfield.selectionBeginIndex, textfield.selectionBeginIndex, "\n");
     //Give the textfield the focus again
     stage.focus = textfield;
    }
   }
  }
 }

If you have any improvement for this code, just let me know...

AS3 - Children adding reverse

2011-05-03T06:31:00.001-07:00

Today I learned an extra feature of adding children into a DisplayObject in reverse.
Normally I would make two loops. First one is adding the children, the second is placing the children in reverse.
But... it can be done so much easier:


for(var i:int = 0; i < numChildren; i++)
{

    container.addChildAt(child,0);

}

The second parameter sets the child on the first place.

For many known, not for me.. maybe not for you either....

getNextHighestDepth in as3

2009-07-23T04:52:00.000-07:00

In as2 you were able to put a movieclip on top of all the other containing movieclips. I'm working with as3 now and was searching for this same option.

You can do it with one line of code:

as2:


//container is the parent of the movieclip
movieclip.swapDepths(container.getNextHighestDepth());

as3:


//container is the parent of the movieclip
container.setChildIndex(movieclip, (container.numChildren - 1));

[Project] Van zolder tot Loft < - > Papervision

2009-06-15T02:38:00.000-07:00

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

2009-06-15T02:21:00.000-07:00

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

2009-04-05T04:34:00.000-07:00

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

2009-01-14T01:30:00.000-08:00

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

2008-10-01T13:59:00.000-07:00

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!?

2008-06-12T02:47:00.000-07:00

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#

2008-05-07T01:35:00.000-07:00

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.

Eigen werk: unive

2008-03-31T07:44:00.000-07:00

Dag beste mensen,

Ook ik kan er niet aan ontkomen om een blog te openen en mijn eigen bevindingen, meningen en eigen werk te laten zien. Ik zal me eerst even een beetje voorstellen, voordat ik jullie mijn uitgesproken mening zal laten horen ...

Mijn naam is zoals je wel ziet Karl van Santen. Ik ben nu bijna een jaar aan het werk bij het middelgrote bedrijf Amercom. Daarvoor heb ik mijn HBO-informatica opleiding afgerond en heb ik mijn eindstage gedaan bij Amercom. Zoals wel meer ben ik daar blijven hangen en ben ik in een ontwikkelteam begonnen met het maken van .net applicaties voor het web.
Na een paar maanden ben ik er achter gekomen dat ik mijn pijlen een andere kant op wilde schieten. Of ik wilde meer de projectleiding op gaan, of ik wilde meer de grafische kant op.
Flash is binnen amercom al een tijd inzetbaar, alleen door de onderbezetting nooit echt uitgegroeid tot een echt team. Flash was voor mij de ideale keuze tussen het grafische en technische gedeelte waar ik mijn creativiteit, technische kennis en plezier in kan stoppen.

Momenteel ben ik alweer bijna een half jaar bezig met het ontwikkelen van flash applicaties en kleinere flash onderdelen binnen een website. Ik heb gemerkt dat ik een heleboel energie kan halen uit de dynamische en technische aspecten.

Om dan toch even een beeld te geven van wat ik nu doe (even visualiseren... ) kun je kijken op www.jebrommerfoto.nl . Voor Unive hebben we een actiesite gemaakt die volledig in flash is gemaakt. Het opslaan, mailen en beheren van de ingezonden foto's wordt gedaan door .Net. Voor mij was het dus de uitdaging om deze communicatie op te zetten en na te gaan wat hiervoor de beste oplossingen zijn. In een volgende post zal ik verder ingaan op de technische achtergrond van deze applicatie