Futurescale, Inc. PureMVC Home

The PureMVC Framework Code at the Speed of Thought


Over 10 years of community discussion and knowledge are maintained here as a read-only archive.

New discussions should be taken up in issues on the appropriate projects at https://github.com/PureMVC

Pages: [1]
Print
Author Topic: Slide transition between content, best approach?  (Read 14666 times)
snoopy
Newbie
*
Posts: 7


View Profile Email
« on: November 25, 2009, 01:14:32 »

I am currently working on a pet project (for practice) where I would like to add transitions between content. The idea is to have some sort of slide animation where the old content moves together with the new content away. Only I am having trouble how I could make this transition with PureMVC. At least what would be best way to do it.

Currently, I am having multiple mediators for like the header, navigation menu, background and the content mediator. At the moment when the content mediator receives a UPDATE_CONTENT notification a property will be set on the view component. The view component then creates the appropriate view associated with the content-type. At the moment I am considering to move away from one big content mediator but create sub-mediators for the different content types and it's views. But first I am having issues with the above mentioned animation how to implement it.

Currently I am having a having a event listener for a NavigateEvent which handles the switching of content basically added to the contentmediator's view component. The event handler of this event will then send a notification with OPEN_CONTENT which then cause the OpenContentCommand to be executes which updates the SiteProxy which looks up the content vo for the given unique name (as passed by via the NavigateEvent) and then sets the currentContent-property of this SiteProxy. The property setter then issues the sendNotification( NoteName.UPDATE_CONTENT ) command.

But maybe I am doing it totally wrong? Anyone having suggestions? Should I move to separate mediators for the different content types? How would implement such a slide animation when the application should support different content types (e.g. a page, a image, a form or popup dialog).

Thanks!
Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #1 on: November 25, 2009, 03:20:53 »

Regardless of your mediator strategy, the view components should implement their own transitions. This is super easy if you use Flex/AIR. Really, it's easy if you use Flash as well. But the point is the view component encapsulates its own behavior. And if it has children, it can define the transitions used to show and hide those children.

-=Cliff>
Logged
snoopy
Newbie
*
Posts: 7


View Profile Email
« Reply #2 on: November 25, 2009, 04:17:52 »

Hmm, I could implement a show() and hide()-method in the view components which get called by the mediator. And only call these methods once the new content view is instantiated offscreen. I suppose that might work... then I only need to keep track of the old and new content movieclip instances. Maybe some _previousContent and _currentContent variables in the mediator.

Yes, I am currently not using Flex.
Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #3 on: November 27, 2009, 08:18:49 »

And why do you need to keep track of the old and new movie clip instances inside the mediator?

-=Cliff>
Logged
snoopy
Newbie
*
Posts: 7


View Profile Email
« Reply #4 on: November 27, 2009, 08:46:43 »

Sorry, I meant that ContentMediator viewComponent would need to keep track of the old and new content sprites otherwise the cross fading is not possible. Currently, I have added a few flags like isTransitioning which will ignore any property setter calls for the content-property as long something is getting transitioned.

Currently, I have basically the following code in my viewComponent. I am just not convinced (yet) that this the right way to do it:

:
function set content(value: IContentVO): void {
   if ( _content != value ) {
       _oldContent = _content;
       _content = value;
       updateContent();
   }
}

/// updateContent does the heavy lifting of creating the correct view ofthe content type
function updateContent(): void {
     if ( _oldContent == null && _content == null ) {
         // no need to update the view -- ignore it
         return;
     }
     
     // reset the transition state flags
     _isTransitionInDone = _isTransitionOutDone = false;
      _isCrossFade = false; // meaning we only trigger contentReady()-method when both transitions has been completed (contentReady() sets .enabled to true);

     _previousView = _currentView; // store reference to current view
     
      // create new movieclip for the new content
      if ( _content != null && !_isTransitioning ) {
            _currentView = ContentViewFactory.byType( _content.type ) as IContentView;
            _currentView.addEventListener( ContentEvent.TRANSITION_IN_COMPLETE, inTransitionDone, true, 0, false );
            _currentView.addEventListener( ContentEvent.TRANSITION_OUT_COMPLETE, outTransitionDone, true, 0, false  );
            _currentView.mouseEnabled = false; // disable mouse input
            _currentView.enabled = false;
            _contentContainer.addChild( _currentView );
      }

      // check how we need to do the transition in only, out only or cross fade?
      if ( _oldContent == null && _content != null ) {
          IContentView(_previousView).transitionIn();
      } else if ( _content == null && _oldContent != null ) {
          IContentView(_previousView).transitionOut();
      } else {
          _isCrossFade = true; // will enable view when both transitions are finished
          IContentView(_previousView).transitionIn();
          IContentView(_previousView).transitionOut();
      }
}

This is the current approach I am taking for transitions appears to work roughly.

I also would think that it's better to make dedicated mediators for the different content types which get created by the ContentViewFactory-class. The mediators then get instantiated in the ContentMediator.

Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #5 on: November 27, 2009, 12:00:53 »

Right, in the component not the Mediator. This looks like a good approach.

-=Cliff>
Logged
Pages: [1]
Print