Week 15

Liza:

Rutu completed most of her objectives for this semester.
Oddly the most difficult parts of this scripting and for the Flash project were  the UI presentation rather than the content or advanced functionality.
The smooth bezier path that the navigation arrow follows represents a huge amount of research and work on Rutu's part to find a solution for bezier motion path interacting with multiple navigation stops. Also the tutorial submenu for Beginner Advanced and Expert also used a component of the open source ActionScript to spin the selection with a rotate class. She put in the work to script the bezier curve herself initially; for the main navigation arrow--but the experience of working with open source development was an excellent opportunity to find a higher level solution and become familiar with a typical workflow model.
Lots of great work and lovely animation. The graphic assets are also well developed and enhance the project immensely. The tutorials themselves have improved greatly and are easier now to understand and follow.
Excellent work throughout! Congratulations ~
Final clean-up in preparation for next semester:

1. Rearrange or remove the tutorial explanation text and sub-titles to allow more negative space in the tutorials themselves. This will also create a stronger visual hierarchy.
2. Add the button to the last sub-tutorial that links to the next tutorial section using the simple Action Script for loading from the parent movie clip.
3. Continue working on the quiz buttons so that the interactivity is sound and stable (reacts well to user input). Also add the button movie clip actions for interactivity. Your solution for the first part is to use a mask layer or to try and find some script for giving a depth to the hitArea of the button movie clip.
4. Add a space after text that gets cut off in the static textfield. (low priority)

For Next Semester ~ to complete project:

1. The shared object for storing user position in the tutorial rounds
2. Complete the rest of the tutorials
3. Complete Tutorial list

Week 8

Liza:
Rutu altered the tutorials so that they are more integrated with the Sutra that supports the lesson. Additionally she is adding a quiz feature to reinforce the tutorial objective with questions interspersed at key learning points. We tested the animation options and Rutu made a choice for the tutorials that looked clean but still kept the user engaged. Including highlighting the instructional text with a "key - type" animation.
The progress meter will remain simple following the original design and growing vertically to match the progress of percent of tutorials completed. The contextual menu will also display this progress with a list of all tutorials. These will be checked off as the user proceeds and will also serve as a navigational device to bring the user to the tutorials left to do.
Rutu also discovered that the bezier class she was using for the main navigation (dynamic curved motion path) only allowed for 4 nav buttons so she's either going to return to her trigonometry or will explore the Green sock extension to see if it the motion path object it contains will work for her project.
This weeks goals and questions:

1. Complete the first tutorial set including 2 quiz questions. This will act as a full template for the next 9 tutorials. 
2. Attempt menu again (perhaps using the downloaded Flash extension - Greensock)
3. optional: if time allows  - begin to prepare the keyframe erase animation to play with the full background as an easter egg effect or to use as a final "congratulations, well done!" completion animation.

We'll check in over the weekend.

Week 7

Liza:

Quizzes are a very effective means to get learners to review the content. Quizzes have been proven again and again to have a strong correlation to learning development (despite that many people hate quizzes!). There is a neurological explanation I recently read for why this is so...so I vote yes on adding quizzes

My feedback on the 25 x25 tutorial is this:

1. red bounding boxes used for highlighting are just too slow. I would prefer just a simple highlight of the number by a quick color tween (utilizing one of your established color palette colors) or a simple glow. The box is too distracting/clunky
2. explain the +1 and the x 2 in the same way you explain the other steps. Even if it refers to the sutra then say that. such as "as described in Sutra (such and such) we add 1 to the first digit and then times it by 2". I can explain more about why this is on Thursday.

your goals look correct--but what about the tutorial sub nav?

Okay since I've now reviewed another version of the the two digit with 5 multiplication tutorial (what are you calling these?)--I see how that tutorial can be worded. Refer directly to that Sutra in the explanation. You are probably too close to the subject matter to see, but the Sutra could be more integrated in the tutorial itself (I hadn't read the Sutras before so that was part of my limited understanding)

1. ie "the number before 5 is 'the one before' in the Sutra "add one to the one before"
2. now take this new number and multiply it by "the one before" to get the first two digits of your answer

something like that?

Week 7 (Summary)

2 week summary

• Redrawn the decorative element in flash.
• Keyframe erase animation complete. (I could not do a build keyframe because most of the drawing is curves. If I didn't draw the whole curve in one stroke then it would land up looking choppy.)
• Changed arrow animation by doing a keyframe erase.
• Completed new structure of tutorials with a title before tutorials.
• User study / testing.
• Redesigned the tutorial animation to make it easier to understand based on one user testing session. (User was having trouble understanding the tutorial, user could not find an easy visual cue as to where the 5 and 2 came from, in squaring 25.)
• Figured out out menu animation - functions properly with menu click, triangle moves on a curved path and also rotates. (Now, I need to update the code to coordinates of my design layout.)

Currently working on

• Detailed spec for the progress meter.
• Remaining tutorials.

Questions

• It would be great if you could go through that one 25x25 tutorial to see if it's easy to understand or not. If not, how else could I improve it? I have added a layer with the number 25 on it and when I am using the digit 5 it is enclosed in a rectangle.

All the files have been updated in the progress section.
I think at this point since I am done figuring out the main menu, my main worry is to make sure that the tutorials are understandable. The style of calculation is easy and I hope to create tutorials that are equally easy to understand. This is what is left in the project:

• Detailed spec for the progress meter.
• Tutorials
• Integration of tutorials with each other so clicking next will jump to the next one.
• Intro animation
• PreLoader animation
• Finalize menu

After my user test, I realized it might be a good idea to add a quiz solely related to the current tutorial (for example: squaring numbers ending in 5) after that set is done. But this quiz will have just about 2-3 questions and then it jumps to the next tutorial set.

progress summary - Main Menu

I found another method which is working easier than the Trigonometry that I was trying.

package  {
   
    import flash.display.MovieClip;
    import fl.motion.BezierSegment;
    import flash.events.MouseEvent;
    import flash.geom.Point;
    import PathObject;
    import MenuButton;
  

progress summary

Completed structure of tutorials with a title before tutorials.

Also, redesigned the tutorial animation to make it easier to understand based on one user testing session.

User Study:
User was having trouble understanding the tutorial, user could not find an easy visual cue as to where the 5 and 2 came from, in squaring 25.

decorative element animation

I have redrawn the element in flash and then done an erase keyframe method. I could not do a build keyframe because of some of the curves. If I didn't draw the whole curve in one stroke then it would land up looking choppy.

Liza:

That is awesome. And beautiful. But perhaps you have noticed one major problem. That is a very long animation to watch each time the site loads.

Now I'm thinking that this animation should only be an "Easter egg" to show off you animation skill here (as a side note of your project) something that you can only stumble upon or know that it's hidden in there. I think it may have been my suggestion to try this as an opening animation, too. And it's so well executed!

Thinking about the site, it would make more sense, if the animation reflected the learning aspect of this project web-site.

so "A" for effort but probably best as an "easter egg" treat and not an opening animation. remember the animation will reload each time the visitor comes to your site.

I know once I was done I worried it felt too long too. I thought maybe I could somehow force it to go faster (if there is any) while loading and its loading changes as per the amount / percent that is loaded. I like your idea of keeping it as something that is hidden or just as a show thing.

Liza:

part of a preloader is a good idea. using a different logic to play the movie frames rather than fill a container (progress bar)

the frame rate could change for that movie clip I suppose to speed it up, but that may end up looking odd and too fast. ActionScript 3.0 allows you to change the frame rate dynamically using the Stage.frameRate property. this would allow you to change it for this animation then return it to the normal rate (24fps? in your case) at the end of the loading or animation

progress summary

Started to change the structure of the tutorials, such that there is a title / beginning slide and then the actual tutorial starts.
Also redesigned it so that One main title such as "Squaring numbers that end if 5" can have a subset of 3 tutorials each -> "25x25" , "45x45" and "115x115"

Arrow animation was also created with keyframe erase for a more smoother animation.

Week 5

Liza:
Rutu has done a lot of research into the geometric script needed to make her arrow movie (for the main nav) move dynamically on a curve rather than a straight line. It should be completed by the next time we meet. She now has a good strategy for the Henna Tattoo intro animation. She's going to hand-build it in Flash as a keyframe animation (building) rather than a keyframe erase.

Goals for the next two weeks:

1. Complete script that draws path for floater mc (main nav) using the geometric equations
2. Add rotation to those coordinates so that the floater mc rotates to face the correct center point
3. Keyframe build the intro henna tattoo animation
4. as time permits: experiment with using a shape tween on the arrow within the first tutorial
5. Build out 4 more tutorials for the Beginner section

These are for future work week goals:

1. After 5 tutorials are completed, begin building the progress meter for the tutorials.
2. write a detailed spec (step by step) of what event will trigger the progress meter to grow. At what rate? And with what change in the percentage numbers? be specific as that helps you write the script and create the movie clip.
3. Start spec-ing the tool tips menu for Tutorials (same ideas. write steps, be specific)

Week 5 (Summary)

I created a rough storyboard on paper and started the keyframe animation and I have gotten the hang of it, but after reaching about 200 frames I realized I might have made a mistake by using the "break apart" for the imported png, because now I can see a white background space, so maybe if I import that into the main file it will show the white background too.

Is there a way to recreate that drawing in flash without the break apart feature?

I tried to work out some other rotation techniques hoping to merge them with my earlier code.

Trigonometry for animation

Computers have a lot more affinity to radians

1 radian = 57.2958 degrees

6.2832 radians = 360 degrees

π = 3.1416

2π = 6.2832 radians = 360 degrees

360° = 2π

180° = π

90° = π/2

Rotation property of a sprite / movie clip is measured in degrees

Radians for angle

Degrees for rotation

Formula

radians = degrees*Math.PI/180

degrees = radians*180/Math.PI

Week 4

1. Add a dynamic bezier curve to the Action Script to be used as a dynamic motion guide for floater mc on Main FLA
2. embed fonts anywhere you have dynamic text
3. a short glow animation for the tutorial step buttons (maybe)
4. storyboard the keyframe erase animation in Main FLA so that it's easy to erase the correct elements in order
5. animate the keyframe erase intro for Main FLA

• drawing a curve dynamically

Rotation / position links

http://www.wuup.co.uk/as3-basics-rotate-a-movieclip-with-actionscript-30

http://www.flashessential.com/archives/94

http://www.adobepress.com/articles/article.asp?p=1247264

Circular Rotation and Orbiting in AS3

http://www.guahanweb.com/2009/02/03/circular-rotation-and-orbiting-in-as3/

Background

Worked on background images import and placement background.swf

This is also a template for importing swf files.

Main Menu

Started building the main menu

• the inertia works
• need to import path or create one in flash
• need to figure out how to make the triangle floater move on a path.

Menu code with x and y positions for the floater_mc 

//inertia = (destination - location) / constant;

var c:int = 5;
var dx:int = sutras.x;
var dy:int = sutras.y;
var lx:int;
var ly:int;

about.addEventListener(MouseEvent.MOUSE_UP, goMenu);
history.addEventListener(MouseEvent.MOUSE_UP, goMenu);
sutras.addEventListener(MouseEvent.MOUSE_UP, goMenu);
tutorials.addEventListener(MouseEvent.MOUSE_UP, goMenu);
quiz.addEventListener(MouseEvent.MOUSE_UP, goMenu);

floater_mc.addEventListener(Event.ENTER_FRAME, moveMe);

function goMenu(e:MouseEvent):void{
    dx = e.target.x;
    dy = e.target.y;
    //trace("My name = " + e.target.name);
}

function moveMe(e:Event):void{
    lx = e.target.x;
    ly = e.target.y;
    e.target.x += (dx - lx) / c;
    e.target.y += (dy - ly) / c;
    //e.target.rotation += 0.5;
    //trace(e.target.y);
}

Tutorial Template

Started building the tutorial template

• not sure if the steps menu should also be inertia menu
• need a better way to animate the arrow in step 3
• check if the steps buttons are too small or if the size is fine.
• removed the import from data.txt file and kept regular text updated with each movie file of the step

module 04

1. optimized the PSD size to 1000px x 700 px, which is actually based on my initial user studies.
2. Imported the background such that even the accents are now on a layer of their own by adding filters within flash itself.
3. Experimented trying to create the background effects within flash, but it doesn't look the same, so I will stick with importing PNG files. I tried to import the image and apply shadow filters within flash, but the image exported from photoshop with or without the shadow doesn't really make much of a difference in the file size.
4. Experimented with filters to get the effect for the numbers that will be used in tutorials.
5. I have also created a basic fla which can pull data from txt files, I want to use this for the headings / titles.

Unfortunately my flash file crashed and I lost the filter effects and the number images that I had imported. But I still have the swf file I had created while working on it. - background_text.swf --> The number of the left is a png imported and the one on the right is what I created entirely with flash filters and I think I got it to match pretty well. Now I will just experiment once more to see how they both are while animated.

week 2

Research on Local Shared Objects

shared links for storing basic user data:

local shared object example
http://www.bestflashanimationsite.com/tutorials/4/2/

local shared object as3 example
http://www.emanueleferonato.com/2008/12/28/understanding-as3-shared-objects/

Local shared object info
http://www.flash-db.com/Tutorials/savingAS3/savingData.php?page=3

Weekly Goals:

1. Export from PSD the files needed to create a layered animation
   • size in PS before importing to Flash--keep extra on right
2. Create intro animation
   • test different styles of import from PSD to see if you can make an animation that has a decent file size
   • or recreate effects in Flash
   • design a different beginning animation
3. test number bitmaps versus Flash filters used on vector graphics: file size efficiency, like the display

• has CS5 added bitmap animation improvements?

1. Begin the main interface FLA
2. Build you initial SWFs:
   1. Main Interface contains a more complex timeline with labeled subsections
      1. all sections
   2. One subsection: Tutorials > start the FLA and timeline
   3. make it load into main interface

Specification of swf elements

Fixed Elements

• Logo
• Background waves
• Big circle
• Small inner circle
• Accents

Basic Import

• Menu
• progress circle mask
• Login

Main Content Import

• Questions for landing page
• Sutras.swf  -- list / slideshow of 16 sutras text
• Beginner.swf  -- tutorials all included *
• Intermediate .swf  -- "coming soon" (sign up for alerts)
• Expert .swf  -- "coming soon" (sign up for alerts)
• Quiz .swf  -- All quizzes and scores.

*Each tutorial will be a movie clip

week 1

Summary and goals

brainstorm questions:

1. Tutorials: loading each tutorial step separately or each tutorial separate

• pop-up subnav indicates current tutorial and how many are left
• can this be achieved differently?

1. Website: 1 SWF loading individual SWFs or multiple pages loading
2. tutorials to store cookies for user to return them to last place visited. What will we need? AS interacts with stored cookies for the user. Possibly with the database.

goals for this week:

1. please post the FLA AS and XML for your initial quiz and post your menu with animation
2. test number bitmaps versus Flash filters used on vector graphics: file size efficient, like the display

• has CS5 added bitmap animation improvements?

1. Begin the main interface FLA
2. write specs and include a visual site map (flowchart is optional)
3. Build you initial SWFs:
   1. Main Interface contains a more complex timeline with labeled subsections
      1. all sections
   2. One subsection: Tutorials > start the FLA and timeline
   3. make it load into main interface