Summative Project

•

Part 1: Proposal -- Histoire

The flash animation will be an interactive book that aims to recreate the lore of Lulu from League of Legends in an artbook-sketch aesthetic. It will be interactive in the terms that the reader can turn the pages and interact with the drawings (which most of them might have fluid movement at all times). This will require me to use masking, nesting, , actionscripts(?), cell (frame by frame) animation, and (maybe) repeating backgrounds. The flash will follow Lulu's lore in an artistic manner but in moving, still images. [ lore: http://leagueoflegends.wikia.com/wiki/Lulu/Background ] At the end of the flash, there will be a book closing animation.

The main reason why I wish to do this project is because I think it is a easy, yet effective medium to portray stories. I believe that because of the theme (page turning) is a somewhat difficult approach to the animation (from scene to scene), staying within the realms of it will be difficult. The intent of this is to learn different approachs to animation. As I have learned from this class, there are many approaches in animation, and in this instance, I want to learn about a different approach of creating a certain type of animation.

Tweaks:

- Conversion of AS1/2 to AS3 or replacing actionscript with the usage of buttons to flip pages.

- Interactive content inside animation

- Multiple pages

- Narratives

Key terms:

masking, nesting, motion tweens, actionscript, cell animation, frames, repeating backgrounds, Lulu, League of Legends.

Links:

http://oreilly.com/javascript/archive/flashhacks.html [using]

http://layersmagazine.com/animating-with-sprite-sheets-in-flash-cs6.html#more-16865

http://content.yudu.com/Library/A1gmo1/HowtoCheatinAdobeFla/resources/4.htm [page 147]

http://content.yudu.com/Library/A1gmo1/HowtoCheatinAdobeFla/resources/4.htm [page 151]

The Character (Lulu)' belongs to Riot Games. This is a non-profit animation.

TEXT TUTORIALS

Text Tutorial [1] Preparing for Flash

Download the following image, or create your own.

Replicate the images above with the first image provided-- maintain the 724 x 533px resolution.

Open photoshop with the resolutions: 724 x 533px.
Place the image twice, next to each other, to make the appearance of an open book. This is when the tutorial gets somewhat difficult.
Inspect these three images, or look at what page turning looks like.

[optional] Create more images between the pages to create a smoother transition.
Save each image independently in ascending order; at the very least, you should have three different images (at this point).
On the first page (on the diagram above, it is listed as number 1), save a version that crops everything, but the image and call it "pagebutton".

Text Tutorial [2] Page Flash

Open up Adobe Flash CS6 (or lower). Make sure that you make a new document, or change your document, so that it runs on AS2, not AS3.

Import all of the images you made from the first tutorial.

On a layer, place the first part of the page flip sequence (image one) on the stage, perfectly aligned. Depending on the importing options and registration point, makes the x,y coordinates vary.

Convert the image [F8] into a symbol.

Double click the symbol to go into the symbol.

Click on the image to find the x,y location inside the symbol.

Insert new blank keyframe [F7] then place the second image, and soforth.

[optional/for safety] on the last frame inside the symbol, press [F9] to create an action ON THE FRAME and put (without the ""): "stop();".

The page flipping animation is complete, however you can only see the page flipping animation when you test animation, under Control>Test Movie.

Drag these frames to the end of the scene and create a new layer with a keyframe on the last frame.

In the new keyframe we made, press [F9] to open the actions for that frame and put "gotoAndPlay("Scene x", 1);". For x, put the number of the next scene, i.e, if the you are in scene 1, put "Scene 2".

In the layer in the page flipping animation, insert a keyframe a frame before the animation and insert the page flip button. Convert this to an actual button, that way we can make mouse events in actionscript 2.

On that keyframe, click on the button NOT THE FRAME and press [F9]. In the actions, put "on(release){

gotoAndPlay(x);

Wherein, x=the next frame (the frame in which the flipping animation starts).

On THE FRAME of the button, press [F9]. The actions should be empty, if you did the previous step correctly. In this action panel, insert "stop();".

Now, when you play this scene, it'll stop and gives you the option to flip the page. Only when you click on the button, will you be given the page flipping animation, which then transitions to the next scene (page).

Text Tutorial [3] Drawing Effect

>Editing Text

Using the text tool, type out your sentence.

Press [CTRL+B], (break) twice to rasterize the text.

Press [F6] to create a new keyframe (you'll be using this a lot in this part of the tutorial, so remember these shortcuts). The first frame should remain the full, unerased text. The next frame, from the last letters, you should begin erasing small portions. Press [F6] again, and erase another small portion. Keep doing this until you erase the text (or at least until it is barely visible).

[OPTIONAL] If you are pressing [F6] in a scene wherein there are more frames ahead, press [F6] again and select all the frames, except the last one.

[If you have skipped step 4] Select all the keyframes made before (click on the last frame, then hold shift click on the first frame) then RightClick>Reverse Frames. This makes an illusion in which the text is being written out. You can be creative and put more time into this effect, if you so wish, however it can soon become very time consuming.

>Editing Drawings

Using the brush tool, draw out your animation. There are many ways to do this, however I will show you a way similar to editing text.

Press [F6] to create a new frame.

In the next frames, erase specific sets of lines, instead of segments of the image.

Keep doing this until the image is barely visible.

[OPTIONAL] If you are pressing [F6] in a scene in which there are more frames ahead, press [F6] again and select all the frames except this one.

[If you have skipped step 4] Select all the keyframes made before (click on the last frames, then hold shift click on the first frames) then RightClick>Reverse Frames. This makes an illusion in which the image is being drawn out. As aforementioned, you can put effort to make the effect more realistic.

VIDEO TUTORIALS