스토리라인 360 ‘States’를 이용하여 역동적인 슬라이드를 만들어 봅시다

어떤 기능이 있는지 살펴보세요

 

1. 첫 장면은 설명글과 함께 네 가지 동물 사진이 보입니다.

2. 동물 사진 위에 마우스 커서를 올리면 빨간 줄이 생기네요.

3. 동물을 클릭하면 사진 주변 색이 바뀌면서 해당 동물이 오른쪽으로부터 날아옵니다. 화면 글도 바뀌구요.

4. 다른 동물을 클릭해도 마찬가지 효과가 생깁니다.

스토리라인360 으로 어떻게 만들까요?

별로 어렵지 않겠죠? 어떻게 만들 수 있는지 구상해 보셨나요?

왼쪽의 사진들은 변하지 않고, 오른쪽의 사진들만 바뀌고 복잡한 효과가 없으니
슬라이드 레이어를 추가해서 만드는 방법이 간단할 것 같습니다.

1. 먼저 처음 화면을 구성해야겠습니다. 먼저 왼쪽 사진들을 보니 사진 밑에
    회색의 프레임이 보이고, 그 밑으로 진한 회색의 바탕색이 보입니다.
2. 사진이 들어갈 회색의 사각형을 그려줍니다.
3. 회색 사각형의 States를 편집하면서 동물사진을 불러옵니다.
4. hover와 selected도 추가해 줍니다.
3. 기본 남자 캐릭터를 불러오고, 텍스트를 씁니다.
4. 동물 사진을 클릭했을 때 보이는 슬라이드 레이어를 추가하고,
5. 사진과 글을 쓴 후, 에니메이션을 주면 완성. 같이 만들어 보아요.

 

같이 만들어 보아요.