개발일지

[Flash/ActionScript] 5일차 - DisplayObject 움직임 1. 엔터프레임을 이용한 움직임 import flash.display.MovieClip; import flash.events.Event; var mc:MovieClip = this.getChildByName("mc") as MovieClip; var speed:Number = int(Math.random()*4)+1; // 1~4 사이의 값을 임의로 생성 this.addEventListener(Event.ENTER_FRAME, enterFrameListener); trace(speed); function enterFrameListener(ev:Event):void{ mc.x += speed; } 2. 감속공식을 이용한 움직임 import flash.events.Event; this.y = 100; this.x = 0; this.addEventListener(Event.ENTER_FRAME, enterFrameListener); function enterFrameListener(ev:Event):void{ //감속공식 : 현재위치 = 현재위치 +(목적지-현재위치)*0.5 //현재값 += ( 타깃값 - 현재값)* 0보다 크고 1보다 작은 상수 this.x += ((stage.stageWidth-this.width)-this.x)*0.05; } 3. 마우스를 부드럽게 따라다니는 무비클립 import flash.display.MovieClip; import flash.events.Event; var mc:MovieClip = this.getChildByName("mc") as MovieClip; mc.addEventListener(Event.ENTER_FRAME, enterFrameListener); function enterFrameListener(ev:Event):void{ mc.x += (th...

[Flash/ActionScript] 4일차 - 디스플레이리스트 1. 텍스트필드 Hello World!를 스테이지에 추가하기 import flash.text.TextField; import flash.text.TextFieldAutoSize; var i:int; var parts:Array = ["Hello", "World", "!"]; for(i=0;i 0 ){ //기본적으로 텍스트 필드의 너비와 높이는 100픽셀 그전의 객체를 참조하여 위치설정 txtFld.x = getChildAt(i-1).x + getChildAt(i-1).width; } addChild(txtFld); } 2. 디스플레이 리스트 - stage[스테이지] : 객체 디스플레이 컨테이너, 리스트의 최상위 컨테이너 - main timeline[메인 타임라인] : 객체 디스플레이 컨테이너, root 속성을 통해 접근가능. fla 파일은 다른 자원들이 포함된 메인 타임라인을 가진다. 이벤트 전달을 위해 메인 타임라인에 이벤트 리스너를 추가하기도한다. - movieClip[무비클립]: 객체 디스플레이 컨테이너 (자식으로 다른 객체를 가질 수 있다.) - shape : 사각형, 원형, 선이나 그리기도구로 생성된 모양 - Bitmap - Sprite : 액션스크립트3 에서 새롭게 등장한 개념인 스프라이트는 무비클립에서 타임라인이 빠진 객체이다. - Loader : 이미지나 다른 swf 를 불러와서 디스플레이 리스트에 포함시키는 역할을 한다. 3.디스플레이 자식 객체 확인 function showChildren(dispObj:DisplayObject, indentLevel:Number):void { for (var i:uint = 0; i < dispObj.numChildren; i++) { var obj:DisplayObject = dispObj.getChildAt(i); ...

[Flash/ActionScript] 3일차 - 이벤트 1. 마우스 이벤트를 이용한 드래그앤 드롭  import flash.display.MovieClip; import flash.events.MouseEvent; var mc:MovieClip = this.getChildByName("mc") as MovieClip; mc.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag); mc.addEventListener(MouseEvent.MOUSE_UP, onStopDrag); function onStartDrag(ev:MouseEvent):void{ ev.target.startDrag(); } function onStopDrag(ev:MouseEvent):void{ stopDrag(); } stage.addEventListener(MouseEvent.MOUSE_UP, onStopDrag); //스테이지에서 마우스를 멈추어도 드래그가 끝나게끔설정 무비클립 객체에 액션을 작성. import flash.events.MouseEvent; this.buttonMode = true; //마우스를 객체 위에 놓으면 마우스 포인터가 손모양으로바뀜 this.addEventListener(MouseEvent.MOUSE_DOWN, downLisner); //무비클립(this)를 마우스로 누르면 down이벤트를 호출 //드래그시작 function downLisner(ev:MouseEvent):void{ this.startDrag(); //화면 어디서든 마우스를 때면 up이벤트 호출 stage.addEventListener(MouseEvent.MOUSE_UP, upLisner); } //드래그중지 function upLisner(ev:MouseEvent):void{ this.stopDrag(); //화면에 등록했던 up이벤트를 제거 stage.removeEventListene...

[Flash/ActionScript] 2일차 TweenMax 사용해보기! 우선 Main.as 를 fla파일의 문서 클래스 와 연결 후 [ctrl + Enter] 하여 연결확인. 1. 무비클립 mc1 을 x 좌표를 100 만큼 1초동안 이동시키기. package { import com.greensock.TweenMax; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; /** * ... * @author zzzPanda */ public class Main extends Sprite { private var boxMc:MovieClip = null; public function Main() { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point trace("TEST"); boxMc = this.getChildByName("mc1") as MovieClip; TweenMax.to(boxMc, 1, {x:100}); } } } 2. 이번엔 무비클립에 이벤트 걸어보기 package { import com.greensock.TweenMax; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; /** * ... * @...

[Flash/ActionScript] 1일차 - 설정편 1. FlashDevelop 설치 http://www.flashdevelop.org/community/viewtopic.php?f=11&t=13028 + jdk 1.8 ( 32bit ) 버전 설치 및 환경변수 셋팅 필요. https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html FlashDevelop 다운로드 2. Adobe Flash CS6 설치 어도비 CS6 버전 설치. 3. 설치후 SDK 추가설치 메뉴 - Tool -> Install Software 1. Flex SDK + AIR SDK 2. Adobe AIR 4. 프로젝트만들기 메뉴 - Project - New Project 5. greenSock greensock.swc 다운로드 및 프로젝트에 추가 https://greensock.com/gsap-as greensock 다운로드 파일 왼쪽 클릭 - Add to Library 로 추가. 6. FlA 파일 만들기 fla 폴더를 생성하여 프로젝트명과 같은 fla 파일을 플래시로 만든다. 플래시파일에서 액션스크립트3 설정 필요하다. ( 메인클래스와 연결하기위해 ) 소스 경로 : 현재 파일을 기준으로 소스 경로를 지정해준다. >> ../src 라이브러리 경로 : 현재파일을 기준으로 지정 >> ../lib/greensock.swc fla 문서 의 클래스를 Main 으로 지정해준다. new TweenMax() 하면 import 된다. [참조사이트] https://riptutorial.com/ko/actionscript-3 액션스크립트3 시작가이드 예제파일 https://resources.oreilly.com/examples/9780596527877/ [No...

CSS를 알아보자! 1. 방법론 (SMASS, BEM, OOCSS) 2. 전처리도구(SASS/SCSS/LESS) CSS를 지금껏 사용했지만 사실 전처리도구(SASS/SCSS/LESS) 등을 사용해보지 않았다. 지금까지 너무 게으르게 살았던듯... ㅜㅜ 다시 정신차리고 공부하는 삶을 살아야겠다. 목표1 : 몇가지 방법론을 살펴보고 한가지를 선택해서 적용! 목표2 : 전처리기를 사용하여 작업!  1. 방법론 (SMASS, BEM, OOCSS) 1-1. CMASS(Scalable and Modular Architecture for CSS) 참고 - https://smacss.com/ SMACSS의 핵심은 분류이다. CSS 규칙을 범주화 함으로써 패턴을 설정한다. SMACSS는 5가지의 규칙 이 있다. Base - 기본스타일 Layout - 엘리먼트를 나열하는 것과 관련된 스타일 Module - 재사용을 위해 하나로 묶는 스타일 State - 상태변경을 위한 스타일 Theme 프리픽스(preifx) 를 사용하여  layout, state, module 규칙을 구별한다. layout : l- module : 모듈의 이름을 사용 state : is- [Base] html, body, form { margin: 0; padding: 0; } input[type=text] { boarder: 1px solid #999; } a { color: #039; } a:hover { color: #03C; } -> CSS reset 과 같은부분 [Layout] Layout은 ID 선택자를 사용해도 된다. #header, #article, #footer { width: 960px; margin: auto; } #article { border: solid #CCC; border-width: 1px 0 0; } #article { ...

  javascript 기초공부 - 1 : 타입강제와 약한 형식화, 단축평가 값 자바스크립트가 알지 못하는 데이터 타입을 사용하면 자바스크립트는 오류를 발생시키지 않고 가능한 작업을 수행하려고 시도한다. 자바스크립트는 내부적으로 데이터 타입을 변환하여 작업을 완료할 수 있다. 이를 타입강제(type coercion) 이라고한다. 예를 들어 '1' > 0 이라는 구문을 실행할때 숫자 '1'은 1로 변환될 수 있다. 그결과 이 표현식은 true 로 표현된다. 자바스크립트는 약한형식화(weak typing) 을 사용한다. 데이터 타입 string : 텍스트 number :  숫자 Boolean : true / false null : 빈값 undefined : 변수가 선언되긴 했지만 아무런 값도 대입되지 않은 상태 false 로 취급될 수 있는 값 var value = false; var value = 0; var value = ''; var value = 10/' '; //Infinity var value = 10/"aaa"; // NaN var value; var value = NaN; true 로 취급될 수 있는 값 var value = true; var value = '1'; var value = '0'; var value = 'false'; var value = ' '; NaN== NaN: false NaN은 false로 취급될 수는 있지만 이와 동일한 것으로 취급될 수 있는 다른 값은 존재하지 않는다.( 정의되지 않은 숫자 이기 때문) 단축평가값 논리연산자들은 왼쪽에서 오른쪽으로 실행된다. 이 연산자들은 결과를 얻게 되는 순간 단축평가(즉, 평가의중단)을 실행한다. 그래서 그 결...

HTTP란? ( H yper T ext T ransfer P rotocol, WWW 상에서 정보를 주고받을 수 있는 프로토콜) 1. HTTP란? HTTP는 웹에서만 사용하는 프로토콜로 TCP/IP 기반으로한 지점에서 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜을 말한다. TCP/IP : 컴퓨터와 컴퓨터간의 지역네트워크(LAN), 광역네트워크(WAN)에서 원활한 통신을 가능하게 하기위한 통신규약(Protocol) TCP/IP는 TCP, IP 2개의 프로토콜로 이루어져있다. IP : 4바이트로 이루어진 주소번호를 사용하여 각각의 node를 구분하고 목적지를 찾아가게 한다.(예-192.168.100.100) TCP : 서버와 클라이언트간에 데이터를 신뢰성있게 전달하기 위한 프로토콜이다. 데이터 전송을 위한 연결을 만드는 연결지향 프로토콜이다. 클라이언트 : 서버에 요청하는 소프트웨어가 설치된 컴퓨터. 서버 : 클라이언트의 요청을 받아서 요청을 해석하고 응답. 2. 응답코드 코드 메세지 설명 200 Success(성공) 데이터전송이 성공적으로 이루어짐. 300 Multiple Choices 최근에 옮겨진 데이터를 요청 4XX 클라이언트오류 클라이언트 측의 오류. 5XX 서버의오류 서버 측의 오류. 참고 : https://ko.wikipedia.org/wiki/HTTP