Image Editor Source Code

The newer version of Image Editor released. – 2010/01/13

지난 토요일, 제2회 플래시 액션스크립트 카페 컨퍼런스에서 발표한 이미지 에디터의 소스 파일입니다.
Here goes the source files of the Image Editor, I have presented at the 2nd FASC Conference last Saturday.
先週の土曜日、二回目のFASC Conferenceで発表したイメージエディタのソースコードです。

Download the source files.

Preview the sample movie.

32 thoughts on “Image Editor Source Code”

  1. // jasu, Wooyaggo, jin_u
    파일 다시 올렸어
    워드프레스 관리자 툴에서 파일 업로드 할 때 파일이 손상되었나 보네 ㅠㅠ

  2. 얼마 안된 시간이 지났음에도, 벌서 제가 짠 코드들에 빈틈이 많이 보이고…
    맘에 안드네요 ㅠㅠ
    이거 보다 더 좋은 소스들 많이 만들어 주세요 ^^

  3. hello,

    i a m reading your sourcecode, but as i am no pro, i cant figure out where exactly you placed the code for adding text.

    do you have some more hints ore haveyi#ou found time to completely implement text functions?

    best regards
    franky

  4. 안녕하세요. 이미지에디터 소스를 찾던중에 이곳을 발견하고 왔습니다.
    우선 이렇게 귀한 소스를 공개해주셔서 정말 아주 대단히 감사드립니다.
    소스코드를 이틀째 보고 있는데 한가지 궁금한게 있어서 문의드립니다.
    다른건 이제 다 이해가 되는데요.
    ImageHandler.as 부분에서 rect_mc, move_mc, rotate_mc, size_mc 이 무비클립들은 어디서 인스턴스화 시키나요?
    아무리 찾아봐도 보이지 않아서 이렇게 글로 질문드립니다.
    다시한번 소스오픈 감사드리며 답변 기다리겠습니다. (_ _)

    1. ImageEditor.fla 파일의 라이브러리에서 Image Handler 폴더에 보면, @@ ImageHandler 라는 무비클립이 있습니다. 바로 이 무비클립에 ImageHandler 클래스가 연결되어 있고, 그 안에 필요한 무비클립들이 모두 포함되어 있습니다. Image Handler 폴더를 통채로 복사해서 사용하시면 될 듯 하네요.

      1. 그렇군요. 제가 플래시인터페이스에 익숙칠 않아서 ^^;
        소스 덕분에 많은 공부가 되었습니다.
        빠른 답변 주셔서 감사합니다~

        1. ImageHandler.as 파일안에 해당 설명을 적어 놓았어야 했는데, 그 부분을 미쳐 생각을 못했네요. 이거 물어보는 분들이 간혹 있더라고요. ^^

  5. hi,
    firstly, excellent piec of code Kudos to you

    I’ve added a ‘zoom’ slider in flash ontop of this, now the image and control corners zoom in properly but when i resize the image and the frame jumps by a few mm.. if i resize the image small then it jumps ‘upwards’ and if i make it larger it jumps to the left ??

    but when i put the slider back to 100% the problem disappears

    can you please tell me why this is happening

    1. hi mikey,

      I think it’s because scales bewteen ImageHolder and ImageHandler instances are different each other. If you enlarge the ImageHandler by 100 pixels, the ImageHolder’s bitmap enlarges 100 pixels, internally. But the display on screen may be different, if the scale of ImageHolder was changed.

      I did not consider the zoom in/out functions when I developed this. So this is happening. I hope you solve the problem.

      thanks.

  6. i like it! great.
    Hangun, can you tell me if there are possibilities to save/encode jpeg with some parametrs like depth (300dpi instead of 72dpi)?

    1. I guess it is possible.
      The following link is a Java sample code which changes an image’s DPIs to 300.
      http://72.5.124.102/thread.jspa?threadID=5309178&messageID=10431021

      And see the line 236-238 356-358 in JPEGEncoder.as file. You can modify this part of the source code.
      units(1 byte) Units for the X and Y densities.
      units = 0: no units, X and Y specify the pixel aspect ratio
      units = 1: X and Y are dots per inch
      units = 2: X and Y are dots per cm
      Xdensity(2 bytes) Horizontal pixel density
      Ydensity(2 bytes) Vertical pixel density
      (quoted from http://www.martinreddy.net/gfx/2d/JPEG.txt )

      1. sorry, but i can’t find “And see the line 236-238 in JPEGEncoder.as file”
        there is no any units …

        i just need to save jpg in resolution of 300 dpi from flash. no js …
        Hangun, can you show me please what should i change to do this?

      2. Oops, I made a mistake. It’s line 356-358, not 236-238.
        Change those 3 lines of code like below.

        writeByte(1); // xyunits
        writeWord(300); // xdensity
        writeWord(300); // ydensity

        And you have to re-compile the SWF file in Flash authoring tool.

        best regards.

        1. how can i change saving image size? i want to keep width and height of contentHolder the same as it was (600×450) but image that saving should be 1200×900

          and one more … i receive type error

          “TypeError: Error #1009: Cannot access a property or method of a null object reference.
          at conf::ImageEditor()[/Users/alex/Desktop/hangun/conf/ImageEditor.as:53]
          [object Button]

          i got this when i try to integrate your source into my project. i have changed all pathes to misc_mc, contentHolder in ImageEditor.as

          line 53: cont_sp = new Sprite();
          line 54: con.vid.contentHolder.addChild(cont_sp);

        2. Use Matrix to double the size like the following code.

          var bd:BitmapData = new BitmapData(1200, 900, false, 0xFFFFFF);
          var mat:Matrix = new Matrix();
          mat.scale(2, 2);
          bd.draw(mc, mat);

          And I’m not sure what caused the Error 1009. Maybe, the con or one of it’s children is not instantiated yet. Try ADDED_TO_STAGE event listener.

          1. yes, it’s working thanks.
            i change ImageEditor.as

            add import flash.geom.*; // to use Matrix

            and then change lines 118-119 to code you provide:

            var bd:BitmapData = new BitmapData(1200, 900, false, 0xFFFFFF);
            var mat:Matrix = new Matrix();
            mat.scale(2, 2);
            bd.draw(contentHolder, mat);
          2. I have changed stage width and height and all Handlers (resize, move) and msgText are now incorrect position. Is there some value what i need to change to set all of this in correct position?

          3. There is a shape with gradient in “@@ MsgViewer” symbol. Convert it to a movie clip, and change the position of the instance in MsgViewer.addedListener() method.

            ps. I edited your previous comment to apply code highlighting.

          4. thanks, and what about position of @@ ImageHandler?

            i have change it, but buttons are in the old position

          5. If you moved contentHolder, ImageHandler could be placed on incorrect position. Use localToGlobal() method to adjust the Imagehandler instance’s position in ImageHandler.setTarget() function.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다