Click and drag reactions

I have managed to get the desired reaction for each ion dragged onto the flame (yay!!). It became quite difficult, as I had to specify the 'greedy' option so that the parent droppable would not receive the element. Now I can tidy it up a bit more, and have the reactions occur more than once a session.

Dragging elements

I have broken down the click and drag into three segments/ steps to help myself code it all together more easily:

1. Draggable objects
2. Reaction occurs when in contact with another object
3. Multiple reactions occur when in contact with various objects

Thus far, I have managed to get my metal ions draggable on click (yay!). I now am in the process of having reactions occur when an ion is placed on the flame... which is proving more difficult then expected. I have tried multiple methods, and none have worked thus far so I will keep working on this.

Click and drag progress

I have created the base of the colours of burning ions page, and am currently in the process of coding the click and drag technique. This alongside the accelerometer technique are the last but most complex of the techniques I set out to learn for this paper, so they may require more time. 

Animation hotspots complete!

I managed to get a successful transition between the bunsen flames through the use of the jquery animate function combined with hotspots, a click function, show and hide. I considered adding more animation within the flame, but when I tested this it ended up destroying the flow of the page as the user was distracted by too much going on (ie too many animations in different places at once). Overall the focus is the information, and that is what I will focus on maintaining.

Stars page complete! (show & hide)

Alongside the cells page, I designed a stars page for the Earth and Space science paper which exhibits the show and hide technique. Now that I have learnt how to implement show and hide, it was much easier implementing a similar method on this page.

Working out a system

I drafted a wireframe that displays the website demo I will create to showcase my resource. Keeping it simple for now, as the purpose of presentation is to showcase the skills I've learnt (ie the subject resource pages) which doesn't include the splash or homepage. Their purpose is to provide context for the sake of understanding how this resource would be implemented and source if developed further than a prototype.

 Splash page

Homepage

Animations hotspots progress

I have managed to implement the show and hide technique in conjunction with the hotspots css mapping (yay!). Now I just need to add an animation transition... In this case, with animation transitions I feel they're best implemented using jquery rather than trying to create an extra webm or gif, as that would be too large and therefore take too long to load making the overall transition less smooth.

Animation skill achieved!

I have managed to develop a successful working progress for creating and implementing animated elements throughout my pages. Through trial and error with css tweening and after effects experimentation, I have found the best way for me to create a nice looking and working animation is by creating it in after effects, then exporting it as a webm or gif file for web.

This page is an example of a contents page for a topic (in this case the physics topic of motion), where not much interaction is needed as its purpose is to outline what will be taught. Subtle animation is good to incorporate into pages like these, as it still provides dynamism engaging the viewer. 

Animation hotspots progress

I have begun my third page, and thus far have coded the elements of the page in place and created the animations for it. Now I need to create an on click hotspot for it using css mapping and javascript.

Swipe animation - embedded videos

I created the sunflower animations into webm videos to play on swipe, instead of my original css animations. I feel it's almost there, I'm unsure if the video output quality can be improved and if I can make the black rectangle to stop appearing on swipe. Overall, it does make the animation a lot smoother and a more pleasing experience for the viewer.

Show and hide complete!

I managed to finish my first page, implementing show and hide through javascript. In the end, I found the most successful and reliable method was through assigning mapped hotspots to a flattened image, and using javascript to make the labels appear and disappear when other maps are clicked. 

Desired skills I want to learn

I decided to take a step back, and just review the skills I want to learn for this paper and prioritise them. Some will be more difficult than others, so I have listed which techniques will be hard, medium or easy for me to learn. This way I can plan more time for the harder techniques.

I also prioritized my pages. In my brief I stated that my desired outcome would be 3-6 pages completed, so it makes sense that I order them based on skills id like to learn/ would benefit me most for major project.